How To Make Your Website Mobile Friendly

A 5-step Google mobile friendly optimization plan for your website!

Why making a mobile-friendly website is so important to Google?

Over the decade, the global audience has moved from desktop to mobile. It ended with Google announcing mobile-first indexing fully endorsed in 2020. This means that in websites crawling, the priority is given to mobile-optimized sites. It becomes extremely important for site owners: if you want to improve your website rankings and stay on top in SERPs, make it mobile-friendly.

The recent statistics also speak in favor of making your website mobile-friendly:

  • In 2020, mobile users account for more than half of the global traffic, and this trend is likely to stay.
  • It has been one of the ranking factors for search engines, giving mobile-friendly websites a boost in SERPs.
  • According to Google, 70% of websites have already shifted to serving mobile experience.

So, you see, no time to wait! Learn how to create mobile-friendly websites with free tools and no fuss.

A ride in Tokyo subway, mobile users in the train

Ready to make your website mobile friendly?

When thinking of mobile-friendliness, you should keep in mind this picture of a regular smartphone user. It's important that:

  • Mobile screens are pretty small
  • Cell phones typically have slower processors as compared to PCs
  • Mobile connections usually have lesser bandwidth and slower load speed
  • People poke fingers in the touch screen
  • People use mobile devices on the go

This step-by-step guide provides a clear strategy to execute long-term and to have all your mobile optimization work done right. Where to start?

1. Audit your website for mobile-friendliness
Test if your site fails or passes Google's mobile-friendly test.

2. Pick your best mobile friendly solution
Choose your most suitable solution: this could be responsive design, dynamic serving, a separate mobile-friendly website, or a mobile app.

3. Use mobile SEO best practices
To make mobile SEO effective, ensure that your website meets Google mobile friendly criteria, like using readable text, avoiding software not common on mobile (like Flash), etc.

4. Avoid common mobile optimization mistakes
Do not block JavaScript, CSS or image files; avoid putting up unplayable content, repair irrelevant cross-links, etc.

5. Use SEO tools to improve your ranking in mobile SERPs
Research rankings and keywords to know what content and experience are relevant for your mobile audience, and ensure consistency for both mobile and desktop views of your site.

Let's explore the steps in detail.

1. Audit your website for mobile-friendliness

Wondering how to create a site that is free of serious mobile issues? First of all, check your site analytics to see where you stand in terms of mobile optimization.

Go to your Google Analytics > Audience > Mobile > Overview / Devices, and see a breakdown of visitors by device: mobile, desktop, and tablet. You can break this down even further to see metrics such as bounce rate, visit duration, and goal conversion rate via specific devices (iPhone, Samsung phones, iPads, etc).

In Google Analytics, see how many pages are viewed from mobiles

Then, check your site using Google Mobile Friendly Test. There, you may get one of the two following results:

Your site is mobile-friendly, which means that you have nothing to worry about.

Mobile Friendly Test

Your site fails the mobile-friendliness test. Quite often, the reasons for this are: the text is too small to read, links are too close together, and the mobile viewport is not set.

Mobile freiidly test failed

Alternatively, you can check your site's (and pages') mobile-friendliness with the Website Auditor. Launch the tool, enter the URL you want to examine, check Site Structure > Site Audit > Encoding and technical factors.

Mobile-friendliness test in WebSite Auditor

So, if your site fails the Google mobile-friendly test, move on to the next step.

2. Choose your mobile friendly solution

When you decide on a long-term mobile optimization plan, there are several options to choose from. Consider which one of them suits your project.

  Easy to
maintain
Your content is consistent across all devices Cost-effective Easy to provide a custom experience for mobile users

Responsive web design (recommended by Google)

 
 
 
 
Dynamic serving
 
 
 
 
A separate site for mobile users
 
 
 
 
A mobile app
 
 
 
 

1. Responsive web design

Responsive web design is the most elegant solution and is recommended by Google. Briefly, the same website with the same URL is served on all devices, but the page adapts its layout to each device. The approach is to code in such a way that the site's content gets automatically adjusted to the height, the width, the resolution, and other characteristics of a particular gadget.

Pros
  • Easy to implement. Ask any web developer what they think about responsive design, and they will tell you it simply rocks. The secret behind this method's popularity is that it's a much more streamlined solution compared to designing a mobile site that needs to be adjusted separately to each device type.
  • Easy to maintain. One of the biggest advantages is that, once you build a site with responsive web design, you can maintain it pretty easily.
