Designing a high performing mobile driven website in 2021

Published on May 31, 2021
 / Last updated on June 26, 2021

Estimated reading time: 10 minutes

Table of Contents

Customers will start to lose interest in a website if they don’t get some kind of visual response from the website within 3 seconds [1]. Fulfilling this expectation for your customers requires a different approach for different companies.

Load time increases bounce rate

Alongside this expectation - it’s also important to know that 55% of all consumers will browse websites on their mobile device and not their desktop.

In this post, we’ll demonstrate how to account for this 3-second window and how you can create a high performing mobile-first website that captures your customer's attention and retains them for longer than 3 seconds.

The "Golden Second" explained

The “golden second” is a term we’ve coined that assumes you only have 1 second to load your website and impress your visitor. This is because by the time a mobile device takes to connect to the server can vary based on how far away the user is from the closest mobile tower. This can sometimes be a 2 second round trip before your website is even allowed to show something to the end-user. 

Although this 2-second delay is not your website's fault, it will count toward that 3-second timer you have.

We’ll refer to this second as the “golden second” because it’s 36.8% less likely that a customer will return to your site, and 12% likely that they’ll even tell a friend that your site is too slow [2].

Optimising design for mobile network speeds

Page speed is sometimes easier to control than you think. Whilst there is a possibility that it is out of your control (if it is a hosting issue) there is every possibility that just by doing a few of these simple changes, you can ace your mobile speed and give your potential customers an amazing experience that they will return for time and time again.

You can bench mark your website speed by using one of these tools: Page Speed Insights [3] and GTMetrix [4]

Image sizes

Images are the one of the biggest killers for slowing down a website. Even a 1MB image on a slow connection will take seconds to download and display to the user.

Ask yourself this: do you have a hero image on your home page? Is it bigger than 1MB? How long does it take to load on a 3G network just outside of the city? Would you wait for it to load if you were the customer? Chances are, you probably wouldn't. It will take a few seconds to download and by that point, you may have already moved on.

There is an easy solution which will get you most of the way to optimising your images. You can use one of the following tools depending on the image extension (whether it is a jpg or png image):

TinyPNG [5]

TinyJPG [6]

You can simply upload your images to either one of those services and they will compress the image. Look at this blog posts header image before it was ran through TinyJPG and after:

First contentful paint

What is first contentful paint? Let me explain it in the easiest way possible. Quite simply put, it is when the browser shows the first part of the website, which results in the first feedback to the user that the page is loading.

So in most instances, this will be the first element on your website whether it be your navigation or a hero section. 

It’s important to ensure that this section is fast so the user has some kind of feedback that their phone is loading the website. 

A few ways to do this would be:

  • Don’t make the content flashy. Keep the animations simple and quick.
  • Don’t make any kind of external requests. So make sure all images are on the same server as the website
  • Optimise the images within the element. Make sure they’re all less than 300kb

Caching

Caching [7] is known to improve the performance of websites by huge margins so if you’re not caching, you’re simply missing out.

It’s a technique that lets you store frequently accessed images and content in the “cached memory” which means that any subsequent requests for the same content gets accessed from this “cached memory” which makes it a whole lot faster!

You can implement caching in a few ways. The biggest impact is to cache your entire website. This is effective for maintaining high speeds but can be quite troublesome if you’re still developing the site.

If you have a website in WordPress you may consider using: Litespeed Caching [8] or WP Rocket [9]. If you have Laravel you may consider using their new released feature: Octane [10].

Another option which is quite easy but not always overly effective is to cache at a hosting level, as caching at a network layer can be quite effective.

Bad hosting

Sometimes controlling the speed is unfortunately out of your control, as you are simply with a bad host. Your web hosting service provider makes a massive difference when it comes to performance.

If you’ve tried the above steps and you still haven’t seen any improvements, switching your website host may just solve some of the problem, if not all. 

When finding a website host you want to ask yourself “where are most of my customers?” 

If most of your customers are in Australia but you have a server in America, then all of your target customers will inevitably have slower load times due to them trying to load your website from a host outside of the country.

