How To Make a Website Mobile Friendly
Updated on February 29, 2020
It may not surprise you that mobile phone usage is on the rise. You see it every day, in the coffee shop, at dinner, even while walking down the street. But what might surprise you is that the typical American adult is spending on average two hours and 51 minutes per day on their mobile device. That’s around 86 hours per month.
And while most of this time is spent on social media, you would be hard-pressed to not realize the marketing potential that a well-made mobile website can offer for your business. Particularly with the younger demographic preferring to communicate via social media and mobile messaging services over traditional methods.
This is why it makes sense that the big guys like Facebook (with its business pages Shop tab) and Google (using their Accelerated Mobile Pages [AMP] Project) are looking to capitalize on increased mobile usage and traffic.
To make sure you can capture the largest audience for your online business, we’re going to talk about why having a mobile-friendly site is important and how you can make sure your site (be it a blog, an affiliate site, or an ecommerce store) is optimized to take advantage of the increase in mobile browsing and shopping.
But before we continue, it’s important to clarify that you may not have anything to worry about. If you are running an ecommerce store via the major platforms such as Shopify, BigCommerce, or Amazon, then it’s a non-issue. These sites are already designed to be mobile responsive.
However, if you are running an affiliate site, a blog, or a custom ecommerce solution, you may need to do some work to bring your site up to snuff.
Why Is Being Mobile Friendly Important?
While desktops have had the majority of users when it comes to shopping online for some time, we are increasingly moving toward a multi-platform world, including mobile apps.
However, there are more people using mobile devices to browse the internet, conduct their banking, and even shop online every day, with many users jumping between the two types of devices depending on how involved the buying decision is. For example, somebody can use one-click purchasing to quickly buy an ebook they want delivered to their device. However, someone deciding on what kind of health insurance they want may sit down at a desktop instead.
If you are running an affiliate review site, you will be interested to know that in many industries, mobile traffic accounts for over 50 percent. This means people are just as likely to google “Best cafe near me” from their mobile device as they are from their desktop or notebook. If your site is not optimized for mobile device usage, you could be missing out on a sizable amount of traffic.
When it comes to shopping online, you have to look only at Amazon to see that they’ve got the right idea, aiming to make the mobile shopping experience as easy as the desktop one.
Another consideration is there may be an impact on your site’s rankings in Google if your site does not support a mobile responsive design, which seems accurate if you consider Google has been pushing its AMP platform for mobile responsive sites heavily, giving priority ranking to AMP sites over non-AMP-optimized sites in search. We’ll talk about AMP in more detail in a bit.
Before we do, let’s clarify what responsive design is and how it differs from other methods of mobile-friendly design.
What Are the Different Types of Mobile-Friendly Design?
Okay, so you may be thinking, “You keep harping on about responsive and mobile friendly, but what does that mean, exactly?”
When your site is mobile friendly, it displays in a way that makes it just as functional and usable for a person on their mobile device as it is on their desktop. But for this to work, the website in question has to have elements of both its code and design changed to make it function the way it should, regardless of which platform it is viewed on.
Let’s take a look at the three main types of mobile-friendly design:
Responsive Design
This design uses proportion-based grids, flexible page elements and images, and a variety of CSS styling rules to change the user’s experience based on what device they use to access the site. In a nutshell, the page and its content “respond” to whatever the screen dimensions are of the device it is being viewed on. It serves the site without changing the URL and HTML structure, which is beneficial for search engine optimization by not having to deal with canonical tags and duplicate content. Responsive design is typically built for desktops, but adjusts to fit all devices, like a top-down approach, and is by far the most popular and cost-effective method used today.
Adaptive Design
Also referred to by Google as Dynamic Serving, adaptive design is similar to responsive design in that it doesn’t change the URL structure. However, the site detects what device the user is browsing on and dynamically generates a different version of the site’s HTML so it displays in a way that’s appropriate for that device. It’s typically designed as mobile first and then worked up to desktop, a bottom-up approach, which provides a better overall user experience.
However, the catch is that it’s a technically more complex adaptive design to implement, both from a development and design standpoint, which can make adaptive design too expensive for the average ecommerce or affiliate marketer, who would need to hire an experienced developer and designer to do it properly.
Separate Mobile Site
You may see examples of this when you log in to a site and notice a subdomain starting with “m.” One example is the Facebook mobile site, which looks like this: “m.facebook.com” as opposed to just “facebook.com.” This setup delivers different HTML pages on separate URLs based on which device is detected.
While many online retailers are still using this configuration, it is being phased out, as it creates unnecessary duplication of content and requires considerably more development and design resources to update and maintain.
“But wait a minute, you left something out,” you say … “What’s this AMP thing you keep talking about?” You read my mind; we are going to cover that next.
What Is Google AMP (and Does It Work)?
AMP is Google’s answer for trying to optimize content for mobile users. It’s a custom (and restricted) version of HTML and JavaScript with the intention of removing unnecessary code that can potentially slow down the speed of pages on mobile devices.
So why should you care? Well, there is a catch. There is a lot of controversy surrounding AMP and how Google displays the data. Essentially, an AMP page is a duplicate of your site, which is served via Google’s own content delivery network, rather than directly from you.
As a result, Google is prioritizing AMP pages in search results when someone uses a mobile device. But the biggest issue is the way Google isn’t just providing search results; they are actually curating the content themselves and displaying it on their own servers — potentially controlling what users see first. This is very similar to what Facebook does with their Instant Articles, which is native content on their platform so users never have to leave the app.
While I could go on about the potential dangers of such a move by Google, you are better off reading about it to get a better understanding.
The main thing you need to be aware of is that while AMP will make your page rank better on mobile search, you lose a lot of control over your content and it affects your analytics. Basically, you are not allowed to use the <script> tag, which means you can’t embed any analytics tracking codes on your AMP pages. When you are running an online business, analytics is one of the biggest factors that help you gauge the value of your business and help you sell it for what it’s worth. So bear that in mind if you choose to go down the AMP route.
Some of the limitations imposed by AMP can also affect your advertising revenue, with many website owners reporting a drop in ad revenue through their AMP pages. So, if you depend heavily on income from ads on your blog or affiliate site, then AMP may not be a good fit.
Okay, so now you know that you need to make sure your site is mobile responsive so you don’t miss out on potential sales — but how do you update your site for the mobile age?
Some Quick Tips to Make Your Existing Site Mobile Friendly
As mentioned earlier, you may not even have to worry about mobile responsiveness if you are running an ecommerce store via the major platforms, as these sites are already designed to be mobile responsive.
However, if you are running an affiliate site, a blog, or a custom ecommerce solution, you may need to make some changes, and depending on how complicated your current setup is, you may need to hire a professional to help you make the necessary changes to your site. For now, we’ll assume you’re not interested in playing with Google AMP and you just want to make your existing setup mobile friendly with as little work as possible.
Tip 1: Check if Your Site Is Responsive
If you’ve been running your site for a while, or you just purchased an already established affiliate site, blog, or online store that has been generating some solid revenue for years, there’s a chance your site is already mobile responsive. There is no sense in stressing about a problem you don’t have, but to be on the safe side, it’s best to check if your site is mobile responsive, anyway.
Most blogging and online retail platforms are already mobile responsive by default; even WordPress themes on any of the major theme markets like Divi and Thrive Themes have updated their themes to be mobile responsive out of the box.
First, go to the URL MobileTest.me, a site that emulates a variety of mobile devices. Then, once you enter the URL of your site, it displays your site as it would be displayed on the selected device.
Now you can choose from a variety of mobile phones or tablets, but if you want to narrow it down a bit, you can log in to your Google Analytics account and look for the “AUDIENCE” tab on the left side of your screen. Once here, click on the “Mobile” dropdown and then “Overview.” On the right side, you should see a breakdown of how much of your traffic is coming from desktop, mobile, and tablet (mobile refers to phones).
If you’re browsing your site through the emulator, and nothing looks out of whack, then it’s likely your site is already mobile responsive. But if you see elements like buttons that are not displaying properly, are off to the side of the screen, or are way too small to read, then you will need to update your site to be responsive.
Tip 2: Use DIY Optimizing Solutions for Your Site
Now here comes the fun part.
A word of warning if you are not the tech-savvy type, or the terms “theme,” “HTML,” or “CSS” freak you out: STOP NOW and go to tip three. Playing with themes and any code on your site can (and more than likely will) break something on your site.
But if you’re a risk taker or someone who just loves to code, then it’s time to get down and dirty! 🙂
Option 1: Build a responsive site from the start
If you are planning to build your own site or get started using an ecommerce platform, make sure you go with something that’s responsive from the start. Yes, we’ve said it before, but you’d be surprised how many people rush to launch their site and don’t do some basic due diligence.
If you are not sure where to get a theme for your WordPress site that’s mobile friendly, go with the major marketplaces and only purchase a theme that has had many downloads and lots of positive reviews for both the theme and its support.
Option 2: Update your current theme
If you are running a WordPress-based blog or ecommerce site, it may be as simple as updating your existing theme to the latest version. Be careful, though: You will need to make sure that there are no issues or incompatibilities with existing plugins or functions of your site before you make updates. Make sure you create a backup of your site so if something breaks, you can revert it back to a working version while you go find a developer who can help you.
Option 3: Install a mobile responsive plugin
If your site is built on a popular content management system (CMS) like WordPress, Joomla!, or Drupal, there are several plugins that can bring mobile functionality to your site:
WordPress Mobile Plugins — There are a couple of options for WordPress that stand out for adding mobile functionality to your existing site. WPtouch has to be the best paid plugin we’ve seen on the market for creating a custom mobile experience on your site. There’s also a version that has additional features specifically for ecommerce sites. For a free alternative, there is a plugin called Jetpack, from WordPress.com, which provides a way to implement a simple mobile theme. You can also use WP Smush Pro (there is a free version) to optimize and further compress your images, which will help reduce load times on mobile devices.
Joomla! Mobile Plugins — You should need to use plugins only if you are using an older Joomla! version such as 2.5 or lower, as Joomla! version 3.x + already comes with mobile responsive support. You can use plugins like JoomlaShine or Responsivizer to give your site mobile-friendly capability.
Drupal Mobile Plugins — Drupal is another CMS that is popular for building ecommerce stores. There are two modules: Mobile Theme and ThemeKey. These modules can detect if a user is on a mobile device such as a phone or tablet and then output a mobile-friendly version of the site.
Option 4: Create a mobile version of your site
This is the last option I would recommend. If you have a completely custom site or a particularly dated one that will take some time to update, then creating a mobile version of your site could be a viable stop-gap measure, until you can upgrade the site to a responsive design.
The problem is that it creates two versions of your site (as mentioned earlier) and if you update something on your main site, you will need to make sure you also update the content on the mobile version. You can use services like bMobilized or Duda to do this for you.
Tip 3: Hire a Developer
If you don’t know what you are doing, or if your site is particularly old or complex, or even if you are running a highly customized solution — just hire a professional. It’s the easiest option, with the least hassle. Sure, you could argue it costs a hell of a lot more, but you need to work out how much your time is worth if you were to focus on income-producing activities, as well as how much money it would cost you to have your profit-making machine offline for an extended period of time. Think about it this way: The potential increase in sales from having a solid mobile responsive site for your customers could more than pay for the cost of the developer.
If you’re looking for more information on how to make your site mobile responsive, there is a useful guide from Google. This guide goes beyond the scope of this article and it has specific information on the various CMSs you may be using.
Get Mobile Friendly Now
Mobile phone adoption by people around the world is at an all-time high, and the rate of customers shopping directly from their phones is increasing every year — it’s clear if your store is not optimized for mobile devices, you will put yourself at a serious disadvantage.
If you are running a basic affiliate site or blog, then simply changing to a responsive theme could be all the work it takes to get your site mobile responsive. If you are running a more complex or custom solution, it might make sense to hire a good developer to make the necessary changes.
The amount of time you will waste trying to work it out if you don’t already have the necessary skills will just cause you unnecessary frustration and potentially downtime for your site, resulting in a loss of income.
But if you know what you are doing, then it should be pretty straightforward for you to make the necessary changes to your site and get it mobile friendly for your customers.
Whichever way you go, browsing and shopping on mobile devices is here to stay, so make sure you update your online business to take advantage of the new opportunities that mobile use has to offer.
Is your site optimized for mobile usage? Is it going to be a simple fix for you? Leave your comments below.
Photo credit: bloomua