The Background of Mobile-First
Mobile web use continues to grow exponentially, with a consistent upward trend in mobile web browsing having been evident for nearly a decade now. Once the bridesmaid, mobile internet use is now well and truly the centre of attention, having overtaken desktop back in 2016 and continuing to pull away ever since. StatCounter’s latest figures (September 2018) put mobile browsing at around 52% of the total share, with desktop averaging around 44% and tablets making up the small remainder.
The lines between desktop, tablet and mobile screen sizes are becoming ever more blurred, with phone screens getting bigger and computers seemingly morphing into tablets along the way. This places a greater emphasis on a truly fluid responsive design approach to the web, something which has become the standard, particularly over the last couple of years.
In the past, many developers opted for separate mobile versions of a website, effectively duplicating the content, as well as doubling the time and effort required to complete the project. This approach quickly became antiquated as responsive web design (RWD) took over, focusing on designing not for a specific device or screen size, but building a website which can adapt accordingly.
This approach followed the concept of “graceful degradation”; starting with the all-singing all-dancing version of a website and slowly removing functionality and features until you had something which worked on mobile too. Whilst this method is effective, it is not ideal, and a different approach quickly started gaining traction: “progressive advancement”.
Essentially a reverse of graceful degradation, progressive advancement focuses on starting with the most effective solution for a limited environment (in this case a smaller screen size) and enhancing it as most on-screen real estate and processing power becomes available (desktop browsing). In terms of the web, this became known as the “mobile-first” approach.
What is Mobile-First?
Mobile-first seeks to flip the standard design process on its head, encouraging designers and developers to create the perfect browsing experience for users on smaller devices first, before moving up and adapting for larger screens. Previously, many websites were built for desktop, with the mobile version often an afterthought which suffered from key elements simply being hidden or removed for convenience – all of which risked damaging the user experience, the primary user base of most websites these days.
Google themselves have recognised the importance of this movement and last year began altering their search engine rankings to give preference to websites which were mobile-friendly, before eventually removing those which are not from their mobile search results entirely. The long-term plan is expected to be a blanket removal of all websites which do not work well on mobile from Google’s results, regardless of whether you are searching from a smartphone, computer or any other device.
The Challenges of Mobile-First
Mobile-first presents several unique challenges to web designers and developers.
Firstly, and most importantly, is accessibility; an individual browsing your website on their phone shouldn’t be punished for doing so with a bad experience. Accessibility goes beyond making sure that the text can be read and the colours don’t clash, things such as connection speeds and browsing environments need to be considered too.
Unlike traditional computers, people browsing on a phone could be anywhere in the world, with any connection speed. Filling your site full of large images and unnecessary web fonts could cause real issues for anyone on a patchy mobile data connection. There’s no reason that stunning, full-screen photography, for example, can’t be used on your site, but expecting mobile users to wait 30 seconds to download a picture is likely to frustrate them or even drive them away altogether. Displaying different sized images depending on the screen resolution of the device means that those on a small screen can enjoy a fast and enjoyable experience, just like those on a desktop using a high-speed internet connection.
Another thing to consider is the way in which elements are ordered and displayed on mobile. The traditional approach to responsive design has been to simply stack horizontal elements vertically on a smaller screen size, but if a page features a more complex layout, this can lead to an unnecessarily confusing mobile browsing experience. For example, let’s say you have a layout on your website which features some left-aligned text, following by an image floated the right, then on the row below the image was to the left and the text to the right. Simply stacking this on mobile would result in text-image-image-text, whereas the ideal layout would be text-image-text-image. See the illustration below:
Fortunately, there are plenty of ways to achieve this using modern development techniques, most notably to the rise of “flexbox” which allows for fantastic layout manipulation and is a must-have tool in any developer’s arsenal as they tackle mobile-first design.
Another perk of building mobile-first is that it can also help to clarify the design process better as a whole. By attacking a project mobile-first, you can be better able to understand what the most important elements of your website are, giving priority to certain aspects of the content over others. In most cases, this will seamlessly translate into a better desktop view too and provide a better experience for all visitors; the welcome side effect of which can be a more painless design and development experience in the process.
Why Should My Website Be Mobile-First?
Put simply, if you want your website to appear in Google, you need to be taking a mobile-first approach. When it comes to driving traffic to your website and helping to grow your business, the power of Google is clear to see.
If your website does not follow the mobile-first approach, your search rankings will suffer, meaning your site will appear further down the search results and could disappear entirely.
Let’s not forget that over half of the traffic coming to your website (though the exact figure often depends on the nature of your business) is coming from people on mobile devices and to alienate these people simply doesn’t make sense.
Aside from this, you also want your customers (both existing and prospective) to have a positive experience when using your website, regardless of where they are or what device they are viewing it on.
There’s no getting away from mobile-first, particularly with giants like Google actively encouraging it’s use. The benefits are clear to see, both from a business view and that of the team building the site. Some adjustments in process and mindset may be needed initially, but the advantages of this approach vastly outweigh any potential bumps along the road.
At the end of the day, it will be your customers who make or break your business and with many of them finding you through your online presence, you need to make sure that your website is set up to give them the best possible experience, regardless of how they find it.
You never get a second chance to make a first impression, so make it count – If you would like any advice about updating your website, contact us today to talk to one of our experts: 01284 706842 – email@example.com