Responsive web design in 3 minutes 42 seconds


How many screens do you create your sites for?

For many designers and developers the answer is one, perhaps two – a traditional desktop/laptop and, maybe, a smartphone. Chances are these will be two separate sites – the www.main-site-that-most-effort-goes-into.co.uk and m.mobile-version-with-bigger-buttons-and-some-stuff-taken-out.co.uk. But, just between you and me, the real world isn’t nearly so simple.

Today, there is a huge range of devices to think about. Some users will be basking in a state of the art 30” LED screen, others on a 15” laptop, some will be on netbooks, a bunch will be on tablets (in various sizes) and a load more will be on differently spec’d smartphones. So whatever your site was originally designed for (eg the ubiquitous 960px grid), every other format will be, to a greater or lesser extent, a compromise.

The thing is, it really doesn’t have to be this way.

The answer is responsive web design. It’s not new – and wasn’t when Ethan Marcotte came up with the name in 2010 (as he’d be the first to admit). But there has never been a better time for designers and developers to get their heads round it.

Last week I hosted the Responsive Summit in London. It was set up by Josh Brewer at Twitter, Alex Morris of Mark Boulton Design and Chris Armstrong of Front and got a number of leading designers round a table to discuss the state of responsive web design and what they want to see in future. It was fantastic to see so much passion so well articulated. I came away truly inspired. I have tons of content that I will publish later on in the week, you can check out the coverage over on Lanyrd

In this post, however, I simply want to give a short primer on responsive web design for the uninitiated together with some links for those who want to know more.

What is responsive web design?

There are a range of definitions available, but for the purposes of this primer I’m going to define responsive web design as:

The creation of a site that is able to adapt to the context
in which it is being viewed.

To flesh this out a little, it means creating a site that will dynamically adapt to different screen sizes by resizing and reformatting its constituent elements. So it might be a 3-column site with large images and detailed navigation on a big screen and a 1-column scrolling site with simple navigation and smaller, lighter images on a smartphone.

Importantly, it can be all these things employing a single set of code and will use CSS3 to achieve the right effects.

The three core elements to responsive web design

In Ethan Marcotte’s book, Responsive Web Design (which you simply must go and buy right now) he sets out the three elements you need to play with to create a responsive design:

  1. A flexible, grid-based layout,
  2. Flexible images and media
  3. Media queries

Fundamental to the first two is to stop thinking in terms of fixed pixel widths. At best fixed widths will simply cause a small device to scale everything, making it unreadable and un-navigable. At worst, your site will simply look broken.

Instead, in responsive web design, all elements become proportional to the whole. So rather than a column being 331px within a 960px site, it becomes a percentage of the overall width of an individual display (no matter what that is). The same applies to padding and images. Ultimately, this allows the design to adapt to different screen sizes.

Now, as Ethan points out, at a certain point, when you scale down really small, everything breaks. That’s where media queries come in.

Media queries allow you to determine the type of media the viewer has access to and the physical characteristics of their device and browser. It means you can set parameters for what gets shown, how and under what circumstances. So you can serve up the 3-column extravaganza on a big screen and the 1-column mobile version on a smartphone.

I am, of course, massively over-simplifying the topic here. Do check out Ethan’s book, it’s a great read. And take a look at the sample site he set up at http:// responsivewebdesign.com/robot/ – resize to your heart’s content to see what he means. Finally, further reading can be found at the links below.

Further reading

