Web Development Essentials for Content Designers: Device Consistency

This series offers print designers transitioning from InDesign to HTML an introduction to web development. The fifth and final post builds upon my previous posts on images, interactivity, composition, and page reflow to explain how to render consist design across devices. 

Cascading Style Sheets (CSS), or the web’s design language, is arguably the most important technical tool for digital content designers. While HTML serves as the foundation for responsive digital content, CSS communicates how that content should look and feel. Since it’s a declarative language, designers must specify their intended designs, and then rely on devices or browsers to render it accurately. But what happens when a device refuses to respond to our complex digital design?

Inconsistencies between devices is a common problem for many digital designers. Sometimes these inconsistencies are small and unnoticeable, such as a slight change in positioning, while others are less manageable, such as missing support for a feature. In this post, I’ll explain some common design inconsistencies, as well as how to best mitigate these challenges.

Common Inconsistencies

In content design, there are several areas that are notorious for their differences between devices. Typography tends to be one of the most noticeable differences, due in part to the complexity of type design and the long, troubled history of font support on devices and browsers. The same font might appear wider or bolder, depending on how the device has chosen to render the typeface, size and weight.

Digital reading experiences also have different color profiles, meaning some devices might not be able to render your chosen color with the same fidelity as the device on which you designed. Luckily, this is often less noticeable because the difference is so small that our eye is unable to perceive the inconsistency.

Sometimes, the inconsistencies can have a dramatic impact on how the content is rendered, and even some “fully supported” features may vary between devices. Use support websites like caniuse.com to uncover subtle differences and levels of support.

Test, Test, Test

The best way to understand how your content will look on different devices is to look at your content on different devices. Test thoroughly on the devices and browsers you know your content will be viewed on. There are also great tools for adding some automation to the process. Apps like Browserstack and Sauce Labs will allow you to view your content on a wide range of devices, test different features, take photos of visual changes, and store the results. Advanced users can even setup tools to highlight the differences between two different devices to help spot the inconsistencies.

Pick Your Battles

It will be near impossible to remedy all of the visual inconsistencies, so make sure to focus on the ones that matter. Your readers probably aren’t testing your content on as many devices as you are, so they might not notice small differences. Start with the major differences that affect your content’s overall layout and legibility and work towards more granular fixes, until you’ve reached a point where your design is consistent enough across all intended reading experiences. Good enough is key, here–chances are that support capabilities will change as new devices come online, so try not to sweat the small stuff.

The Bottom Line

When translating your content design onto a variety of devices and browsers, you shouldn’t have to settle for a less-then-ideal reading experience. However, when it’s a matter of function over form, sometimes it’s important to make to small compromises. Be conscious of design aspects that are prone to inconsistencies and always remember to test and re-test. After a few quick fixes, your readers will experience beautiful content design no matter which browser or device that they’re using.

For more information on how content designers can use Inkling Habitat to create beautiful digital content without a web developer on-hand, request a demo from our sales team.