Is Your Brand Ready for Responsive Web Design?

0

Responsive web design is a progressive and promising development framework. Liquid layouts, that morph to prioritize content based upon available screen size, are accounting for an array of device usage and becoming more customary. It is the next web design model combining the previous ‘elegant degradation’ (start big) and ‘mobile first/progressive enhancement’ (start small) design approaches.

Many early adopters have rushed in to leverage the latest approach without consideration of inherent technical limitations, content planning, and user experience implications. Approaching responsive hastily can result in alienated users on older browsers and a compromised interface design in the name of ubiquitous consistency.

In this blog post we’ll highlight the inherent pros and cons of embracing a responsive web design approach, tenfour agency’s reasons for shifting from responsive to adaptive during the rapid build-out of www.tweet-a-beer.com, and some basic criteria for determining when (not if) a responsive approach is right for your brand.

Responsive Pros

The popularity and rabid adoption of the responsive design approach is warranted. It naturally consolidates what were once multiple websites into one. This can result in development efficiencies and reduced production time lines. Working with a single (front-end) code base typically streamlines maintenance. Responsive approaches lay the groundwork for supporting fringe applications (e.g. In-Vehicle Infotainment {IVI}, Internet TV) and future proofing for displays/devices that have yet to be launched or even imagined.

Responsive Cons

The technorati detest ancient browsers and responsive design provides a natural digital Darwinism. Responsive CSS media queries are not supported by older Blackberry browsers nor any Internet Explorer (IE) versions prior to 9.0. Unfortunately, many users (particularly in emerging nations and in large corporations) have little control over browser choice and are increasingly a casualty of responsive sites.

Planning for a responsive approach requires a close review of the navigation to be sure it supports mobile touchscreen devices (no mouse hovers, roll-overs, etc.) and is optimized for tap targets. Moreover, the content needs to be created in a way that makes it easy to serve up in various orientations, lengths and in stackable chunks. Existing sites that are not structured in this way will require a revised content strategy.

Consistency of design pervades early responsive efforts, often to a fault. Brand differentiation can be compromised by sites looking/performing too much like another. Unique responsive approaches to online experiences, which stray from known patterns, are complex and not for the risk averse.

Perceived efficiencies of a responsive approach can still be negated by mobile browser fragmentation.

“Different… like you”
Common responsive interface patterns are safe, however they can contribute to the loss of unique brand experiences:
Screen_Shot_2012-12-28_at_12.55.12_AM.png.scaled980 

Tweet-a-Beer Experience

To capture the attention of conference attendees at Austin’s SxSW, tenfour designed and developed the Tweet-a-Beer web app.

This was intended to be a self-promotional show piece, so we pulled out all the stops – mobile first design, responsive framework, jQuery animations, integration with 3 APIs, geolocation, social commerce, the works.

After developing the initial instance to be optimized for the iPhone (mobile Safari) we began porting the design for wider screens. It quickly became apparent that the order in which the content appeared on handsets wasn’t the optimal experience when converted to a two column layout for larger screens.

Additional differences started to emerge between the mobile and desktop efforts:

  • creative team wanted different headers used on each page
  • we preferred different JavaScript/CSS/fonts between the mobile and desktop versions
  • the AddThis social widget doubled the page download time for the mobile landing page, though it was tolerable for desktop users

To complicate matters, we produced Tweet-a-Beer with Microsoft’s PR agency (Waggener Edstrom) so it was critical to our partner that the app run flawlessly on Windows Phone and Internet Explorer (IE). IE browsers older than 9.0 don’t support geolocation, let alone a responsive framework, so we were challenged in multiple ways.

The combination of these elements, coupled with an aggressive launch date, drove us to settle on an ‘adaptive design’ approach – essentially creating two different presentations based upon screen width of the user’s device and optimize for each independently.

Mobile interface:
resp_des_blog_09-2012_img02-240x360

Desktop and tablet interface:
resp_des_blog_09-2012_img03

Fortunately, when the content structure is considered early enough in the planning process, responsive frameworks are an ideal approach.

Summary + Checklist

As developers learned from the Java wars, “Write once, run anywhere” is a myth. You have to design, develop, and deploy for all environments and variations you wish to support. Responsive design frameworks and tools make it feasible to support many devices, but not necessarily with less cost or effort (initial development costs can often run 2x a comparable non-responsive site.)

That said, a responsive approach can lay the foundation for long term maintenance efficiencies and is one of the only future friendly things you can do when building websites to accommodate the next big screen size/resolution. Responsive makes sense for many brands today.

When to make the leap to responsive will likely depend on whether it is an evolution or revolution to your current site’s structure, content and experience. For most brands it will be a dramatic shift more suited to a new build rather than a ‘refresh’ of an existing property.The deciding factors will vary by brand.

Some criteria to consider when determining when the shift is right for you/your brand:

  1. Is your target audience bound to older browsers?
  2. Do you have the time/resources/expertise to review, revise and optimize content for a responsive approach?
  3. Do the components, widgets and content need to be displayed in a particular order?
  4. Can you compromise on design to accommodate for fluidity?
  5. Do you anticipate a shortened QA/testing process because of a responsive approach?

 

//big thanks to my extended front-end braintrust for adding to this post: @erat@jchaney01,@ericcurtis@dkeskar@mcasburn@reggiewideman, and @sherylmaloney

Photo Credit: mrJasonWeaver via Compfight cc

Share.

About Author

My name is Daniel T. Wood. I am an experience strategist working in Portland, Oregon. I primarily write about digital trends including user experience, technology, culture and marketing. I can be reached at daniel@MIRA.agency

Leave A Reply