Mobile First: What is it and why does it matter?

If you’re looking for guidance when building your website, the thing you’ll hear most often from website designers, developers, and even savvy business owners is “mobile first”. But what does mobile first mean? And why do you need to care about mobile first for your website?

To start, mobile first refers to a strategy you should employ when building your site; think about how it will look on mobile first, then work your way up to designing for bigger screens. Mobile traffic dethroned traditional desktop traffic as the main source of internet usage back in 2016, and has only been steadily (and rapidly) rising ever since. You need a mobile first approach because your website is most likely going to be accessed using a phone or tablet. No matter how great your site looks on a desktop, an ugly mobile site will lead to less page-viewing time and higher exit rates.

For help building your website with the mobile first approach, below are some important guidelines to follow.

1. Think about the overall “big picture” of your site first.

• This advice is the same starting guideline that we gave you in last week’s post on how to build a website, but it still rings true with mobile first. If you get bogged down with the details, you’ll add much more time to the site-building process, and you’ll likely focus too much on insignificant details. But with mobile first, you want to consider how things will look on a small screen. That means smaller images and more Calls to Action (CTAs) higher up the page so site visitors don’t need to scroll and click too much before you get them where you want them to go.

2. Before you build out the content, make a site map.

• This is another bit of advice we gave last week, but it is still important in mobile first design as well. Your site map will remain the same for both your desktop and mobile site, but you need to consider the smaller screen, and the fact that your site visitor will be using touch gestures to navigate your site, not a mouse. Keep things as simple as possible, and get the site visitor to your final CTA as soon as possible.

3. Design the site so it is easy to look at on mobile, and also easy to get around on mobile.

• This means designing your site with:
• Large touch targets that are easy to tap
• A font size styled to fit mobile screens
• CTA buttons and images that are not too big so they fit naturally in the look of your site
• YouTube videos and eye-catching images to attract viewers’ attention and keep them engaged
• A viewport meta tag (code: ) so your site scales to fit the visitors mobile screen size

4. Make sure your site is in line with SEO (Search Engine Optimization) best practices for mobile first.

• Not all SEO is created equal, so make sure on your mobile site you:
• Keep design simple to maintain fast page load
• Avoid using Adobe Flash to play multimedia on yours site, since it is not available on many phones
• Don’t add pop-ups that break the visitor’s engagement with your site
• Use Responsive Web Design practices or templates to create a fluid page that fits any visitors’ screen
• Make sure media content plays correctly, tap-targets are adequately spaced and sized, and all text and images are readable/viewable

These recommendations come directly from the biggest search engine in the world, Google.

5. Test out your site on real devices.

• The best way to know if your site follows good mobile first design is to try it yourself. Try to navigate your site on various sizes of phones and tablets. Scroll and click to make sure everything is correctly scaled, and that your site is responsive. You should also page through your site as if you were a viewer from your target audience, and judge if your site is easy to read and navigate. Having friends test your site is also a great idea, as they can give you a different perspective than your own.

Building your site using a mobile first strategy is a wise choice, because not only will your site be ready for the majority of traffic you’ll see right after launch, it will also be prepared for the much larger mobile-using internet market that is taking over online. Mobile first requires a slightly different approach than traditional site-building for desktop, but if you follow these best practices your site will be optimized to keep visitors on your page.

In case you missed it, be sure to check out the first installment in our “How To” blog post series, last month’s post on “How To Build a Website.” And be sure to come back next month, when we’ll cover “How to Choose a Domain Name”. Until then, you can see more internet “How To’s” on our YouTube channel!