Responsive Web Design for Corporate UX Design

By Janet M. Six

Published: September 23, 2013

Send your questions to Ask UXmatters and get answers from some of the top professionals in UX.

In this edition of Ask UXmatters, our experts discuss responsive Web design within the context of corporate UX design.

Every month in Ask UXmatters, our panel of UX experts answers our readers’ questions about a broad range of user experience matters. To get answers to your own questions about UX strategy, design, user research, or any other topic of interest to UX professionals in an upcoming edition ofAsk UXmatters, please send your questions to:ask.uxmatters@uxmatters.com.

The following experts have contributed answers to this edition of Ask UXmatters:

• Steven Hoober—Mobile Interaction Designer and Owner at 4ourth Mobile; author of Designing Mobile Interfaces; UXmatters columnist
• Peter Hornsby—UX Consultant at Friends Life; UXmatters columnist
• Bob Hotard—Lead eCommerce Web Design Architect at att.com; Technology and Production Chair, TEDxSanAntonio
• Adrian Howard—Generalizing Specialist in Agile/UX

Q: Recently, we’ve seen an influx of rapid design tools, the birth of the mobile-first strategy, and the growth of responsive Web design (RWD), which by its nature, simplifies content, layout, and overall user flows. On the other hand, communicating that RWD concept to stakeholders becomes a little more complex when a site shifts to a larger breakpoint. How is RWD changing the approach to corporate UX design?—from aUXmatters reader

“When you already have a traditional desktop design in production, you really have to take the approach of reconstructing each module, page, or application flow with RWD.”—Bob Hotard

“I think everyone understands the concept of starting with a mobile design—a small screen, simple interactions, and less content,” answers Bob. “But when you already have a traditional desktop design in production, you really have to take the approach of reconstructing each module, page, or application flow with RWD. Ask yourself, How would I reinvent this page if I were designing it for the first time for a mobile device? That will put you in right mindset.

“I’ve heard designers describe this frame of mind as mobile up, not desktop down. It forces you to ask the basic questions that, as designers, we always want our business partners to ask: What is the single purpose of the page? What is the primary content, and how should you prioritize the content?

“In this context, product owners immediately get the picture of straightforward content, simple interactions, and clean visuals.”—Bob Hotard

“Since attending Luke Wroblewski’s ‘Mobile First’ workshop, I now ask:What is your 1, 2, 3? When I show product owners a block wireframe of the teeny, tiny iPhone screen, they usually see right away that, for example, only 1 and part of 2 will initially be visible, and 3 after a swipe—and that’s okay. This demonstration hits home. I have found that, in this context, product owners immediately get the picture of straightforward content, simple interactions, and clean visuals. Then it becomes much easier to communicate, illustrate, and demo the expansion of a tablet breakpoint, and finally, a fluid, adaptable desktop version. But creative is only part of the plan.

“I recently tweeted, ‘If you’re in corporate Web design and considering converting to RWD, get ready for future shock,’” continues Bob. “RWD is forcing all of us in the corporate arena to look at our design process, our deliverables, and how we interact with developers, testers, and release management. If your company’s response is ‘Oh great! Now we have to create three wireframes, comps, and content documents for every page.’ they’re missing the boat—and unfortunately, it’s a speed boat with a wide turn radius. It would be wise to consider modifying your creative process as well as your development and testing methods. It really is a culture shift, and it is all for the good. But as with all change, this is rarely easy, and people may not be ready to embrace it.”

A Paradigm Shift

“In the current era of multiple devices, people understand that you can’t present the same content in the same way on every display.”—Adrian Howard

“RWD has put the final nail in the coffin of one of the most pernicious misconceptions of Web design—the pixel-perfect Web site,” replies Adrian. “In the current era of multiple devices, people understand that you can’t present the same content in the same way on every display. RWD gives us a relatively simple way to attack the problem without developing ndifferent device-specific Web sites.

“RWD is certainly not a panacea, but I have found that it can remove much of the fear of dealing with our new cross-channel world. The growth of RWD frameworks, design patterns, and tools means that people are finally accepting that a Web site can look different depending on the context.”

Connecting the Design with the Brand

“For the corporate types—who are just now migrating to the concept of multi-channel support and considering responsive and adaptive principles—RWD doesn’t necessarily make things easier.”—Steven Hoober

“I am not at all sure that RWD simplifies either content or layout—and certainly not flow,” asserts Steven, “But let’s talk about the first of these. At least for the corporate types—who are just now migrating to the concept of multi-channel support and considering responsive and adaptive principles—RWD doesn’t necessarily make things easier. The most important part of adapting experiences is not the responsive-centric focus on screen size and breakpoints, but making sure functionality and content is similar across every touchpoint. A typical, old-line corporate client has what amounts to functionality and content in paper and CD catalogs, on signs, in desktop applications, on installed hardware and its dedicated software, in internal databases, on intranets, in billing systems and bill stuffers, and a dozen other touchpoints. 

“Just upgrading from a desktop-only Web site to a responsive design is barely moving the needle. Really driving change and bringing a company into the 21st century requires looking hard at what its brand means and what customer interactions will be like in the near future. More often than not, I derive the content for new designs and new systems—like a mobile-friendly Web site—from those antiquated paper- or CD-based systems. Sometimes it’s good content, but often it’s just what is there now and what a good mobile or tablet experience will replace.”

The One-Web Approach

“Responsive Web design is just one approach to what the W3C calls a One-Web Approach, where the same information and services are available to users irrespective of the device they are using.”—Peter Hornsby

“Responsive Web design is just one approach to what the W3C calls aOne-Web Approach, where the same information and services are available to users irrespective of the device they are using,” responds Peter. “Other popular approaches include adaptive Web design and server-side adaptive designs. Igor Faletski gives a good overview of the strengths and weaknesses of each approach in the webmonkey article, “The Two Flavors of a One-Web Approach: Responsive vs. Adaptive.’ Designing for the One Web doesn’t inherently simplify anything: you need to design to take advantage of it!

“Taking a One-Web approach for corporate site design is usually a good idea, but you should dig around a bit to ensure that it works in your case. If the site you’re designing will have little or no usage on mobile phones, consider designing down to tablet level. Designing for the One Web simplifies the design that the user sees, but complicates the testing and design processes.

“The challenge of designing for the One Web is twofold,” concludes Peter. “The communication challenge you’ve already picked up on. First, many stakeholders don’t know about the need to design specifically for mobile devices. They see Web sites working well on their mobile devices without understanding the design work that has gone into it. Second, if you can agree that One Web is strategically important for the organization—and most of the time, it is—you can leverage this overall goal in reworking your content and functionality.

“Many corporate Web sites are the outcome of debates between competing stakeholders, leading to the need to manage the opinions of the highest-paid people (HIPPOs).”—Peter Hornsby

“Many corporate Web sites are the outcome of debates between competing stakeholders, leading to the need to manage the opinions of the highest-paid people (HIPPOs). For further discussion of this point, see “Tips for Handling a HIPPO (Highest-Paid Person’s Opinion).’ In a best-case scenario, you can use the need to design for the One Web to push for greater focus within the organization. Get people to understand what the key design focus should be, under the umbrella objective of supporting users on mobile devices.”

- See more at: http://www.uxmatters.com/mt/archives/2013/09/responsive-web-design-for-corporate-ux-design.php#sthash.Wjl2IVzB.dpuf

via UXmatters http://www.uxmatters.com/mt/archives/2013/09/responsive-web-design-for-corporate-ux-design.php