A complete guide to designing for bobile

Designing for mobile means creating websites that are easy to read, navigate and use on small touchscreens. With over 60% of web traffic now coming from mobile devices, it’s essential to prioritise key content, use large tap targets, keep layouts simple and ensure pages load quickly, while supporting accessibility features such as zoom and both screen orientations.

The benefits of mobile-friendly design

Meeting your audience on their preferred platform offers several advantages of having an enhanced mobile design.

Business benefits

A considered mobile site or app can lead to increased conversions as users more easily complete actions and improved brand perception, with increased trust and loyalty from users who value seamless experiences.

SEO impact

Google prioritises mobile-optimised websites in its search rankings. Regardless of how well the desktop version of your site performs, you risk your ranking being hurt if your mobile site isn’t up to scratch.

Furthermore, poorly designed mobile sites often experience high bounce rates and low dwell times. Google interprets these metrics as indicators of a poor user experience, which can further harm your SEO.

How do users behave on mobile websites?

Users interact with mobile websites differently than they do on desktops. They typically have shorter attention spans. They are looking for quick answers, solutions and entertainment.

To cater to the fast-paced expectations of mobile users, mobile sites must provide concise and relevant content quickly. Read on to discover how to design mobile websites that effectively meet these needs.

Key principles of mobile design

Responsive

Responsive designs are flexible and adapt seamlessly to an array of different screen sizes, which means that however a user accesses the site, they will have a consistent experience.

To achieve a responsive design, you should create layouts for different device sizes, including desktop, mobile and tablet. It’s essential to specify breakpoints and alternative layouts for each component to avoid horizontal scrolling or minimised versions of modules, both of which can hinder usability.

Navigable

When designing for smaller screens, it’s crucial to streamline your designs to prevent cluttered pages.

One effective solution is to use a collapsible hamburger menu for navigation, which keeps the screen clear when the menu is not needed. Additionally, consider incorporating carousels and accordions to keep pages compact, allowing users to access more information only if they choose to.

Since you are designing for touch screens, ensure that links and buttons are easily tappable and not placed too close together, as users are not as precise with their fingers as they would be with a mouse.

Readable

Optimise font sizes, line spacing and contrast for smaller screens. Make sure you limit dense paragraphs to allow quick scanning for relevant information. This will help mobile readability.

It’s important to discuss internally the content you want to prioritise on mobile to ensure the page is arranged to display key content whilst keeping the page streamlined.

Tailored

Make the most of mobile-specific features:

• Click-to-call buttons for contact information
• Auto-detection for location-based services like Maps.
• Simplified forms with dropdowns, autofill options and large input fields.
• Swipe – the benefit of a touch screen is that you can incorporate touch gestures into your design, such as swiping for carousels.

All of these features reduce the cognitive effort a user needs to exercise and help to create sites that are intuitive and engaging. A well-designed site can lead to higher user satisfaction as users are more likely to find what they need or complete their goals more quickly and without frustration.

Keep accessibility in mind

Designing for mobile introduces a whole new set of considerations for accessibility. Smaller screens and touch interactions can pose challenges for users with disabilities, and it is essential to address these issues throughout the processes of research, UX/UI design and development.

If you’d like to learn more about accessibility, we’ve written more about designing for accessibility and the importance of accessible websites on our blog.

Mobile screen readers

While many people are familiar with desktop screen readers, the experience of mobile screen readers is often overlooked. Check out this video on how mobile screen readers work to make sure your website will be compatible.

Target size

We’ve all had the frustrating experience of accidentally tapping a link, leading us to an unintended page. Ensuring an appropriate target size can help prevent this. Mobile touch targets should be large enough and well-spaced to avoid accidental taps. The W3C recommends a minimum target size of 24px by 24px to achieve AA accreditation.

Pinch to zoom

Pinch-to-zoom has become second nature for many and means users can zoom in on content by pinching their screen. For users with mobility issues, alternatives to zooming without touching the screen, like Zoom Controller or voice activation, should be compatible with your site.

Font size

Text size should be readable for users of all abilities; it should be at least 16px, with the ability to scale it up to 200% without detriment.

2D scrolling

One of the significant hurdles in mobile accessibility is 2D scrolling. This format can make it challenging to navigate mobile sites effectively, as users must keep track of both horizontal and vertical scrolling.

Be particularly vigilant with tables, large images, graphics and bespoke functionality and make sure they are optimised for mobile use.

Technical considerations

When designing an effective mobile website, it’s crucial to recognise that user interface (UI) design is just one part of the equation. The technical aspects of mobile design play a vital role in ensuring a smooth and enjoyable user experience. If your site takes too long to load, all your efforts in crafting an attractive and functional UI might be in vain, as users are likely to abandon a page that doesn’t load quickly.

To optimise your page loading speed, you will want to consider the following:

Compressed or lightweight images

Large images can significantly slow down your website. By compressing images or using lightweight formats like WebP, you can reduce file sizes without sacrificing quality to ensure quick loading times on mobile devices.

Efficient CSS and JavaScript

Review your CSS and JavaScript files for efficiency. Removing unnecessary spaces, comments and characters can significantly reduce their size and decrease loading times.

You may also want to consider using asynchronous loading to prevent these scripts from blocking the rendering of the page. This practice allows users to see content more quickly while scripts load in the background.

Using Content Delivery Networks (CDNs)

CDNs distribute your website’s content across multiple servers around the world. This reduces latency by serving users from the nearest server location. Implementing a CDN can drastically improve loading times, especially for users who are geographically distant from your main server.

Ready to discuss your website’s mobile design?

Connect with our skilled team of UI, UX and technical experts by emailing hello@jbidigital.co.uk or calling 0207 043 2510. Let’s elevate your online presence together