You’d also want to consider the performance of the server that your website will be hosted on. You may want to cheap out and not spend a lot of money on your website host as it’s just a server that runs your website, but it’s very important that you give it enough resources to be able to do what it does best and ensure that it does it well. 

We recommend being somewhat generous with the CPU and memory available on your server, so that your website doesn’t run into any performance issues.

Mobile driven page layouts

It’s vital that when developing for a mobile device, you are accounting for the vast reduction in available screen size. It means you need to get creative in the way you display content to your users and even hide content that you think is not valuable to your customers.

Navigation

Think about what you want your customers to do when they land on your website. Do you want them to navigate away from your home page, the page that hopefully converts them? Do you want them to visit a less important page? No, of course not. You spend time developing and adjusting your home-page to be the best salesperson for your business. It’s important to keep the customer on the home page so they can read why you’re the best business for their problem.

We suggest hiding your navigation on mobile to make it less cluttered and more focused on your main content.

Just look at how much space a menu can take on a mobile.

Navbar space on mobile is wasted screen space

An easy way to clean this space up is to just drop the menu on mobile. There’s no denying that on a laptop or desktop, your navigation is incredibly helpful, but on a mobile site, it’s just not as useful as you may think.

Convert the mobile menu into a slide-out menu, or a popup menu. Allow the user to browse your website if they want - but don’t give them the initial option to do so. Let your best sales consultant do their job.

Keep important elements within a fingers reach

Think about how much time you spend on your smartphone and when do you opt to use it? Will you use it if you have another device available (i.e a desktop or laptop)? Or will you only use it when you do not have access to another device? Like a bus ride or waiting in a line to order some coffee (or even reading this article?).

When you are using your smartphone, how are you holding it? According to a 2017 study by Steven Hoober [11] a staggering 75% of all users touch the screen with one thumb.

75% of all users only use one thumb to navigate their smartphone
Source: [11]

As a result, you need to organise content in a way that puts the primary interactions front and center, and saving less important interactions for the top and bottom edges of the screen.

Spotify hard to reach search bar

A relevant example I’m sure is Spotify. Picture yourself clicking the search bar at the top. You can’t easily do it with one thumb and therefore you may get frustrated and say “I'll do this later” or “I’ll do this on my laptop” and then never actually remember to do it later.

If your customers are coming to the same conclusions then it is an opportunity to lose a customer. What are the chances they’ll remember to come back and visit your website 3 hours later? Slim.

Keep all important elements and functions within reach. Keep all call-to-actions and buttons within reach to promote the customer to easily stay on your website.

Content stacks

If you’ve ever dived into responsive design you’ll know that with the available size smartphones have these days, you more often than not, cannot place content side by side.

There is a really simple answer to this problem: stack content vertically and responsively.

Content stacking for desktop and mobile

Mobile layouts are easy, just put blocks of content below each other and not side by side. The situation in which this question is more complicated is for bigger smartphones and tablets. Should you stack the content vertically or place it side by side?

That comes down to your use case and what content is next to each other. A pair of informative blocks may benefit from being placed side by side so that you can use bigger fonts or bigger images to ensure your customer absorbs the content they’re seeing.

In the instance of a contact form, you don’t care about the content besides the actual form itself - keeping this horizontal may save you some scroll time, and therefore it is much more likely to keep the user engaged on your website.

Pop-ups and modals

In 2016, Google rolled out a few penalties [12] to websites that use popups and modals on mobile designs due to their obnoxious nature when large enough. They label these as being intrusive interstitial elements - a fancy way of saying “annoying elements that require a lot of effort from the end-user to remove in order to see the content on the page”.

Look at this example from Google themselves

Google intrusive interstitial elements

If you recall our point above regarding primary versus secondary functions, then you’ll be able to clearly see that to close this popup you need to move your finger to the top right of the screen. This means it is within the tertiary functions region, making it hard to access with just a single thumb and the entire modal will be taking up the primary functions content space.

Instead of doing full-screen pop-ups or modals, you could consider maxing them out at ⅓ of the available screen height or even making the content of the popup or modal part of the body of the page instead.

Optimising form fields for mobile

A simple way to ensure users on mobile devices fill out your forms (like contact forms, quote requests, etc) is to simply limit the number of form fields on your page.

