It’s All About Mobile

Desktop, tablet, mobile responsive web design

Recently I attended the Google Partners Academy Bootcamp for Mobile Sites. The conference took place at the Viaduct Events Centre in Auckland under the guidance of the knowledgeable Benjamin Mangold, co-founder of Loves Data.

The goal of the day was to come away with a Google Certification in Mobile Sites and have a better understanding of the importance of optimising websites for mobile use.

As the use of mobile devices to surf the web is growing at an astronomical pace, the importance of understanding how to optimise websites for mobile is becoming more and more important. Every year people are spending a significant amount of time on mobile devices & tablets and a lot of websites still aren’t designed for this type of use.

Matching User Expectations

These days user expectations are high, time is important, and with constant advancements in technology, users expect results instantly.

The following statistics clarifies this importance –

  • In a Google poll, the top frustration for users when browsing the web on their mobile device’s is waiting for slow pages to load.
  • 60% of mobile users expect mobile websites to load within 3 seconds
  • 75% of people will abandon a mobile site if it takes longer than 5 seconds to load.
  • Mobile pages that load 1 second faster see up to 27% increase in conversion rate.

Optimising for Mobile

In simple terms optimising for mobile ensures your website performs just as efficiently on a mobile device or tablet, as it does on a desktop.

Mobile optimisation looks at site design, site structure and page speed. Screen sizes are always changing across desktops, phones and tablets so it is vital your website can adjust accordingly. Implementing a ‘responsive design’ (Google’s recommended design pattern) will allow your website to adapt to a user’s device and the ability to render display depending on screen size.

Have you ever been browsing a site on your mobile device that doesn’t scroll properly? Loads slowly? Or has a button that doesn’t work? A poorly optimised site will severely impact the conversion rate and result in a poor user experience.

Improving Site Speed

The first step to better results is to reduce the load time of your mobile site and improve the speed.

Some useful tools to get started are –

  • Chrome DevTools Network – this tool will help you understand why a page loads slowly
  • WebPagetest.org – allows you to run performance tests from a variety of networks and host locations to see how your site is performing.

Targets to focus on

  • Speed Index: below 3000
  • Total requests: 80 – 100
  • Page weight: less than 1MB

Optimising the Critical Rendering Path

The Critical Rendering Path is the sequence of tasks the browser performs to first render a page on the screen, i.e. to download, process and convert the HTML (content) CSS (style), and JavaScript (behaviour) code into actual pixels, and produce them on the screen.

To deliver the fastest possible time to first render it is best to minimise three variables

  • The number of critical resources
  • The critical path length
  • The number of critical bytes

 Reducing Page Downloads

The more resources or assets – text, images etc a page has, the longer the page will take to load. To improve page loading time, consider –

  1. Eliminating Unnecessary Resources.

Evaluate whether the resources (such as text, images & fonts) are providing sufficient value. Remove them if they are not i.e. have you measured how many users view multiple photos in the carousel on the homepage?

  1. Compressing Existing Resources

Use compression techniques to minimise the file size of the resources being used.

  1. Image Optimisation

Images are often responsible for the most bytes when being downloaded on a webpage. Re-sizing images, using vector images and removing metadata can all help to reduce bytes being loaded.

  1. Simplifying Web Fonts

Monitor font use. Don’t use too many fonts on your pages and minimise the number of variants used. This will result in a much more consistent and faster experience for users.

  1. Leverage Browser Caching

The ability to cache and reuse previously fetched resources. Caching occurs when the browser stores local copies of web resources for faster retrieval the next time the resource is required. Ensure you instruct the browser on when and how long the browser can cache the response.

Mobile Site Design

The best user experience is going to come from a mobile site that not only loads fast but is easy to use.

Consider the following design aspects as a list of best practices for optimising the design of your mobile site.

  • Feature a primary call to action button in the most prominent space.
  • Use a shorter menu with distinct categories.
  • Users expect that clicking on the logo will navigate them to the home screen.
  • Site search bar should be at the top of the home-page.
  • Make sure site search returns the strongest results first.
  • Allow users to visit your site without registering for an account.
  • For forms minimise the number of fields required.
  • Ensure your call to action stays in the same browser window.
  • Remove the default zoom – this can really affect the layout of the elements on your site.
  • Make it easier to switch between site experiences for users who want the full website experience, using the label ‘desktop’.
  • Optimise all your pages for mobile – not just a few.
  • Never stop testing – continuously test all your pages, buttons and user actions on different devices to better understand the user experience.

Summary

The time to optimise for mobile is now. Don’t miss out on valuable conversions because your website doesn’t provide a good user experience on mobile. Trends predict that mobile use is only going to keep increasing.

Optimise your mobile site for speed and improve the loading time of all your pages. Consider the elements of each page and what is and isn’t important. Eliminate unnecessary resources, compress files, reduce image sizes and leverage browser caching.

Make the site easy to use. Have a prominent call to action, easy navigation, good search visibility and never stop testing different elements.

Go for those mobile conversions!

By |2018-05-09T17:07:50+00:00April 24th, 2018|Categories: Optimisation|

About the Author:

Holly's creative way of thinking brings unique content and social solutions to our clients. She knows how to balance engagement with experience always taking the ideas one step further.