5 Ways to Optimise Your Site for Mobile

Every year, more and more website traffic is mobile-driven. Statistically speaking, you’re far more likely to be reading this article now on a mobile device rather than on desktop. Indeed, mobile usage goes far beyond mobile traffic, as virtually every action we take in modern life, from ordering a takeaway to sharing a photo with friends, takes place on a mobile device.

Clearly, an optimised mobile site is crucial to any business hoping to maximise the value in its website traffic. So how can you optimise your website for mobile? In this article, we take a look at the steps you can take towards mobile optimization, including user focussed design; web hosting, and loading speeds.

1. Web Hosting

On mobile, speed is king, and there are few more important components to running a fast, reliable website than your choice of website hosting. You can put all the resources at your disposal into designing the perfect website designed for mobile, but choose a website hosting plan that provides poor service, and you’re going to end up with a sluggish, sub-optimal mobile website.

Website hosting will go a long way to determine how well your mobile website will run, from speed to website uptime. Speed is a crucial consideration in all website designs, but for mobile, it becomes even more important and can impact your search rankings. To avoid headaches further down the line, make sure you choose a website hosting plan that is committed to providing high speeds and minimal website downtime.

2. Less is More

When a company embarks on a website re-design, the emphasis is often placed on adding extra content, more information, and increased functionality. When designing for mobile, the opposite approach is called for. Mobile phones are generally not as powerful as desktop computers, and the respective screen size is much smaller. As such, less is very much more when it comes to mobile design, with excess desktop clutter such as plugins, popups, and social sharing icons rendered redundant on a mobile screen. The dimensions of the typical mobile screen should also be kept in mind, and a balance struck between relevant on screen content and a smooth, readable experience for the user. Elements that provided a stylistic flourish on desktop may also be out of place on mobile, where every pixel must be made to count.

3. Optimise Loading Speed

As we made clear in the section on web hosting, website speed is crucial to the success of your mobile website. While speed is an important consideration for all websites, this is particularly true on mobile, after the introduction of Google’s ‘Speed Update’ in July 2018. The Speed Update introduced site speed as a ranking factor for mobile pages, meaning a slow mobile page is unlikely to ever rank well in Google search, negatively impacting your SEO.

We’ve looked at website hosting as one of the most important elements of website speed, but what other steps can you take to optimise the speed of your mobile website?

Compress Images: Large images are one of the main causes of a slow loading webpage. There are a number of free tools available online that allow you to compress the file size of your images without sacrificing quality.

Minify your Code: Minify works by removing unnecessary characters that are not needed to execute code such as CSS, HTML, and JavaScript. This can have the effect of optimising the load time of your mobile pages.

Caching: Caching works by storing files from your website temporarily on a user’s device, removing the need for them to be loaded every time a new page is loaded. There are many free caching plugins available that can help to shave seconds off your page load time.

Content Delivery Network (CDN): A CDN is a group of servers hosted at different geographical locations that work together to load assets such as HTML pages, JavaScript files, and images faster than a centralised server are normally capable of.

4. Enable Accelerated Mobile Pages (AMP)

Google takes its commitment to a flawless mobile user experience seriously. So seriously in fact that it created its own Accelerated Mobile Pages project – AMP for short, to help reduce loading times for mobile web pages.

If you don’t already know what AMP is, you may recognise the abbreviation, as Google marks up AMP pages in searches to make it clear to users which pages are taking advantage of the technology.

AMP is essentially a stripped-down, mobile-friendly version of a standard web-page. In simplified terms, an AMP version of a web page is created by paring back unnecessary page content such as bulky media files.

AMP provides lightweight, flexible and snappy webpages, designed to serve the core content of a webpage to a mobile user. The good news is, that in many cases, AMP can be implemented without the need for complex coding with the AMP plugin for WordPress.

5. Design for Mobile-First

Our smartphone addiction is revolutionising many aspects of human interaction, from how we communicate with one another, to how we consume media. As such, the way we interact with websites has also changed, leading to a simplification in website design, with an emphasis on seamless load speed, smooth scrolling, and responsive web design. Of course, the way we physically interact with websites has also changed completely, with people now using fingers rather than mouse pointers to perform a click.

To meet the demands of the mobile-driven online audience, you must now design your website for mobile first and foremost. Here are a couple of pointers to keep in mind when creating an optimal mobile experience on your website:

Avoid Flash: As powerful as smartphones are, there is some technology that they have trouble processing, such as Adobe Flash. This is a piece of software in decline but is still used by major websites such as BBC, causing issues for mobile users.

Use Pop-ups Sparingly: There’s no getting around it, pop-ups are a real pain on mobile devices. On desktop, it can be easy to minimise or quickly close a pop-up, but on mobile, a new tab takes the user away completely from the original page, providing a frustrating experience, and leading to a high bounce rate.

Design for Touch: Browsing a webpage using touch is a completely different experience to browsing using a mouse or touchpad. A well designed mobile web page should ensure that clickable elements are neither too small, nor too close together, to help minimise accidental ‘fat finger’ clicks.