Mobile Seo arrow Mobile first methods

mobile screen above desktop screen

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

Mobile user

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

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.

Navigation

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

The content

Make sure your content is great for mobile users first.

Social

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

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".

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.

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.

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

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 Sextonby Patrick Sexton

Mobile first methods