Mobile First Responsive Design
Progressive Enhancement v Graceful Degradation
Mobile first design is a practice that pretty much sums itself up without the need for much further explanation: designing websites for the smallest screen first and working your way up. It has quickly become the most popular and widely recommended strategies for responsive website design.
Many of our latest web projects were designed as mobile first, even the website you’re now looking at was designed specifically for the smallest and most restrictive displays before larger displays were considered. This type of design is quite often referred to as ‘Progressive Enhancement’ with mobile first being a main facet of this approach. In basic terms, you take the most essential, user focused elements of your site and slowly add to them with more complex elements as you progress through larger devices. Think of it a bit like a model tower made with Lego - you can keep adding to the core to make it bigger and more fancy.
Traditionally, website design would have taken the route of ‘Graceful Degradation’ which is basically the complete reverse of progressive enhancement. This approach begins by designing the largest, most complex design and then slowly stripping these elements down for smaller devices. The main problem with this method of web design is that it can leave mobile and tablet versions of the site looking like an afterthought. Designers will focus on the advantages of web browsing on desktops and forget the limitations of mobile browsing making the experience lesser for those viewing on mobile devices.
To explain the shift towards mobile first more simply, over 60% of web traffic now comes from mobile devices, a statistic that is steadily growing year on year. In addition to this, people are now spending longer periods of time browsing the web on mobile devices than ever before.
So, why mobile first?
Because it allows you to cater to the biggest segment of the online market and ensures the website will function at its best on all devices, not just one. Designing with the limitations of mobile devices in mind, such as screen sizes and data usage, means that web content can be ruthlessly streamlined. The only content you should see is the content you would want to, almost forcing businesses to be much more direct with the information they offer via their websites.
Websites that offer a decent mobile version are ranked much more favourably on search engines, with those that don’t being penalised. Earlier in the year, Google announced that it would be taking page speed into consideration when ranking mobile websites, again impacting the way content would be delivered and displayed on these sites. This now means that many mobile sites often require some content to be different to that featured on the desktop site. Video and large format imagery are often removed entirely from a mobile version. This can be avoided by planning the use of these elements to cater for mobile devices or offering mobile alternatives, such as a static image to replace a video and use of smaller format or square imagery over large landscape graphics.
How does mobile first actually change website design?
You may hear mobile first design being paired alongside content first design and some would argue that they are actually the same approach entirely, with mobile design being much more strictly user experience based, ensuring that content takes a front-and-centre role.
Mobile first design, or perhaps responsive design as a whole, has also changed the design language for desktop sites. With some users now exclusively using mobile devices or, in many cases, viewing the ‘full’ desktop site after viewing on mobile, design features from mobile have begun to bleed over to the desktop alternative. Navigation on desktop websites is becoming much more simplified, featuring only a few elements or replacing the whole navigation with the mobile styled hamburger. Secondary or dropdown navigation items have also taken a hit as these are often too complex to view on a mobile device, replaced instead with on-page links that flow more organically with the content. Hover elements are also playing a less vital role in website design; you can’t hover over elements on mobile websites just yet so designers are choosing not to rely on these elements as much. In a direct link to this, clickable elements have become larger, simply because a finger is much wider and less precise than a computer’s mouse.
Over the past ten years the web has become a portable entity that we carry with us, not one that is restricted to our desks at home or work. Whilst mobile first design does have its limitations and draw backs, they only seem to work to enhance the user experience of the site by delivering the most essential content. With mobile devices now becoming the primary way of consuming online content, the practice is only going to go from strength to strength, with new and exciting design languages on the horizon aimed exclusively at mobile website design.
If you feel like your website is not mobile friendly, if it could do with an update or if you are interested in launching a new website, please get in contact with us. We’d love to help you reach a wider potential audience with a great mobile responsive website.