What is Required to Make a Website Mobile Friendly?
What is required to make a website mobile friendly? Well let’s start with: What is mobile friendly?’
Very briefly, a mobile-friendly website is a site which offers a seamless, user-friendly experience on smartphones and other mobile devices. Google recommends you design a website “mobile-first”. That is with the mobile experience at the forefront of the design and development process. Hubspot will test your website for mobile friendliness (and a bundle of other metrics) for free.
Does it matter?
Well, according to Browserstack, in Q1 2023 57% of internet users say they won’t recommend a business with a poorly designed website on mobile. And, according to SWEOR, as of Q2 2018 63% of all users made visits to online retail from mobile devices.
In the same article, most adults (85%) believe a the mobile version of a website should look at least as good as its desktop version. 57% of web users state they wouldn’t recommend a business with a poorly designed mobile website.
In short, for the vast majority of cases, getting your mobile site right is not just important, it is business critical. There are occasions when you don’t need a mobile-friendly site, but you’re safer assuming you do.
What is Required to Make a Website Mobile Friendly?
So there are a few steps to achieving mobile friendliness. Ideally these need to be implemented as the site is built, it is much harder to add later. Let’s look at each in turn.
- Site Speed
- Navigation & Site Structure
- Images
- Text & Typography
- Clickability & User Interface
- Minimise Popups
- Testing
Site Speed
Speed is not strictly-speaking a mobile friendly matter. But it is probably the single most important thing you can do to make your website more successful. Speed matters. However, mobile users are less patient than desktop users – speed is an important metric when judging mobile friendliness. There are several steps to achieving better site speed:
- Domain Name System (DNS) configuration – DNS is the process by which calls to your domain name are directed to your server. If your users cannot reach your server quickly, your site is going to take a speed hit which no amount of hard work is going to fix. Consider moving your domain to Cloudflare or some other enterprise-level DNS provider.
- Server Speed and Site Speed – your site needs to run from a modern fast server. If you’re using a hosted service like Wix, Webflow or Shopify you won’t have much choice here (though all three providers provide a rapid service). If you’re using any kind of self-hosted platform (e.g. WordPress or a custom site) you’ll need to make sure your code is well structured without bottlenecks.
- Asset Delivery – the number of external files required to make your website work (style sheets, javascripts etc) should be minified in number, compressed and wherever possible concatenated to keep the ‘drag’ between site load and full appearance and functionality to a minimum.
- Lazy Loading – if a user doesn’t scroll far enough down the page to see that cute kitten picture, it never needs to load. Modern websites with modern code won’t load images until the user actually needs to see it.
… we’ve written a whole post about site speed.
Mobile screens are small so every square millimetre of space needs to do something (even if it is just provide artful white space form a balanced design). Although off-screen popup menus (or burger menus) are a familiar and well-used interface features but even these can struggle on very large sites with lots of pages.
When designing for mobile, site structure really matters. A large drop-down menu is unlikely to work very well on a small screen. So a good site search is likely to be essential on a large website.
Again, a faster site will help your users zip around your site and find things.
Images
For a mobile site images need to be as small as possible. If you get your image sizes right for mobile, your site will run faster. It will also make more reasonable demands of your users’ mobile data allowances.
But, if this is a responsive site (one that works for desktop devices too), it’s not that simple. For responsive design, the smallest image width required will be about 400px and a modern 4K monitor is typically 3840px. Factor in the height too and the number of pixels required to display the same image at the same quality is vast – almost a 100-fold increase.
Sizing images for the responsive design requires detailed code knowledge. It maybe difficult to change the code for an existing website.
Text & Typography
When designing for mobile, you are always balancing the demands of the small screen size and the wish to display as much content as possible. To remain legible while displaying as much text as possible your designer needs to choose typefaces carefully. There are excellent typefaces designed specifically for their high legibility on screen. If brand guidelines permit, design choices should start there.
Clickability & User Interface
Mobile screens can be very small, fingers can be very chubby. Mobile friendly website design requires that links, form buttons and other interactive elements can be tapped easily.
Developers have always considered forms to be a difficult area of user-interface (UI) design. Form elements (select boxes, check boxes, radio buttons and the like) should be wrapped in <label> elements to enlarge the screen area associated with each input to make it easier to tap. Further, over the years, developers have created lots of custom form elements (colour selectors etc). Wherever possible, you should replace these custom field types with their modern HTML5 native equivalents.
The more your site uses standard form elements, the more your site will respond with the behaviours native to the user’s device. This means the site will be more familiar to your target user (they know how their phone works). This means the site will be easier for each user to use.
A common UI mistake with forms is the Submit button is pushed of the bottom of small screens. This can happen very easily, there are some very small screens out there. Mobile device scroll bars are often hard to see. So it can be hard to know there is content ‘below the fold’.
Designing forms and UI for mobile devices is not simple. It takes an experienced developer to do it well. There are a lot of frameworks out there to help. But if you have an existing website, a new framework may be hard to implement.
Minimise Popups
Technology has improved since mobile friendliness became paramount. But, as with all elements of mobile-friendly design, clarity and simplicity are critical. You must ensure that any popups you use on screen enhance the user interface. At all costs you must ensure any popup you use is easy to close.
Testing
You cannot test too much. Period. That’s it.
But you need to test. As you make changes to your site to make it more mobile-friendly, you need to check that the changes you make actually work on a mobile phone. You’ll have yours; you may have access to a good few more but it is unlikely to be an exhaustive selection. You should consider using a tool like BrowserStack (there are alternatives) which allows you see how your site looks on that phone you had 3 years ago.
So What is Required to Make a Website Mobile Friendly?
From an existing website, the transition is not simple. We have made quite large websites pass mobile friendly tests within a day or two. But to achieve a design which meets all the above criteria, you may be best starting afresh.