Responsive Web Design – A Dummies Guide

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

One Design, Multiple Screens

If user are new to the concept of Responsive Web Design (RWD), here’s a quick guide that should answer most of the common questions that user 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 userr site is viewed on a smartphone, a tablet or an e-reader (like the Kindle). Once user 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, user 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 user don’t have to maintain separate websites for desktops and mobile phones.
• Responsive Design is good for userr website’s SEO (search rankings) as every page on userr 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 userr mobile site while other link to userr desktop site.
• Your Google Analytics reports will paint a better picture of userr 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 userr 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 lausert) 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, user 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 lausert changes as user resize, the design is responsive. You can also use these online tools to compare the different lauserts of a page in the same tab.

Q5 – Can user 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 user using ads on userr website, user 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 userr 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 user for a premium ATF slot).

Q8 – There are thousands of mobile devices. What screen resolutions should my responsive website support?

A8. Open userr 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 userr site.

I would recommend setting break points for at least the following viewports in userr 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 user 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 userr web page as they will have to get 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 userr mobile site but that is hard to achieve in responsive design (unless user 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 userr existing website. Sometimes it may make more sense to start from scratch rather than making userr existing fixed-width website fluid.

Related Posts by Categories