Hard truth: A mobile-friendly website is a non-negotiable. According to Google, over half of all internet searches come from a mobile device. Weâve officially crossed the threshold of mobile over desktopâwhich means you gotta start prioritizing how your site looks across different devices.
Whatâs more? Google now uses âmobile-first indexingââmeaning the mobile version of your website is whatâs being primarily indexed and ranked. As a result, mobile-friendly websites show up higher in search results!
Mobile-friendly websites are exactly as they sound: Websites that look and function just as beautifully on a desktop or laptop computer as they do on a mobile device, like a smartphone or tablet.Â
So how do you ensure your website is mobile friendly? Follow these 8 best practices to give your mobile users a delightful browsing experience.
Speed Up Your Site With Optimized Images
Did you know that almost half of all visitors will leave a mobile website if the pages donât load within 3 seconds? And unoptimized images are usually the worst offender when it comes to slowing down your site!Â
Images across your website should be optimized to reduce their file size. This means photos should be no larger than 1500pxâ2500px on the longest side, with a file size in the KBs...not the MBs. Note that JPG extensions are usually the smallest file size (as compared with PNGs or GIFs). Compressed images allow for speedy load times over mobile connectionsâstrengthening both your user experience and your SEO.Â
Size Up Your Buttons, Links, and Form Fields
Keep in mind that mobile users arenât clicking around your website with a mouseâtheyâre using their thumbs! You need to size up your calls to action accordingly. Be generous with the sizing of CTA buttons and put plenty of white space around important links.Â
For your websiteâs contact form, limit the amount of typing required to make the mobile experience easy-breezy. This may include the use of radio buttons or dropdown options to save space and keep type-in fields to a minimum.
Get Strategic With Your Mobile Menu
Your mobile menu should be sticky to the top of the userâs device; meaning that as they scroll through your web pages, they can always access the mobile navigation at the top of their screen. Instead of a row of links at the top, use a hamburger menu â° that opens and closes to save space. And again, put plenty of cushion around the links in your mobile menu so itâs optimized for thumb clicks!
Keep Fonts at 14â16pt Minimum
This is the absolute minimum size for your body font. Title text and headings should be even larger. Anything smaller than 14â16pt is all but impossible to read on a mobile device. Donât assume your users will simply flip their phones horizontally in order to read your small text. Treat the vertically-oriented user experience as the top priority, and make it easy to view your website without having to zoom in.
Stick With Short Blocks of Text
Break up big blocks of text into concise, easily-digestible (and skimmable!) blocks. I donât necessarily recommend trimming your SEO-rich web copy for mobile, since remember, Google is indexing and ranking the mobile version of your site. But I do recommend breaking up blocks of text with images, or at least formatting with headers, bolding, or bullet points.
Stack Your Footer
Footers are an incredibly importantâyet often overlookedâpart of web design. Pay close attention to how your footer looks and performs on mobile. Stack all the important elements and spread things out so links and social icons are clickable, email opt-ins are showing up correctly, contact information is clickable, etc. etc. I also highly recommend putting a âBack to Topâ button on your mobile footer so users can easily pop back up to the top of the page without having to scroll for dayyys.
Make Contact Info Clickable
For a great user experience on mobile, you want your phone number, email address, and physical address to be âclickableâ. This means that clicking on your phone number or address triggers a call prompt, opens up the Mail app, or provides directions via the Maps app.
Test, Test, TEST!
Last but certainly not least, itâs crucial that you take the time to thoroughly browse your website on a variety of different devices. Do it on your iPhone, your iPad, your friendâs Android or Surface Pro (and even on a variety of different browsers, like Chrome, Safari, and Firefox). If you donât have access to several different mobile devices, donât stress! You can preview your site on mobile via View > Developer > Developer Tools in the Google Chrome browser.
You can also type your URL into Googleâs Mobile-Friendly Test to see how each page scores.Â
â
This all boils down to creating a silky-smooth mobile experience.Â
When weâre on our phones our patience for endlessly scrolling web pages, or suuuper slow load times, or confusing interfaces, or teeny-tiny text is slim to none. Creating a mobile-friendly website will help with conversions, make you look modern and savvy, and help you rank higher on Google.Â
So what are you waiting for? Go forth and optimize!
