Mobile first principles

> > Mobile first

Updated: January 3rd 2016

Menu

What is mobile first?

Mobile first design is basically the practice of ensuring that webpages look great and function great for users on mobile (small screens) as a first step.




What does that matter?

Mobile first design is not just a mindset or a trend, it is a fundamental part of designing things for a multi screen world. It changes the core of many practices in a good way and creates incredible experiences for the user regardless of what device they are using.

Mobile first isn't just making things fit on a smaller screen

There are big differences between the desktop environment and the mobile world. It is much more than the space of the screen.

Desktop users

desktop users
  • Large screen with plenty of space
  • Stable, trouble free internet connection
  • Using machines with a great deal of computing power
  • Power supply and use is stable and not an issue
  • User is sitting comfortably in a chair
  • Lighting does not affect visibility
  • User is likely not in great hurry

Mobile user

mobile users
  • Small screen of differing sizes
  • often poorer, less stable internet connection
  • Less computing power available
  • Less electrical power that is constantly lessening
  • User is moving or doing other things
  • Different lighting affects visibility of page
  • User is more likely to be in hurry

Creating a web presence for the mobile world

When we said that mobile first design was...
"the practice of ensuring that webpages look great and function great for users on mobile (small screens) as a first step"
you probably were not thinking of all those factors were you?

To make sure we have the mobile user needs met requires more thought than just fitting things on a smaller screen.

By first meeting the needs of mobile users, you can simplify things greatly as I will illustrate.

The mobile first approach

The first thing you have to do in the mobile first approach is to forget the desktop environment exists.

Functionality, space, utility and resource planning are entirely done for the small screens and lower resources of mobile devices.

The first sketch

mobile sketch

The sketch of our mobile page must be entirely thought of from the perspective of someone standing using a mobile phone with sun glaring on their screen causing poor visibility while hurrying to a meeting.

  • Are your calls to action big enough?
  • Is the purpose of your page clear enough?
  • Do your colors contrast enough to be readable?

Navigation

mobile navigation

A mobile user requires easy navigation. There is no room for error here on this four inch mobile screen.

  • Make your navigation is clearly marked and easily used.

The content

mobile content

Make sure your content is great for mobile users first.

  • Your content should answer questions quickly and early.
  • Do not depend on a sidebar for users to understand your page (there is no side bar in mobile)
  • Do not depend on a sidebar for branding and sales / ads (there is no side bar in mobile)

Social

mobile sharing

The way you use social buttons has to change dramatically. Nobody who is looking for an address of a business cares about how many plus ones you have, they care about the address.

There are not many good reasons to have social buttons that make external calls and add javascript to a page for a mobile user. If you want social buttons, make sure they are static, and do not need javascript to appear.

Social count buttons require dozens of external calls and resources.

Eliminate user experience problems

Google has identified several common mobile user experience mistakes found on many mobile pages. Make sure you are not making these, as they are how Google judges your pages on mobile friendliness.

You can see if these mistakes are on your page using the free mobile seo tool here.

The CSS

mobile css

The first interaction that designers will notice about mobile first (and often be uncomfortable with) is the CSS creation.

When you are creating the CSS you have to remember there is no such thing as the desktop environment yet.

Take responsive web design and media queries for example (if you aren't sure about media queries here is an intro article on them). When responsive web design got started most people used media queries to go from a large screen to a small screen. In essence they were saying "if the screen becomes smaller than 600px wide, then change this and that".

responsive design

In other words, the css of the website was for desktops and the variable css was for tablets or mobile screens.

We can not think that way in mobile first design because as I have mentioned many times there is no desktop environment yet. We are doing this mobile first, and that means we create the mobile page first without one single thought of the desktop.

  • Mobile first design has the main css of the website for mobile screens and the variable css kicks in when the screen gets larger.

Speed

Page speed is likely the most important and controllable challenge to your mobile project. Your webpage must load fast and load well in the mobile environment. Speed is great for users and should be a high priority in your mobile seo planning.

By just doing the simple things I have mentioned above, you have already made a massive improvement to page speed.

  • Smaller images mean less to download
  • Less resources and calls - using static social buttons removes dozens of calls and resources
  • No need to use big javascript libraries for your mobile page
  • Your CSS will be smaller, cleaner and better and is now mobile specific

Mobile first

There is a great deal of upside to thinking, designing, and developing using the mobile first approach.

Being mobile friendly is now a Google ranking factor.

Mobile first can really make you a better designer and/or developer and make your projects more profitable.

Benefits of the mobile first approach

  • Make more money
  • Save more money
  • Better for users

Money earning

Regardless of how you are making money on the web, mobile friendliness will make you more of that money. With mobile traffic overtaking desktop traffic anyone selling anything will reach more people via mobile if their mobile presence is done well (which is the first step of mobile first design).

If you are making money mostly from ads or Adsense, guess what? Mobile spend on ads is soon to overtake desktop spend on ads. This means that the ad dollars will be found on mobile more than on desktop.

If you have an online service that people are paying for, more people will be using that service on mobile than they will on desktop at some point. If your online service doesn't work great and look great on mobile, people will use other services.

Money saving

If you are creating or improving your web presence you will save money using a mobile first approach.

It is far less expensive to create a system for mobile first than it is to convert a system to it later.

Users

A mobile first approach helps your users (customers) a great deal. The entire point of having a web presence is to reach your users and have that interaction be as pleasant for them as possible.






Patrick Sexton by