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