Smartphones are everywhere! You might be reading this on your phone right now, whether you are or not, you can’t deny that the rise of smartphones has been meteoric. The increase in the number of smartphone users has also changed the way people access the internet, just last year 52.2% of all global web traffic was conducted via mobile phones. This shows just how important mobile-first web design can be, as mobile phones are the most popular way to view web pages. Long gone are the days where web designers could get away with just designing websites just for desktops, they have had to adapt their skills to keep up with the times.
So, what exactly is it?
Mobile first web design is just what you would expect, its the process of sketching, wireframing and designing a website for mobile devices and then scaling the design up to cater for larger screen sizes.
Mobile phone screens provide a much smaller space for a web designer to work with, meaning that they have to think about what elements to give priority to, only including essential elements. This provides a solid base for the website and provides the foundations for the site to be scaled up onto larger screen sizes. This also helps to improve user experience on the website.
What are the alternatives?
When designing websites, specifically for mobile devices, first became a necessity, designers had the option of two design strategies; adaptive or responsive. With these design strategies, the main focus was to provide users with the optimum experience on desktop or traditional computer screen sizes. Websites were designed primarily for desktop and then scaled down or adapted to fit mobile screens. This often meant that the mobile version of a website was a bit of an afterthought for designers so it fell behind the desktop version in terms of user experience.
Typically, this wasn’t a problem as the majority of online users were using desktop devices. However, since the number of mobile users has overtaken the number of desktop users, there is no justifiable alternative than to have a mobile first design. If your website or web designer doesn’t prioritise the mobile version of your site, you are probably doing it wrong.
All this emphasis on mobile first design… What are the benefits?
A Higher Google Rank
Google warned everyone years ago that mobile first indexing was coming and even covered the steps you need to take to get ready for it in an article written at the end of 2017. In March 2018, Google finally announced that they had started to roll out mobile first indexing for sites that followed the best practices for it and by this point, the vast majority of websites are indexed mobile first.
Mobile first indexing simply means that Google will look at the mobile version of a website in order to rank it before it looks at the desktop version. Moz has produced a great article that covers mobile first indexing in detail if you would like to take a look at how it works. By employing a mobile-first design strategy, a web designer can greatly increase the chances of a higher Google rank.
Mobile Conversions
By using a mobile-first design strategy, businesses can greatly increase their conversion rate. A mobile-friendly website with great user experience can help users making decisions such as a purchase or getting in touch via a contact form easier to complete. However, regardless of how good mobile first design sounds, the conversion rate of desktops (3.82%) is actually higher than that of mobiles (1.32%), but due to the rise in mobile web traffic, now surpassing that of desktops, this is sure to change as the gap between the two is closing all the time.
As mobile web traffic increases even further ( and it shows no signs of slowing down), a trust will start to build towards mobile-friendly websites even more and this will, in turn, lead to increased conversions on mobile devices.
Tips For Mobile First Website Design
Focus on core content
Screen real estate is limited on a mobile, so content needs to be clear, concise, simple and straight to the point. Users want to find what they are looking for and don’t want to work to get there, if a user wants to get in touch they will expect a contact button or a click to call button, if they have to scour multiple pages to find these buttons then the chances of this user leaving your website are very high. Avoid large blocks of text, people browsing the internet on their phone are likely on the go, they haven’t got time to read paragraphs of text to find what they want.
Guide the way
On a desktop website navigation, there is plenty of room to have links to all the pages visible at once, but do this on mobile screen size and there will be barely any screen room left. This is why you will often find mobile websites with a hamburger menu that expands the menu out when clicked, this is the web designers way of saving room, only having the menu visible when it’s needed. The navigation should be easy to use and uncluttered, the links to the pages should be big enough that they can easily be tapped on a phone screen yet not too big they become intrusive. Care should be taken for dropdown menu items due to there being no hover effects on mobile, if there are too many pages that dropdowns are required, make it obvious that the dropdown function exists, the last thing you want is people missing those pages because they simply don’t know they are there.
Testing & Improvements
Make sure to test that your website works flawlessly on mobile devices, there’s no point in a shiny brand new website that people can’t even view as you intended. Just like with a desktop version of a website there are multiple web browsers to cater for, but mobile websites need to also cater to the multitude of phone screen sizes out there, including devices such as the mammoth new iPhone, it’s like having a tablet in your pocket! There are tools out there such as Google’s Mobile Friendly Tester that will allow you to see whether or not your website is mobile friendly and will even give you tips on how to improve it.
Neglecting mobile first design in this day and age is a big no-no. It should form the foundation for any website and NOT be treated as an afterthought. Design for the platform it’s going to be viewed on the most, it’s as simple as that!
Posted in Web Wednesdays