How to Make Your Site Mobile-Friendly
Mobile-friendly websites determine whether you lose or gain mobile customers. You know that—you’re here to learn how to make your website mobile-friendly. We’re here to help.
To lay our intentions bare, we write this so that our jobs will be easier. Advertising to mobile customers becomes more difficult the less mobile-friendly the client’s resources.
AdWords itself signals mobile-friendly “opportunities:”
The fact being that mobile-friendly landing pages perform better, meaning that they’ll get you more clicks for lower costs.
Further, mobile-friendly websites will simply rank higher in the search results, meaning organic mobile traffic will increase as well. Additionally, it might give you an edge over competitors who have let their websites fall behind.
You should probably take some time soon to make sure that your site works—at least in a passable way—on mobile devices, just in case there are eventual desktop repercussions (and because this is a user experience best practice that can lead to other improvements that are still desktop ranking factors, such as decreasing your bounce rate).
So how do we accomplish our friendly task?
We first test our websites for mobile-friendliness!
Google’s so generous that they have two mobile-friendly testers:
Thinkwithgoogle’s tester:
https://testmysite.thinkwithgoogle.com/
A visual, simple test that comes with an additional extensive report. But it’ll show you three scores, scrolling down will provide supplemental information on each score:
Google Search Console mobile-friendly tester:
Another simple test that’ll let you know about blocked resources, other alerts, and offer next steps:
The Mobile-Friendly Technical Details:
Now that we know whether our site is mobile-friendly or not, we know what to fix.
If you’ve already got a mobile-friendly website in the works, we’ve listed some common factors that can be improved.
If you haven’t boarded the mobile friendly train yet, you’ll need to decide which method you’re going to use:
Responsive Design:
Google recommended and the easiest to understand: Your site will change to look beautiful and perform technically on the device viewing it. In other words your site responds to the device with a version of your site friendly to their device. Also, your URL will be the same across all devices.
While this is the most advised method, it can be expensive. But quality costs money! And it’s your site, the flagship of your online presence. Another con is the possibility of a slower site and limits to what you can do with it because you’re designing with every device in mind.
Dynamically served HTML & CSS:
Basically, your website detects which device type is viewing. Then it serves a page built on code relevant to that device. You get more control over the user’s experience for each device as you can design specifically for each one. You’ll also have the same URL.
The trouble is that you’ll need multiple sets of code for every page on your website, and this can become cumbersome and costly whenever you need to add something. It’s also the hardest to pull off technically, so that means even more costly expertise.
Separate Mobile Version:
With this method, you create a brand new mobile version of your site on a new URL (you could create one for tablets too). This is the easiest method as you simply build a new site for each device instead of making one site serve all devices. The benefit, like for dynamic HTML & CSS, is that you can create a unique experience and design for the device user.
However, separate URLs risk penalization issues on the search results page if you don’t setup redirects properly. This can open a whole can of worms of problems with ranking in the search results as search engines don’t know which site is copying which.
Once you’ve decided which mobile magic you’ll use to conjure up a website, you can use (or share with your developer) Google’s mobile device-mode tool for developers: https://developers.google.com/web/tools/chrome-devtools/iterate/device-mode/
Specific Mobile-Friendly Factors:
The following factors contribute your mobile-friendly ranking and the mobile usability of your site.
Viewports for Mobile Devices:
First, there better be a “meta viewport” tag on your pages that’ll let the browser know how to present your page to whichever device requesting your website.
Second, non-responsive designs should make sure that this tag doesn’t default to a fixed, preset width.
If you’ve got some technical know how you can adjust your meta viewport tag as follows to be more responsive:
- Instead, set the width value to “width=device-width”
- Add attribute “initial-scale=1”
- Set CSS width to “width: 100%”
404 for Mobile Users:
When a mobile user receives a 404 error on a page that shows up on desktops. This often occurs when redirects aren’t setup properly, e.g., you have a different mobile URL for the desktop page URL, but you don’t redirect the mobile user to the mobile URL when they visit the desktop page resulting in a 404 error.
Interstitials:
These are those full page pop-ups that annoyingly come up on mobile websites asking you to download and use the app instead. These irritating, forced features are heavily punished by search engines, especially by Google.
Instead, if you need to have a pop-up with your app promotion, use a banner at the top or bottom of the screen that floats, allowing the user to find and interact with the website while also being exposed to the pop-up.
Slow Loading Times on Mobile:
Slow load times encourage visitors to leave and your mobile usability will decrease (mainly because it prevents people from ever using your mobile website). However, mobile load times have not yet been incorporated into the mobile-friendly rankings. Don’t avoid improving load speed because it’s very likely that load time will be added to the mobile-friendly algorithm soon.
A general benchmark is 4 seconds or less, with less always being better.
Crowded Touch Elements:
Mobile users use their fingers, meaning that they can’t pinpoint links with a cursor’s edge. If your site makes people feel like they have fat fingers, they’re going to get frustrated. Frustrated people don’t think properly about your fabulous services and products and will likely leave.
In fact, Google will mark crowded “tap targets” as click-bait and penalize your website.
Specifically, links and buttons should be about 7mm wide or 48 CSS pixels. There should be 5mm or 32 CSS pixels between each link.
Small Fonts (Get My Magnascope):
When your fonts require a 300% zoom, nobodies getting anything from your website, desktop or mobile. But often mobile designs size text down even more. Make sure yours doesn’t. Check multiple devices to make sure that your font is legible on various models.
Additional Mobile-Friendly Tricks:
These are less technical and more about designing a helpful mobile experience.
Above the Fold:
Put your most important content above the point where a person has to scroll down the screen to see more or the fold. Keep things simple and focused, especially if you’re trying to sell or promote something.
No Flash:
Most mobile browsers cannot render flash so you should use a different resource for creating your pretty designs and animations, otherwise your site will look ghastly on the mobile end.
Keep your contact information handy:
Mobile devices were in fact first created for communication, so mobile visitors can be more willing to get in touch with a call, text, or email.
Video?
Yes! Mobile users love videos. But make sure that your player runs HTML5 and is lightweight so that it can serve most devices without creating a massive data usage bill.
Consider Geolocation:
Mobile devices can often pinpoint where their owner is. Mobile content can then cater specifically to that location, offering them directions, check store stocks, or offer local deals.
Just be careful that your geolocation makes sense for your product or service. A cloud-based software shouldn’t necessarily need location information from a visitor.
Mobile-Friendly & Usability:
Now that you’re (hopefully) mobile-friendly, let’s see how useful your website is with Google’s Search Console mobile usability report:
https://support.google.com/webmasters/answer/6101188
You’ll need to be setup with the Search Console to run this report.
Hopefully, everything’s in the green and you’re ready to rumble and profit from mobile traffic that considers you a friend.
Stay mobile-friendly out there!
If you’re interested in talking to experts about how you can create a mobile-friendly experience for your customers, we’re always available for a chat.