Cons
  • Responsive design is a bit limited in the number of ways it can "respond" to users. Because you only maintain one single body of content, you can create a website experience that renders information to only one kind of user intent.
  • Implementing responsive web design means a major redesign of the site's layout and structure, which may not be an option for some website owners.

2. Dynamic serving

The user device is detected and a custom page shows up that was created specifically for that device. With the dynamic serving, the server responds with different HTML (and CSS) on the same URL depending on which user agent requests the page (mobile, tablet, or desktop).

Pros
  • You can choose not to show heavy content on mobile devices.
Cons
  • More costly than responsive design, as you need to create specific HTML responses to mobile devices.
  • Detecting user-agent is prone to errors. For example, the user experience might be spoiled when new user-agents appear, or when tablets are treated as smartphones.

3. A mobile version of the website

This approach lies in creating a separate mobile friendly website to show on mobile devices. Mobile users are redirected to another, mobile-specific URL. Tablet users are shown the desktop site. As a rule, the mobile version has less content than the original site and offers navigation that's far better suited for mobile browsing.

For example, many online businesses nowadays have an m.example.com subdomain, to which mobile visitors get redirected based on their device/user agent. A link to the fully-fledged version is normally provided as well, in case one wants to see the entire site.

Pros
  • Flexibility. Mobile users normally want certain types of content, such as a business's location, hours of operation, directions, etc. With a separate mobile site, it's easy to make your web pages designed specifically for mobile users, that is, to fill them with substantially different information from what we would expect to see on a desktop site.
  • Analytics. From a marketing point of view, it's simpler to have your mobile traffic go into a separate sales funnel. So, a mobile site provides you with all the necessary analytics for a mobile campaign.
Cons
  • Hard to cover all bases. With this approach, it is hard to tune your site to all possible types of handheld devices it might be accessed from. However, if you primarily target, say, iPhone users, this is not an issue.
  • A fuss to maintain. Even though your mobile-friendly site may be well-synched with your main site, it still requires maintenance, and you'll have to keep that in mind each time you update your content or make changes to your site.

4. A mobile app

A separate application is created for mobile users. This option is often used in combination with any of the above.

Mobile apps take mobile user engagement to a new level. They are said to be the user-friendliest solution to mobile Web marketing — according to a Jakob Nielsen research, they have the "highest success rate".

At the same time, studies show that the average app user retention rate over three months is around 30% at best. Well, this is not surprising, taking the number of brands that offer mobile apps these days.

Pros
  • A total mobile usability winner: mobile apps perform way better than mobile sites or even desktop websites (according to Jakob Nielsen).
  • It's great for branding. When your business offers an application designed specifically for mobile users, it means you're serious about your company's reputation and are ready to go out of your way to reach mobile audiences.
Cons
  • A costly solution. You might have noticed that it's mostly big brands that develop mobile apps (or even several solutions for different platforms).
  • Requires extra effort on behalf of the user. Getting people to install/use your mobile app is a whole different story. Most likely, only your loyal customers or those pretty far in their buying cycle would do that.
Tip: there is the Progressive Web App (PWA) technology that creates a hybrid app-like experience. When a site opens in a desktop browser, it looks like an ordinary site, and on a mobile screen, it gives the impression of an application. PWA technology allows loading a site faster thanks to the cache. And the user does not need to download it from an app store — it's enough to agree from the site to add the app icon on the desktop. Such giants like Uber, Twitter, Alibaba used PWA and did not regret it.

3. Use mobile SEO best practices

Whatever solution you choose, do these common mobile SEO tasks, aimed to make your website mobile friendly:

Code in HTML5

If possible, code in HTML5 and avoid software not common on mobile, like Flash. This will ensure your content is rendered smoothly on the widest range of handheld gadgets.

Make sure your page loads fast

Speed is a crucial factor because mobile users do not like wasting time. The recent Google update Core Web Vitals metrics help estimate if a site is healthy, and one of its core indicators is the load speed of a website. If your site does not start loading within 2.5 seconds, it needs improvement.

You can find plenty of free tools to measure user experience, like the Chrome User Experience Report, Lighthouse, etc. For example, to test the speed of your site with the Page Speed Insights, just enter the URL, and see if your site passes the Core Web Vitals score. The tool provides the diagnostics review and recommendations on improvements.

Check your pages with Page Speed Insights

You can use the Website Auditor to quickly check all your media and find the culprit with large size or long load time. Just launch the tool, create a project, choose Site Structure > All resources, and you will see your pages with all their files, their size, HTTP status, etc. Find images that need compression, or embedded links whose response time is too long and most likely you can replace them with some other resources.

