Mobile First: A new approach to website design

Mobile First: A new approach to website design

What’s in your pocket? Your iPhone, or Droid or whatever, of course. And, sure, you use it to check out a website now and then. But should it be the driving factor in how websites of the future should look? There is new thinking now to do just that, to put the mobile phone at the forefront of the web design process. This philosophy is called “mobile first”, naturally.

Traditionally, we consider what we see on the desktop as the “real” website and what you see on your mobile phone as a simplified version of that, limited by the tiny amount of real estate it has for display.

So, also traditionally, when you design a site you first build the website you way you think it should look on, say, a 1020 x 840 pixel screen, and then whittle the design down to fit on a mobile.

responsive design
An example of responsive design for the desktop, tablet and smart phone

But is designing for the desktop and laptop computer first and then simplifying the design to fit on smart phones the best approach?

In some way that approach makes sense. Sure,  there are over 1.2 billion mobile users worldwide but  still, on average,  the account for only 25% of  web views. Shouldn’t the other 75% of users who view a website on a full size screen come first? And since you can do so much more with the large screen, shouldn’t you work out the big issues first before you start to work on a more limited stage?

There is growing opinion though that this dynamic should be reversed, that you should first design your site to fit the mobile phone and then add in more features to fill the big screen. That is, Mobile First!

This is an approach I was introduced to recently, and though I have not yet put it in practice yet,  it is starting to make a lot of sense. If you  put your fresh creative energy into working out the design for the mobile you have worked out the details that matter. You have selected the essential elements and the key aspects of your branding. Then when you move to the larger screen, it is all about enhancing that basic framework.  You have free rein to think big and have a bit more fun. You could say it is a little bit like saving your dessert for last. Instead of ending the design process with the decision of what to cut, you instead get to decide how to make it even more robust!

If you want a more in-depth look at the thinking behind Mobile First check out this article Mobile First Design: Why It’s Great and Why It Sucks.

Anything on your mind?