Responsive web design is about making your web site adapt the layout to the viewing context, typically the browser window or the device that renders it. In other words, whether I watch the web site on a mobile, a tablet or a pc, and no matter what resolution I use, I should see something useful. It should respond to the context. Lately I’ve redesigned my blog to make it responsive, and here is what I’ve done.
For flexible images, I used the max-width property. I set it to 95% instead of 100% to ensure that the image shadows didn’t end up outside of view. It is not supported by IE6, but hey, this blog probably does not have many IE6-users anyway (just did a quick check: no visitor used IE6 on my blog last month). When the max-width is set, the images will scale when the viewing area gets smaller.
The idea with a flexible layout is setting all values to relative values, so that it flexes when it is resized. You should use the em-unit for fonts and % for widths. I am probably thinking in the wrong direction here, but I didn’t use relative values for everything. For some settings (especially margins and paddings) I found it better for all screen sizes that the values where fixed.
To add power, use css3 media queries. Here you can specify the behaviour when the width of the browser hits a given breakpoint. See the things starting with @media at the bottom of my css. For older browser support (most notably IE8 and below) I use css3-mediaqueries.js.
I chose a process of starting with designing the mobile (smallest) version first. The idea was that it would make me focus on what was most important, as there is not space for anything else. I resized my browser window to very small, stripped out the entire css, and started making a new css tweaking and styling the markup. It was nice to see that the semantics of the page was correct, so that all the work could go into styling with css. When I liked the result, I started to expand the browser to see when it started to look weird. When it did I specified with media queries what changes I wanted from that size and up. I really liked the process, and the media queries gave me total control of the design.
Phones and tables
<meta name=”viewport” content=”initial-scale=1.0,width=device-width”/>
When that was taken care of, I was where I wanted. My site looks ok “everywhere”!
If you’d like, you can take it for a ride and resize the browser to see the changing behaviour. You can also look at the source, I’ve commented on some of the css in order to explain to myself and others.
Tore Vestues is a Software development enthusiast, speaker and MVP. He Works for BEKK Consulting in Trondheim, Norway.