Audit all resources on your site

Tip: to make pages load faster on mobile devices, Google supports the AMP framework (Accelerated Mobile Pages). This open-source project aims to improve mobile users' experience. It strips a compressed HTML copy of the website, caches it in the cloud, and pre-renders it to users in an instant. The main argument against the technology is that users stay on Google rather than proceed to a publisher's site. And it still requires meeting certain criteria and some coding to build AMP pages. The project serves better to the media who rely heavily on delivering their news asap. You can read more about AMP pages in our blog post here.

Don't make your pages heavy-weight

To have your mobile-friendly websites load faster, avoid bulky images and ads. Heavy files may harm user experience and your site rankings in mobile SERPs. Add only those pictures that are really important for your site's content. Use image formats suitable for the web, cut down on pixels to resize images. Check out this guide on how to optimize images for the web.

Tip: Google provides the Web Light solution. It works by transcoding existing pages for mobile clients with a slow connection. As Google claims it, four times faster loading and 80% decreased bytes per page ensure a 50% rise in traffic from slow-connection clients.

Make navigation buttons stand out

While displays in mobile devices are rather small, sometimes it's hard to see navigation buttons, not to mention hitting them on a touch screen. So, you should make them more explicit. Besides, if you have extensive top navigation, it's best to move it to the bottom of the page.

Cell-phone holding habits

Think about how to create the menu that serves your users best — with a hamburger, tab pattern, priority pattern, or something else (check out this guide to popular menu design solutions).

Make your page content fit the screen

Create content that flows on the screen so that your visitors don't have to scroll horizontally to see the entire content. It's easily done with responsive design. That will require editing some of your tags and CSS styles.

You should set the value <meta name="viewport" content="width=device-width,initial-scale=1.0"> in the meta viewport tag to instruct the page to match the screen width in device-independent pixels.

Tip: to check if all your elements are scalable to screens of different mobile devices, you don't need to have each of them to test. Go to your browser's Developer Tools, enable the Device Toggle toolbar and switch between devices to check how your content is rendered.

Check page responsiveness with Google's Developer Tools

Toggle device toolbar

Design should meet user experience best practices

Make your text readable without zooming

Use text that's readable without the need to double-tap on it. Apply simple clear fonts and large enough text size. You can edit CSS media queries and breakpoints to arrange images and text, styling them and scaling to different screen widths.

Place links far enough apart to aid tapping

Avoid cramming too many touch elements into a one-page segment or making them too small. Google recommends a minimum tap target size of roughly 7mm or 48 CSS pixels on a site with a properly-set mobile viewport.

Tip: For those using WordPress, Joomla, etc.
If you use an out-of-the-box CMS on your site (as opposed to hand-coding it from scratch), here are some mobile optimization recommendations for sites that run on WordPress, Joomla, Drupal, Blogger, vBulletin, Tumblr, DataLife Engine, Magento, Prestashop, Bitrix and Google Sites. Briefly, you need to check that your theme is updated and supports responsive design; you can find such info in the theme documentation.

Use image alt tags

A lot of people who use mobile devices to surf the web would have pictures blocked to reduce traffic consumption and increase load speed. Therefore, using image alt tags becomes important because they will inform users what your images are about. Not to mention that search engines favor image alt tags too since they can't read the info off images.

Make site search quickly available

Site search is essential for mobile users: not only it has to be always at hand, but it should also do its job well. So, adapt your materials for SEO with headlines and add tags, and test how the search and suggestions perform on your site.

Provide jump links

Minimize scrolling as much as possible, it is really annoying to scroll on a mobile device and takes time. Jump links every now and then (but reasonably) will do the job.

Create a Click-to-Call button

Why not stick a Click-to-Call button somewhere on your mobile page. It will be viewed on a phone, after all! As studies reveal, such a button is able to increase conversion dramatically.

Enable automatic sign-in

Or prompt users for their credentials next time they sign in. It will save them sweats, since data input is more difficult on a mobile device.

4. Avoid these mobile optimization mistakes

Once you've chosen the solution that best suits your goals and budget, here are some common mobile optimization mistakes to avoid.

Do not block JavaScript, CSS or image files