You may have trouble doing this as you may require all of the form fields you have shown, but perhaps some of them are not critical to the functionality of your form? Perhaps you can hide some optional fields or ones that won’t break the purpose of your form, like a last name field potentially?

If that’s not possible, perhaps you can try combining multiple fields into a single field like “First and last name” becomes “Full Name”

Reduce form fields for mobile views

Readability

Arguably one of the most important points. Desktop devices do not have the same concerns for readability as smartphones do with the massively reduced screen real estate available. 

Consider using brighter colours to highlight important information and bigger font sizes to highlight key points.

60-30-10 tactic used in decor can also be used in web design

A good tactic to use is the 60-30-10 rule [13] which was originally designed for decor, but it carries the same principles in web design as it does decor. It means 60% of the available space on the device should be a dominant colour, 30% should be a secondary colour, and the last 10% should be an accent colour

Consider scroll length

Avoid the problem of long scrolls. It’s an extremely easy trap to fall into when designing for mobile, because every designer's first instinct is to vertically stack the content which therefore makes the page vertically long.

A user does not like to scroll for minutes at a time to reach the content block they care about. A user that already has a clear motive in mind when they land on your website will want easy access to that action.

A good solution to this would be a floating pop-out menu of some sort, which floats on the bottom of the screen, very much like a “go to top” button.

This gives users with a motive the ability to visit important content without much delay.

Finger-friendly buttons

Design buttons with big fingers in mind. The average finger covers around 50 pixels of the screen width, so designing buttons smaller than that and grouping them will cause your users to get extremely frustrated if they push the wrong button.

Even though it’s completely out of your control what button or action the user takes you can still influence their decision by making the buttons bigger and more accessible. Having them bigger also allows you to add a nice inline logo which adds to your overall design aesthetic.

Button sizes appropriate for mobile

Content

Content for mobile is arguably the most important factor when designing a high performing mobile-first website.

You want the content to be straightforward and easy to navigate. Rather than navigating the entire website or group of pages to find the content they’re after, users will be more likely to return to google in order to find another resource.

Developing a mobile-first website means you get the opportunity to place critical content where it matters. Be concise and avoid being too “fluffy”. It’s quite easy to get into an “I have to fill this page with content” mindset when developing content for desktop. It’s important to break this mindset for mobile because users will not spend more than a few minutes reading your content before they navigate away and find content more concise and straight to the point.

Conclusion

Creating high performing mobile-first websites is not overly difficult. You just need to make sure you’re testing and developing as if your website would only load on a mobile device. 

It seems second nature to develop websites for the desktop because this is where they are developed; however it's important to note that less than half of all visitors on your website are viewing from a mobile device.

It can be a difficult task to develop for mobile, but if you follow our advice then you shouldn’t have any issues.

Just remember to think about your page speed, your page layout, and the content on the web page and how it’s displayed to your customers.

Resources

[1]: https://www.thinkwithgoogle.com/consumer-insights/consumer-trends/mobile-site-load-time-statistics/

[2]: https://www.globenewswire.com/news-release/2019/01/22/1703703/0/en/The-Urgency-for-Speed-in-2019-Study-Reveals-Consumers-Are-Less-Likely-to-Buy-From-Slow-Sites.html

[3]: https://developers.google.com/speed/pagespeed/insights/

[4]: https://gtmetrix.com/

[5]: https://tinypng.com/

[6]: https://tinyjpg.com/

[7]: https://cachingexplained.com/

[8]: https://www.litespeedtech.com/products/cache-plugins/wordpress-acceleration

[9]: https://wp-rocket.me/

[10]: https://laravel.com/docs/8.x/octane

[11]: https://www.uxmatters.com/mt/archives/2017/03/design-for-fingers-touch-and-people-part-1.php

[12]: https://developers.google.com/search/blog/2016/08/helping-users-easily-access-content-on

[13]: https://www.saralynnbrennan.com/blog/the-60-30-10-design-rule

Book your appointment now
Get in touch

Categories:

Curious what we can do for your organisation?

Get in touch

What's next?
© 2021 Convoke Digital
Privacy Policy
magnifierchevron-downarrow-right linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram