Phone :
(905) 491-6833
Address :
700 Third Line, Suite 139, Oakville, ON L6L 4B1
Email :

How to Optimize Your Website for Mobile Devices

Did you know that up to 70% of web traffic happens on mobile devices?

With over 5 billion mobile internet users in the world (and rising), optimizing for mobile devices is no longer an option, especially in 2020.


This graph by Higher Visibility shows us the number of smartphone users in the US alone is at ~272.6 million

That statistic should be considered gold to any business.

If 70% of web traffic happens on mobile and 57% of users say they won’t recommend a business with a poorly designed mobile site, its a major hint that spending time to optimize your site for mobile is worth your time and effort.

So how do you go about optimizing your beautiful website for mobile devices?

In this article, we’ll be going over the key steps to take in order to properly optimize your website for mobile along with providing you with helpful tools.

So keep reading as we’ll be sharing some must learn information!

Why is mobile optimization so important?

Creating a mobile-friendly site allows for the proper viewing of your website on smaller screens such as phones and tablets.

Most people create their website with the mindset of desktop being the platform the majority of traffic is going to be viewing their website on.

However, in reality, many people are on the go and use their phones to search for stores or explore the web.

This is simply because using a mobile device is more convenient for most consumers.

So what happens to the design of your website?

All the information you thoughtfully positioned for desktop gets condensed in a manner that isn’t always ideal nor functional.

#1. Use a mobile-friendly tester tool

Supposing you have a pre-existing site that you want to optimize, Google’s Mobile-Friendly Tool should be the first thing you use.


This tool will analyze any URL you enter into it and tell you whether it is mobile-friendly or not (You’ll have to enter in the URL of each page on your website that you want to optimize.)

We recommend starting with this tool, as you may find your site doesn’t need many optimizations in the first place.

As an example, we’ll enter the URL of one of our clients, Concept Lighting Group.


How to Optimize Your Website for Mobile Devices

As you can see it’ll let you know if the page is mobile-friendly or not.

This can prove helpful in seeing what’s working or what’s not working for the page.

Just remember, even though the page may be mobile-friendly there are always improvements you can do.


How to Optimize Your Website for Mobile Devices

On the other hand, the tool may deem the page to not be completely mobile-friendly.

Don’t worry if it’s not! It’ll give you suggestions on ways you can improve it and by reading this article you’re already taking the first steps.

#2. Increase page load time

Next, we suggest using Google’s PageSpeed Insights (Lots of Google tools we know but they can be very helpful!)

Page speed is important for both desktop and mobile so ensuring your web pages are loading fast on both platforms is essential.


How to Optimize Your Website for Mobile Devices

PageSpeed Insights is a free tool made by Google that allows you to enter in a web page URL for an overall rating score based on how long it took the page to load.


Doing so will uncover opportunities on different ways you can go about improving that overall score it grades you with.

The better your score, the faster your site loads on the given platform.

This is important to base your web design on as optimizing for speed will ensure your pages load fast enough to meet the average human attention span of 8 seconds.

#3. Reconsider your web design strategy

Now with the data you’ve collected from using those tools we mentioned above, you can go about optimizing your web pages.

First things first, think about when you visit a website on a mobile device.

What things work well and what things don’t? Jot some of these things down as they’ll provide you with some key ideas on how to optimize your own website for mobile devices.

Here are some things I would jot down.

Things that work well…

• A mobile-friendly navigation tab


How to Optimize Your Website for Mobile Devices

These navigation tabs are mobile-friendly AND look good on both desktop and mobile. Something to definitely consider.

• Nicely sized text

Typography plays a big part in mobile optimization.

With the small screens on mobile devices, you want to make sure your text is readable but also not gigantic.

We’ve found an excellent article going over the responsive website font size guidelines.

• The option to scroll or swipe

With social media being a major part of everyday life, more people are used to scrolling and swiping.

Now I wouldn’t say this is essential as we understand it could be difficult to implement into your overall design.

However, if you can find a way to add this in, it can prove to help your overall user experience.

Things that don’t work…

• Your typical pop-up

We’ve all visited a site that immediately hits you with a pop-up that blocks your whole screen.

This is a big no no, especially on mobile as with that short attention people have they’re more likely to leave your website before even considering exiting the pop-up.

Don’t get me wrong, pop-ups can be useful, just make sure you’re doing them in an innovative and less “in your face” way.

• Slow loading pages

As we mentioned before, most consumers use their phones for the sake of convenience.

Having slow loading pages is far from convenient and can leave consumers who are on the go quickly exiting out of your website and onto a competitor’s site.

• Non-optimized contact forms

Once again considering the size of mobile screens, if you’re creating mobile-friendly contact forms for your web pages, you’ll want to make sure users can easily enter their information.

Another thing to consider…

Knowing how user hold their phones can help with your overall design.


How to Optimize Your Website for Mobile Devices
This image by Steve+Alison Hoober shows the way users typically hold their phones.

Why should you keep this in mind? Well positioning your layout in a way that is comfortable for mobile users can help improve their overall user experience.


According to Stack Exchange, 49% of consumers hold their phones as shown in the image to the left.

If 49% of consumers hold their mobile phones as shown in the image above, you can use this information to create a comfortable mobile design for your website visitors. shows us the ideal range people have when using their mobile devices. Green being the most comfortable and red being the most out of reach.

Conclusion: How to Optimize Your Website for Mobile Devices

Hopefully, after reading this article you have some new ideas on how to optimize your website for mobile devices.

Write out a plan on how you’re going to go about optimizing these pages and take it step by step.

When you make a change to a web page, make sure you’re checking the mobile version of the page ensuring it works properly.

Check out our eCommerce website development guide to learn more about eCommerce web development!

Let’s make your dreams a reality, together.

Want to know how your website can be approved to maximize conversions?

Our team will conduct a website assessment which includes a 30-point analysis of your existing shop, assessing 5 key areas. This will give us an idea of whether the shop needs to be totally rebuilt, or whether certain improvements can be made to the existing shop. The report will include an action plan and budget for the next steps.

Want to skip straight to the action? Learn about our Shopify Design and Development service.

Prefer to talk to one of our team members about your specific project and how we can help? Contact us today or fill out the form below.

Looking for more articles about eCommerce website development?

Discover relevant blog posts below…

The Best Plugins for Shopify in 2021

Building Consumer Trust Online

The Top eCommerce Platforms for Small Businesses

Best User Experience eCommerce Websites [Examples]

eCommerce Website Development: A Complete Guide

Awesome Works
Awesome Works

Related Posts