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

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).

Design for your audience

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:

1. the different types of user (i.e., their goals for accessing your Web site)
2. the characteristics of the user that define how they will interact with your Web site
3. their operating context (e.g., the environment in which they access your site, the hardware and software they use to do so, the reasons why they have come to your site)

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 solutions

Information design provides many guidelines for developing effective designs that meet specific audience needs. These include, but are not limited to, the following:

1. Minimize the word count: Even for the pre-TLDR generation, most people lack sufficient time to read everything they want to read. Thus, concision is vital. As Ginny Redish notes in Letting Go of the Words, writing well requires you to account for more than just the words, and this statement is particularly true for mobile devices.
2. Don’t necessarily minimize the complexity of your information: minimize its perceived complexity. Information design and information architecture principles let you present complex content in ways that make the information seem simpler than it really is. Never penalize users for using a mobile device by “dumbing down” your content.
3. Separate the content from its presentation: content-management solutions let you define information in reusable chunks so that you can express the same information differently in different contexts.
4. Minimize the size of the files: Though the bandwidth available to feed information to mobile devices is improving each year, you currently cannot depend on mobile users having Wi-Fi or cellular data rates equivalent to those that are possible with wired access. You also can’t count on them having as much RAM and storage space as users of laptop or desktop computers. Thus, it’s necessary to keep both images and total page or screen sizes small.
5. Design your information right from the start so that it can adapt to different containers: For example, define image sizes as a percentage of the screen width rather than assigning fixed pixel dimensions, and choose image formats that degrade gracefully on lower-resolution devices (e.g., use scalable vector graphics rather than bitmaps). Also, present images in such a way that viewers can easily zoom in or zoom out; I frequently encounter fixed-size designs that prevent me from zooming in on an image that’s too small for me to see.
6. Look for ways to avoid tabular information if you expect the information to be used on a phone, where large tables are particularly problematic. It may be necessary to redesign tables to use different formats, such as combinations of headings plus bulleted lists or a series of simplified comparisons that let users assess the information simultaneously for only one or two rows or columns of the table at a time.
7. “Chunk” information by designing collections of closely related information that function as single units. For example, a person’s name and mailing address together represent a complete chunk of address information.
8. Embrace minimalism, both in terms of simplifying the interface and in terms of John Carroll’s design philosophy, which encourages exploration.
9. Minimize the number of taps required to reach a destination: Readers will keep following a trail of links for as long as they are rewarded for this behavior. Where appropriate or possible, use “deep linking”—links that take users directly to a page several levels down the hierarchy so they don’t have to work their way through all intermediate pages to get there. The goal should be to strike an appropriate balance between the breadth and depth of the information hierarchy.
10. Remember that the “footprint” [sic] of a finger is much larger than that of a mouse cursor, so targets for taps must be larger for mobile sites than they are for mouse-based desktop computing. This uses up precious screen real estate, but there may be no alternative if you want to produce a functional responsive design; forcing your audience to repeatedly to zoom in and out just so that they can tap to follow a link is not a kindness.

Graphic design principles can also inform your responsive designs:

1. Use contrasts in position, size, and color to clearly group like items and separate them from unalike items.
2. Use skeuomorphism where it serves a useful purpose—or where it does no harm and improves the esthetics of the experience.
3. Repeat information that decreases the cognitive burden of navigation, such as visual anchors, navigation links, running headings, and “breadcrumbs” (information that shows the path you took to reach a given page).
4. Align chunks of information to guide the viewer’s visual path through the pages. For example, use justified borders and indentation to reveal hierarchies and direct the eye. Symmetry and asymmetry can also serve this function.
5. Balance your use of text and graphics; use the right medium for each communication goal.
6. Adapt all of these principles to account for context. For example the bright light that is common in outdoor situations requires a higher-contrast design, whereas noisy environments or environments such as a cinema that require silence may make voice interfaces such as Apple’s Siri and Microsoft’s Cortana infeasible.

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.

Technological solutions

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:

1. Unless you are providing a specific app for your audience, don’t try to design your Web site for specific browser features. There are far too many browsers available, and it’s no longer considered acceptable to dictate which one your audience will use. Instead, choose a simpler approach that will work for most properly designed browsers and that will degrade gracefully for improperly designed browsers.
2. When it’s possible to detect certain characteristics of a browser such as the device type or screen size automatically (using CSS media queries, for example), you can use this information to load an appropriate style sheet for that context.
3. Avoid Flash. As I’ve written elsewhere, Flash-based sites are quickly becoming “a tale told by an idiot, full of sound and fury, signifying nothing.” Flash is most useful for animations, and can be unmanageable on a device with limited memory, a relatively slow processor, or a low-bandwidth Web connection. (It can also render your site unusable on Apple devices.) As is the case when you choose PDF over HTML or EPUB, choosing Flash also removes agency from the user because they lose control over the display. If you must use Flash, provide smaller, faster-downloading versions; for simple animations, consider using animated GIFs or serial animations instead.
4. Avoid pop-ups, pop-unders, pop-asides, and other intrusive secondary windows. These most often emphasize the designer’s needs rather than the user’s needs. Of course, if your Web site is funded primarily by advertising income, it may be necessary to find other solutions such as banner ads, sponsored links, or “advertorials”.
5. Minimize scripting. Where possible, host the code on your Web server rather than requiring it to run on the user’s mobile device. (This also gives you far more control over security, which is an increasingly important part of the user experience.)
6. Avoid “hovertext” and “tool tips.” It can be difficult to implement such information for use on a mobile device, because it’s difficult for users to know that this information exists and to hold down a finger long enough to cause the hidden text to appear without triggering the feature the text describes. It’s also not an obvious feature of the design; thus, many users will never know the information is there, and careless taps can lead them away from your main site.
7. Although typing is getting easier on tablets, it’s still not as easy as it is on a real keyboard and it remains difficult on phones and phablets. Thus, look for shortcuts such as predictive text (e.g., some e-commerce sites begin presenting keyword categories as you type a few letters in the search field) or pick-lists (e.g., dropdown menus, the clever rotary-wheel menus on iPhones and iPads). This is also useful for presenting navigation links.
8. In forms, make the fields large enough so that it’s easy to tap the correct field, even for large-fingered users.

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:

1. Their “mobile-friendly test” provides a snapshot of what GoogleBot thinks your site will look like on a typical smartphone screen and the main problems it believes exists.
2. Their “Mobile-friendly Websites: Get started” page provides links to several useful resources for making your site more friendly to mobile users and thereby improving your search ranking.

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.

Human-centered solutions

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:

1. Examine the tracking and analytics data on your Web server periodically to see what lessons you can learn about the characteristics of your visitors.
2. Provide clear, easily accessed links that let visitors provide feedback. You can’t learn from your audience if you’re not willing to listen to them. Provide a highly visible link to contact information at the top of each page, not buried at the bottom. Or provide that link at both the top and the bottom of each page!
3. Pay attention to your own experiences: if something annoys you, don’t inflict it on your audience. (The “golden rule” applies in all areas of human interaction, including on the Web.) If you’re new to the design profession, look for inspiration in other designs and play with them until you understand why they work—or fail to work.
4. Consider the integrity of your relationship with your audience. Security software is currently less mature on mobile devices (particularly Android devices) than it is on desktop computers, so make an extra effort to keep your site secure. In particular, seek solutions that you control (e.g., insisting on secure HTTPS connections rather than permitting insecure HTTP connections) rather than placing the burden of security on the user.

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.

In summary

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.

Bibliography

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–2024 Geoffrey Hart. All rights reserved.