Make Your Text Content Mobile-Friendly

Kerry Butters’ post earlier this week on Content Strategy for Mobile Web Design was pretty intriguing.

Kerry advises designers to look at the content they need to present on a mobile (or responsive) site and use that to inform the design. She mentions a number of factors to consider, including available space, presentation of CTAs, image usage, and more.

But her article, targeted at designers, sort of suggests that designers will be the ones who need to adapt their designs to the content that needs to be presented.

Let’s remind ourselves that the process of design is ideally a negotiation with content. Content doesn’t usually arrive complete and correct on a silver platter, perfect and unalterable and ready for the designer to work with.

Frequently in the design process, compromises need to be made to get the content to fit the design, and the design to fit the content. This is how the best executions are produced: through collaboration.

For example, in her list of considerations, Kerry includes the question “How can you reduce the amount of content for different device sizes?”

If you ask me, that’s a question your writer should most definitely be involved in solving with the designer (and UX team).

I wanted to present one handy, simple technique that creative team can use to shape text content for mobile devices. Get excited! It’s…

Making breaks

Okay, so it doesn’t sound like rocket science, and it’s not. The technique is to take a complete piece of text content and cut it—end it—at specific points on specific devices.

Essentially, you’re providing a cut-down version of a given story for users of different devices. Kerry mentions the ROI potential of mobile-first development in her post, and this is definitely a way to boost that return.

As I say, it sounds simple enough. But there’s more to making breaks in content than just sticking in a tag.

To make breaks in content, you need breakable content: content that remains logical and complete whether it’s broken at 20 words (for a teaser), 120 words (for a bite-sized mini-post), or 1200 words (for a complete article).

This is why you need a writer involved. If you’re developing a mobile (or mobile-first) presence, your content needs to take a mobile-first approach from this point forward. Mobile needs to be embedded in your content approach, and your style guide.

Let’s see how that might play out in practice.

Breakable headlines and titles

Different businesses have different approaches to headlines and titles. Since SitePoint’s a publisher of articles, its titles tend to be fairly long.

The headline on a product landing page is more likely to be short, like Mailchimp‘s “Send Better Mail”.

Your help content might use two-part headlines, with the first part listing the topic, and the second part giving the item detail (e.g. “Editing images: Cropping and resizing basics”).

To make your headlines breakable, you need to present the meat at the beginning, so that if the entire headline goes over the character count for a specific device, the cut content will give users something they can use.

That help content title isn’t breakable. If all of the help articles have been developed using this convention, you may have a problem. Its solution may involve design (e.g. presenting help in categories separated by whitespace, dividers, etc.) as well as help from a writer to reformulate the titles so that they’re easier to break—and to read—on any device.

A more breakable title for that help article may be:

Crop and resize images (Image editing basics)

This reduces character count, and puts the keywords at the beginning (keywords being, in this case, the words the user is likely to scan for).

It also re-prioritizes the information so that we can break the title before the parentheses, which contain ancillary information, and have the thing still make sense in contexts where space is an issue.

Breakable blurbs teasers and intros

We can apply the ideas we just discussed for headlines to teasers and intros too. Put the most important information first, fitting the lowest word-count you need to. Then build it out further for devices on which you have more room with extra, equally tantalizing information.

I say “tantalizing” without irony. There’s no point taking this approach if everything that comes after the initial sentence is just bulk, included for the sake of filling a space the designer has created for presentation on a larger-sized device.

Don’t add words because you can, or because the designer’s allowed room for them. Make sure, as far as is practicable, that the design process addresses real content so that the finished design will allow you to easily present your information in the best possible way.

Breakable paragraphs

When it comes to breaking paragraphs, the creative team needs to think very carefully.

Paragraph breaks are not a design element. They serve a practical function in reading comprehension and understanding.

Within a paragraph, we also need to consider things like line spacing, which can affect how easy it is for readers on mobile devices to tap your in-text links. More spacing makes even compact paras longer, which can mean more scrolling, which can be less than ideal.

Ultimately you need to create a design that caters to paragraphs of an appropriate length for your content and readers, and the devices they’re using.

If you want to add in extra breaks for certain devices for some reason, you need to make sure the ideas in each sentence are self-contained enough to make sense if a paragraph break is inserted. And you’ll need to insert those breaks on a case-by-case basis.

Breakable stories

We’ve all heard of the “inverted pyramid” approach to writing content for the web. Developed by the newspaper industry as a way to fit content around ads (!), this approach puts the most important content up-front and includes progressively less and less essential information further into the article.

Unless you want your website to read like one big media release, I don’t advise the unskilled, wholesale application of the inverted pyramid writing style.

That said, the idea of telling stories within stories in your content is useful online, where attention spans are short even among users of old-fashioned desktop computers with massive monitors.

There are numerous ways to create breakable stories: through careful text content construction (that is, writing), chunking text and linking to the longer-form details for those who want more, taking care to provide a complete summary of what you’re talking about at the outset, so users can decide whether to keep reading (or click to see the longer content) or not, and so on.

The bottom line is, if you want your body content to be easily breakable for presentation on different devices, you need to develop it with that goal in mind.

Extremely careful paragraph and story construction can actually allow you to select, say, the subhead and first and last paragraphs of each section in an article to create a smaller, punchier, but still coherent, informative, and complete mini-post for a certain device or practical application.

Device-targeting content

Making text content easily breakable is more practical in some cases than others, but generally speaking, I find most content can be made more breakable once you have a look at it.

Once it is breakable, you can find ways to present your messages, and your brand, successfully no matter what space you have available on a given device. And get more bang for your content-creation buck.

Have you had experience reformulating content so that it can be easily broken for presentation in different contexts? Tell us about it in the comments.