Responsive Web Design: Tailoring Your Content to Fit Smaller Screens


*Due to web issues, we lost information on who authored this piece.  If this is your work, please let us know and we will give you publishing credit.*

We’re faced with a greater number of devices today. Technical communicators must make their content easy to access on not only on desktop and laptop computers, but also on mobile phones, tablets, and other devices with varying screen sizes. The solution to this is responsive web design (RWD). Responsive design “frees our content” to work anywhere, anytime. It means we no longer need to spend time designing and creating deliverables for different devices.

Creating responsive outputs means that we need to adopt a “mobile first” mindset. Our content needs to be designed to work well on mobile (smaller) screens first because when we write/make other changes for mobile, then the content will work well on tablets, the desktop, etc. The constraints of the mobile context force us to focus on what content is essential and how to present that content as quickly as possible.

Here are a few “mobile first” best practices, some technical and some content changes:

Keep image files small. Large image files will increase load time, which is something mobile users have no patience for, in fact, 74% of mobile users will leave a website that takes more than 5 seconds to load.

Write concisely. Always an excellent best practice, but now more important than ever. And this isn’t just about screen size; those working on smaller devices have less patience to wade through content. (Another benefit: this also reduces translation costs.)

Employ progressive information disclosure. This helps maintain the focus of the reader’s attention by reducing clutter and presenting only the minimum data required for a task, thus making information easier to find. Using collapsible text and inline text (dynamic help features) can be good solutions.

Improve navigation. Add related links at the end of topics so there’s no need to use the device’s “back” button. This makes it is easier to navigate away from your content.

Make links easier to use. Don’t bury too many links in the same paragraph because they will be harder to use on mobile devices. Consider making the most important links into buttons.

Streamline your table of contents. A TOC that is 4-5 levels deep is more challenging to navigate on mobile devices.

Avoid second, third, etc. level bullets and numbering. It is harder to see the relationships between levels on smaller devices.

Take a look at your tables. Some tables might have too many columns and can be very lengthy. Simplify them, and eliminate the ones that aren’t necessary. You can take advantage of responsive table reflow, but you will want to verify that your tables are usable on smaller devices.

Clean up your terminology. Your content needs to work on devices where you tap, and those where you click. Avoid using device-specific terms.

Creating purposeful, versatile content for the mobile web is one thing we can all strive toward.

Have something to add? Please share it in the comments.