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.

The ingredients

To create a responsive design Ethan Marcotte points to three core ingredients in Responsive Web Design: a flexible, grid-based layout, flexible images and media, and css3's media queries.

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.

Mobile first

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

Even if it looked nice in all possible sizes in the browser on my pc, it doesn't behave as expected on other devices out of the box. The problem is that phones will tell your code that the display area is much bigger than it actually is, just to get everything, and it then zooms it all in. So, for instance an iPhone will tell your media queries that its width is 980px, which most probably makes your media queries draw an entirely wrong view. To fix this you need a meta tag in your header like this:

<meta name="viewport" content="initial-scale=1.0,width=device-width"/>

This works nice, except that Safari (iPhone/iPad) has a bug which gives you two options. Read about them here. I chose the javascript one as I will not disable zooming.

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.

Stay tuned for more SharePoint content by joining our community or by following us on twitter or facebook.