Responsive Design: A Critical Piece of User Experience

RWD: Both a Technique and a Strategy

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

I guide my clients to consider another aspect of RWD strategy by not limiting 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

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.