Designing Responsive Content Experiences for Mobile Devices
Does this experience sound familiar? You go to a website on your smart phone, but once it loads, you have to pan, pinch and zoom, and pan some more to find the information you’re looking for. It’s a lot of hunting and pecking, it’s frustrating, and it’s definitely not an ideal user experience. Modern websites make use of responsive design to fix this problem. This technique makes it possible for the same document to be displayed optimally across a variety of screen sizes and types, from Mobile Safari on your iPhone to Chrome on your desktop computer, all without custom coding for each device or screen size. When you view a site built using responsive design on your mobile device, your phone knows how to apply different layout rules to reflow the content for the smaller screen size. No more panning and zooming!
Modern responsive web design adapts layouts to different viewing environments through HTML5 and CSS3 features such as fluid grids and media queries. These technologies have emerged over the past few years as the dominant solution for allowing content creators to develop content once and deliver it to be viewed anywhere.
At Inkling, we’ve faced many tricky content reflow issues and have applied these same modern responsive web design techniques to a variety of customer content use cases. These solutions live behind the scenes — our goal is to allow users in Inkling Habitat to focus on authoring their content without having to think about the range of devices where readers will access the publication.
In working through content problems, we’ve learned a number of important lessons along the way. Here are three tips for designing responsively across a variety of digital devices.
Tip 1: Make sure no critical content is lost.
Many of the publications we’ve developed at Inkling are technical in nature and contain complex table figures or long equations. This content is critical for learners, and often readers need to refer back to this material repeatedly. Complex equations or tables present a problem on small smart phone screens, however. As a default approach, we put these elements in blocks with the overflow property set to auto so that a horizontal scrollbar appears when necessary. This is a scalable solution for supporting smaller displays, so that users can always access the full extent of the equation or table, even if it’s larger than can fit on a mobile device screen.
For high-touch content, we’ve also experimented with complex table layouts that reflow into lists on mobile displays. For more on this topic, see this round-up of responsive data table techniques.
Tip 2: Consider the affordances of different devices.
“Affordance” is the term we use in interaction design to refer to the actions an environment makes possible, or easy, to achieve for a user. A door knob offers a few affordances: turning it, pushing it away from you, or pulling it towards you. It’s helpful to think of the affordances of mobile, touch screen devices, and how they differ from desktop computers. On a smart phone, the easiest actions to perform are swiping, tapping, and pinching, and the relative ease of these actions depends on whether someone is using the device with just one hand or two. The phone screen affords a user seeing only a small fraction of the content they can see on, say, a laptop computer.
We designed the annotated image widget in Inkling Habitat to consider the different affordances of mobile vs. desktop and tablet. On larger displays, when a user taps on the poptip icon, they see the embedded information directly on the image. On mobile screens, however, the poptip information appears below so the image isn’t obscured. In implementing widgets for use on both desktop and mobile, we had to consider both mouse and touch interactions, adding support for tapping and swiping in addition to hovering and clicking.
Tip 3: Meet users where they are.
Along with considering the device itself, it’s important to think about what the user is doing when they’re accessing the content. If they are on their phone, it’s likely they are on the go, and they may be more interested in looking something up quickly than reading in a sustained fashion. You might consider making the search feature more prominent or provide a page of quick links in the mobile view of the content for easy access to commonly referenced material. The content can also respond to the end usage condition. If the device is offline, interactive components that depend on live data, such as a weather widget, can’t display normally, so it’s best to display a special message or an alternate, static version of the content that is always relevant.
I hope these tips are helpful to you as you’re considering how your content should be displayed across different screen sizes and end user conditions. Would love your feedback – how are you approaching responsive design for mobile, especially when the structure of the content becomes more complex?
