‘Mobile First Design’, it’s a phrase that has been thrown around a lot recently in our industry, but what exactly is it?

Mobile First Design is the theory of making the mobile experience of your website, the priority. Traditionally, web design agencies have gone in full throttle on the desktop side of things and left the mobile side as an after thought. Not only does that approach cost more in the long run for the client, but it also takes more time.

Statistics

Lets talk statistics.

If we cast our eyes back a few years, mobile first design was definitely a niche subject, something that was spoken about at web design conferences or on web design blogs and never with a client. Today the statistics paint a different picture. In the UK alone there are 82.7 MILLION mobile subscriptions and 94% of all adults own or use a mobile device. Pretty insane, right? 61% of those mobile subscriptions are tied to a contract, 80% of mobile device owners don’t even leave their home without it.

Think about that for a second, that’s a massive audience with a web connected device just waiting for you to tap in to.

There are roughly 2.33 billion internet users worldwide, of those internet users 1.2 billion are connected by mobile devices.

I’m sure by now you get my point, these figures are only going to continue to grow over the coming months and years.

Why?

Why mobile first? The statistics above answer this question, there are too many users connected to mobile devices that it would be crazy not to give them more priority. Now I’m not saying desktop shouldn’t be given priority, as that would be stupid. After all, it is still the key access method for users wanting to browse the web.

Responsive Web Design

Responsive Web Design is another phrase thrown around a lot recently. Responsive Web Design is a fancy way of saying a website that adapts to the device accessing it and delivers the appropriate output based on screen resolution and other information.

Traditionally, mobile websites were served up based on your device e.g. if you visited with an Android or iOS device the browser information (user agent) would be intercepted, and if found to be a mobile browser, you would be referred to a mobile view of your website e.g. m.facebook.com.

More recently, web designers have moved on to using responsive techniques to give you access to the content you want to see in a more readable fashion.

Through the early stages of designing a responsive website, mobile plays a massive part. Traditionally you could focus on delivering the desktop experience, then design and build the mobile site separately. With responsive design it is important that the mobile requirements are taken in to consideration very early in the design stages to ensure the website can transform in to a brilliant mobile experience. By considering those requirements early you build the mobile and desktop sites hand in hand, rather than attempt to convert a desktop website in to a responsive website. This saves time and money for the client, you get the website out on time and on budget and everybody is a winner.

How does it work?

Magic.

No in all seriousness, we use these things called Media Queries to determine the size and orientation of your screen and modify the style based on that information. The greatest thing about using Media Queries is the structure of your website remains the same, we don’t need to create two copies of your website and display one on a subdomain to give you a good mobile experience. We develop the mobile view as we go along by simply modifying our stylesheets to support multiple resolutions.

As an example, try resizing this browser window if you’re on desktop, and if you’re on mobile, well this is technically a desktop website. The content on this website folds in on itself when resized and the sizes and layout is modified to fit a more traditional mobile view.

Negatives

With every positive, there comes a negative. There is one clear negative when developing a website using a mobile first strategy and that is time and therefore cost. Developing a website that works smoothly using responsive techniques is a bit trickier than a standalone desktop website, but when balanced out against building a full independent mobile experience the cost savings are substantial. Especially when this is high up on your project checklist.

The Future

So what does this mean for the future of website design? Well it’s simple, mobile is going to become more and more dominant and any person or company ignoring this fact should do so with caution. One of the biggest changes required is the mindset of a lot of agencies and web designers. We need to switch to the mobile first mindset and make it play a key part in every website build, rather than when the client specifically asks for it.

The statistics speak for themselves, mobile is a powerful medium waiting to be harnessed. Google have created this handy little PDF… that shows just how dominant mobile usage actually is, check it out!

Final points

I’ve covered every topic relating to mobile first and responsive website design and hopefully you will have more of an understanding why this is such an important topic in web design today. I regularly see agency websites lacking not only a responsive website, but a mobile website full stop! The statistics are clear, if you don’t have a mobile website you’re missing out on a massive audience. Most of todays mobile users don’t want to be pinching to zoom and dragging on a website, they want a tailored experience for the device they’re using.