During the past few days I had the chance to remake the INK Design website for my good friend Kamran Samimi, a printmaker and graphic designer from Honolulu, Hawaii. We brainstormed on a bunch of out-there ideas to present his work but eventually settled with something somewhat similar to how this site is laid out. Kamran had already been putting some of his work on a Cargo Collective site, one of the coolest web frameworks out right now, but he had reached the limit to posting as a free user and he didn’t want to pay for it since he has his own website. I thought why not take the code base from my current site and modify it to make it more project based, similar to how many cargo collective sites are. This is how it turned out:
How it was made
Just like this site, the INK Design website is powered by WordPress and the Carrington framework. WordPress handles all the content and Carrington handles how the content is put together and displayed to the user (more about Carrington in this post). Since my site already has many of the features Kamran wanted in his site like in-page ajax loading of posts I built upon what I already had, changing some CSS here and modifying some Javascript there. Getting a test site up was a fairly quick process. The good thing is, while I was creating the theming for the site, Kamran could post projects to the site simultaneously.
In-page loading of project posts
Once the site was functioning well enough I decided to give it some INK Design flavor. One of the original concepts for the site was to have one giant canvas that moved around depending on what type of projects you wanted to see and for this Kamran created a huge spaced out image of blending colors and designs to act as the background. I took this giant image and cut it up into ten smaller ones to use for the background of the site design we had created. I found a pretty nifty plug-in, jQuery Backstretch, that provided exactly what I needed to display a fixed full screen background at various screen resolution sizes. I used this to create a randomized full screen background generator. If you refresh the page or navigate to other pages you’ll see it in action. The good thing about the backstretch plug-in is that it loads up the image after the page has rendered decreasing page load time.
The one big problem in this site is that it uses a couple fixed position elements which do not work well on mobile devices like the iPad. For instance the background will scroll up on mobile safari revealing a basic gray colored background when it should remain fixed. Also, the layout gets squished together a bit more than it should on mobile browsers. Hopefully one day when I have more time I’ll be able to fix these issues.
All Tools Used
Update: this site is also featured on the Carrington framework’s homepage!
Hello, I am a designer, I’m looking for a good layout for my blog, I really like this style, I hope you can share to me, very grateful!
Thanks for sharing this! I’m really impressed by what you did here with Carrington. the Ajax is so smooth. I have some experience with CSS/HTML/PHP, but I haven’t yet cracked into the world of jQuery.. what would you say to someone who hasn’t messed with these scripts before?
Hey Mikey, Thanks for the kind words. I would say that getting into jQuery can be a quick and easy process since there are so many resources out there on the web. If I were you I would just dive right in to a project that requires some sort of javascript or jQuery coding and you’ll probably pick it up along the way. Check out the official docs for jQuery, they are extremely useful.