A Beginner's Guide to Mobile First Design

2021-01-05

3 min read

In 2010 at the Mobile World Congress Google CEO Eric Schmidt announced that moving forward, web designers should put mobile-first.

What is mobile first design?

When web developers were first making websites they were designing them for use on desktop computers. Things have changed a lot since then and in 2020 roughly half of internet traffic worldwide was on mobile devices. So now when creating a site we need to make sure that it looks good and is usable on any device. Mobile first design is a design philosophy which begins the process from a mobile screen size. Mobile design is more limited - there is less space - so it forces the designer to include only the essential elements on the page.

How do we create different layouts for different screen sizes?

The process of creating different layouts for a web page is called wireframing and in its later stages prototyping. These are visual representations of the design that allow the client and the designer to see the site before they write any code. Web developers use a range of tools to create these but the most popular include Adobe Xd and Figma. These tools have templates to allow designers to sketch layouts based on the size of the most common devices.

an image showing wireframes at different device sizes

Image by Peter Gajdos on Dribble

What makes a good mobile layout?

A good mobile first design considers the specific ways that users will be interacting with the site on mobile. More so than on a desktop layout designers have to create a clear visual hierarchy so that the content is not jumbled together. Mobile layouts contain less text with larger font sizes and rarely have more than a one column layout. People most often interact with a site on mobile by tapping elements on the screen so these ‘touch targets’ need to be big enough for people’s fingers. Images and graphics should not be so large or complex that they are not readable on mobile screens.

How does mobile first help SEO?

Since September 2020 Google has used mobile first indexing for all websites. This means that mobile will be conisdered the primary version of a site for indexing and ranking (historically it was desktop). The majority of Google Search users are on mobile devices so a good mobile layout will boost your site's SEO.

Designing mobile first reflects that mobile is now the most important way for users to access your site.

Read more about mobile first web design at the following links:

https://www.justinmind.com/blog/complete-guide-to-mobile-first-design/

https://www.designrush.com/trends/mobile-first-web-design

https://www.uxpin.com/studio/blog/a-hands-on-guide-to-mobile-first-design/