Mobile first development: lean & mean

With the ever expanding range of devices we browse the web from the day to day process of website development becomes more complex. Catering for more and more screen sizes can bloat a website and slow it down. Taking a mobile first approach will not only benefit the website’s users but also make it faster.

Since the inception of responsive web design, a term coined in 2010 by Ethan Marcotte, developers and designers have been debating which approach to take. Option 1 is to design and build the full desktop site first then remove features and on-screen elements as the screen size comes down. This is often referred to as ‘graceful degradation’. Option 2 is to design and build for the smallest screen size first and then add features/on-screen elements as the screen size goes up. This is called ‘progressive enhancement’. This article is not intended to argue the pros and cons of either approach but graceful degradation can lead to UI patterns and user experiences that are not desirable.

From a very basic point of view you can see that taking a full desktop site design down to a mobile screen size is very tough. Large UI elements such as mega menus, carousels, full screen backgrounds, parallax elements etc do not scale down well to a mobile screen. The only approach for the designer to take is to remove UI elements from the design for mobile and if this is not done carefully it can leave the user with a sub-par experience. Mobile should not feel like an afterthought, the golden rule is that a mobile user needs to be able to access every piece of information available to the full desktop site. At the time of writing 25% of global web traffic comes from mobile devices, and this trend shows no sign of slowing down, can you really afford for 25% of your audience to have a poor experience of your website?

You could argue the case having separate UI elements in the design that only appear for mobile; but this can lead to double the CSS, Javascript and images being loaded per page (one set for desktop and one for mobile). Another option is to have a dedicated mobile theme for your website (or a subdomain dedicated to mobile usage) but this method is fraught with user agent sniffers and hacks to activate the mobile experience. In short it is not a sustainable solution for the future as new devices will have new user agents that you may not have catered for.

Progressive enhancement, our favoured approach, allows us to provide users with a great experience across all devices and a website that performs well. It is an approach that forces our designers to focus on the core aspects of the website; there isn’t room on a mobile device for unhelpful and cluttered UI elements. The mobile site needs to get information across to the user in a clear manner and one that targets the site’s audience directly. When the screen sizes start to go up the designers then have room to experiment and flesh out the design to take advantage of the extra screen real estate. But crucially the core of the site is still the same and no set of the users have been disadvantaged, in terms of information, just because of the device they are using.

The other reason we love mobile first is it forces our developers to think with performance in mind from day one of the build. Typically mobile devices have slower processors and less memory than desktop computers; this means that heavy websites with lots of images, CSS files, Javascript libraries will run slowly. You also need to consider that users will likely be browsing on mobile networks which can be slower than home/office broadband but more importantly users will not be pleased if their monthly data allowance is swallowed up by your website. As a result our developers ensure that the site is built in the most lightweight manner possible, by selecting the best platform to build on, optimising images, minifying CSS and Javascript and reducing the amount of ’round trips’ required to load a page. The result of this is that if the website runs quickly on a mobile device it will absolutely fly on a desktop device; we’ve done this to great effect on the Curchods Estate Agents project.

The benefits of a well performing website spread far beyond the basic improvement in load times. Google uses page latency as a factor in it’s search ranking algorithm so if your website is loading slowly it will be stopped from climbing the Google rankings, losing your audience. We also should not forget that web users are impatient beings, an extra second on your websites load time could lose up to a quarter of your users; if you are running an e-commerce website these kind of page delays can cost you serious amounts of revenue.

To sum up: build mobile first, make the website fast, give a great user experience, gain audience and make money.