4.78 billion people use a smartphone or related device, as of 2020. If you are in e-commerce or are just interested in expanding your digital marketing, it is more crucial than ever that your website be mobile-friendly.
To drive it home again, that number – 4.78 billion – equates to roughly 60% of the world’s population. If your website doesn’t look good on a mobile device, you could be missing out on a market of over half of the world’s inhabitants.
Almost everyone agrees that having a mobile-friendly site is important, even critical. But that’s easier said than done, and it’s a lot harder to identify exactly what makes a given design “mobile-friendly.” To that end, we’ve identified six components of good, mobile-friendly web design.
1) Size
Size is the single most important consideration of a good mobile website design. It’s the starting point – everything you build for this website has to look good and be accessible on a much smaller screen. This means scaling the images, text, even the ads to all appear proportionate for a handheld screen.
In fact, size is probably the defining element of mobile design. If the website design works well on a smaller screen, then it will likely work well for a mobile device.
2) Speed
It is not enough to be small; a well-designed mobile website also needs to be fast. We expect our Internet connections to be speedy and our websites to load quickly. If they don’t, we leave to find a faster one. If your website looks great but loads slow, then it’s still not a good mobile design.
How do you keep a mobile website fast? By streamlining your elements. Pictures are great, but use fewer of them and make them high-res (more on this later). Eliminate the pop-up ads and banners that you might use on a desktop site, to promote a sale or membership discount.
In short, keep the website design simple to help keep it fast.
3) Simple menu
Menus on a traditional website or app are almost expected to be complicated – a drop-down that leads to a separate menu, perhaps with three or four tabs on it. On a desktop, we expect this level of complication.
But on mobile, complicated menus are a curse. If you’re designing a website, streamline your menu options; remove anything unnecessary, or keep it to a separate menu. Ditch the “banner” menu across the top of most desktop sites in favor of a drop-down menu. Condense that menu also – you don’t need three or four separate menus. Bring all your subheadings back under one main dropdown menu. If visitors aren’t able to find the option they need quickly, the odds are good they’ll simply leave.
4) Single-column
This is generally becoming the standard for most mobile views, so it’s worth remembering. One of the best ways to keep things simple and easy for your visitors is to keep everything on the same page – literally. Keep all your text and images in a single column, making it easier to read and easier to access later. Mobile users often don’t mind scrolling down to find something; that’s easier than clicking through menus to find a separate page.
5) High-quality images
This makes sense, given the popularity of certain photo-based applications. Use images that are high-quality and zoomable, but that are optimized for the web. Photos draw people in – and when those images fill your mobile device screen, they can be fantastic devices to draw attention.
Pictures do pose some risks for mobile website designers. Images that are too small, even for mobile devices, can drive people away rather than pull them in. Prioritize the images that are crucial – product images for e-commerce sites, scenery and setting images for hospitality sites.
6) Mobile-first, not just mobile-friendly
Work from simple to complicated. Design your website to be mobile-first; then add the elements necessary to make it a more traditional, desktop-browser-friendly version.
Websites designed the other way run the risk of looking cramped – pictures, menus, and toolbars all shrunk to fit a smaller screen. At best, it isn’t aesthetically pleasing; at worst, users will be forced to zoom in to read basic text.
And one more thing…
Of course, none of these components include what is possibly the most important thing a mobile website design needs to accomplish. Your mobile-friendly design needs to be aesthetically pleasing. It needs to look good and load smoothly. Mobile design balances form with function – simple designs, attractive images, and text that complements both.
With these six components of mobile-friendly design, you will be well on your way to expanding your website’s reach to some of those 4.78 billion mobile users.