This article was written on 12 Jun 2012, and is filed under Blog, Portfolio.

Current post is tagged

, , ,

Responsive Web Design

After some great advice from Mark Crossey and reading Responsive Web Design by Ethan Marcotte and Mobile First by Luke Wroblewski, I finally made a start at making this site somewhat responsive. I foolishly jumped into the CSS without really knowing how I wanted the site to be structured. So I took a step back and mocked up an example of the landing and about page, as well as a post and something to display my portfolio items.

From there, I made the grid somewhat fluid by changing divs from pixels to percentages. I then added img { max-width: 100%; } to make the images flexible. After giving media queries a go, the site was much more readable but still pretty much all over the place. However, despite how it looked there was progress made behind all that mess. I then sent the mockups to Luke Alford (the dude is a genius) to work on the rest of the CSS. He also made a PHP template to display the blog and portfolio items. The site was really coming together so much so that I was starting to prefer the mobile version better than the desktop version! Anyway, check out on your mobile and tablet device and feel free to let me know what you think.