Without considering the importance of mobile, you are potentially damaging your brand and customer experience. We've asked Matt, our Head of Development for his take on the important principles that make a successful mobile site.
Ever since smart mobile devices became an additional appendage to the everyday user, the internet has had to evolve to accommodate. Having a mobile friendly website isn’t a future consideration for the next available budget, it’s what the standard is now, and every business should have one.
Now more than ever, businesses are focusing on creating impactful mobile experiences with their websites and digital applications. Google has been heavily favouring mobile-friendly websites over desktop since early 2015, with regular enhancements to the SERP algorithm designed to cement this approach further. It’s crucial for any business now to utilise the largest available digital marketing touchpoint in the most optimised fashion possible. Google’s own published data indicates that there has been more search queries on smartphones than on desktop computers and tablets for over a year now. To put it economically, even if you already have a mobile website, invest and enhance now to stay competitive.
For designers and developers, standards and user expectations for website performance on mobile has skyrocketed. If a user/potential customer has a poor experience on a website today, they will inevitably go to the next relevant result. Mobile has allowed users to become more fickle with engagement, which is why it’s crucial that everything from load times to aesthetic look and feel are first class.
So what makes a mobile site great?
Clear call to actions
Responsive media queries reposition the main ‘call to actions’ to be more prominent for a mobile screen, encouraging a better rate of conversion on mobile, and keeping them in focus where relevant.
The ‘hamburger’ navigation is instantly recognisable, with a slide-out menu that overlays on page content as opposed to pushing it. This keeps navigation usable and unobtrusive.
Big shopping cart
If eCommerce is present, an easy to find shopping cart CTA is the most important aspect of the website. It immediately tells the user that the website offers a more involved experience, and makes it easy to engage.
Above the fold content
With the appropriate media queries in place, adapting the content height to mobile device size ensures this above the fold content is always present, ensuring that the user knows there is more to engage with.
Click to call and mailto links
Often forgotten, but crucial for the impulsive mobile user. Having email address’ and telephone numbers that are clearly visible links encourage the user to interact accordingly, reducing the steps to a potential lead conversion.
Make it easy!
The default approach used by many creatives when designing for a mobile device is to simply scale down the desktop experience, as opposed to thinking about how consumers actually engage with the content. This approach is ineffective, resulting in a bland mobile experience.
The mobile-first approach is one of the main principles of progressive design enhancements. It is the theory that mobile design, as its core, should be undertaken before all else. Once the mobile problems are identified and resolved, designing for other resolutions will be clearer and more effective.
Simply put, if a website is good on a mobile device, it translates better to every other device or resolution. The mobile-first approach also allows greater focus on content, often the biggest aspect of on-page quality and performance. Mobile engagement has greater limitations with screen size, speed/performance and a greater bounce rate. Designing within these parameters force you to vigorously prioritise content.
Layout and viewports
Forcing a user experience.
If a user is browsing from a mobile device, they typically don’t have a lot of screen to work with. Devices today will zoom out automatically, scale text on tap, and generally adapt to user interaction and setting. This can be good, as it gives the reader control of how the content best works for them, but it can also be damaging to the website aesthetics and presentation.
Disabling this ‘human control’ with meta viewports is a powerful solution to this problem and ensures the intended layout is presented accurately. However this presents additional challenges to the design consideration. Minimum button size (45px for the human finger on a retina device), correct gutter/margin use and typography length need to all be on point and fluid to multiple device orientation, size and specification. This adds more build time to any website, and requires constant attention and device specifications and sizes change.