Your "mobile-compatible" site is costing you customers
Here's my playbook for building truly mobile-friendly sites
66% of Internet traffic is mobile, according to a SimilarWeb analysis.
Yet, most people design their sites on desktop, for desktop, and slap on a few adjustments to ensure the site doesn’t break on mobile. I know I’ve done this more than once.
Today, I’ll share my best practices for building sites that aren’t just mobile-compatible, but provide a truly great mobile experience.
This will provide a superior experience for the majority of your users, increase signups and conversions, reduce customer churn, and help you get more traffic from Google.
Unfortunately, entrepreneurs and makers often think like desktop users, which inadvertently affects how we build sites.
We plan, build, and test sites on desktop
Building dozens of sites, alone and with teams, I have noticed how our work environment makes it challenging to embrace the mindset of a mobile user:
Code editors, no-code tools, and site builders are built for desktop use
It’s easier to plan and design your site on desktop, since most design and collaboration tools are primarily used from the desktop
It’s easier to test your site on desktop, since it has more powerful browsers and plenty of development and testing tools
As knowledge workers, we’re used to working (and seeing other people work) on desktop all day, but this is not the case for most people
Luckily, there are some changes we make to shift our focus from desktop to mobile. Here are 5 things that you can start doing today:
#1: Design for mobile first
Before you start building a site or a feature, it’s crucial to plan the experience, design, and specs for mobile users first. When you decide on a list of MVP features, think about the mobile experience. When you draw wireframes and mockups, start with mobile ones. When you’re building your site, start by building the mobile version first.
Ensure your site looks and works great even on a viewport of 360x640 pixels, the equivalent of an old Google Nexus 5 phone. If you use Chrome, you can add devices to simulate different types of phones.
Once the mobile design and functionality are in place, start gradually working your way up to larger resolutions. Use your newly found screen space wisely, and add UI elements, navigation, and white space as necessary. If you’re a programmer, you can use CSS media queries, grids, and flex to accomplish that. If not, most modern website builders support different layouts for mobile, tablet, and desktop.
Building for mobile first has another benefit: it forces you to prioritize your features and UI elements, thereby ensuring that your site is clean, clear, and clutter-free.
Don’t do the opposite: once you have a desktop site, it’s harder to make it mobile-friendly later, as you’ll try to squeeze all the design elements into a small viewport, and essentially create a cramped version of the desktop site.
#2: Add it to your home screen
Opening a browser on your phone and typing in your site’s address is a hassle. We want to remove barriers so you can frequently use and test your site on mobile. My favorite trick is adding home screen icons leading to my sites:
Here’s how to do it on an iPhone:
Open your site in Safari or Chrome
Tap the Share button at the top-right corner (Chrome) or bottom menubar (Safari)
Scroll down the list of options, then tap “Add to Home Screen”
If you don’t see that option, tap “Edit Actions” at the end of the page, then tap “Add to Home Screen”
Here’s how to do it on Android:
Open your site in Chrome
Tap the menu icon in the top-right corner
Tap “Add to Home screen”
If you haven’t yet, now is a great opportunity to test your site on your phone. In addition, make it a habit to test your site from the phone whenever you make changes.
Place the icon somewhere noticeable, so next time you’re trying to kill a few minutes, instead of opening Instagram or TikTok, you’ll tap your site icon and spend a few minutes playing with it.
Here’s the nice thing: when you’re far from your work environment, you step out of your maker mindset, which allows you to explore your site casually, just like a typical mobile user would.
#3: Walk through your user’s critical path
The critical path is the steps your site’s users go through to achieve their goal. It includes a sequence of events like reading content, tapping a button, signing in, typing something, and interacting with various elements. At the end of that path, users accomplish a goal they have, like generating a report, sending a message, or ordering a shirt.
Walk a mile in your user’s shoes:
Imagine you’re a site visitor with a goal in mind, and use your phone to try to accomplish that goal. Is everything fully functional and reliable? Are the messaging and user interface clear or confusing? Can you accomplish the goal with ease, or do you have to jump through hoops?
In addition, I recommend using an analytics platform that supports session recording such as PostHog or FullStory. Session recording shows you how real mobile users interact with your site from their own point-of-view, which can be very revealing.
#4: Make it thumb-friendly
We tend to forget how precise mouse and trackballs are, and how large and bulky our fingers are.
Here’s how you can ensure your site is thumb-friendly:
Design touch targets like buttons and icons to be large enough, at least 45 pixel wide and 45 pixel tall
Use margins to ensure they are far enough from each other to avoid accidental taps
While different people hold their phones differently, be mindful that some areas of the screen are often harder to tap, namely the top-half and the bottom-right side. See the illustration below:
With the exception of subtle visual cues, don’t use mouse-hover events for anything important like popping up a menu. These hover events are not usable on mobile
#5 Size for mobile first
Sites that aren’t mobile-friendly often fall into one of two groups:
Group A: sites that weren’t built for mobile at all. Oftentimes, the mobile browser shrinks the entire site to fit into the screen. A good example is the Berkshire Hathaway site - note how unreadable the text is and how hard it is to press the links:
Group B: mobile-compatible sites built with a desktop user in mind. A good example is an old site of mine - note how large and disproportional the icons are on mobile:
To avoid these issues, build your site for a mobile viewport first (say, 360x640 pixels), and ensure you use sensible font, image, and element sizes for that viewport. Then, you can progressively increase the font and element size for larger viewports.
You can use tools like Chrome’s DevTools to simulate the small viewport of mobile devices. On Chrome, press F12 to load DevTools, then press the Device Toggle icon:
In addition, you can use tools like BrowserStack to conveniently test across different screen sizes and browsers.
Emulators can’t replace testing on real phones
Using Chrome DevTools, BrowserStack, or downsizing your browser on a desktop is a good starting point for building mobile sites. However, these tools don’t really simulate the mobile user’s experience! There are several reasons:
Thumb vs cursor: using a thumb or finger to navigate on the phone is substantially different from using a mouse cursor of desktop
Onscreen keyboard: phone users have to use the onscreen keyboard, which isn’t as convenient, and also covers 30-50% of your site
Swiping: on the phone, users can’t drag the scrollbar or use a mouse wheel. Instead, users swipe, which has a completely different behavior
Device performance: phones are often slower than your work laptop or desktop. This means your site will be slower and less responsive
Internet Connectivity: phones sometimes have unstable or slower Internet connections, affecting load time and live interactions with your site
External Factors: screen glare, low light conditions, external interruptions (aka “the real world”), messages, calls, and notifications are likely to distract and affect users when they use your site on mobile
To ensure your site is truly mobile-friendly, you have to plan, design, and build it for mobile before desktop. Add it to your home screen, use it often, and walk through the user’s critical paths. Lastly, pay attention to sizing elements proportionally and make all interactions thumb-friendly.
I'd love to hear your thoughts - please comment below.
Until next time,
Here are some of my products that can help you:
Competely: get a competitive analysis for your product/idea within minutes with the power of AI. No tedious research needed!
Flawless: get AI-powered actionable suggestions to improve usability, conversion, and messaging for your homepage or landing page
BookAuthority: learn any skills with book recommendations by experts and thought leaders