Mobile optimized websites are essential to your website’s success. This post shows you how to see if your website is mobile-friendly or not and what not having a mobile-friendly website means to you. This includes how you can make your website mobile-friendly if it’s not.
Designing a website to work well on mobile devices as well as computers isn’t as easy as a new WordPress theme or tacking on a mobile site version. These solutions will do the bare minimum but aren’t a good long-term solution.
This post will address your options and help guide you in the right direction for not only determining if your website is mobile-friendly, but also how to test and account for a full mobile-friendly experience for users of your website.
What does mobile-friendly mean?
It means that your website is compatible with mobile devices such as smartphones and tablets, and desktop computers all from the same version of the website. So, when you load the website it doesn’t matter what device you’re on, the website should look good (as long as it was designed well).
Mobile-friendly websites are easier to use on a phone or tablet, and they load faster than non-mobile sites, again, as well as they’re designed well.
To check if your site will work well for users on all devices, first you need to know how to tell if your website is mobile friendly. Just because your website will open on a mobile device does NOT mean it’s mobile-friendly.
When mobile devices were first introduced to the mass market (by Steve Jobs), websites were not mobile friendly. This was back in 2007, when the iPhone was first introduced. It was expected that the user would have to double-tap to zoom in on parts of a desktop-optimized website.
Check out this clip of Steve Jobs introducing the first iteration of mobile browsing on a mobile device. The website looks horrible, but that was expected back then. There were no mobile-friendly sites. There are many websites out there that still look like this or worse.
If yours looks like this on a mobile device then it’s not mobile-friendly. But, the first step in correcting that is checking if your website is mobile-friendly. So, you’re moving in the right direction by seeing how your website fares on a mobile browser.
These are the solutions we have today for what mobile-friendly means for a website.
Responsive Design
Responsive web design is by far the most popular and versatile solution for mobile optimized websites for a good reason. It works well, makes web design better because it forces a (good) designer to think in terms of mobile rather than just creating for desktop.
A single website is displayed on all devices, including laptops, desktops, tablets, mobile phones, and everything in between. Rather than designing a separate site for each of these platforms (which would require you to maintain multiple sites simultaneously), responsive design makes the website work well on all types of devices without remaking the entire website. A single code base can be used to create a site that’s simply tailored for display in whatever device it’s being accessed from.
Here’s an animation of what a responsive website looks like at different sizes.
Responsive web design works by using media queries that let the designer tell the browser where stuff is placed based on the screen size, which are called breakpoints. So, an image might be displayed beside some text if the screen size is greater than 768 pixels. If the screen is smaller than 768 pixels, that same text might drop below the image. This is all done dynamically, so you can actually see the website adjust as you shrink and expand the browser viewport (as displayed above).
This approach enables users accessing your website from smaller screens (such as smartphones) to have access to the same information they’d find if they were viewing it on larger displays like traditional computers but perhaps presented in a slightly different way.
Adaptive Design
This is similar to responsive design in that it adjusts what’s displayed based on the size of the device. The main difference is that once the page loads, it’s static at that size. So, if you load an adaptive website on a desktop browser and resize the window, the website will still stay large, and the website won’t look good.
That’s okay, though, because typically you’re not resizing a browser a lot while opening pages. The part where it may create a challenge is on a smartphone if you turn it to landscape mode. Then the website might not look as good as it should.
Adaptive websites may not even resize after a refresh. If you’re using a desktop browser then you may be stuck with that view whereas if you view the website on a phone you’ll get a completely different view.
Amazon is a good example of an adaptive website. when you load it on a computer you’re stuck with that size for most elements. The website extends outside the browser window. On the desktop, it looks and works great!
The same website doesn’t look so great if you shrink the browser window on a desktop computer.
It looks pretty bad and the content extends out of the viewport. That’s adaptive design, but it’s a bit more rigid. Not as many websites use adaptive and for most websites, responsive is better. But adaptive web design still has its uses for creating a mobile site.
Separate Mobile Site (m.)
This isn’t a solution that exists much anymore. The more favored solution is simply to have one website that works on all sized screens and then point users to a mobile app if it exists. Amazon again does this. If you’re on a mobile device then you’ll see a message at the bottom of the screen recommending you download their app.
But, so you know about this version, it’s where there are two distinct versions of a website. The main version is a regular https://domain.com or https://www.domain.com, and it loads when you’re on a computer. If you’re on a mobile device then you’re redirected to an entirely different website usually with the domain https://m.domain.com.
This is a very bad solution by today’s standards and creates many SEO headaches. Search engines hate duplicate content with a passion, so you have to be very careful to redirect each page properly. I wouldn’t recommend this solution for anyone.
Mobile App
For big companies, a mobile app may be a popular way to go to provide mobile-friendly content. Of course, they’d likely still have a responsive or adaptive website (such as Amazon).
For most companies, a mobile app is out of the question and completely unnecessary. You may wonder why, when statistically, most users prefer apps. That’s only true to a certain extent because a huge majority of app usage is only a handful of apps from major companies (think Facebook and Twitter).
Outside those major companies, websites are how content is typically accessed, because those popular apps open websites to get to external content. Think about it, lots of people use Facebook, but what are they opening on Facebook outside of conversations? Content from websites!
So, while a mobile app is a mobile-friendly way of providing content, it’s expensive and for most companies completely useless because people aren’t going to download your app. Instead, they’ll just access your content through an app such as Facebook.
How do you know if your website is mobile-friendly?
There are several ways you can determine if your website is mobile friendly. Here are some of your options to check if your website is mobile friendly and has a good user experience for users on a mobile device.
Use Your Browser
This is an easy mobile friendly test. Simply load your website up and grab the side of the window and drag inwards. If your website is responsive, then you can tell immediately because your content will adjust and look good no matter the size.
This is an example of us discovering that our website is in fact responsive!
But, this method can tell you immediately if your website looks good at all size and that it’s responsive. One thing it doesn’t guarantee, though, is that your website isn’t mobile friendly if it doesn’t respond to your browser squish.
Your website could still be mobile-friendly, so fret not, just continue on with a different method if it looks bad when squished in a desktop browser.
Use Your Mobile Phone
This one is pretty foolproof because if your website looks good on your mobile phone then it’ll look good for others. You just have to be sure not to be too generous about your own website looking good.
Make sure you browse around a bit and check out how good it actually looks and if it’s even usable. Sometimes, even if the website generally looks good, buttons are too small, and font sizes are horribly unreadable.
Visit more than your home page too. Use the navigation scroll down, and even fill out a form or two. Fully test rather than just taking a quick glance. If you ever feel the need to zoom in or anything, then your website is not mobile-friendly.
There should be no need to squint, zoom, or double-tap. It should just look great on your phone no matter what.
We’ve thoroughly tested our website and think it is pretty easy to use from all devices.
Use A Mobile-Friendly Test Tool
There are lots of tools out there to test if your website is mobile friendly. These are automated tools, and they do the heavy lifting for you. You just have to type in your website.
There are 3rd party testing tools and many Google tools to test. The Google tools will be next. These are independent testing tools.
- Bing Mobile Friendliness Test Tool – Just type in your website URL and it’ll crawl your website. You may get an error that some resource is blocked by robots.txt, but that’s okay (see below), some things should be blocked, and it doesn’t affect your website. As long as the first 4 boxes are green, your website is mobile friendly.
- Checkup Tools Mobile Friendly Test – this one isn’t necessarily in English, but it does show your website on a smartphone that’s not yours which is helpful and gives you a rating.
Google’s Mobile-Friendly Test Tool
Google seems to be competing with itself here. There are several ways you can test your website from Google’s own services and tools.
Just go to the Google Mobile-Friendly Test Tool and type your website address in, and Google will check your website for you and give you a handy report with suggestions.
If your website passes, you get a big green pass. If not, well, red and a lot of suggestions. If you click the view tested page button then you can see the code, a screenshot, and more details about the test.
It’s simple, effective, and easy to use.
Google’s PageSpeed Insights
The Google PageSpeed Insights tool isn’t so much a mobile-friendly test tool as much as it’s an overall website speed and structure tester. It’s quite a complex way to test mobile-friendliness but a web designer and developer should use it to optimize a website as much as possible for mobile.
Even many of Google’s own websites don’t pass, but that’s neither here nor there. It will tell you how fast your website loads on a mobile and desktop device, which is important to know. Your goal should always be for your website to load in less than 3 seconds. On mobile that’s sometimes not realistic, though.
Use Google Chrome Lighthouse
This one is similar to Google PageSpeed Insights. If you’re using the Chrome browser then you already have the tool. Just open up the developer tools in Chrome and then click the Lighthouse tab.
There you can generate a report and see how fast your website loads for mobile devices and things you can do to make it more mobile-friendly.
Why is mobile usability critical?
Nearly everybody has a smartphone in their pockets today in every country around the world. It’s an extremely popular way for finding local businesses especially by consumers who aren’t always in front of a computer like business users.
These are some reasons why mobile usability is critical to the success of your business and business website. There are some reasons why you can’t ignore the importance of mobile optimized websites online.
Mobile Searches Have Officially Exceeded Desktop Searches
Mobile-friendly websites are critical because searches from mobile visitors increasingly exceed desktop searches at a growing pace which equaled 63% in the 4th quarter of 2021, according to Statista.
That means you’re more likely to have mobile visitors on your website on a smartphone than on a computer.
Those statistics should be taken with a grain of salt, though. If your website serves a B2B crowd, then website visitors still predominantly visit your website from a desktop.
As an isolated example of a B2B website, the Loclweb website received 64.41% of traffic from desktop as opposed to mobile or tablet. So, the percentage is almost a direct inverse of B2C websites.
Mobile User Experience Matters for Getting Customers Online
Mobile user experience is vital for your brand’s image and future relationships. The mobile revolution has taken over our lives in a way that we can’t imagine what the world was like before it happened.
Companies need to be aware that users are now spending less time looking at websites on desktop computers and more time on their phones. According to Statista, consumers spent an average of 3 hours and 40 minutes per day on mobile devices in 2015.
The statistics also show that only 10% of people use the mobile browser and 90% use apps. Keep in mind that all apps have a mobile browser built in, so the honest number of people actually browsing mobile websites is much greater than the statistics show. In fact, it can be argued that the majority of content viewed in the Facebook app is actually a website that doesn’t belong to Facebook.
With the amount of visitors to your content from mobile devices, it’s essential you put as much focus on providing mobile visitors a great user experience as well as desktop visitors. This includes responsive design implemented for all platforms, plus social media.
More People Buy Stuff From A Mobile Device
As consumers become more comfortable using their mobile devices to do business, the number of people who prefer shopping on their phones rather than computers will only continue to rise. According to Zippia, as of 2021, 79% of smartphone users have used their mobile devices to make a purchase.
Mobile-friendly sites play an important role in this trend because they give mobile visitors instant access to your products and services, no matter where they are or when they shop. This is why it is important to have a mobile-friendly site that reflects your brand’s values and helps customers find what they’re looking for. When done correctly, a mobile-friendly website can increase the likelihood of conversion by 34% or more!
Mobile SEO Affects Local Search and Voice Search
Mobile SEO has some nuances that are slightly different from desktop SEO. It’s not just about optimizing for mobile, you also need to ensure your website’s mobile version is indexed by Google and other major search engines.
Optimizing for local searches requires a different approach as well. You have to ensure your business listings online are up-to-date in major directories (Google, Yelp, etc.). A local marketing automation tool can make this easier for you and make your local marketing efforts more effective.
Always make sure the same link to your website is in all directories, so they show up higher in searches when people look for your business using keywords related to locations or services you offer. Voice search will only grow more popular for basic searches including for local searches because it’s easier to ask verbal questions than to type an entire search.
My site is not mobile-friendly. What should I do now?
If your website isn’t mobile-friendly, you have options. It’s not always necessary to rebuild your entire website, but the best experience will be delivered if you do. This section will help you make your website mobile friendly.
Most other solutions for making a website mobile-friendly are simply a poor bandage. In fact, if your website is custom-built not on a major CMS (Content Management System) then it’s nearly impossible to make your website mobile-friendly without a complete redo.
If your website is built on a platform like WordPress, then you have a few different options. Keep in mind, though, that even these options aren’t as good as a complete redesign for a mobile-first website that’s focused on the mobile user experience.
Choose the type of mobile website you need and have it created.
This article covered the different types of mobile-friendly websites. So, you need to decide (or consult with a web designer) which one is the best option for you.
In almost all cases today, a responsive website will be your best solution. They’re more affordable than the other solutions and work better in most circumstances. too. For all small businesses, a responsive website is absolutely the best solution.
Unless you have a specific reason to use any other method, stick with responsive web design.
But, what if you have a WordPress website that’s not mobile-friendly?
How can I make my WordPress site mobile-friendly?
Making your WordPress site mobile-friendly isn’t as hard as you might think if you have no money to invest in a new website. If you do have any money to invest, then you absolutely should even if you only have $800. An affordable responsive website isn’t as expensive as you think.
WordPress separates your website’s content from the visual aspect which is controlled by the theme. Jetpack used to have a mobile theme that you could use in conjunction with your theme, but they’ve since deprecated it.
So, your only option is to change your WordPress theme to a responsive theme. Our recommended theme is the Astra theme which is really fast on mobile, and it’s responsive right out of the box. Not to mention it’s one of the most popular WordPress themes and is actively developed.
Once you take care of all that, your website will not be amazing looking unless you design it, but it will at least be mobile-friendly.