Tips for Designing Websites for the Mobile First Generation

We probably don’t need to tell you why creating a mobile first web experience is important. But in case you do need a little extra convincing it’s worth reminding you that as of 2015 the steadily increasing rate of mobile device web browsing reached a tipping point at which mobile devices contributed more to UK and USA web traffic than desktop PC’s for the first time in history. Fast forward to 2017 and on the whole when you include browsing which takes place inside mobile apps, particularly for social media usage, and that figure is over 60% and rising still.

93% of millennials in the UK own at least one smartphone device and via this method they check their social media accounts on average more than 20 times per day. We really are in a mobile technology first era and there’s no signs of that changing or even slowing down in the coming years. Mobile usage statistics are a pretty compelling story for any brand or business to put mobile first in almost all aspects of marketing but there is another consideration.

Mobile devices by nature are a compulsive and reactive tool for consumers to get information or follow up on intrigue. For this reason mobile browsing has become a very important step in the consumer sales cycle. Both as a digital discovery vehicle but also as part of the traditional real world retail purchase journey. Price comparison is extremely common and increasingly takes place at the physical point of sale where consumers have been empowered by the mobile web to check they are getting the best price before buying. It’s not just price though, consumers will look at peer to peer reviews online at the point of purchase and even search for extra product details. On top of the part mobile plays in the greater consumer sales cycle, millennial online shoppers are increasingly trusting that mobile purchases are just as safe as doing so from a desktop. As a result mobile eCommerce transactions are also on the rise.

So how can you put mobile first thinking in to place? First place to start is your website. Here’s a few simple tips to get you thinking more mobile friendly:

Keep Touch in Mind
It’s surprising how often this goes amiss in modern web design. Some brands are so wrapped up in having a beautifully designed and executed cutting edge site on desktop that they don’t stop to consider how that same site will function on a mobile device when it comes to using touch. Almost all modern day smartphones are use a touch screen user interface.

The best tip here is to think about the mobile design right from the start of your design process and just assume everyone in the world has fat fingers. Make navigation’s clear and not overly cluttered and use large images for easy touch navigation around the site. Don’t wait until the end of your design process to test out the mobile version of the site. Run this alongside your desktop build so you don’t find yourself going back and re-doing your basic design templates.

Use a Single Vertical Page Structure
This tip is mobile specific but it also fits in with modern day desktop trends as well. The days of fitting as much info on to a single page by creating various columns and content areas above the fold are long gone. Users like to scroll. They will swipe bottom to top with their thumb as they browse so create a page narrative that suits that style of browsing and allows all the content on the page to be viewed big and bold in that design style.

With web browsing taking place in portrait mode for the significant majority of browsing sessions it makes sense not to over clutter your pages horizontally and if you are going to do this you’ll need to optimise the mobile layout to work vertically when loaded on certain devices. Tell your story from top to bottom with easy and clear calls to action along the way to move around the site.

Reduce and Forms & Data Entry
Web forms are a UX nightmare in themselves. We all love data collection and learning as much about our customers as we can. There is a purpose to it but the simple truth is users do not like it. What’s worse is that on a mobile device form filling and data entry is more tedious and fiddly than on desktop. Keep form entry requirements to an absolute minimum and use simple drop down selection for responses where possible to make life easier.

Keep it Simple with Your Navigation
This is another tip that works well on mobile and desktop modern day web design. Big cluttered navigation’s are off putting for users. You should be able to architecture your site in a way that allows for the most effortless browsing possible. Drop downs with multiple options can be hard work but drop downs with additional drop downs and sub categories are just mind boggling. When it comes to the mobile user experience most navigational items are hidden or pushed to the side of the template to make room for the largest possible viewing area for page content. You’re going to have a tough time stuffing your big navigation’s in there so try to keep them as concise as possible.

Keep Imagery & File Sizes Limited
Mobile internet is faster now than anyone would have imagined by this point and our infrastructure is constantly improving but roaming cellular internet speeds still can’t compete with wifi connections. Keeping images and other files reduced in size is an easy way to ensure your mobile loading times don’t suffer. Consumers don’t have the patience to wait when they’re used to having what they want when they request it so don’t be the site that loses traffic because you were too slow to load.

Faster page loading times will also impact for SEO scoring significantly as slow loading times are considered by search engines to provide a poor user experience. And let’s face it, they right!

Follow some of these tips and you’re on your way to creating a website with the mobile first generation in mind.