I was in OfficeMax the other day looking at new tablets and saw a setting on a tablet’s browser that said “format web pages to fit this screen”. That was the scariest setting I have ever seen in my life. Whereas styling and formatting have previously been solely in the hands of the web designer – it is now shifting to the user. Thus the age of the responsive website is here.
With the appearance of tablets, iPhones, and Andriods, the idea of a website being viewed at a single, desktop-sized resolution is going the way of the chimney sweep and IE6. Websites must be able to adapt fluidly to multiple resolutions or respond, rather, to different screens.
Redesigning my portfolio website seemed like a good way to get my feet wet in responsive web design, primarily because I now have a smartphone and time to kill. Let me show you what I’ve done to danielhoenes.com. The pictures are about to get meta in here, so hold on.
Firstly, some decision making was in order. I was really fond of my WordPress theme, Showcase, because of it’s attractive typography and custom post types (projects & portfolios). However, it had a nasty habit not being responsive. I decided to remake Showcase instead of starting with a new theme from sratch. The goal was to make it better, stronger, faster, etc.
Showcase used a 960px grid for layout, but immediately that wasn’t going to work, so I went through all the theme files and restructured (more-or-less) the grid to use percentage-based widths, margins, etc. Thankfully, there were a few good tutorials on fluid layouts and styling techniques.
In case you are curious, the page’s wrapper element gets a max-width set in ems (a relative unit) and all its children follow the formula “target / context = result”.
Secondly, it was just a matter of deciding how I wanted it to look on devices with narrower screens. The best source of inspiration for this was an exciting website I found on the topic, mediaqueri.es. I’ve taken my best guess on the ideal content flow and pushed the sidebar past the main content for tablet widths and smaller.
Heavily using the
float:left; css, I was able to make the discrete page elements play nice with each other in tight spaces. With two out of three formats down, all I had left was phone-sized styling. Thankfully, it wasn’t much different from the tablet rules. I changed some heading text sizes and margins, but nothing major.
One last noteworthy item would be the issue of image resizing. When you get down to the low width of a phone screen, some images are bigger than the page can handle. While there are 22 ways to handle responsive images, I chose a simple WordPress Plugin (WP Fluid Images) for the present time. Though if anyone would like to discuss techniques in the comments, I’m all ears.