Make Your Text Content Mobile-Friendly

Share this article

make your text 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.

Frequently Asked Questions (FAQs) about Making Text Content Mobile-Friendly

What is the importance of making text content mobile-friendly?

With the increasing use of mobile devices to access the internet, it’s crucial to ensure that your text content is mobile-friendly. This means that the content should be easily readable and navigable on a small screen. Mobile-friendly content improves user experience, increases the time spent on your site, and can even boost your search engine rankings. Google, for instance, prioritizes mobile-friendly websites in its search results.

How can I make my text content mobile-friendly?

There are several strategies to make your text content mobile-friendly. First, use responsive design, which automatically adjusts the layout of your website to fit the screen size of the device being used. Second, keep your paragraphs short and use subheadings to break up the text. Third, use a legible font size and type. Lastly, ensure that your website loads quickly on mobile devices.

What is the difference between mobile-friendly and mobile-responsive design?

While both terms are often used interchangeably, there is a slight difference. Mobile-friendly design means that a website’s content and layout will look and function well on any mobile device. On the other hand, mobile-responsive design refers to a website’s ability to dynamically adjust its layout and content based on the screen size and orientation of the device being used.

How does mobile-friendly text content affect SEO?

Mobile-friendly text content can significantly impact your SEO. Google uses mobile-friendliness as a ranking factor, so websites that are not optimized for mobile devices may rank lower in search results. Additionally, mobile-friendly websites often have lower bounce rates and higher engagement, which can also improve your SEO.

What tools can I use to test if my text content is mobile-friendly?

There are several tools available to test if your text content is mobile-friendly. Google’s Mobile-Friendly Test is one of the most popular. It allows you to enter a URL and then provides a report on whether the page is mobile-friendly and what issues, if any, need to be addressed.

How can I optimize my text content for different mobile devices?

To optimize your text content for different mobile devices, use responsive design. This ensures that your content automatically adjusts to fit the screen size of the device being used. Also, consider the user experience on different devices. For instance, make sure that links and buttons are large enough to be easily tapped on a touchscreen.

What is the ideal font size for mobile-friendly text content?

The ideal font size for mobile-friendly text content is 16px for body text. However, the exact size may vary depending on the font you’re using. It’s important to ensure that your text is easily readable on a small screen without requiring the user to zoom in.

How can I make my website load faster on mobile devices?

To make your website load faster on mobile devices, optimize your images, use browser caching, minimize the use of custom fonts, and reduce the number of redirects. You can also use tools like Google’s PageSpeed Insights to identify any issues that may be slowing down your site.

How does mobile-friendly text content improve user experience?

Mobile-friendly text content improves user experience by making it easier for users to read and navigate your website on a small screen. It also reduces the likelihood of users leaving your site out of frustration, which can increase your site’s engagement and conversion rates.

Can I make my existing website mobile-friendly, or do I need to build a new one?

It’s possible to make your existing website mobile-friendly by implementing responsive design and making other necessary adjustments. However, in some cases, it may be more efficient to build a new, mobile-first website, especially if your current site is very old or complex.

Georgina LaidlawGeorgina Laidlaw
View Author

Georgina has more than fifteen years' experience writing and editing for web, print and voice. With a background in marketing and a passion for words, the time Georgina spent with companies like Sausage Software and cemented her lasting interest in the media, persuasion, and communications culture.

Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week
Loading form