This is certainly a hot topic at the moment and gaining so much momentum that some people are referring to Responsive Web Design as a “trend”. If you haven’t done it before, it’s pretty easy and instead of explaining every single nuance, I’m going to explain how I did it, on this very blog.

What is Responsive Web Design (RWD)

RWD allows you to create CSS layouts specific to display width – the main target being smartphone and tablet devices.

In really simple terms, its like a print stylesheet, but browser based. You can overwrite current CSS based on browser width. There are of course other ways, some people recommend you design for mobile first and then cater for the desktop, but I’m explaining how I did it – as always, consider all of your options and what works best for you.

Preparation

I decided to launch my blog without RWD, partly because I’d already started coding it in pixel widths, partly because I hadn’t had the chance to read up on RWD and didn’t know what extra time it would involve.

I wouldn’t recommend doing it that way! However, if you do have a website built back in the day (and by back in the day I mean some time in 2010) and you used pixels, this may help if you want to convert.

The important stuff

I’m going to jump straight in and explain…

First I converted my design into percentage widths, I did this by taking the HTML output and tweaking the code locally for a direct comparison between pixel version and percentage version.

I was working on a 1024 width with a simple 2 column layout, so I simply changed my left column from 252px to 24% and my main right column from 750px to 74%. Instead of pixels margins, I converted these to percentages to allow them to shrink with available screen space.

I then changed my container width to a max-width so that it was able to resize when the browser window width was reduced.

Next, rather than targeting specific device widths, I began resizing my browser until the layout started to break, I used Firefox with Chris Pederick’s add-on Web Developer, this allowed me to display screen size in the title bar.

Once the layout started to break, I took the measurement back by a few pixels and created a media query after all of my ‘standard’ screen CSS.

@media screen and (max-width: 1030px) {
   #commentform input#submit { margin-right: 15%; }
}

IMPORTANT: Media queries need to be after you standard size CSS to work.

Pretty straight forward really, you always need the “@media screen and ( max-width: widthhereplease) ” but you just change the max-width value accordingly.

That’s what I then continued to do, all the way down to mobile resolution, creating a new media query for every element I wanted to tweak or re-position.

In the end I used only 4 media queries to cater for every scenario and it took me about an hour and a half to do.

Browser support

You can use Scott Jehl’s Respond.js to get the same experience for IE6 – IE8. I chose not to support RWD for IE7 and IE8 as it was unlikely to provide a better experience for those users and those browsers are not used on mobiles (as far as I know), IE6 is dead to me so I gave that no attention.

Images

This is probably one of the most taxing elements to control and I’m planning on doing more research into a 100% stable and scalable way (blog post to follow when I’ve researched and tested). With WordPress, I removed all height and width attributes via jQuery…

<script>
  $(document).ready(function() {
		$("#other article:nth-child(even)").addClass("even");
			$('img').each(function(){
				$(this).removeAttr('width')
				$(this).removeAttr('height');
			});
	});

</script>

This then allowed me to target width and max-width on my images within the CSS, which works fine for my blog as all images are 100% width anyway.

Improvements

This is my first real stab at RWD and I’d be really keen to get feedback from people who have been using it. It’s a pretty new method and has yet to be standardised so any advice or tips would be greatly appreciated.

Useful Resources

Chris Pederick’s Web Developer Toolbar
Scott Jehl’s Respond.js
Matt Kersley’s Responsive Tester
Convert navigation to drop down select menu (Matt Kersley)