What is Responsive Web Design?

5th May 2012

Responsive web design

The term Responsive Web Design was first used by Ethan Marcotte in an article he wrote for A List Apart back in 2010. He was talking about designing for an ever increasing array of devices and proposed creating flexible websites, rather than two distinct versions for desktop and mobile. He wrote:

“Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them.”

The idea was that this would also provide a degree of ‘future proofing’, since the number of available devices grows rapidly and we don’t really know what is going to come out next.

To put the concept into perspective, think of all the devices you currently use to access web based content – your desktop, laptop, iPad, smart phone, games console and so on. The first thing to note is that they all have different screen sizes and resolutions. A principle concept of responsive web design is that a page should respond to these constraints and the layout, images and other media adjust accordingly.

Next, consider all the ways you interact with these different devices. If you’re using a smart phone you’ll most likely have a touch screen. If you’re on an iPad you’ll know that you can flip between landscape and portrait view. If you’re on a games console you’ll probably have a hand held controller rather than a keyboard and mouse. A responsive website should also overcome these issues.

How to create a Responsive Website Design

Ethan Marcotte’s article sets out three elements essential to creating a responsive design:

  1. A flexible grid layout
  2. Flexible images (and other media)
  3. CSS media queries

Flexible grid layouts and images

The key to this is to stop thinking in fixed pixels and convert to percentages (possibly with a fixed max-width dependent on your design). You’ll also need to scale any images, fonts and other media to fit too.

CSS Media Queries

These allow different styles to be loaded for different devices.

To give you an example, a standard web page might reference one CSS stylesheet called main.css like this:

Now let’s say we want to define a different set of styles for the iPhone. Instead of using one universal stylesheet we can use media queries to load a separate stylesheet, in this example called iphone.css, for any devices with a screen width less than 480px.

Within the stylesheet we can address specific issues related to displaying our site at that size.

Issues and moving forward

This is a solid concept, but there is still a way to go before responsive web design fulfills all the promise of its ideals. As Belfast based design studio Front point out in their article ‘The Goldilocks Approach to Responsive Web Design’

“The current approach to responsive design is still based on a few popular devices and, as a result, is likely to become obsolete as fast as they do.”

The other big issue is that in order to provide all of these different device options, there is the potential for page sizes to go through the roof. This is a massive problem, considering that responsive web design is supposed to make sites more accessible, not less.


What our customers say:

I would highly recommend Hut Six Digital for your website implementation. Jo has been fantastic to work with and has exceptional knowledge in her field. She is friendly, reliable and professional, which has resulted in our fantastic new website launch. Her training was clear and concise, and I know she will be on the end of the phone or email should I need her for a little refresh. She has enabled us to take full control of our new website, which was something other companies have been unable to offer. Excellent value for money too!

Christina Canning (SMS Alarms Ltd, Thatcham)

Jo has been personable and efficient in setting up my website. She did a great job of understanding what I wanted and providing guidance from her wealth of experience. She has explained things in a non-technical way and has been very responsive, patient and flexible in working with me. In short, Jo is great value for money and easy to work with.

Vanessa Rhone (Venus Works, Oxford)

Excellent, efficient service from Jo. Highly recommend.

Xan Rice (Journalist, Oxford)

I am not exactly a technophobe but due to previous experiences of pressing buttons that I have no business pressing I have shied away from doing thing to update or improve my site. I have called on Jo Cox’s expertise several times and she is always quick, efficient and gets you back on track whilst also calming you down. I can honestly say that there is no one else I would call on in an emergency to sort out problems with my website. I have never had a bad experience with Jo’s services or with Jo as the service provider.

Lisa Bentley (Writer, Liverpool)

Jo has been amazing. Through 1-2-1 training sessions she has helped me to make significant improvements to my website functionality. This has not only been cost effective but it also has empowered me to use the skills that I have gained to edit my website myself in the future. She has simplified what I thought would be tricky tasks. I will definitely continue to work with her in the future and I couldn’t recommend her highly enough.

Felicity Wood (Yoga Instructor, Bicester)

Jo took my simple brief outline of what I wanted and turned it into everything I wanted and more. Jo was very professional, efficient and she was patient and understanding with the fact that I was not knowledgeable about building websites or what’s involved. By the end of it Jo had given me and my team a training session around how to manage the website. I would highly recommend her!

Sharon Mulholland (Sandcastle Mortgages, Kidlington)

Jo was completely fantastic! I’d been struggling to make a WordPress blog design work and was completely stumped. I made an enquiry to Jo about some help, and she replied within 24 hours. It was easy to agree on a price for the things that needed to be done, and she had fixed everything within 48 hours of the original enquiry. I had thought my problem was too small for someone to help with it, but I was pleasantly surprised that Jo was happy to sort out the small issues with my site for an extremely reasonable fee. Throughout the process, Jo was efficient, effective and stayed in regular communication. She answered all of my questions, even the really idiotic ones, and nothing was too much trouble. The entire experience was great and I would recommend her in a heartbeat to anyone who needs help with a website project – big or small. She is, in short, superb at what she does.

Imogen Goold (Blogger, Oxfordshire)

I wish I had found Jo earlier. We wanted to progress from making simple text edits to getting more out of the CMS. After a very enjoyable training session, we can now design new pages and keep the website organised. Excellent.

Margaret Hildreth (JP Hildreth Ltd, High Wycombe)