Mike Eaton

Here is just a few thoughts on Responsive Web Design.

It’s a known fact that Resposive Web Designs are here to stay. There is no doubt about it that a responsive website will always benefit the user and their overall online experience no matter what device they intend to use and on what size monitor they intend to view it on. That’s the beauty of it and by creating a website that is responsive means that the design will ‘respond’ according to the device.

Whether it’s a desk top computer, the latest mobile phone or a shiny new tablet, the design will look and feel right which ultimately will increase usability, enhance the user experience and benefit everyone. It’s a win, win situation and we like them.

Having past experience of building fluid based websites back in the days of table based design we are now presented with a new problem/challenge of building websites for a wide range of devices and resolutions while also not forgetting their orientations as well.

How and Where?

So to begin building responsive websites we first need to learn some of the background to it then we can move on to understanding how to use media queries which allows us to style the page according to specific rules such as min-width.

To get started I’ve listed below a few links to some of the best resources/articles on responsive web design that I have found. I hope you enjoy.

1. Responsive Web Design – Ethan Marcotte

This was the article that kick started the whole thing. A must read for anyone who wants to learn the background and the ideas behind responsive web design.

2. Responsive Web Design: What it is and how to use it – Kayla Knight

A fantastic article from Smashing Magazine that explains the concept behind responsive web design including flexible images. It also shows some great examples of responsive websites.

3. CSS Media Queries & using available space – Chris Coyier

Here Chris explains the media query syntax and covers how to use it within a single stylesheet. Follow the guide for a hands-on introduction to the basics of responsive web design.

4. Understanding the Elements of Responsive Web Design – Jason Gross

Six Revisions takes a look at all the key elements to a truly responsive website. This includes flexible grids, scalable images and media queries.

5. CSS3 Media Queries – Web Designer Wall

Web Designer Wall  gives us some ready made code that we can copy to use in our own responsive websites. It also shows you some great examples of websites already using media queries to great effect.

So to conclude this post I would just like to say that all the articles above are a fantastic resource for all of us to learn how to truly make our websites respond to all platforms, devices and resolutions which will greatly improve everyones experience. We don’t need to build separate websites for different devices anymore, we just need to plan well before we build.