Did you know that mobile accounts for approximately half of web traffic worldwide? In the first quarter of 2023, smartphones generated 58.33 percent of global website traffic (Statista). And yet, mobile websites are still surprisingly hard to get right. The user experience is often worse on a mobile device than on a desktop. And with more than half of all your visitors viewing your website on the small screen of a phone, having a mobile-friendly website is no longer an option – it's a requirement.
Here are the biggest mobile design mistakes we see and how to avoid them to make your website look amazing:
- Sticky, overlapping content
- Typography that doesn't scale
- Horizontal scroll bars
- Too many pop-ups
- Unoptimized images
Sticky, overlapping content
Sticky content is images, buttons, or other elements that stay on screen even when you scroll. Two common examples we see are social share buttons on the side of the mobile screen and headers or footers that stay with you as you scroll. Often, this content overlaps text, links, images, or other essential features of the web page that visitors need to see. As a general rule, sticky content should be used minimally and only if necessary to the overall function of the website.
Type that doesn't scale
When type isn't sized properly (either too large or too small) and/or doesn't have the right ratio between heading and body sizes, mobile users see chopped-up words that don't draw their eyes to the most important information. The solution is to view your site on an actual mobile device to check type sizing. Also, ask your developer to set up CSS with media queries to make sure things scale in a way that maintains a good visual hierarchy.
Horizontal scroll bars
As visitors scroll down your page, do they also fight against scrolling horizontally? Unless they are intentional, horizontal scrollbars appear because elements or containers (invisible boxes) don't scale properly and push the viewport open to the right. Detect horizontal scroll bars by scrolling down your page on a mobile device and attempting to scroll to the right. Scrollbars can disappear in some browsers, so watch the bottom of your screen to see if they appear. Getting rid of scrollbars can be tricky, so if you find one, it’s time to involve a developer.
Too many pop-ups
The general population considers pop-ups extremely disruptive (some call for death to bullsh*t), especially on mobile device screens. Visitors try to read text on a small screen, and a big ad or pop-up blocks their view of the page. If a pop-up is vital to your page, consider disabling it for mobile or format it only to appear when users scroll to the bottom of the page. Then, it must be abundantly clear how to close a pop-up. Use a big close button that is easy to see and far enough down, so it doesn't get pushed above the viewport. Otherwise, users will click away and find another website.
Unoptimized images
More than half of a page's weight is composed of images. If you do not reduce their file size, users will have to wait for the page to load fully. And more often than not, they won't stick around for that to happen. There are many ways to optimize images for web performance without losing quality. Optimized images support faster website speed, improved search engine rankings, reduced storage, and higher sales conversion rates.
Mobile website design is crucial for driving visitors to your site, optimizing search engine ranking, and delivering a mobile experience that feels closer to a native app experience. Developers can avoid mobile web design mistakes by addressing them in the planning and design phases. It's also important to test your website before launch to find any errors in development.
Your website should look and function its best on every device – let us help!