Responsive content

If you’re writing for the web, assume your content will be used on a variety of devices. Many websites today are responsive—that is, they reconfigure automatically based on the device in use. Assume your content will be viewed at small sizes.

Keep it short

Short text is always better, but on mobile devices, it’s imperative. Try to write sentences and paragraphs that are short enough to read on a mobile screen without scrolling. It’s hard to read a paragraph when you need to scroll to see the second half.

Try to keep headings to one, short line. Two-line headings take up twice as much scarce vertical space. Use short words in headings, too, if you can. If a customer uses larger fonts to improve accessibility, long words may break across lines.

Short sections—headings and the text that follows—are easier to read on small screens. Short sections also make it easier for customers to stop reading and later pick up where they left off.

Use simple images, charts, and tables

Keep in mind that the width of your customer's screen may be just a couple of inches. Keep content simple so it’s easy to read and understand.

Choose simple images and crop extraneous detail. Always describe the image using alt text if it conveys useful information.

Create infographics carefully. Provide a way for readers to open an infographic in an application where they can enlarge specific areas. Organize infographics in compact sections that readers can magnify and view on a small screen. Or, present individual sections of the infographic within text, and provide a link to the full infographic.

Simplify charts and graphs so readers can easily read the whole thing on a small screen. Craft very short chart titles, metrics labels, and axis labels.

Limit the number of columns in tables and keep the text in each cell brief—ideally one line. Tables with more than a few narrow columns may be hard to read. Too much text in a cell may cause a table to exceed the height of a mobile screen.

Consider flow

As you create content, think about how it will flow on a 360-pixel screen. Typically, content on the right side of the page moves below content on the left side. Will the content still make sense?

Work with the designer or developer to determine where breaks in the content will occur, how much content displays at each potential resolution, and the order in which content will appear on small devices.