Responsive Design: A Critical Piece of User Experience

y Baruch Sachs

Published: November 25, 2013

“With so many rapid shifts in technology and design trends and philosophies, it is incredibly difficult to know what is real versus what is misguided and destined to be short lived.”

Being both a consumer and a creator of user experience is challenging these days. With so many rapid shifts in technology and design trends and philosophies, it is incredibly difficult to know what is real versus what is misguided and destined to be short lived. Clients ask me for guidance all the time about the various technologies and techniques that make up user-interface design. It was not all that long ago that I was cautioning clients not to create enterprise user interfaces in Flash. Today, I’m fielding numerous questions around two topics relating to user-interface design:

• How can we create the right flat design for our user interfaces?
• What is this whole responsive thing we keep reading about?

Some clients think responsive Web design (RWD) is just another trend, while others focus on its ability to ensure that content looks good no matter what a display’s form factor—whether desktop, tablet, or smartphone. However, neither of these perspectives captures the true meaning and potential of RWD. And they also gloss over a lot of the challenges with RWD these days—challenges that require UX guidance:

• the inability to really tailor individual experiences
• the implementation conflicts that happen when you are rewriting an already existing app to be responsive
• the compromises that you have to make to cover desktop and mobile

“Responsive Web design … isnot simply a trend. It has staying power.”

I firmly believe—and have been guiding clients to believe—that RWD isnot simply a trend. It has staying power. But we have to realize that RWD is in an evolutionary stage. The reason that RWD is not a just trend is that it is an implementation philosophy, not a technology like Flash or whatever JavaScript framework or library has cachet today. However, in April 2012, usability guru Jakob Nielsen stirred some controversy with his article “Mobile Site vs. Full Site,” in which he advocated for there being two versions of all sites: a desktop version and a mobile version. He defended his seeming omission of RWD by saying that he was writing about user experience, not implementation.

I, like many others, do not believe that user experience and implementation should be entirely separate considerations. If you do not think about the implementation of a user experience, design becomes academic. While, in the consulting world, you need to know the academics of user experience, you can spend very little time on such intricacies if you expect to be effective.

When you are building Web applications, RWD is something that you should always think about. Why? For the simple reason that, if you do not think about how a person is going to interact with your application or content or about what messages you want to convey to clients and how, you are not really thinking about user experience. And not considering user experience is a huge missed opportunity.

RWD: Both a Technique and a Strategy

“There are those who advocate that you should start with the smallest device possible, then design for progressively larger screens, and ultimately, the desktop. There are those who advocate the opposite.”

The techniques of RWD are pretty straightforward for the most part. You use various HTML and CSS techniques such as media queries and fluid grids or layouts to make sure that, no matter what the size of the browser viewport, a user can properly navigate to and view the content on a site or the functionality of an application.

It’s the strategy part that is a little trickier—and one that will evolve as RWD evolves. You need to take the time to think about how you want users to interact with your application or Web site. And, just as with flat design, you must think about navigation, content, and overall user experience. There are those who advocate that you should start with the smallest device possible, then design for progressively larger screens, and ultimately, the desktop. There are those who advocate the opposite. In truth, both are acceptable strategies, in the proper context. To understand this better, you have to ask yourself these types of questions:

• What messages do you want to convey to the people using your products? What marketing messages do you want to get across?
• How do you expect your users to do their work on a desktop? A tablet? A phone?
• Are there differences in functionality across devices? In navigation? In content?
• Do your target users change across devices? Are they a captive audience on one form factor, but not on another?

RWD: Beyond Smartphones and Tablets

“RWD is not all about smartphones and tablets. Implementing a responsive Web design can also help clients who must design for screens with a huge disparity in their resolutions.”

I guide my clients to consider another aspect of RWD strategy by notlimiting their thinking to mobile contexts. RWD is not all about smartphones and tablets. Implementing a responsive Web design can also help clients who must design for screens with a huge disparity in their resolutions. As a UX designer, I am sick and tired of having to design for the lowest common denominator. I cringe every time a customer presents me with a heap of design requirements for data that must all appear on a single page, with no scrolling, and fit on a display with a 1024x768 resolution. Most of my clients even include this in their corporate standards. But RWD makes it possible not to care about screen resolutions as much anymore. Instead, I can focus on designing the right user interface, knowing that it will look good on any device—regardless of its screen resolution.

In Conclusion

“RWD is an evolutionary approach to design for the Web that addresses long-standing design issues….”

Responsive design’s implementation philosophy solves various problems. It is not merely a trend or just the latest thing. RWD is an evolutionary approach to design for the Web that addresses long-standing design issues and offers the promise of ensuring that we no longer have to make compromises in our designs to ensure that they work across different screen resolutions.

However, just as with any other aspect of design, we need to educate our clients about what RWD is and what it is not. We need to sell RWD as a comprehensive solution, not merely the ability to display a Web site on a smartphone. Our clients see UX professionals as trusted advisers, people who give them solid advice on what is practical, what provides benefit, and most important, what aspects of design are simply trends that they should avoid versus those that they should embrace to deliver better user experiences. We should encourage our clients to adopt responsive Web design as an implementation philosophy that lets us deliver better user experiences.

- See more at: http://www.uxmatters.com/mt/archives/2013/11/responsive-design-a-critical-piece-of-user-experience.php#sthash.sdfMsDkD.dpuf

via UXmatters http://www.uxmatters.com/mt/archives/2013/11/responsive-design-a-critical-piece-of-user-experience.php