Responsive Web Design – A Dummies Guide

This guide answers common questions around Responsive Web Design, a technique for building mobile and tablet websites that is also recommended by Google.

Google has officially recommended Responsive Web Design as their preferred method for building mobile websites. If you have a website or a blog, it is time that you seriously consider switching to a responsive design instead of maintaining a separate mobile-friendly (or tablet-friendly) website.

One Design, Multiple Screens

If you are new to the concept of Responsive Web Design (RWD), here’s a quick guide that should answer most of the common questions that you may have around this technique. Let’s get started.
Q1 – Why should I switch my website to Responsive Design?
A1 – Your website looks great of the desktop screen but the same may not be true when your site is viewed on a smartphone, a tablet or an e-reader (like the Kindle). Once you make the design responsive, the website will look good (and readable) on all screens and not just the desktop.
Q2 – What are the other advantages of switching to RWD?
A2: With Responsive Design, you can create one design and it will automatically adapt itself based on the screen size of the mobile device. This approach offers plenty of advantages:

• It save time and money as you don’t have to maintain separate websites for desktops and mobile phones.
• Responsive Design is good for your website’s SEO (search rankings) as every page on your site will have a single URL and thus Google juice is preserved. You don’t have to worry about situations where some sites link to your mobile site while other link to your desktop site.
• Your Google Analytics reports will paint a better picture of your site’s usage since the data from mobile and desktop users will be consolidated.
• The same will be true for the social sharing stats (Facebook Likes, Tweets, +1′s) since the mobile and desktop versions of your web pages will no longer have different URLs.
• Responsive Designs are easier to maintain as they do not involve any server-side components. You just have to modify the underlying CSS of a page to change its appearance (or layout) on a particular device.
• The earlier design methods looked at user agent strings to determine the mobile device name and the browser that is making the request. That was less accurate and with the number of devices and mobile browsers expanding every day, that matrix is very difficult to maintain. Responsive Design doesn’t care about user agents.

Q3 – What should I know to get started with Responsive Design?
A3 – Responsive Design is pure HTML and CSS. You create simple rules in CSS that change style based on the screen-size of the user’s device.
For example, you can write a rule that says if a user’s screen-size is less than 320 pixels, don’t show the sidebar or if the screen size is greater than 1920 pixels (widescreen desktop), increase the font size of the body text to 15px. Here are the same rules translated to code:

  @media screen and (max-width:320px) {
    .sidebar { display: none }
  }
  @media screen and (min-width:1920px) {
    body { font-size: 15px }
  }

Q4 – How do I check if particular website is makes use of Responsive Design? 
A4 – That’s easy. Open that website in any desktop browser and resize the browser. If the site’s layout changes as you resize, the design is responsive. You can also use these online tools to compare the different layouts of a page in the same tab.
Q5 – Can you share examples of some good websites that are responsive?
A5 – That are quite a few but my favorites include The Boston Globe (news website), Simple Bits (personal blog), Happy Cog (web design agency), Barack Obama (yes, the President’s website), Shake Shack (restaurant chain), Nicole & Josh (wedding website), Food Sense (cooking & recipes), dConstruct 2012 (design conference) and Good to Know (Google’s site on online safety). You should also check out mediaqueri.es, a curated gallery of websites that use Responsive Design.

Q6 – If I go with the Responsive Design approach, will my website work with older browsers?
A6 – Mostly yes. RWD uses CSS3 media-queries and HTML5 (for better semantics) that are not supported in older versions of IE. However, there are JavaScript based solutions – respond.js and modernizr for example – that bring the power of CSS3 and HTML5  to older browsers including IE6.
Q7 – Does Responsive Design play nicely with advertising networks like Google AdSense?
A7 – If you using ads on your website, you should carefully choose the formats because wide units  (like the 728×60 pixel leaderboard) may not fit on a 320px mobile screen. I prefer using standard rectangular units (like 300×250) on my blog since they easily fit on smartphone screens and widescreen desktops.
The one issue with Responsive Design is that ad slots on your website that are above the fold (ATF) often gets pushed down on the mobile version and clients may not always like that (if they have paid you for a premium ATF slot).
Q8 – There are thousands of mobile devices. What screen resolutions should my responsive website support?
A8. Open your Google Analytics dashboard and choose Audience -> Technology -> Browser & OS. Now switch to the Screen Resolution tab in the report and see the resolution of mobile devices that people are using to browser your site.
I would recommend setting break points for at least the following viewports in your CSS3 Mediaqueries - 320px (iPhone landscape), 480 px (iPhone portrait), 600px (Android Tablets), 768px (iPad + ~Galaxy Tabs) and 1024px (iPad landscape and desktops).
Q9 – How do I get started with Responsive Web Design? Any good tutorials?
A9 – First, read this article by Ethan Marcotte and then buy his book. Ethan coined the term and popularized the technique ever since he wrote that article for A List Apart back in 2010.
Here are more online resources to help you get started:

• Websites - Net Magazine, Smashing Magazine, CSS Tricks and Web Designer Wall [these websites and blogs frequently cover responsive design]
• Video Tutorials – YouTube, Net Tuts [responsive design 101]
• Presentations – PowerPoint Decks [the best online presentations around RWD]
• Books – Code Poet [web design experts discuss techniques for designing WordPress responsively. The book is available in PDF, Kindle and ePUB formats]
• Podcasts – Shop Talk, 5by5 Web Show and The Industry [audio and video podcasts around web design where hosts frequently bring up the topic of responsive web design]
• Twitter – @RWD, @NetMag and @SmashingMag [accounts worth following on Twitter]

Q10 – What are some of the disadvantages of using Responsive Design?
A10 – Responsive Design may add some  extra kilobytes to your web page as they will have to download CSS styles and JavaScript files that were otherwise unnecessary. The other problem is around images. You don’t want to serve higher-resolution images on your mobile site but that is hard to achieve in responsive design (unless you resort to a server-side workaround like Adaptive Images and Sencha.io).
Finally, there is a learning curve involved and it will take effort to add a responsive layer to your existing website. Sometimes it may make more sense to start from scratch rather than making your existing fixed-width website fluid.