Google has long advised SEOs against blocking these media (let's say, in robots.txt), as this may result in poorer rankings for your mobile as well as your desktop site. To make sure these are not blocked, check it with the URL Inspection Tool in Google Search Console.

Don't lazy-load your primary content

Check the lazy-loading content — the one that comes after the main, above-the-fold content is fully loaded. Lazy-loading content helps reduce initial load time and size. This shouldn't be your primary content, the "official" content of your page. You've got to make sure that all you want is loaded within the viewport.

Don't use frames

Frames are not recommended for any kind of SEO, since they make it harder for crawlers to go over your site. And they become especially critical for rendering a webpage on a mobile device. Thus, frames are a big no-no for your mobile SEO.

Set up your redirects properly

In regards to mobile site version, faulty redirects are any redirects that point the mobile user to the wrong equivalent of the "desktop" URL. Usually, these issues would be reported in Google Webmaster Tools.

Watch out for mobile-only 404s

Sometimes a page that loads perfectly fine on desktop returns a 404 on mobile. The best practice is to ensure the respective mobile page is not a 404 and to always redirect mobile users to mobile equivalents of your desktop pages.

Check for irrelevant cross-links

If you use a separate mobile site, check its internal links for consistency. Make sure those internal links go to mobile-optimized pages, not to their desktop counterparts (such as your desktop-optimized homepage, for example).

Don't use tables to tweak the layout

A table is only justified on a mobile page to represent tabular data. Some people use table elements to tweak the layout, which is a bad idea for a mobile page.

Don't make pop-ups spoil the user experience

Don't make pop-ups appear in another window because it's harder to switch between windows while surfing the web from a mobile device. Besides, make sure that interstitials do not hamper the view of the target content — this will improve user experience and is favored by search engines as well.

Don't push users to download your app aggressively

If you have an app you'd like to advertise to mobile users, this should not be done in such a way that it prevents users from browsing your content unless they download the app. This gives users a poor experience on your site and can cause indexing issues.

Don't forget to add mobile URLs to your Sitemap

If there is a separate mobile-friendly website version, you can submit multiple sitemaps to indicate that some of your URLs serve mobile web content. After you add your mobile content, submit your Sitemap to Google as usual. By the way, this becomes irrelevant for responsive websites, URLs will be listed in a single Sitemap.

Make your desktop and mobile versions consistent

Make sure that your mobile and desktop sites have the same structured data. Put the same metadata, image alt tags, etc.

5. Use mobile SEO tools to improve your rank in Google Mobile

So, even when you're done with your mobile-friendly site that meets Google criteria, does it mean it will automatically get top ranking in mobile search engine? Well, nope. You'd still need to optimize your mobile website/application to promote it in mobile search or in an app store.

Mobile SEO basics

In addition to covering the mobile web design basics mentioned above, pay attention to the purely SEO-pertaining optimization aspect.

Mobile-focused keyword research

Perhaps you should use slightly different keywords for your mobile site/app from those that you use for your desktop site? Head to Google's Keyword Planner and choose the Mobile trends to find out:

Mobile Trends in Google Ads' Keyword Planner

Use Rank Tracker to find high-ranking mobile keywords. Create a project and add your target URL. Pick Keyword Research > Ranking Keywords > Search as Google Mobile.

Check keyword rankings in mobile SERPs

Track organic rankings in mobile SERPs

Did you know Rank Tracker could track organic rankings of your site in major mobile search engines? Because the majority of mobile search activity occurs on Google anyway (yes, even on the iOS), this is often more than enough to get an idea of your site's standing in organic mobile SERPs. Go to Preferred Search Engines and add the mobile search engines where you want to track your site's ranking.

Set mobile bot for your preferred search engine

Get rankings separately for desktop and mobile in Rank Tracker

Crawl as mobile Googlebot

You can see your website just like Googlebot mobile crawls it. Go to Website Auditor > Preferences > Crawler settings > Follow robot.txt instruction for Googlebot-Mobile.

Crawl as Google mobile bot

ASO (app store optimization) basics

In 2018, people downloaded apps 194 billion times, and more than half of these downloads happened through app store search. So it's a great idea to optimize for higher positions in both Google Play and iOS App Store.

App store optimization ranking factors

  • Keywords in app title (here's a nice tool that pulls App Store keyword suggestions from the autocomplete)
  • Keywords in app description
  • Using a nice icon (to increase downloads, which will help ASO)
  • Use the correct type and category
  • Strive for higher ratings and better reviews
  • Try to get more downloads
  • Pro tip: use a Google+ plugins on your app page, since +1's help your rank in Google Play.

App store rank trackers

Use tools to check where your app ranks among Android or iOS apps, like SensorTower or SearchMan.

Optimize your site for app stores

Over to you

So, do you find mobile web design easy and exciting? Have you got your own mobile-friendly tricks that made your website a super hit? Please, share your insights and experiences in the comments below!