You are here: Articles --> 2015 --> Optimizing the mobile Web-browsing experience through responsive design
Vous êtes ici : Essais --> 2015 --> Optimizing the mobile Web-browsing experience through responsive design
by Geoff Hart
Previously published as: Hart, G. 2015. Optimizing the mobile Web-browsing experience through responsive design. http://techwhirl.com/optimizing-the-mobile-web-browsing-experience-through-responsive-design/
Though “phablets” (a portmanteau combination of phone and tablet computer) make it both feasible and enjoyable to browse the Web on the road without using a laptop computer or a full-sized tablet, they still provide an unsatisfying experience at the surprising number of Web sites that were designed without considering the mobile visitor’s needs. This problem persists despite the astonishing growth in the number of cell phones, phablets, and tablets, which should make the need for mobile-friendly sites clear to designers. (Large-screen laptop computers are also mobile devices, but I will focus on phones and tablets in this article.)
One solution is to create separate sites for mobile and desktop users, an approach recommended by usability guru Jakob Neilsen. Optimizing a site’s design for each device would provide the optimal solution from the perspective of an individual’s user experience, but this hasn’t proven feasible in most cases; it simply takes too much work. Fortunately, today’s tools do not force us to create entirely separate Web sites for devices with small and large screens: for many purposes, we can satisfy most visitors using what’s been variously called “responsive”, “fluid”, “elastic”, “adaptive”, “pageless”, or “flexible” design. Despite nuanced differences among them, these terms all have one thing in common: the recognition that mobile devices impose distinct constraints on a Web site’s users due to the nature of mobile hardware. Of these terms, I’ll standardize on responsive design because it emphasizes the designer’s duty to respond to the needs of the users, a point that too many designers forget.
Specifically, responsive designs supply information in a form that adapts easily to the constraints of whatever device is being used. Of the many differences between mobile and desktop devices, the biggest relates to the small screen size of the former, though the less powerful CPU may also be an issue. Responsive design represents a break from the traditional design model, in which designers often privilege their ability to meet their own esthetic needs over the user’s need for a satisfying experience.
To understand responsive design, it’s necessary to recognize that some forms of Web content require a fixed and inflexible design (e.g., some fine art, really large images such as blueprints), whereas for others (e.g., novels, verbal descriptions), the visual design is far less important than the information content. Although information content and visual design are closely linked when we develop a satisfying user experience, it’s helpful to consider responsive design in binary terms rather than trying to capture the many shades of grey that determine their relative importance for any given task. When the information is the most important component of a design, users of the design should have the ability to customize the display to meet their needs rather than being constrained by a suboptimal fixed design.
It’s easy to understand how this theoretical difference works in practice if you compare how PDF files and EPUB files behave. A PDF document has a fixed design that appears similar (if perhaps unreadably small) on every device, whereas an EPUB document automatically reflows its contents (most often dominated by text) to fit the available display space. The display software often lets readers customize the typeface, type size, and other characteristics (e.g., color) to meet their visual preferences, which also provides benefits for readers with visual and other disabilities. “Responsive” is about the audience’s needs, and the hardware they use to access your site defines only a small subset of those needs.
PDF files emphasize control over layout:
EPUB files are responsive because the layout responds to the reader's needs:
In the context of a Web that is increasingly visited using mobile devices with small screens, how can we achieve an optimal browsing experience by implementing responsive design? We need to understand the differences and similarities between the mobile and desktop browsing audiences and experiences. To keep this article to a manageable length and to play to my strengths (information design, not the intricacies of HTML and CSS coding), I’ll focus on design principles. To learn more about the actual plumbing that makes responsive design possible, have a look at any of the various design “foundations” that provide code snippets or even whole architectures that you can adapt to your needs (e.g., ZURB's 'Foundation' Web kit).
All good design begins with an audience analysis that describes the needs of the audience. Audiences are complex and cannot be reduced to stereotypes: the one-size-fits-all “use case” is most often a myth, though it may sometimes be a necessary simplification early in the design process. For example, one important difference can be seen between my generation (which still uses its phones for oral communication) and my children’s generation, who use the phone primarily for texting and selfies. The latter have sometimes been referred to as the “TLDR” (too long, didn’t read) generation, as evidenced by their joy in creating shortcuts such as TLDR that facilitate texting.
To create an effective design, your audience analysis must focus on the following points:
Kim Goodwin’s 2009 book on user-centered design provides excellent and comprehensive advice on performing such an analysis.
Designers should consider two main categories of user goals: an esthetic experience, in which the visual or other sensory characteristics of the experience are more important than the information content, and a purely functional experience, such as quickly finding and absorbing information. The esthetic experience sometimes requires fixed design, though perhaps less often than you might expect. Responsive design is more important to a successful functional experience. Of course, the best designs combine an esthetic experience with functional efficiency, so users won’t have to sacrifice either goal. As in any information design exercise, the key is to identify the most important factors for each audience (here, esthetics versus functionality), and prioritize that factor in your design. You are much more likely to create a highly usable but also esthetic experience if you understand the needs of your audience and focus on those needs.
A second part of your analysis involves determining and accounting for the different devices your audience uses to access your Web site. Smartphone, phablet, and tablet users may have identical goals, but the different screen sizes and different dimensions impose different constraints on the available display space. For example, multicolumn designs such as large tables of information or page layouts based on a complex grid can potentially work well on a tablet, but become unusable on any but the largest phones. To create a responsive design, you’ll need to limit your use of such designs and find ways to repackage the information. For tables, you may need to provide an interface that lets users drill down to specific subsets of the data, whereas for fancy magazine layouts, you may need to restructure the pages into a linear sequence with only a single column. Succumbing to the temptation to design sites for specific devices would increase your workload to impractical levels: nowadays, there are dozens of different screen sizes and resolutions in common use. Instead, a properly designed one-size-fits-all solution will be more effective both for you and for your audience. A better solution would be to investigate Web content management systems (CMS) that provide the technological support required to manage both a large body of information and different outputs (presentation layers) for different contexts.
If it’s necessary to control what your audience sees and how they access the information, developing a customized app for each device or operating system may be a better solution than responsive design. That’s particularly true if the app is designed to be closely tied to your CMS to ensure that they work well together. On the other hand, if you’re not a Web developer or are not working with such developers, you’ll probably find the one-size-fits-all option more effective. For example, the EPUB format is more or less standardized across all platforms, but readers of EPUB documents have access to multiple reader apps for each platform. (Forcing users to use a single reader app is rarely an acceptable solution nowadays, although you can certainly recommend apps that you feel work best with your information.) As in the case of single-sourcing, this allows you to maintain a single consistent body of information for all devices, while giving the user of the device control over the display of the information. There may be specific cases for which the nature of the information requires the use of a single task- or context-specific program. In that case, beware what is probably the single biggest flaw in most of the apps I’ve used: the lack of usable (or any) online help. Joe Welinske’s book on mobile user assistance discusses how you can provide that help.
Based on what you’ve learned about your audience, perform triage that lets you avoid the scope creep that afflicts so much software, resulting in feature-laden but unusable designs: define your development priorities based on the small subset of features that most users will use most often or that are most critical to their success (i.e., Pareto optimization). Design for those features first, without forgetting their design consequences for other desirable features that you’d like to implement later, then add those other features only once the core functions work well. To accomplish this, you’ll need to carefully consider the information architecture to support change management, since the body of information you’re presenting and the ways in which people will access it inevitably change over time.
Information design provides many guidelines for developing effective designs that meet specific audience needs. These include, but are not limited to, the following:
Graphic design principles can also inform your responsive designs:
Needless to say, test your solutions on as many devices as possible to avoid unpleasant surprises. If your organization isn’t large enough to have a wide diversity of devices available in-house, implement a beta-testing program that encourages access by members of your potential audience, using as many devices as possible.
In addition to information design solutions, there are also technological solutions you can implement to automatically make your Web site adapt to the needs of the browser. Rather than describing details of XHTML and CSS, I’ll again focus on general principles:
Consider “progressive disclosure”, in which you focus on the key content for a given page and display non-key content only when the user requests it. This lets users decide what subset of the larger set of information to display at any given time. The use of collapsing and expanding hierarchical menus that display different levels of the content is a good example of progressive disclosure.
With progressive disclosure, clicking the [+] icons reveals a progressively deeper view into the information hierarchy.
However, be aware that if the optional text is stored in a database and not acceptable to search sites, this may adversely affect search engine optimization. This recently became a significant issue, when Google modified its search algorithms to downgrade the ranking of sites that are not mobile-friendly. On the plus side, they’ve provided some helpful tools to take some of the sting out of their new approach:
Showing some consideration for your site’s mobile users by designing based on a responsive model can increase both the site’s usability and its findability—a win–win solution.
I started this article by emphasizing the importance of human-centered design. There are several simple strategies you can use to consider the human aspects of responsive design:
Lastly, remember one of the painfully gained insights from user-centered software design: don’t fall into the trap of emphasizing software features, and instead focus on user needs. Those needs determine the features, not the other way around.
If you pay attention to these principles, and accept a simpler approach than you might prefer on a high-powered, large-screen desktop computer with a high-bandwidth connection, it’s still possible to create esthetically satisfying mobile experiences that also efficiently supply the information your audience desires. Consider adopting the interesting “mobile first” strategy: design your information first for the mobile experience. The resulting design will also work well on a desktop, and you will have the freedom to subsequently add bling on the desktop because of the larger screen and more powerful computer.
Unless you’re a freelance or lone designer, invest some time in discussing the user’s needs with your organization’s computer support and Web development groups. They may have, or may need to implement, an appropriate “mobile enterprise application platform” that lets them support more sophisticated needs. They can tell you what design options are feasible, and the constraints you’re working under. The discussion also alerts them to opportunities to improve the service you’re providing to your audience. Not trivially, it also establishes a precedent of working together to solve problems rather than working separately and unnecessarily creating problems for each other to solve.
Although responsive design has considerable promise, it is not a panacea. This approach may eliminate the need to create and maintain entirely different Web sites for desktop and mobile users, but it won’t eliminate the need for testing. A crude and preliminary—yet surprisingly effective—test is to load the site in your desktop computer’s Web browser, then progressively resize the window until it’s the size of a large tablet, a small tablet, a phablet, and a smartphone so you can see whether the usability degrades significantly. For a more sophisticated test, you’ll need to test your site’s performance on real phones and tablets, using both Apple’s iOS and Google’s Android operating systems, to ensure that it works acceptably well on all platforms. You can use emulators and test software to detect gross problems. However, emulators aren’t perfect, so after you fix the most obvious problems, you should test the site again using the actual devices. A wise approach would be to perform small tests on certain key parts of the site until you understand the design challenges, and use the lessons you learn to expand responsive design into more areas of your site.
When I read advice articles such as this one, I always ask myself whether the author has followed their own device. On this account, I confess that I still have a way to go. The primary navigation on my site is a fixed-width horizontal navigation panel across the top of each page; although it does not resize to account for different screens, it works tolerably well on a high-resolution screen such as those on most current-model smartphones, and the large buttons in the header are relatively easy to tap. More importantly, the key items of value on my site are text-based, and the text on most pages is responsive: it reflows to fit any window size, and you can override my font choices by changing the settings of your Web browser.
Goodwin, K. 2009. Designing for the digital age: how to create human-centered products and services. Wiley Publishing, Inc., 739 p., including index.
Redish, G. 2012. Letting go of the words: writing Web content that works. 2nd ed. Morgan Kaufmann, 368 p.
Welinske, J. 2014. Developing user assistance for mobile apps. 400 p.
©2004–2018 Geoffrey Hart. All rights reserved