Do you create editorial content? Stop making some of the common mistakes I still see all too often among my clients, or in my daily life as a reader.
Here is a practical guide to creating accessible content suitable for all media.
Because today, so that your content is read, understood and appreciated, editorial quality is no longer enough. It is also necessary take care of content design : its format, its structure, its readability and its ability to adapt to the real uses of your readers.
Understanding the importance of multi-screen adaptation
Even today, we see too much content designed primarily for desktop screens, poorly structured, difficult to read, and paradoxically not always optimized, even for large screens. And yet, by 2025, more than 70% of the web traffic global comes from the mobile devices.
On smartphones, these articles become endless, compact, poorly formatted and therefore quickly abandoned.
The goal is to write and structure your content so that it's suitable for touch navigation and fast scrolling, but also looks good on a large screen. To overcome these issues, a mobile-first approach is essential.
The importance of good prioritization with clear titles
A good hierarchy helps to scan quickly and understand the structure of the article.
For mobile, favor short and punchy titlesA good H2 or H3 heading should allow a reader to understand the article without reading the body of the text. If we were to extract only the H1, H2 and H3 from your content, we should get a clear summary of the whole thing.
Typical hierarchy:
- H1: Unique title of the page
- H2: Main sections (every 300 to 500 words)
- H3: Subsections if necessary
It is essential to visually differentiate the titles by their size while respecting a consistent scale. For this you can use a modular ladder often used when designing a design system (e.g. 1.250, 1.333, etc.) to create a smooth progression between levels.
Text and paragraph management
For smooth and enjoyable reading, start with a centered grid with a main column. Choose a clear typography with an good contrast to avoid any visual fatigue and never justify the text, it creates irregular spacing which makes reading difficult.
Use bold for keywords and italics for nuances, spacing spacing should be used spacing between 1.5 and 1.7 to make the text more spacious and easier to read, especially on screen.
On mobile: best practices for readable content
Mobile requires more rigor in the structuring of information; good content must be fluid, airy and quick to navigate.
- Text should never stick to the edges of the screen, remember to add side margins of at least 16 px
- Minimum font size between 14 and 16 px, to be readable
- Avoid blocks of text that are too dense, as they discourage rapid reading when scrolling.
- 3 to 6 visual lines
On desktop: structure, ventilate, limit the width
Even on a large screen, your content shouldn't span the entire width!
- Ideal reading width between 600 and 750 px maximum
- Text size from 16 to 18 px
- Recommended line length, 60 to 75 characters per line
- 2 to 4 lines maximum per paragraph
Highlight the essentials without overloading
You can structure content using discreet visual elements like bulleted lists in the text to highlight key points, framed to report additional information or warnings, and callout boxes to highlight definitions, important data or summaries.
These elements help to pace the reading, draw attention to what really matters, and improve overall understanding of the content. However, too many visual elements, as mentioned above, can undermine hierarchy.
Example of NN/g article https://www.nngroup.com/articles/ai-integration-condens/ on mobile and desktop: clear structure, legible typography and airy layout for comfortable reading.
Links and Call to Actions (CTA)
Links in editorial content
Internal and external links enrich an article, improve navigation, strengthen credibility, and contribute to SEO. But their integration must be carefully considered.
Users must be able to quickly identify what is interactive, a link must be clearly identifiable, to make it accessible to everyone including visually impaired or color blind people, a link must be unambiguously identifiable, by convention we often put a different color with an underline.
It is also not recommended to turn a title (H1, H2, H3) into a link, unless it is an internal link to an anchor. In addition, the wording of the link must be descriptive: avoid vague “click here” statements, in favor of precise anchors like “see our complete guide to editorial UX.”
CTA
To be effective, a CTA must use a clear, concise, and engaging action verb for example: Download the guide, Get a quote ou See the full articleThe promised action should always match the content or page that follows, to avoid “click traps,” which are often frustrating for users.
Beware of CTAs disguised as simple hyperlinks, as they risk going unnoticed. To maximize their effectiveness, CTAs must be immediately identifiable, both visually and semantically.
Place your CTAs strategically, often after a block of information or at the end of the article. Don't hesitate to repeat them in long content in the introduction, middle, and conclusion, as long as their presence remains natural and non-intrusive.
Visual elements
Images
Images play a key role in the reading experience, they allow us to make reading enjoyable, reinforce messages and add visual information.
Place images strategically, after an explanatory paragraph, before an important point, to capture attention. Between paragraphs, they allow a break, a kind of visual break or narrative break. Very effective for to rekindle the reader's attention, illustrate a strong concept or immerse in an atmosphere.
Avoid uninteresting "decorative" images or overly generic stock images. Images should clearly illustrate the idea or emotion of the text. However, be careful: too many images slow down loading and distract from reading.
And regarding accessibility, don't forget to name images clearly to make them clear and descriptive, and think about the descriptive ALT tag for screen readers.
Example of NN/g article https://www.nngroup.com/articles/ux-copy-sizes/ the image reinforces understanding while respecting the reading pace, a visual designed for all media.
Infographics, Illustrations & Graphics
These visual elements play a vital role: they help effectively summarize key information, simplify complex concepts, improve memorization, and encourage content sharing.
To make them truly useful, make sure they are designed in a clear and readable manner, with a sufficiently large text, especially for mobile browsing. Remember that on smartphones, the image is displayed in a reduced format, avoid forcing the user to zoom in, and make sure that the information is visible at first glance, as on a desktop screen.
However, the message of an illustration or infographic shouldn't rely solely on the visual. Consider accompanying it with descriptive text so that the information is also accessible to people who can't see the image, especially those using a screen reader. If the image contains important data, describe it clearly and completely.
Videos
They offer an interesting alternative to traditional reading and can help supplement information. However, add a summary or key points Additionally, this helps users who prefer to read or are unable to watch the video.
Host videos on platforms like YouTube or Vimeo so as not to increase the loading time of your page. Remember to turn on or activate subtitles to improve accessibility and allow viewing without sound.
In conclusion
Good editorial content is no longer just about good text. It's a reading experience in its own right, where form serves content, where ergonomics contributes as much to impact as editorial quality. It is about seeking fluidity, hierarchy, balance. In short, it is about writing with clarity, but also with empathy.
You shouldn't neglect the desktop experience, but content should be designed mobile-first, to adapt to all formats. Remember to test your layout on real mobile devices, not just in the preview tool.
Anaëlle Staelen, UX/UI designer and Product designer at UX-Republic
