Once upon a time, phones were just for making calls (hard to believe, right?) Today, we use our smartphones for shopping, connecting, entertainment, research, work, and so much more.
According to Techjury, adults in the US alone spend an average of five and a half hours each day on their mobile devices, and it’s predicted that 72.6% of the world’s internet users will only access the web using their smartphones by 2025.
As the use of mobile devices continues to skyrocket, designing well-structured, accessible content for mobile has never been more important. It’s not enough to adopt a “one size fits all” approach when creating engaging experiences; understanding how users interact with different types of content on mobile is essential when designing for mobile-first content layouts.
Whether you’re a content designer, UX writer, or product designer; this practical blog post explores five best practices for designing mobile content layouts that are functional and beautiful.
- Mobile design vs. desktop design: Content layout
- 5 best practices for content layout when designing for mobile
- Final thoughts
Mobile design vs. desktop design: Content layout
Before we dive into best practices for mobile content layout, let’s first understand why designing for mobile content requires a different approach than designing content for desktop.
Screen size and aspect ratio
Large desktop screens allow for more complex layouts with multiple columns, sidebars, and other design elements. On smaller mobile screens (and with limited bandwidth), content designers have less space to display content—meaning the layout of the content needs to be optimised, and in some cases, omit any unnecessary information.
Mobile devices also have a different aspect ratio than desktops, so the content design needs to be flexible and adaptable to different screen sizes and orientations. In other words, the content design needs to be responsive to allow the content to display properly on mobile.
Read next: A complete guide to responsive grids (and how to use them)
User behaviour
Many mobile users consume content on the go, with limited time. As a result, mobile content needs to be presented in a way that’s easy to digest quickly. This means steering away from longer paragraphs and in-depth explanations, and towards clear signposting and short paragraphs. Headings, subheadings, bullet points, and other visual elements can break up the text and make it more scannable.
Mobile apps
Many mobile users access content through apps, which often require a specific (and more restrictive) layout and design, i.e., limiting the amount of information on each screen to keep scrolling to a minimum. As a content designer, getting familiar with these app design guidelines will help keep your content layout app-friendly.
5 best practices for content layout when designing for mobile
Now we’ve got a handle on some of the key considerations for mobile content layouts, let’s go through five actionable best practices you can use to guide your mobile content design process.
1. Understand your audience
The first step in designing effective content layouts for mobile devices is to understand your audience. When conducting user research, consider factors such as age, background, and location—as well as how your audience is accessing the content.
Are they using a smartphone or a tablet? Are they on-the-go or at their desk? What are their needs and preferences? What goals are they trying to achieve? Are they using mobile out of need, or is it their preferred medium?
Understanding your audience will help you structure the content layout in a way that helps them find what they need, quickly. Once you’ve carried out your user research, use it to create user flows for each page.
2. Optimise for touch
Mobile devices are designed for touch interactions, and content designers need to optimise their content layouts accordingly. Similarly to UX design, this means making everything (like buttons and links) large enough to tap. You should also ensure there’s enough space between elements to prevent accidental clicks.
When designing a content layout for mobile, it’s also important to ensure users can tap and access different elements within their natural thumb reach—as well as optimising the layout for both left-handed and right-handed users. Instead of scrolling, it’s worth coming up with creative ways users can interact with the content, such as swiping, or pinch-to-zoom.
3. Think about signposting and structure
Mobile users tend to have shorter attention spans, so it’s important to make the content easy to navigate and understand. Headings, subheadings, and bullet points can break up the text and make it more scannable. It’s also important to think about information architecture; what information do users want to know about first? How can we help them navigate the site?
With limited space on mobile screens, there’s a lot less information that can be displayed on each page—so it’s vital to use descriptive and effective signposting to tell the users exactly where to go to find what they’re looking for. This goes back to the user flows: The structure of the content should allow for a seamless flow from each section, and page, to the next.
4. Find clever ways to hide and condense information
With limited screen space, it’s important to find clever ways to hide and condense information. Accordions and expandable sections are great for hiding information that isn’t necessarily essential to the user—but easy to expand when they want to learn more.
Additionally, using progressive disclosure to gradually reveal information to the user as they navigate through the content means they’re still getting everything they would on a desktop, but without information overload.
Supplementing text with visual aids, like infographics or icons, is a great way to communicate information faster (and by taking up less space). Images and videos also help to convey information in a more engaging, user-friendly way. For example, rather than reading a text explaining a product feature, users could listen to an audio explaining the features which frees up their hands while in transit.
5. Don’t let accessibility fall by the wayside
Accessibility is an essential consideration for all content designers, especially when it comes to designing for mobile. It’s crucial that the content is easy to access and navigate for all users; including people of varying abilities, tech-literacy levels, and backgrounds.
For example, many users with visual impairments rely on screen readers to access digital content on their mobile devices—so the content needs to incorporate descriptive text, headings, and links.
Smaller screens also make the content harder to read and access for people with visual and cognitive impairments. Effective use of contrast, appropriate font sizes, and clear headings will make your mobile content layout accessible and understandable for a diverse audience.
Learn more about how to design accessible and inclusive content (and why it matters) in this guide.
Final thoughts
And that’s a wrap on our guide to designing beautiful, effective, and accessible content layouts for mobile! As we’ve explored in this blog post, users access content very differently on mobile—and content designers face unique challenges in ensuring aspects of the user experience aren’t lost on mobile.
But there are also some exciting positives of designing content on mobile; like finding creative ways to help users navigate the content using touch, and coming up with clever ways to hide, show, and convey key pieces of information on a limited screen size.
Overall, mobile is certainly here to stay—and is quickly becoming the preferred medium for accessing information. So it’s important to develop mobile-first content design strategies (rather than treating mobile like an afterthought)!
If you enjoyed this blog post, we think you’ll also like these:
- The 5 elements of UX design explained
- How to record mobile usability tests
- The future of UX writing and content design: 5 major trends
