Responsive Web Design: An Explanation and a Shootout

You may have noticed that Sononaco recently got a facelift. With it we joined the post-PC area by incorporating a responsive design.

Responsive Full

Responsive design is not really new but there is a healthy(?) debate over whether it is worth the extra investment. The answer to that is always, “it depends” and it, well, depends on several factors which are not unique to a responsive design discussion:

  • How long you plan to use the design?
  • Do you have the resources to update all of resources involved?
  • Do you need a responsive design?iPhone size

A typical design process will involve discussions of two different sites – main and mobile. Sometimes these are served from different subdomains – www.domain.com for the main site and m.domain.com for mobile. Content from each site can be shared from a single CMS or database. But these sites are A/B comparisons and only appear in either desktop or mobile browsers.

Device sizes are somewhat in flux. Look at Apple’s product offerings for example: first it was the iPhone and then the iPad. Now there is the iPhone 3GS, 4 and 5, iPad 2, iPad (3/retina) and iPad mini, all with different display resolutions. The same holds true for Android, especially, since different manufacturers can create whatever size they so choose.

With inconsistent device displays it is easier to create a full-size site that will degrade depending on the display size. Doing so you can utilize the same application framework/CMS and present your content on all display sizes. Now with responsive design practices we can present all of the displays types on one single page.

Responsive design is simple on the surface yet complex under the hood. Simply put, a responsive design responds to the medium in which it is being viewed. Take the Sononaco web site, for example (above and right).

It looks like a normal web site. A bit grey and distopian (we call it “modern”) but still adhering to 960px width, slideshow, intro text, sidebar and whatnot. But how does it scale down? Let’s look at it on an iPhone: All of the content is still there! It’s just been moved around a little but everything is still there.

The menu at the top has shrunk but is still fixed across the top.

Information boxes on a 2 x 3 grid are listed one above the other. We opted to go with a single, long page to give a quick overview of all of our services.

User’s account information has been optimized to fit/scale to iPhone width.

Why did we do it? Is it because we produce so much content that it necessitates responsive design? No. Just like building our own WordPress plugin when we could have chosen several others, handling our own credit card transactions instead of using checks and running the site on nginx instead of Apache, we didn’t build it because we needed to, we built because we could. Andif it’s good enough for our clients, it’s good enough for us.

BUT! Because you can display your entire site does not mean you should.

Our home page was written to be brief but descriptive. If you have ever met me (Keith) you know I’m a talker. So that wasn’t easy.

Design specifically for mobile should communicate your message quickly and concisely, use few graphics/imagery and should respect your visitor’s bandwidth. cancervotes

Mobile sites should serve a purpose. For example, one of our recent projects involved making a mobile version of the American Cancer Society Cancer Action Network‘s voter guide, in which candidates in the 2012 campaign responded to specific questions about cancer research and funding. The mobile voter guide allowed users to quickly load information about national, state and local candidates.

Some people hate it

Some people want all of the information. Responsive design can be a blessing and a curse. While it loads fast, it can sometimes distill the information. And unfortunately, responsive design traps the user within a specific size.

Some people want the full experience of the desktop site. This is where boiling it all down to two separate themes/displays alone can be an advantage. Don’t like the mobile design? Add an option at the bottom to switch to the desktop version. For mobile, it’s always best to err on the side of mobile, because cellular data is still making telco executives rich.

Is responsive design appropriate for you? Like rounded corners the jury is still out but more plaintiff’s attorneys are leaving the liquor store with the Johnny Walker Blue. Decide for yourself:

Pro:

Why 2013 Is the Year of Responsive Web Design – Mashable, Dec. 11, 2012

Why Responsive Web Design is Good for SEO – The Drum, Dec. 14, 2012

Why You Should Redo Your Company Website With Responsive Design – sproutsocial.com – Nov. 28, 2012

Con:

Why Responsive Design Could be a Bust – WPCloudLayer – Jan 19, 2013

Why Responsive Design is Not Built for the User – Digiday – Oct. 19, 2012

Neutral:

Why Responsive Design May Be Wrong For Your Site [Infographic] - Inspired Magazine – Dec. 6, 2012

 

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>