Mobile First Web Development: Benefits and Drawbacks

Here at Cornerstone Digital, an increasing number of our clients are inquiring about responsive websites – those that are able to adapt to any screen size. So we thought we might address this issue from a web development point of view and look at the pros and cons of the new buzz in the industry – a mobile first approach to web development and how it relates to responsive designs.

What is a Mobile First Approach?

From the year dot, web developers have designed websites for the desktop. Then suddenly we had a massive upsurge in mobile device usage and along came responsive designs. These responsive websites however, are still designed for the desktop with the mobile component seen as a secondary requirement.

So turning this approach on its head, a mobile first approach means that the developer designs the website for mobile devices first and then upgrades this to a desktop version. Sounds simple? Well maybe it is and maybe it isn’t – let’s take a look at the pros and cons of this type of revolutionary approach to web development.

First of all, there is no need for us to delve into the statistics to demonstrate the increased use of mobile devices to access the internet – it’s just about a global fact right now. So with this as given, a mobile first approach is really an argument about ‘graceful degradation’ versus ‘progressive enhancement’.

Pros of a mobile first approach

A mobile first approach to web development stands firmly in the progressive enhancement camp. This means that the website is designed with a minimum of everything – screen size, plugins and processing power. This more compact design creates a website that displays perfectly on mobile devices.

From this minimal design stance, the website can then be upgraded with additional plugins, processing power and of course screen resolution, thereby leveraging the size advantage of a desktop computer.

The huge advantage of this approach is that the website is optimized for mobile devices. So it is fast to load with all extraneous content stripped away, leaving a streamlined and polished end product.

Cons of a mobile first approach

Those who are against a mobile first approach are firmly in the graceful degradation camp. This means that the website is firstly designed for the desktop and then the problem of displaying it across all browsers and all mobile devices is addressed.

For a website to be so adaptive to mobile devices, all extraneous functions, content and features need to be trimmed back to a point where you have achieved your endpoint – a website that displays well on all mobile devices, as well as on a desktop PC. So in other words, the website is scaled back from the desktop version or undergoes graceful degradation, as it is streamlined to suit mobile devices.

The reason that some people are unsupportive of a mobile first approach is that clients want to see a demo of their site before they sign off on the design. They want at the very least, a wire frame and in most cases, a design set up in Photoshop for them to peruse.

So with a mobile first approach, the bottom line is that the client really has to trust the web developer from the very beginning of the development process, as they won’t see a desktop version of their website until much later in the process.

How does a Mobile First Approach Fit in with Responsive Designs?

With the mobile first approach, you start small and build bigger, so all the developer has to do is to add all the additional components needed for a full desktop experience. This fits in well with a responsive design, as it is easy to add the extra CSS required by desktop versions and to simply use additional media queries to flesh out the styling.

The Take Home Message

From a development point of view, the mobile first approach means that

Cornerstone has been one of Calgary's top web development firms since 2004. We specialize in developing complex sites with advanced features, e-commerce capabilities, and custom built web applications. We’ve built a lot of websites.