Comments (12)

  1. Albert Eltawil says:

    There seems to be an invalid character in your link to responsivewebdesign.com/robot at the end of the article.

  2. thebeebs says:

    Thanks @Albert Eltawil I have fixed the link.

  3. Web Design says:

    Web design is the process of designing websites — a collection of online content including documents and applications that reside on a web server/servers.

    <a href="http://www.universalutsi.com/">Web design</a>

  4. Benjamin Howarth says:

    Responsive web design is a great start, but I'm going to disagree with the core concept here, in that it's not the be-all-and-end-all. Bandwidth costs for mobile users, most providers are starting to cap – Vodafone notably cut me down from 5GB to 2GB not three months ago (which is why I cancelled with them), and 2GB is their highest data allowance they now offer for mobiles. If I'm browsing a website using responsive design, there's 1MB in assets – background images, CSS, jQuery (and jQuery Mobile)… suddenly I can browse a lot less stuff in my 2GB limit.

    Responsive design is great when you know that bandwidth isn't a problem for your audience. When it is, you need two approaches – one "low-bandwidth" version (which, sure, may still use responsive design, but should be much more conservative about resource loading), and a "normal" version for devices that you know won't have issues (iPads on Wifi connections, TVs, and so on). Even bearing that in mind, most domestic broadband providers are capping usage now as well, so load times and page sizes are something we as web developers really have to take into account – if you use media queries, all the resources and markup for the full desktop site are loaded on a mobile device, and vice versa.

    In short – don't be wasteful of what is becoming a valuable resource, responsive design is a great start, but not the full answer.

  5. thebeebs says:

    Thas not strictly true @Benjamin blogs.msdn.com/…/media-queries-and-bandwidth.aspx

    I agree that Bandwidth must be taken into consideration on mobile devices. Your point about jQuery and jQuery mobile is valid. There are ways to mitigate that (load libs on demand) … You could still provide a mobile version to mobile devices if you wish. Lanyrd have a mobile version and a responsive desktop version for example: I'm really starting to like that approach.

  6. mharr says:

    @Benjamin Howarth: One of the recommendations for RWD (perhaps even strong enough to call it a tenat), is to design "Mobile First".  This usually means make the default image small for mobile screens, then use css or js to replace with larger one on larger formats.  That, and proper use of CDN for jquery or jquery-mobile properly reduces bandwith for mobile devices, and still allows for one site for all devices.  

    Certainly not all facets of RWD could be covered in a short post like this.  But the concepts will lead to better mobile experiences, not worse.

  7. visionaspire says:

    Small bits of content which are explained in details, helps me understand the topic, thank you!

  8. software companies in indore says:

    Aking Web Tech a leading IT company & Provides  web services :- website Development in just 1,999 Rs/-, software development like {Billing software, School Management Software, Inventory Software, ERP, CRM}, Domain & Hosting , SEO

    <a href="http://www.aking.co.in/&quot; >Software companies in indore</a>

  9. Himanshu says:

    Great Stuff. I applied the same on my website . Thanks for Sharing

  10. John says:

    I have Ethan Marcotte's book too, and its definitely a good book, but I would recommend Ben Frain's Responsive Web Design with Html5 and Css3. It covers and explains grid-based layouts more extensively.

    <a href="http://www.trainingdragon.kr/…/&quot; target="_new">

       웹디자인 강좌

    </a>

  11. John says:

    I have Ethan Marcotte's book too, and its definitely a good book, but I would recommend Ben Frain's Responsive Web Design with Html5 and Css3. It covers and explains grid-based layouts more extensively.

    <a href="http://www.trainingdragon.kr/…/">%EC%9B%B9%EB%94%94%EC%9E%90%EC%9D%B8 강좌</a>

  12. pankaj says:

    HI Sir/Madam

    Can you outsource some SEO business to us? We will work according to you and

    your clients and for a long term relationship we can start our SEO services in

    only $99 per month per website.

    Looking forward for your positive reply

    Thanks & regards

    Pankaj Singh

    Skype id-ranksindia

    PS:Humble request we are not spammers. We take hours to research on sites and

    keywords to contact webmasters. If by sending this email we have made an offense

    to you or to your organization then we extremely apologize for the same. In

    order to stop receiving such emails from us in future please reply with “Remove

    or Not Interested” as subject line. Many thanks for having your kind look to our

    email.