Note: This article continues our look at mobile-friendly websites, and why it has become essential for all businesses to have a mobile-first web presence. For guidance on making the business case within your own organization, check out our earlier article – Your business needs a mobile-friendly website. Here’s why.

THE WORLD LEADS WITH MOBILE

There is no longer any doubt that we live in a mobile world. Data from Statista confirms we’ve already passed something of a tipping point, and there’s no going back. According to this research firm, just over 59% of global website traffic in the final quarter of 2022 was generated by smartphones. This figure first approached 50% in 2017, and in 2020 consistently moved past the halfway mark.

This trend is being driven by several factors – including sustained smartphone penetration across the globe, and is especially prevalent in emerging markets. Most countries in Africa, for example, are skipping desktop PCs entirely as the population snaps up smartphones as primary-use devices. Statista’s research shows in November 2022, almost 84% of Sudan’s web traffic was mobile generated, followed by Nigeria (84%), Libya (81%), Cameroon (80%), and South Africa (79%). The United States, in comparison, saw 52% of web traffic originating on smartphones.

This means one thing for businesses of any size, in any geography, and in any industry: they must have a web presence that targets mobile users first.

BUILD IT FOR THE SMALL SCREEN

Wanting to be mobile-friendly and actually being mobile-friendly are two entirely different things. As you’re scoping out your own project to either update your existing website or implement an entirely new one, keep the following best practices in mind to ensure smartphone users have a positive user experience when they visit:

1 – Simplify the navigation structure

Relatively small touchscreens offer up a lot less real estate than widescreens on a desktop. Finding things on a website is also very different when you’re swiping a touchscreen vs. wielding a mouse and keyboard. To ensure your website adapts to this constrained reality, ditch complex, multi-layer navigation and menus. Shrink menus down to a few key options and consider using hamburger menus instead of full-fledged navigation bars.

2 – Get rid of the clutter

White space is the mobile-first web developer’s best friend. Leave lots of it around copy blocks and links to make targetable elements easier to hit on a touchscreen. Use fewer links, if possible – particularly those that redirect users off-site.

3 – Strip copy down and prioritize

Mobile users have no patience for large walls of text, and usage data confirms they won’t scroll down to get it. Rewrite copy to be shorter and snappier and keep the most important content as close to the top of the page as possible.

4 – Streamline multimedia content

End-users consume content very differently on a smartphone. Since they’re on the go, they don’t have time to wait for bandwidth-intensive content to load. Reduce file sizes by shrinking photo resolutions and incorporate lazy loading to display photos only when necessary. Similarly, use more aggressive compression, smaller resolutions, and lower frame rates for videos – and be sure to turn auto-play off.

5 – Resize interface elements accordingly

One of the biggest complaints mobile users have when using non-mobile-optimized websites revolves around the sizes of fonts, buttons, and other visual and interactive elements on the page. Generally, they’re too small, or worse, they can’t be zoomed or otherwise resized on the fly. Make sure they’re easily visible at default device settings, and choose fonts, colors, and backgrounds that display cleanly. Think simple instead of fancy.

6 – Incorporate responsive design principles

Responsive design refers to a website’s ability to adjust content and layout as screen sizes and orientations are changed. A responsive website, for example, will automatically reshape copy and content blocks as windows and work areas are changed. Content on a non-responsive site, on the other hand, will remain static, and will force users to scroll around to access content. Bottom line: if it isn’t responsive, it’s not mobile-ready.

7 – Test across multiple device types

Not all smartphones, tablets, and other mobile devices are created equally. Display sizes and behaviors may vary from device to device. Update quality assurance (QA) and testing protocols to test functionality across a reasonable cross section of devices expected in normal, day-to-day use. Use either physical devices, emulators, or a mixture of both, and focus on the most popular smartphones, tablets, and operating systems.

8 – Track performance

Use Google’s Analytics or its mobile-friendly web test, or similar tools like BrowserStack’s SpeedLab to monitor how the site performs, and use these metrics to inform future changes or updates to the site. Schedule regular review sessions to measure site performance over time and assign resources as appropriate to maintain performance. 

THE BOTTOM LINE

Whatever devices we use to navigate the web, engagement has become a critically important factor in ensuring a website fulfills its mission. And mobile users will not engage with a website that is frustrating to use.

Considering how crucial web presence has become to organizational revenue and branding, we’re long past the point where mobile-optimized websites were considered as separate, somewhat disconnected offshoots of the main organizational web presence. In 2023, all websites must be mobile-first websites, full stop. Make sure your website gives your on-the-go visitors ample reasons to stick around – and fewer reasons to tap elsewhere.

If you’re thinking about improving your website’s mobile performance, click here and let us know.