Substance and Style

What is mobile first?

Using a mobile first approach means designing your website specifically to suit the needs of people who access it on a phone. Mobile first has become popular in recent years as phone users have outpaced computer users on the internet.

It’s now absolutely essential that your site be responsive, which is to say that it works well and looks right on every kind of device that might access it. Mobile first goes further than responsiveness by considering the user experience on mobile devices before the user experience on computers. Visually, the difference in result is subtle: a mobile first site will have been created for smaller screens and scaled up, where a traditionally designed responsive site will have been created for computer screens and scaled down.

So, which is better? As always, every decision about your business should be based on your own knowledge of your customers, your industry, and your goals. Though I’m hard pressed to think of an example (other than for showcasing web design itself), I’m sure there are cases when mobile first is not the best approach. In general, though, a mobile first approach makes the most sense. 

Why should your website be mobile first?

1. It meets your customers/audience where they are. Mobile users make up more than half of all internet traffic now, and their numbers are growing. While some industries attract a more mobile crowd and some attract a more desktop crowd, the odds are that at least around half of your audience is visiting your site on their phones. People who visit sites on their phones also spend more time on those sites and are more engaged with the content. So having your site optimized for their experience is a no-brainer.

2. It forces you to have clear goals and provide content that achieves them. People don’t scroll forever or visit every page on most websites. With a smaller screen, you have even less time to get people to take the actions you need them to take. You have to be selective about your content and focus on what really matters. A mobile first approach forces you to make decisions about what to place front and center. 

3. It prioritizes functionality, so is inherently more user friendly. If you have less room for bells and whistles, you will necessarily make sure the bells you have ring the right way. A mobile first approach forces you to place function over form, which is an important lesson in design. Your audience needs to be able to do or learn what they came to do or learn. It’s somewhat easier to forget this when you have more space to work with. 

4. It’s easier to scale up than to scale down. Think about organizing a dresser drawer. Would you have an easier time taking the contents of a small drawer and spreading them out into a larger drawer or taking the contents of a large drawer and fitting them into a small drawer, while still making sure the drawer opens and shuts correctly and everything looks nice? 

5. It’s better for your SEO. Search engines, especially Google, give more credit to sites that have taken a mobile first approach. The algorithm’s success depends on serving up results that are useful to the people searching, and most of the people searching are searching on their phones. If two sites have the same information and one is fully optimized for mobile and the other isn’t, Google will give a higher rank to the optimized site. 

How can you make your website mobile first?

If you’re working with a developer/designer to build a new site, they should be able to make it mobile first. If you’re updating an old site, they should be able to redesign it while keeping mobile first principles in mind. If you’re updating a site that’s built on a theme (WordPress, Wix, Squarespace, etc.) that defines breakpoints for responsiveness automatically, or if you’re updating your own site that was designed/developed by someone else, keep these things in mind:

1. As always, start by considering your goals and what your audience needs. Those two things should guide every decision.

2. Really think about how the user experience will be different on touch screens and small screens.

3. Build a hierarchy of content. Figure out the most important content for each page and build an outline of what will go where. Make the most important content the most prevalent content. 

4. Use your outline to build your navigation menus. Make sure they are simple, intuitive, and easy to access and operate on any device.

5. Keep the entire design simple, uncluttered, and easy to understand. 

6. Focus on Calls To Action. Make sure all buttons and links are able to be easily clicked with a touch screen. Make sure they are large enough that people don’t need to zoom to click them. 

7. Make sure your font is legible and large enough to be read on all screens.

8. Optimize your content for speed. Compress graphics, disable autoplay features, and eliminate popups and scripts that will slow your loading times.

9. Speaking of popups, don’t have them at all if they cover important content on phone screens. This is distracting and frustrating for the user. 

10. Avoid using large visuals that won’t scale down.

11. Don’t use rollover/hover effects that don’t work on touch screens.

12. Leave plenty of white space, even on small screens. 

13. Finally, actually test your site on various devices even if you have the ability to “preview” your content on various screens.