{"id":8663,"date":"2023-07-05T14:01:46","date_gmt":"2023-07-05T14:01:46","guid":{"rendered":"https:\/\/www.uxdesigninstitute.com\/blog\/?p=8663"},"modified":"2024-01-16T12:31:13","modified_gmt":"2024-01-16T12:31:13","slug":"designing-for-mobile","status":"publish","type":"post","link":"https:\/\/www.uxdesigninstitute.com\/blog\/designing-for-mobile\/","title":{"rendered":"Designing for mobile: 5 best practices for content layout"},"content":{"rendered":"

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.\u00a0<\/span><\/p>\n

According to <\/span>Techjury<\/span><\/a>, adults in the US alone spend an average of<\/span> five and a half hours<\/b> each day on their mobile devices, and it\u2019s predicted that <\/span>72.6% of the world\u2019s internet users will only access the web using their smartphones by 2025<\/span><\/a>.\u00a0<\/span><\/p>\n

As the use of mobile devices continues to skyrocket, designing well-structured, accessible content for mobile has never been more important. It\u2019s not enough to adopt a \u201cone size fits all\u201d 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.\u00a0<\/span><\/p>\n

Whether you\u2019re a <\/span>content designer<\/span><\/a>, UX writer, or product designer; this practical blog post explores five best practices for designing mobile content layouts that are functional and beautiful.\u00a0\u00a0<\/span><\/p>\n

    \n
  1. Mobile design vs. desktop design: Content layout<\/span><\/a><\/li>\n
  2. 5 best practices for content layout when designing for mobile\u00a0<\/span><\/a><\/li>\n
  3. Final thoughts<\/span><\/a><\/li>\n<\/ol>\n
    \n\t
    \n\t\t
    \n\t\t\t
    \n \n

    [GET CERTIFIED IN UX]<\/p>\n Take our Professional Diploma in UX Design course<\/span>\n <\/a>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/section>\n\n

    <\/a>Mobile design vs. desktop design: Content layout<\/strong><\/h2>\n

    Before we dive into best practices for mobile content layout, let\u2019s first understand why designing for mobile content requires a different approach than designing content for desktop.\u00a0<\/span><\/p>\n

    Screen size and aspect ratio\u00a0<\/strong><\/h3>\n

    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\u2014meaning the layout of the content needs to be optimised, and in some cases, omit any unnecessary information.\u00a0<\/span><\/p>\n

    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.<\/span><\/p>\n

    Read next:<\/b> A complete guide to responsive grids (and how to use them)<\/span><\/a><\/p>\n

    User behaviour\u00a0<\/strong><\/h3>\n

    Many mobile users consume content on the go, with limited time. As a result, mobile content needs to be presented in a way that\u2019s 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.\u00a0<\/span><\/p>\n

    Mobile apps<\/strong><\/h3>\n

    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.<\/span><\/p>\n

    \n\t
    \n\t\t
    \n\t\t\t
    \n \n

    [GET CERTIFIED IN UI DESIGN]<\/p>\n Take our Professional Certificate in UI Design course<\/span>\n <\/a>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/section>\n\n

    <\/a>5 best practices for content layout when designing for mobile\u00a0<\/strong><\/h2>\n

    Now we\u2019ve got a handle on some of the key considerations for mobile content layouts, let\u2019s go through five actionable best practices you can use to guide your mobile content design process.\u00a0<\/span><\/p>\n

    1. Understand your audience<\/strong><\/h3>\n

    The first step in designing effective content layouts for mobile devices is to understand your audience. When conducting <\/span>user research,<\/span><\/a> consider factors such as age, background, and location\u2014as well as how your audience is accessing the content.\u00a0<\/span><\/p>\n

    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?\u00a0<\/span><\/p>\n

    Understanding your audience will help you structure the content layout in a way that helps them find what they need, quickly. Once you\u2019ve carried out your user research, use it to create user flows for each page.\u00a0<\/span><\/p>\n

    2. Optimise for touch<\/strong><\/h3>\n

    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\u2019s enough space between elements to prevent accidental clicks.<\/span><\/p>\n

    When designing a content layout for mobile, it\u2019s also important to ensure users can tap and access different elements within their natural thumb reach\u2014as well as optimising the layout for both left-handed and right-handed users. Instead of scrolling, it\u2019s worth coming up with creative ways users can interact with the content, such as swiping, or pinch-to-zoom.\u00a0<\/span><\/p>\n

    3. Think about signposting and structure<\/strong><\/h3>\n

    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\u2019s also important to think about <\/span>information architecture<\/span><\/a>; what information do users want to know about first? How can we help them navigate the site?\u00a0\u00a0<\/span><\/p>\n

    With limited space on mobile screens, there\u2019s a lot less information that can be displayed on each page\u2014so it\u2019s vital to use descriptive and effective signposting to tell the users exactly where to go to find what they\u2019re 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.\u00a0<\/span><\/p>\n

    4. Find clever ways to hide and condense information<\/strong><\/h3>\n

    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\u2019t necessarily essential to the user\u2014but easy to expand when they want to learn more.\u00a0<\/span><\/p>\n

    Additionally, using progressive disclosure to gradually reveal information to the user as they navigate through the content means they\u2019re still getting everything they would on a desktop, but without information overload.<\/span><\/p>\n

    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.\u00a0<\/span><\/p>\n

    5. Don’t let accessibility fall by the wayside<\/strong><\/h3>\n

    Accessibility is an essential consideration for all content designers, especially when it comes to designing for mobile. It\u2019s crucial that the content is easy to access and navigate for all users; including people of varying abilities, tech-literacy levels, and backgrounds.\u00a0<\/span><\/p>\n

    For example, many users with visual impairments rely on screen readers to access digital content on their mobile devices\u2014so the content needs to incorporate descriptive text, headings, and links.\u00a0<\/span><\/p>\n

    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.<\/span><\/p>\n

    Learn more about how to design accessible and inclusive content (and why it matters) in this guide.<\/span><\/p>\n

    <\/a>Final thoughts<\/strong><\/h2>\n

    And that\u2019s a wrap on our guide to designing beautiful, effective, and accessible content layouts for mobile! As we\u2019ve explored in this blog post, users access content very differently on mobile\u2014and content designers face unique challenges in ensuring aspects of the user experience aren\u2019t lost on mobile.\u00a0<\/span><\/p>\n

    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.<\/span><\/p>\n

    Overall, mobile is certainly here to stay\u2014and is quickly becoming the preferred medium for accessing information. So it\u2019s important to develop mobile-first content design strategies (rather than treating mobile like an afterthought)!<\/span><\/p>\n

    If you enjoyed this blog post, we think you\u2019ll also like these:\u00a0<\/span><\/p>\n