07

Nov

The Problem With Responsive Design

Screen shot 2012-08-23 at 5.09.46 PM

These days, creating a web site using responsive design is considered a win.  From a technical standpoint, it’s great because there’s just one codebase that adapts the UI to whatever screen size you’re using.  From a web designer’s perspective, there’s not a lot to do other than adjusting your grids and resizing assets.  And, the business loves it because you’ve got one project instead of many.  While everybody on the production side is high fiving each other, it’s end users that can be left hanging.

I cringe when I hear people refer to responsive design as though it’s a magic bullet that will solve the multi-platform problem.  If your goal is to simply make your content accessible and viewable on multiple devices, then it’s on the mark.  Implement responsive design and you’re done.  However, if your goal is to create a good user experience that makes sense for each device and is every bit as good as the original design, that still takes focus and tailoring.  A good user experience is the responsibility of the designer, so don’t blindly hand the reigns over to a template or technical how-to and think you’re doing your job.

 

Common Responsive Design Pitfalls 

1. When asked “What about touch screens?  There’s no cursor.”, the response is taking the existing design and simply removing hover states and other cues which help create perceived affordance.

2. When asked “What about mobile screen size?  They’re tiny.”, the response is squeezing all of the content into a single column layout spanning 15 screens.

3. When asked “What about supporting gestures?  It’s touch after all.”, the response is adding gesture support in, but we make no extra effort to tell the user the web site now behaves like a native app.

Don’t let yourself fall into the shortcut pitfalls above.  Don’t be lazy.

 

Avoiding The Responsive Design Pitfalls

1. Maintain interaction cues

The user no longer has the “luxury” of scrubbing over every menu, image and bit of colored text with their cursor to see if a tiny hand appears.  They just use their eyes and are usually hesitant to randomly tap all over the page.  So, the design must tell them what is interactive from the onset.  There is no set style guide for this, and even Apple’s iOS design guidelines aren’t much help.  But, we can look toward digital magazine or even game design as usable examples.

From Travel & Leisure and Installation magazines:

 

2. Subtle gesture cues

Gesture support is tricky because it’s not yet mainstream for web sites to support native app functionality.  Interaction cues are an easy first step here.  Going beyond that, we can emulate the design of native apps.  To do this successfully, the web site needs to look and behave like an app.  eBay’s site does a decent job of implementing a swipe carousel.  It’s not perfect, but it gets the point across:

 

3. Don’t go too long

Page length fatigue mostly affects mobile devices with their relatively small screens.  We all hate page loads, so I’m not advocating breaking up your homepage into a dozen discreet pages.  Instead, let’s keep things compact by separating the act of finding information from in-depth reading.  We can use the tried and true “read more” links or even try paginating through modules as Amazon illustrates:

 

Conclusion

When we think about responsive design, we need to focus not on technology’s capabilities and authoring savings but instead be mindful of context and craft.  Today, the majority of web sites viewed on non-desktop devices are expected to act like the desktop versions because they look like them.  Responsive design is great first step toward making sure your site is navigable and readable and looks native-ish.  But, if we want to be truly responsive, our sites need to look and behave like native applications.  The ideal experience is one which feels natural and effortless.  To design responsively, we can’t forget about the craft of creating great user experiences and the wildly different contexts brought on by supporting multiple devices.

 

Comments are closed here.