Mobile first design is a responsive design approach. Here, we offer an in-depth explanation of what mobile first is and how it optimises mobile user experience.
What is mobile first?
Mobile first design is a responsive design approach in which pages are designed for smaller screens like mobiles before they are designed for desktops.
Mobile first design focuses on optimising mobile user experience. Mobile first isn’t simply about making content fit on smaller screens, with a number of differences to consider.
Mobile users:
- Smaller screen
- Often less stable internet connection
- Less computing capability available
- Less electrical power which is constantly dropping
- Different lighting changes visibility of page
- User more likely to be in a rush
Desktop users:
- Large screen
- Typically stable, reliable internet connection
- Machines with high computing capability
- Stable power supply
- Lighting does not affect visibility
- User likely not in a rush
How mobile first addresses user needs
In mobile first, the functionality and resource planning is done entirely with small screens and reduced internet and power resources in mind. The first three questions you need to consider are: Is my call to action strong enough? Is the purpose of my page clear enough? Do the colours contrast enough to be readable?
However, aside from these three central questions, there are several other factors to have in mind.
Navigation
Smaller screens mean there’s no room for complicated navigation. Simplify navigation down to the bare minimum, making it clearly marked and easy to use.
Content
High quality content is essential, but with mobile you need to ensure your content answers questions efficiently and early on and you should not rely on sidebars for users to understand your pages (there are no side bars in mobile).
Condense Social
If someone is using a mobile, potentially in a rush and looking for an address they likely don’t care about your social stats, they simply need an address. Having social buttons that make external calls and add more JavaScript to a page are therefore unnecessary. If you want social buttons, ensure they are static and don’t require JavaScript.
Prevent user experience issues
Avoid plugins, use legible font sizes, configure the viewport and size your content to the viewport. Google evaluates your pages on mobile friendliness with these elements in mind, so make sure you don’t have any of these issues on your pages.
Page speed
This is arguably the most important and controllable aspect of mobile first. Try and reduce calls and resources through getting rid of things like social buttons and plugins. There’s also no need to use big JavaScript libraries for mobile pages, and simple things like putting smaller images on pages will mean there’s less to download and so your page loads quicker. As a result your CSS will be a lot smaller and your page will load much faster.
Should I use mobile first?
There are several benefits to mobile first design including a better mobile user experience as well as likely saving and making you more money. Being mobile friendly is a Google ranking factor and with mobile traffic rapidly overtaking desktop, it’s well worth ensuring your site has a strong mobile presence. Those with good mobile sites will inevitably reach more people and as a result will sell more. What’s more, you save money with a mobile first approach as it’s much cheaper to create a mobile system which you can then convert later.
If your site isn’t mobile friendly, users will just move on to a site that is. Mobile first is all about improving user experience, and in a world where more and more people are using their mobiles to access content a mobile first approach makes sense.