Building websites with a mobile first mindset

Your website is your shop window to the world, especially if you’re running an e-commerce business. 

Today, more than half of all web traffic is mobile, and this is a trend that’s only set to continue. In fact, according to the Ericsson Mobility Report, a further 25% in mobile traffic is expected by 2025!

So, why is it that mobile web design still seems to be pretty much an afterthought for a lot of people? Why are people still doing things in an old school style – designing for desktop and then trying to make it work on mobile?

When you look at these statistics, it just doesn’t make sense. Mobile has well and truly overtaken the good old desktop when it comes to accessing the internet, so we wanted to give you a brief insight into not only building a mobile-friendly website but designing that website with a mobile first mindset!

First impressions count!

We’ve all been there. We’ve tried to view a website on our mobile and it’s absolutely all over the place. The chances are that after a few attempts at pinching and stretching your screen, you’ve given up and left the website. You may even have left and headed over to see if the competition is doing things any better.

We all lead hectic lives and seem to be always on the go, so let’s face it, you’re much more likely to want to buy a product or service from a website that’s compatible with a mobile device.

What exactly does mobile first web design mean?

The term ‘mobile first’ was initially coined back in 2009 by Luke Wroblewski, an internationally renowned product design pioneer who is now at Google. The mobile first concept is precisely how it sounds – designing first and foremost for the mobile experience.  

It’s all about starting to design and plan your website content for the smallest screen size first, working your way up to the largest screen – so mobile, and then tablet, with the desktop version coming at the end of the process. If you’re someone who likes to get technical, this process is known as ‘Progressive Enhancement.’

Why design with a mobile first mindset?

The rationale behind doing things in this way is to ensure a great user experience when accessing your website on a mobile device. As your design will contain only the essential features that it needs, it strips away the superfluous and, therefore, reduces the risks of losing your core message and functionality. 

With such a considerable amount of people using their mobiles to access the internet, it makes total sense to develop with a mobile first mindset. Plus, like anything in life, it’s always best to try and tackle the most challenging job and get that out of the way first. Desktop design will feel like a piece of cake once you’ve conquered the mobile version, making your life much easier. 

If that hasn’t already convinced you, then maybe this will? The mighty Google uses the mobile friendliness of a website in its ranking algorithms, and it will penalise any websites that aren’t optimised for smartphones and tablets. 

While mobile first is an important strategy when it comes to creating your website, don’t neglect your other platforms. If you’re genuinely committed to developing your business’ online presence, then your website must work effectively across a variety of media, including desktop, tablet, and mobile. 

Top tips for designing with a mobile first mindset

Designing with a mobile first mindset doesn’t need to be overly complicated, and it doesn’t mean having to change your entire process. 

Here, we’ve provided just a few top tips to make your website more mobile-friendly:

• Keep it simple. Less really is more when it comes to designing a mobile-friendly website. Keep your content clear and concise, and ask yourself whether every element that you are including is really necessary. Use simple fonts that are an appropriate size and use colours that stand out from the background for easy reading.

• Ensure that your design is consistent so that your users don’t get confused. It would be best if you aimed to keep all of your buttons, labels, and elements the same on each page. Make use of white space. As well as being more visually appealing, it also makes navigating on mobile much more straightforward.

• Optimise your images so that they don’t slow the website down. This can really put users off and may even make them look elsewhere

• Simplify your navigation by using a hamburger menu. No, we’re not talking Big Mac and fries – a hamburger menu is a column that opens to reveal a navigation menu when it’s clicked. It keeps your website’s navigation neat and tidy, and stops users from becoming distracted from information overload

• Most people really hate having to type on their mobiles, so expecting users to enter a load of information is a no-no.  For example, if you’re asking someone to sign up for your newsletter, don’t ask for too many details, and for e-commerce sites, offer the option as checking out as a guest rather than asking users to register for an account

So, if you’re serious about creating an easy to use website that both your users and Google will love, mobile first design is simply the only way to go!

If you’d like to build a website that works on all platforms, send us a message to hello@avidmode.com