Killer Tips To Make A Mobile Friendly Website – Why & How
There are many factors to rank your website in google. Mobile friendly website is one of them. Regardless of the device, a visitor uses to access your website — be it a desktop computer, a laptop, a smartphone, a smart TV, a tablet, a phablet, or even a (very advanced) toaster — your goal should always be to provide that visitor with a stellar user experience.
You can increase your SEO Traffic just in 30 days or less. But think about this, If a visitor has to repeatedly pinch and zoom and scroll to read your website’s microscopic text or to tap on its awkwardly placed links and buttons, there’s a good chance that visitor is going to bounce from your site. And there’s also a good chance that visitor will end up associating his or her poor experience with your brand or business & you miss large amount of traffic
Poof! There goes a potential lead, a potential customer; all because you failed to provide a mobile-friendly website experience. With more and more people turning to mobile devices as their primary means of accessing the web, being mobile-friendly is no longer a “nice to have,” it’s a “must-have.”
Mobile Usage By the Numbers
- 64% of Americans own a smartphone, up from 58% in 2014
- 85% of Americans ages 18-29 are smartphone owners
- 80% of internet users own a smartphone
- Mobile platforms account for more than 60% of time spent consuming digital media
- 53% of emails are opened on mobile devices
- Global mobile data traffic grew nearly 70% in 2014, from 1.5 exabytes to 2.5 exabytes per month
As we’ve already mentioned, the primary reason why your site needs to be mobile friendly is so you can deliver a great user experience to everyone who visits your site. But since its April 21st, 2015 algorithm update, Google has given you even more incentive to optimize your site for mobile.
For those of you who missed the headlines, here’s the condensed version: Mobile friendliness is now a much stronger ranking factor for mobile searches than it has been in the past. So, if your blog posts, landing pages, and other website pages aren’t optimized for mobile, your mobile search rankings could take a serious nosedive.
What was Google’s “Mobile Friendly Website” Update
Before the launch of its mobile-friendly update in April of 2015, Google had been busy preparing the world for the impending “Mobile add-on.” Back in 2013, Google unveiled its configuration recommendations for making websites mobile-friendly, and also published a list of common mobile configuration mistakes. Then, in 2014, Google introduced “Mobile-friendly” tags in its search results to make it easier for mobile searchers to find mobile-optimized content.
To qualify for the “Mobile friendly website” It has to meet the following criteria (which are listed on Google’s Webmaster Central Blog):
- “Avoids software that is not common on mobile devices, like Flash.”
- “Uses text that is readable without zooming.”
- “Uses text that is readable without zooming.”
- “Places links far enough apart so that the correct one can be easily tapped.”
For example, if Adobe Flash was required to view a video on a website, but a searcher’s device didn’t support Flash, Google could display a message that said “Uses Flash. May not work on your device” in its search results.
Clearly, Google wasn’t trying to keep its obsession with improving the mobile web a secret. Back in 2013 the search giant’s Mobile Search team even came out and said, “To improve the search experience for smartphone users and address their pain points, we plan to roll out several ranking changes shortly that address sites that are misconfigured for smartphone users.”
So, it wasn’t a big surprise when in February of 2015 Google announced that “Starting April 21, we will be expanding our use of mobile-friendliness as a ranking signal. This change will affect mobile searches in all languages worldwide and will have a significant impact on our search results. Consequently, users will find it easier to get relevant, high-quality search results that are optimized for their devices.”
The update was predicted to have a greater impact on search results than the Penguin and Panda update from a few years ago. However, Google has yet to release the specific percentage of searches the mobile-friendly update affected.
In the graphic below, you can see the percentages of searches affected by some of Google’s previous algorithm updates. (Just keep in mind that the numbers below reflect changes to both desktop and mobile searches, whereas the mobile-friendly update affected mobile searches only.)
From an SEO perspective, the main takeaway here is a simple one: if you want your website to be as discoverable and as accessible as possible, you need to make sure your site is mobile-friendly. And what’s more, you need Google to know that it’s mobile friendly.
How exactly does one go about doing that? For starters, we recommend doing some testing. In the next section, we’ll walk you through the process of evaluating your website for mobile friendliness.
How To Analyze Your Site’s Mobile-Friendliness
At the most basic level, you can test your website for mobile friendliness by simply pulling it up on a smartphone or tablet and looking for issues. The wider array of mobile devices, operating systems, and browsers you test on, the better, as these, may all render your website a bit differently.
What exactly should you be looking for when you test a site for mobile friendliness? Text size is a crucial one. If you need to pinch and zoom in order to read copy, you definitely need to rethink your font sizes. Other common issues include (but aren’t limited to) links and buttons that don’t work or are hard to click; unplayable video or audio files; and slow loading times.
To make our lives easier, Google created a free tool — its Mobile-Friendly Test — which can analyze any URL and determine if the corresponding page’s design meets its mobile-friendly standards.
A properly optimized page will yield you an “Awesome!” result like the one below.
If on the other hand, a page is not mobile optimized, you’ll get a “Not mobile friendly” result along with some bullet points detailing what needs to be corrected.
For a deeper dive into your website’s mobile friendliness, you can use Google’s Webmaster Tools, specifically their Mobile Usability Report. This report will give you a full list of the mobile usability issues across your entire website.
In addition to assessing your website’s blogging, social media, SEO, and lead generation capabilities, this tool will tell you a) if your site is coded properly for mobile devices and b) if your site has a meta viewport tag for ensuring mobile devices display your site’s content correctly.
The Marketing Grader tool will also give you a visual preview of what your site looks like on a mobile device.
Google-Approved Mobile Website Configurations
One of the simplest ways to ensure your website is mobile friendly is to start with (or upgrade to) a mobile-friendly content management system (CMS). By using a mobile-friendly CMS—like WordPress, Joomla etc— you won’t have to worry as much about the ins and outs of mobile optimization: the software will do most of the work for you.
When exploring different CMS options, be aware that Google officially recognizes a total of three configurations for building mobile-friendly websites: responsive design, dynamic serving, and mobile-only sites. Let’s take a few minutes to explore
the important points of configuration.
1. Responsive Design
When exploring different CMS options, be aware that Google officially recognizes a total of three configurations for building mobile-friendly websites: responsive design, dynamic serving, and mobile-only sites.
2. Dynamic Serving
Like the responsive design, dynamic serving is a mobile configuration that maintains the same URLs across all devices. Where they differ, however, is that dynamic serving generates different HTML depending on the particular device being used.
So, instead of having content automatically adapt to different screen sizes, with dynamic serving you need to create specific versions of your content to accommodate each device a visitor might be using.
This configuration, while “Google-approved” for mobile-friendliness, is prone to errors. For example, when new devices come to market, it’s up to you (or your IT staff or vendor) to update scripts so your servers can recognize these new devices. Outdated scripts can lead to faulty device detection, which in turn can result in a poor experience for your mobile website visitors. (e.g., someone on an iPhone could end up seeing the iPad version of your site.) Also, because dynamic serving requires you to create a ton of device-specific pages, keeping all of your website content up to date — and keeping your design and branding consistent across all of these pages — can be a serious hassle.
3. Mobile-only Website
The third “Google-approved” mobile configuration is a mobile-only website, which is exactly what it sounds like a website — separate from your desktop website — that is served exclusively to mobile visitors.
A mobile-only website uses different HTML and different URLs, the latter of which usually begin with an “m.”, which is short for “mobile.” (As in “m.yourwebsite.com”)
One of the major downsides to the mobile-only option is the need for careful alignment — and extensive redirecting — between the desktop and mobile versions of your site. This, in turn, can bring page load times down and can make it more difficult for Google to crawl and index your site’s content.
Another disadvantage of the mobile-only approach: It requires that you duplicate and maintain all of your content across two separate sites (the mobile version and the desktop version), which can be a major waste of time and resources.
Tips For Optimizing Your Site For Mobile
Regardless of the mobile configuration, you end up using; there are some overarching mobile optimization takeaways that all marketers can benefit from. So, without further ado, here are ten tips for creating a user-friendly, searchengine optimized mobile experience.
1. Work With a Designer
Or at the very least, talk to a designer and get their professional input. At the end of the day, putting your website design in the hands of a qualified, experienced web designer will help ensure that you end up with a website that is not only mobile-friendly but beautiful.
2. Make Smart Font Choices
Here’s a perfect example of an area where an experienced designer can help out big time: font selection. At the most basic level, the font you choose needs to meet two requirements:
a) The font needs to be large enough so people can read it without squinting or pinching. (Google recommends 12 pixels as a minimum font size.)
b) The font style needs to be clean, i.e. not overly decorative or cluttered. Ease of reading is the name of the game when it comes to being mobile-friendly.
3. Use “Touch-Friendly” Navigation & Calls-to-Action
Ever get frustrated by tiny, impossible-to-click links, buttons, or other “tap targets” when visiting a website on a mobile device? It’s a terrible experience, and one that you can avoid by a) using a minimum size of 7mm x 7mm for primary tap targets, and b) leaving a minimum of 5mm of space between tap targets (according to Google).
4. Don’t Hide Your Code
In order for Google to optimally render, index, and rank your website’s content on mobile devices, you need to make sure Google’s web crawling bots —Googlebot and Googlebot-Mobile — can access your site’s image files, CSS, and JavaScript. Controlling which assets Google’s bots are able to crawl can usually be accomplished through updating your site’s robots.txt file and re-submitting it to Google.
5. Keep Code Simple
Having too much CSS or JavaScript on your website can cause serious slowdowns for mobile visitors, and, in turn, hurt your search rankings. For these reasons, Google recommends compressing or “minifying” your site’s code wherever possible and reorganizing your CSS if it is causing slowdowns.
Pro tip: use Google’s PageSpeed Insights tool to ensure your website’s pages are loading quickly across all devices. After analyzing a webpage, the tool will give you a speed score and let you know what (if anything) needs improving.
6. Don’t Serve Unnecessarily Large Images
Sure, smartphone displays keep getting better and better … but that doesn’t mean you should serve up the largest images possible for mobile screens. After all, mobile devices will still need to downsize those image, which wastes both time and processing power.
7. Make Sure Videos Can Load
When embedding video from YouTube, Vimeo, Wistia, or another video hosting service, avoid using <object> embeds on pages that you’re optimizing for mobile. Use <iframe> embeds instead, as these will allow for compatibility with a broader range of mobile devices/browsers.
8. Keep HTTP Requests to a Minimum
Mobile visitors who have already seen the desktop version of your site will likely expect to find all of the same features on the mobile version. The only problem: on mobile devices, processing power is limited and bandwidth can be unreliable. To help keep your pages loading quickly, cut back on on-page elements (like embedded applications) that drive additional HTTP requests.
Some other tips for keeping HTTP requests to a minimum:
- Use image maps to combine multiple images into a singe image. This won’t necessarily reduce the file sizes of your images, but it will reduce the number of HTTP requests that are needed to render those images. Important note: image maps are only useful if the images in question are next to each other.
- Use CSS sprites to combine all of the images on your page into a “master” image (that only needs to load once). You can then use the CSS “background image” and “background-position” properties to display the part of the image you want to appear.
- Combining files is another way to reduce HTTP requests. Specifically, you can combine all of your stylesheets into a single stylesheet and combine all of your scripts into a single script.
9. Keep Forms Short
We all want our websites — mobile and desktop versions — to be great at generating leads. But it’s important to consider usability when creating landing pages for mobile visitors. While typing out your name, email, phone number, and other information is relatively pain-free on a desktop computer, on a mobile device, it’s considerably more annoying.
To ensure you’re delivering a great mobile experience, keep landing page forms short. For example, if your typical desktop form asks for a person’s name, email, phone number, industry, and company size, you may want to simply ask for their name and email and scrap everything else on the mobile version of the form.
10. Ask Google to Re-Crawl Your Site!
Once you’ve finished making your website mobile-friendly, Google will automatically re-crawl and re-index your site’s pages. Want to speed up the process? You can use the “Fetch as Google” tool to trigger Google to re-crawl and re-index your site.
Alternatively, if your site has a ton of URLs that need re-processing, you could submit a sitemap. Just be sure to include the “lastmod tag” in your sitemap if your mobile pages are using pre-existing URLs (which will likely be the case if you used responsive design or dynamic serving to make your site mobile-friendly).
At the end of the day, a page that isn’t mobile friendly but has high-quality content that aligns perfectly with someone’s search intent can still rank highly. The takeaway here: content is still king when it comes to SEO. While optimizing for mobile is important, creating amazing content — content that aligns with the wants, needs, and interests of your buyer persona(s) — is crucial.
