UX in the Age of Responsive Web Design

Posted by Kate Jurras on Fri, Mar 9, 2012

 Patrick 2 resized 600This is the third post in our UX and design blog series. Throughout the month of March we'll be featuring posts from some of Boston's most expert thought leaders, answering these questions: "How do you see the field of UX/design changing in the new technology landscape? What’s most important to know now?” This post is by Patrick Harrington, Senior User Experience Architect at Boston Interactive. Patrick is a passionate UX, Information Architecture, and User Interface practitioner at Boston Interactive. He lives in Davis Square, Somerville, and thinks the size of Android phones is getting a bit silly.

Responsive design has taken the web by storm since Ethan Marcotte's seminal piece on the subject in the May 2010 issue of A List Apart, and later, in his book on the subject. I won't be explaining what responsive web design is (though if you are looking to see it in action, try resizing the home page of the new BostonGlobe.com or check out this handy visual example of responsive design. Instead I'm going to talk about how this new approach can and will change the way that designers, marketers, and developers approach a web project.

Responsive Workflow

the news resized 600A responsive web design project means that the typical waterfall methodology of research, plan, design, develop, and deploy needs to be a bit more flexible. Responsive design means instead of designing for just one or two screen sizes, we design flexible layouts to accommodate every screen width a browser or device could have. And there are a lot:

Our app has been exposed to more than 500 different resolutions in the past 30 days. Ethan Marcotte had it right. #responsive cc: @beep — Sam Weller (@samwe11er) February 20, 2012

As soon as a design has been turned into HTML and CSS, questions will arise that need a UX or designer to assist. This requires more collaboration between disciplines, resulting in a better end product.

Responsive Tools

When it comes to designing desktop websites, there are plenty of great tools for a UX: Axure, Balsamiq, OmniGraffle, and many others. When it comes to designing for responsive, these tend to fall a bit short. Sure, we can mock up a few typical screen resolutions (320 pixels for an iPhone, 768 for an iPad in portrait, or 1024 for a desktop). But what about a Kindle Fire (600 pixels) or any of the 4+ inch Android phones?

For responsive sites, a UX needs responsive tools. And the very best one may be HTML, CSS, and JavaScript—the very same tools we use to make websites. UXers are already building HTML prototypes and, until the rest of our tools catch up, it may make the most sense to quickly translate those two or three static wireframes into HTML prototypes to start working through the nuances of a responsive design.

Responsive Content

Along with UXers having to adjust their workflow and tools, we also have to consider that old content may not make sense on mobile (and if it's just too long, may not have been working on a desktop either). One of the best ways to do this is through an in-depth content inventory, going beyond the typical ROT analysis (is this content Redundant, Obscolete, or Trivial?), while also questioning if it works on all devices. Rich applications or Flash tools may need to be hidden from touch or mobile devices and should be strategically considered when undertaking a responsive project.

Responsive Conclusion

Responsive design requires responsive UXers—we will need to change our process, tools, and mindset to allow ourselves to create web apps that will respond to the ever-changing device and user landscape.