3 Tips for Using Responsive Web Design

There’s nothing more frustrating for users than opening up your content on their mobile devices, only to discover that it hasn’t been mobile-optimized. They’ll pan, pinch and zoom, and pan some more to find the information they need, or give up altogether. It’s not an ideal situation for anyone.

Enter responsive web design. Responsive design ensures that your content will have optimal display across a variety of screen sizes and types–from Mobile Safari on your iPhone to Chrome on your desktop computer–without custom coding for each device or screen size. Through HTML5 and CSS3 features (such as fluid grids and media queries), each device knows how to apply different layout rules to reflow the content for smaller screen sizes. In other words, no more panning and zooming!

At Inkling, we’ve applied responsive web design techniques to a variety of uses-cases when tackling tricky content reflow issues. Most often, these solutions live behind the scenes–our goal is to allow content creators in Inkling Habitat to focus on authoring their content, and not on the range of devices where their readers will access it. Still, not everything can be automated, and so today we’re sharing a few important lessons that we’ve learned while designing responsively.

Here are three tips that you should consider when designing for a variety of digital devices:

Tip 1: Make sure that critical content isn’t lost. 

A lot of the eLearning content that we’ve published at Inkling contains complex table figures or long equations. This content is critical for learners, but is difficult to replicate on small smartphone screens. We typically approach this challenge by putting these elements in blocks with the overflow property set to auto, so that a horizontal scrollbar appears when necessary. This way, users can always access the full extent of the equation or table, even if it’s larger than the 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 an interaction design term that refers to the actions made possible, or easy, in any given environment. For example, on a smartphone, 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. It’s helpful to think of the affordances of mobile, touchscreen devices, and how they differ from desktop computers.

In Inkling Habitat, we designed the annotated image widget in relation to the different affordances of mobile, desktop and tablet. We considered both mouse and touch interactions, adding support for tapping and swiping, in addition to hovering and clicking. For example, 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 that the image isn’t obscured.

Tip 3: Meet users where they are.

Along with considering the device itself, it’s important to think about what users are doing when accessing the content. Mobile use likely means that they’re on the go and are probably more interested in looking something up quickly, rather than reading in-depth. To that end, you might consider making the search feature more prominent or provide a page of quick links 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.

The bottom line:

Even though you may have to overcome a few obstacles to institute responsive web design, giving your readers ease of use across all devices makes it worthwhile. In the end, imagining your content as reflowable blocks of code offers much more freedom in its display on the many available devices now, and in the future.

If you’re interested in learning more about responsive design, watch our webinar on the five must-ask questions for creating successful digital content. We talk about how Inkling has worked with the world’s top publishers to save time and money, while still producing a better digital product.