Google Mobile Friendly Websites – The Complete How-To Guide

How to make your blog or website friendly for your mobile audience

- | 60 Aha! comments | Posted in category: Blogging

Google mobile-friendly test result on mobile and mobilegeddon text overlay

Have you made your website mobile-friendly? If not, then follow this complete guide on how to make your blog or website a treat to view for your mobile audience.

Your mobile visitors want your website to load fast and also have a layout that is easy to view and navigate on their mobile.

This is what the recent Google Mobilegeddon is all about – improving your blog’s layout and enhancing its speed.

Don’t worry, this post is not that late.

That’s because Google is still rolling out its mobile algorithm. So, you have a good chance to be in its good books aka index, even if you act now.

I wanted this guide to be published last week but being a non-technical person, the entire task to get rid of mobilegeddon was not easy for me.

More so, I wanted to test everything personally before sharing it with you.

At last, I achieved my objectives and learned a lot in the process.

Therefore, I have created a simple guide with step-by-step instructions to share my knowledge and experiences to help you make your blog or website mobile-friendly.

The Basics Of Mobile Friendly Websites

Lot has been written about mobile friendly websites and I’m sure you have read many article on this topic.

I will very briefly mention the important characteristics of a website that is mobile-friendly.

According to Google, your blog or website should be:

  • Contained within the width of the mobile’s screen – Size content to viewport
  • Navigational through buttons and links that can be clicked easily – Size tap targets appropriately
  • Easily readable – Use legible font sizes
  • Viewable without the need of using zoom – Configure the viewport
  • Without any element that would obstruct full rendering – Avoid plugins

(The “bolded” words are taken from the Google’s mobile-friendly test tool suggestions.)

Google has created a specific application where you can test whether your blog or website is mobile-friendly or not.

It’s mobile-friendly test application is available here.

I tested Aha!NOW for its mobile-friendliness quotient and the result is below:

Google mobile-friendly test showing that Aha!NOW blog passes the test

I even tested Aha!NOW for its speed and the results are satisfactory.

GTmetrix speed test for Aha!NOW

While GTmetrix also tests the loading time of your blog pages for mobiles, the Pingdom website speed test is for desktops and laptops.

Pingdom website speed test result for Aha!NOW

We can presume that the mobile speed would be somewhat close to the desktop website speed.

Though these speed test results can be improved a bit, you really can’t do much, as there are always some external files that you have no control over.

What You Need To Really Look For And Do

I spent the last two weeks trying everything to make Aha!NOW get the best speed on all the website speed test sites.

I even tried to do the impossible – get full scores or the top grades!

This is what you do NOT need to do.

One, because it is not required to do so, two, it is not possible.

I took it up as a challenge only to retort to this suggestion:

Get 100% user experience in the Google Mobile-Friendly Test and a site speed that is good enough for comfortable browsing.

Google wants your site to open up under one second on all devices.

This may not always be possible unless you change the way you blog or use high-end facilities.

Though I got the Aha!NOW home page to open under one second.

Now you may say that it’s no surprise Aha!NOW got these speed results because its home page has been changed and re-designed. Did you see it?

That’s true, I’ve modified it into a light and simple landing page that gives an overview of the blog comprising of its features and services.

You too can do that with your blog or website.

Remember, the first impression really matters and having a homepage that loads fast will get you more pageviews and less bounce rate.

Well, there are certainly some pros and cons to this strategy and only time will be the best judge.

Let me know in your comments what you think of it.

Meanwhile, this is how Google PageSpeed assesses Aha!NOW’s mobile-friendly speed:

Google PageSpeed Mobile-Friendly Test for Aha!NOW Blog

As I mentioned, these speed test results can always be improved but it may not be always possible to get perfect scores. (I got the score of 99 for once – just near perfection!)

However, we should understand that tackling Google Mobilegeddon is not about getting perfect speed scores, but creating a better user experience for the mobile visitors.

Remember, the speed results from these website speed testing sites may change with respect to device, location, and time.

[When testing your site for speed on different applications, always use the same testing location, browser, and other particulars.]

More so, good speed numbers from these tests may not necessarily mean a faster site and a better browsing experience.

Sometimes the scores are fabulous but you experience a FOUT (Flash Of Unstyled Text), which leaves a bad taste with the visitors.

Therefore, after achieving a satisfactory score from the mobile-friendly tests, always take direct feedback from your site visitors – that is more valuable.

But you need to make your blog pass the mobile friendly tests else Google would not know that your website passes all the rules that makes it friendly for all mobile users.

The difference between Google’s Mobile-Friendly Test (MFT) and PageSpeed Insights (PSI) is that MFT uses Googlebot to fetch the page, while PSI tests the page as any human user would do.

Making Your Blog or Website Mobile Friendly

Let’s start the process of making your website mobile-friendly for Google.

The task of making your website friendly for mobiles does not require much technical knowledge or coding experience.

You should be able to make changes on your WordPress blog using the theme controls and features.

There will be some aspects that require technicality, but then you can always take some help from experts.

I have tried to make this guide as simple as possible so that non-techies like myself can use it as a DIY guide for making their website friendly for mobiles.

Our initial aim is to get the “Awesome! This page is mobile-friendly.” tag from Google.

After that, we need to work on to achieve 100% user experience.

Here are the steps you need to take:

This guide to making the blog or website mobile-friendly is based on my experiences with the implementations on my WordPress blog. Blogs based on other CMS or blogging applications may or may not completely benefit from this guide.

1) Test Your Blog or Website on the Google Mobile-Friendly Test

This test gives you the initial picture, the present standing of your blog, and the factors that you need to take care of.

The MFT test result below shows the start point for Aha!NOW.

Issues regarding Aha!NOW blog's mobile friendliness

(Click/tap and spread to zoom)

As you can see, the Aha!NOW theme layout was flouting the basics of mobile-friendliness.

The touch elements were too close to each other, which made it difficult to use your finger to click on one of them without affecting the other elements.

Some of the website elements extended out of the mobile screen because their width was fixed on a size that was bigger than the width of the mobile screen.

The fonts used for links in the menu were too small and the viewers had to put in extra efforts and spend more time to read them.

2) Assess the Needs and Plan Your Strategy

Honestly, the task of making the blog Google mobile-friendly seemed difficult. My initial state was of confusion because I didn’t know where to start and what to do!

Things seemed to be bad and even the page speed for mobiles wasn’t good enough.

Initial stage of Aha!NOW speed and mobile friendliness

The speed statistics were not as disappointing as I had already converted the blog home page into a light landing page.

Meanwhile, I checked that there were others who fared worse than Aha!NOW.

Not mobile-friendly tag for Moz

If you too get a result like this when you test your blog or website for its mobile-friendly quotient, do not worry. You can clear the Google mobile-friendly test by implementing the following steps.

Remember that the mobile-friendly quotient is checked for every page and post on your blog. You can know which pages you need to work on from the information given in your Google webmaster tools account under the “mobile usability” option.

3) Get a Responsive Blog theme

Aha!NOW already has a responsive WordPress theme. This theme feature automatically took care to size the content to viewport of the mobile device.

Aha!NOW runs on a responsive theme from ThemeForest. As you can see, you don’t really have to spend much to make your blog mobile-friendly and speedy.

My ThemeForest theme has given me all the SEO and speed advantages. It is mobile-friendly because it is responsive.

If you are going to start blogging or create a new blog, look only for responsive themes because Google too recommends that.

Technical Step (!Important):

Check the source code of any of your theme page or post by clicking the right mouse button and selecting “View Page Source”.

Lookout for this line of code (meta viewport tag) at the top of the page or post:

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

If you do not see it, then you need to put it in your theme’s “Header.php”.

While this code will size the content viewport on just any theme, you still need a responsive theme.

A responsive theme is better than the two other alternatives (dynamic and separate URLs) that Google suggests because you do not have to create separate pages or website for mobile audience, and the post URL as well as look of the bog too remain the same.

If you have never used your site’s cPanel or FTP, then leave this task of applying the code for an expert.

However, if you use a responsive theme, then this line of code will already be there on your website’s pages.

Additional resource: If you are technically inclined, you might like to read this Google resource on the fundamentals of a responsive design and make changes to your website accordingly.

4) Adjust the Blog Layout

After you sort out the mobile viewport issue, you need to tackle the “Text too small to read” and “Links too close together” issues.Website layout of Aha!NOW prior to making mobile-friendly

You saw in one of the image above that the menu links, search box, and the top header banner were too close to each other on Aha!NOW.

In such cases, all you need to do is tweak the design and layout of your blog.

I took care of this issue by removing the redundant links from the top menu because those links were also provided at the bottom of the blog.

I shifted the search box to a new location and got rid of the header banner. However, I can create a better location for the banner on the blog whenever I want to.

But for now, you got to do what is necessary to make your blog mobile friendly and pass the Google test.

I also removed the small social icons that I probably wouldn’t even be able to click with the tip of my little finger!

I see these on many blogs – if you do not want to remove them, make their size bigger.

Google recommends a minimum tap size of about 7mm or 48 CSS pixels with sufficient spacing between the buttons and links.Google mobile-friendly test shows un-friendly breadcrumbs on the blog

As I worked on my blog layout, after I resolved one issue, the MFT quickly presented me with another issue.

Since the mobile friendliness is inspected on per page basis, you might come to know of many issues that you never thought would have been cumbersome for the mobile users.

For example, I would never have sorted out my blog breadcrumbs if it wasn’t for the MFT results.

Similarly, I sorted out the footer links, the links in the “Post Promotion” widget of the ABC, and so on.

Finally, I also increased the font size of the blog content. I suggest choose your base font size as 16px or 18 px and line spacing of 1.625em or 26px.

5) Make the CSS, JS and Other Files Accessible to Googlebot

In order to render (show) your blog in a better way in the searches, Google wants to get access to the files that are responsible for the page rendering process.

These are mostly the CSS (Cascade Style Sheets) and JS (Java Script) files.

Google also wants to view your images and other theme related files before presenting your pages or posts in its search index.

You can achieve this objective by using a “Robots.txt” file.

This is a sample robots.txt file:

Sample of a Robots.txt file

The search engines mostly honor the directives in this file and visit only the files that you want them to view. You can block certain files from the search engine bots.

In your Google mobile-friendly test, you were given a list of resources that were blocking the Googlebot.

All you need to do is “Allow” the Googlebot to access and crawl the specific files and folders.

You can create and implement a robots.txt file in two ways – by using the WP SEO by Yoast plugin or doing it manually.

a) Install the Yoast SEO plugin if you aren’t using it already. It will help you get access to your robots.txt and .htaccess files, create a sitemap of your website for search engines, take care of your RSS feed, and make your website SEO ready.

Robots.txt window of Yoast SEO plugin

Navigate to SEO > Tools > File Editor and find your Robots.txt file. Fill it and save the changes.

b) Robots.txt is a simple text file. You can create one with the “Notepad” application on your computer.

You need to save it in the root folder of your website on your server. You can upload it through the cPanel or FTP.

Many webmasters do not know that WordPress already has a virtual robots.txt file, which is like the image shown below:

Virtual robots.txt of WordPress

Actually, times have changed and more than blocking the files and folders, now you need to permit the bots to access them more.

Look at the robots.txt file of Neil Patel’s personal blog.

User-agent: *

Disallow: /wp-admin/

That’s called simplicity.

In fact, you can view the robots.txt file of any website using your browser.

Here are some simple tips by Yoast on the how’s and why’s of robots.txt to make your website Google mobile friendly.

Voila! I hope you followed these steps and got 100% user experience tag for your blog or website.

Google mobile-friendly test result shows 100% user experience

Let’s push ourselves to do a bit more, to be in a position of advantage.

“The most common reason why a mobile page fails the Mobile-Friendly Test is that Googlebot for smartphones is blocked from crawling resources, like CSS and JavaScript, which are crucial for understanding the page’s mobile-friendliness.” ~ Google

6) Clear the Above-the-Fold Blog Area For Better Blog Speed

Speed is a key Google ranking factor. Google has indirectly mentioned that it will give preference in its mobile search index to websites that are fast.

For extra credit, make sure that template is fast by checking the Speed section of PageSpeed Insights and making sure that the Speed section has no issues marked as “Should Fix.”

You need to follow the recommendations of the Google PageSpeed Insight results.

The first and foremost is to “Eliminate render-blocking JavaScript and CSS in above-the-fold content”.

The Google MFT result showed the files that were not giving access to Googlebot and the permission is given through Robots.txt. The Google PSI shows the files that appear before the initial crucial content and delay the display. You need special scripts or applications to shift these files from the above-the-fold area for faster initial display.

I had to spend some time researching for the best way to accomplish this objective, and the solution was very easy, which does not require any technical skill.

(Some may find it difficult, but if you go step-by-step – this is doable. I’m always here if you face any problems.) 🙂

I installed the W3 Total Cache plugin. This plugin, if used properly, can make your website fast.

W3TC can combine, minify, and defer the files so the clutter is reduced and all blockages are removed from the site render path.

We have a detailed post on Aha!NOW about how to use W3TC to load your blog faster. You’ll need to read it if you want to understand the following steps.

a) Goto “Performance” > “General Settings” and enable “Minify”. Next, goto the minify section and enable “JS”.

b) Select “Combine Only” and “Non-blocking using “async” as the Embed type. If this option breaks or disturbs your blog pages, try “Non-blocking using defer” or the “default (blocking)” options.

c) In the JS File Management section, choose your theme and fill in the render blocking script URL’s in the “File URI” fields.

d) Just copy and paste the Javascript URL’s shown in the Google PSI “Eliminate render-blocking JavaScript and CSS in above-the-fold content” section (You need to click on “show how to fix” to view them).

[Make sure that you copy and paste the files in the exact order it is shown on the PSI page – the order matters. You can always use the “Auto” option and use the W3TC “Help” to suggest you the files to minify.]

(To copy, hover over the file name, bring over the mouse on the file URL in a yellow box, highlight the portion you want to copy, and press Ctrl+C. You can ignore the URL portion before “/wp-content” and after “.js” in the file name.)

e) Choose the embed location as “Embed before </body>”. This will ensure that all javascripts that you filled-in will be combined in a single script and shifted in the footer area of your blog.

f) Save all settings. Remember that this is a sensitive procedure for your blog so you should always first backup your blog and its database. If your blog starts behaving strangely, simply disable “JS” or the W3TC plugin.

You need to repeat the process for the “CSS” section of W3TC. Choose “Enable” and “Combine only” (some do not choose the combine only option, but it works for me. So you should try and implement what works for you).

For @import handling, choose “Process” or “None”. Again, if one thing does not work for you, try the other. You can always “Google” for more information or ask a developer to help you.

You should fill in the CSS field URI in the same way you did in the “JS” section. Choose only the CSS files that the Google PSI tool result denotes as render-blocking.

You can read the earlier Aha!NOW post on how to use the W3TC to make your blog fast for more clarity.

Here is one tutorial that might help you, but in it CSS minify is used in place of CSS combine. In my case, the minify option broke my site.

After every step, re-check your site in the Google PageSpeed Insight tool. You will come to know what is working and what not. I’m sure the progress you see there will keep you motivated.

7) Minify CSS and JS Files

Your previous operation of clearing the above-the-fold area with the “minify” section of W3TC would remove many files from the list mentioned in the “Minify CSS” and “Minify JS” section of the Google PSI result.

For the remaining files, repeat the previous process of entering them in their respective JS and CSS sections as explained before.

There will be some external JS and CSS files too. No harm trying the same way with them too using their full URLs.

I found a better way to deal with these files. I used the “RocketScript” option of “CloudFlare”.

I use the free plan of CloudFlare and found that it nicely supplements the W3TC in making your website fast. W3TC has the necessary settings to help you operate CloudFlare through it.

Using the “RocketScript” option of CloudFlare is again sensitive for your blog – it may not support all the scripts that are in your blog.

In that case, you can use its manual option and disable RocketScript from the incompatible javascript files.

There will be a few files with the word “include” in their URl that will always remain in the “Minify JS” and “Minify CSS” sections of the Google PageSpeed Insights tool results.

These are the combined JS and CSS files created by W3TC. You should not try to minify them further. You can even open these files in the browser and you will find all your JS or CSS files in there.

This post will help you make your external scripts async, while this post is about making the javascripts defer.

“We must deliver and render the above the fold (ATF) content in under one second, which allows the user to begin interacting with the page as soon as possible.” ~ Google

Your tasks of making your website mobile-friendly end here. However, if you want to remain a step ahead of others, you should read the next step.

8) Use PageSpeed Module Filters

Mod_pagespeed are output filters that transforms the data before it is sent to the client and helps to speed up the site.

They can be operated through the .htaccess file or the server configuration files. Few hosting services provide this feature to their customers.

As Aha!NOW is hosted on Siteground, I’m lucky to have access to the mod_pagespeed filters that I can use through the website cPanel.

Ask your web hosting if they also provide you this facility, so you too can make use of it.

You can read more about the wonderful Mod_PageSpeed site speed enhancing feature here.

Though I’m pretty novice at it, I did enable some PageSpeed modules and that resulted in tremendous boost in the site speed.

Additional resources: Read this Google resource to know the mobile analysis in PageSpeed Insights and how it plans to help you make your website mobile friendly.

This article is only for the serious speed seekers and it is by none other than the man who heads Google’s PageSpeed team.

That’s it folks – I used a cheap WordPress responsive theme, free WordPress SEO by Yoast, free W3TC plugin, free plan of CloudFlare, and the bonus PageSpeed Module filters provided by Siteground to make my website not only mobile friendly but also fast, very fast!

More WordPress Resources To Make Your Website Mobile-Friendly

When you test your website for speed, you notice that two factors really bog your blog down – gravatar and images.

They both slow down your website, make it heavy, and prevent you from getting better speed scores.

As I like to experiment with things and ways to bring about positive changes on Aha!NOW,  I use a few other resources that are as follows:

FV Gravatar Cache: This is a free WP plugin that I’m still trying out. It is supposed to cache the commenter’s gravatars locally to save time in fetching them from the Gravatar servers.

However, I still find the gravatars in the “Leverage Browser Caching” list of cacheable resources of the Google PageSpeed Insights results, so this is not working perfectly.

You can get this plugin here, try it, and share your experiences.

I’ve the option of disabling Gravatar on Aha!NOW and that would be a boost in the blog’s speed. Did you notice that Neil Patel and many probloggers do not use gravatars on their site?

EWWW Image Optimizer: Your blog images should be compressed. This plugin is a good tool to optimize your website’s images. It’s free, fabulous, and I think it performs better than WP Smush.

WP Smush: I also use the Smushit free plugin in conjunction with the EWWW Image Optimizer. They both work together smoothly and highly optimize the blog images.

WP Optimize: This free plugin cleans the website database. You need to optimize your blog database after every post you publish to keep your blog fast.

Ways To Deal With The Google Mobile Friendly Test Suggestions

There is more to making your website mobile-friendly.

The Google MFT test will further suggest you to resolve the “Prioritize visible content” and “Eliminate render-blocking JavaScript and CSS in above-the-fold content” issues.

I’d like to share some of my experiences with the problems that I faced.

Dealing with Google Fonts

One of the scripts that the Google’s PageSpeed Insights results suggest to defer or remove is the “fonts.googleapis.com” or the “Open Sans” font script.

Most WordPress themes use the free Google fonts – not only in the WordPress admin dashboard but even in your website pages and posts.

As long as you use Google fonts on your blog, these site speed testing sites will mark the Google font script as one of the factors that slows your site.

Check out this resource. By the process mentioned in it, I do not get the Google font as one of the render blocking script.

Caching Third Party Files

There will be many scripts that you may want to either minify or make them cachable in web browsers but you cannot because they are third party scripts and you have no control over them.

One solution is to save them on your computer, upload on your server, and give the locally hosted file reference in the CSS or JS code, wherever the third party script file is referenced.

I experimented with a few social media scripts and was able to remove them from the Google PSI results.

However, the drawback is that you need to keep updating these copied files with the original scripts on a regular basis.

The same thing you can do with the Google Analytics script. Here is a resource that shows exactly how to copy it and create a cron so that the script is automatically updated regularly.

Combined And Minified Files

Though W3TC, CloudFlare, and Mod_Pagespeed help to reduce and remove the many render blocking CSS and JS files, they leave one of their own files in the crucial above-the-fold render blocking area.

I do not know what you can do with the files that CloudFlare and Mod_Pagespeed leave behind, but you can move the W3TC combined and minified files out of the render blocking area, to a location of your preference.

Use these codes in your footer.php iles, just above the </body> tag.

<!– W3TC-include-css –>
(Used with “Auto” and “Manual”. Inserts the minified/combined CSS files at the location you choose.)
<!– W3TC-include-js-head –>
(Used with “Auto” and “Manual”. Inserts the minified/combined JS files. Embed location “in <head>” in “Manual” mode.)
<!– W3TC-include-js-body-start –>
(Used with “Manual”. Inserts the minified/combined JS files. Embed location “after <body>” in “Manual” mode.)
<!– W3TC-include-js-body-end –>
(Used with “Manual”. Inserts the minified/combined JS files. Embed location “before </body>” in “Manual” mode.)

Make sure that you embed the CSS files above/before the JS files location.

Getting Rid Of FOUT

I mentioned “Flash Of Unstyled Text” (FOUT) before. This is a situation when either you see a blank page or the page text appears without any formatting or style.

It is due to the immediate unavailability of the critical CSS files to render the above-the-fold area.

To resolve this issue, you should “inline” the critical CSS. You can do that by copy and pasting it in the header.php of your WordPress theme. Do not forget to use the opening and closing style tags.

I hope these suggestions help you improve your blog for better user experience of your mobile site visitors.

However, even after putting in lot of time and efforts, I was not able to resolve these Google PageSpeed Test suggestions completely:

Leverage browser caching – There are always some files like the social media and Google Analytics scripts that the browser cannot cache.

Reduce server response time – You can try but eventually it depends on your web hosting.

Minify CSS and JavaScript – You cannot and should not re-minify the already combined and minified files.

Optimize images – Some images, mostly the gravatars, cannot be optimized.

There is one way you can remove these “fix” suggestions of Google PSI Test – do not use gravatar, use high-end web hosting, do not use social media and Google Analytics, and plugins that add CSS and JS files.

In short, you cannot achieve perfect Google PSI and other site speed testing scores because you need all most of these things to provide better experience and facilities to the blog viewers.

Do’s and Don’ts For Mobile Friendly Websites

There are somethings that you should always do and some that you should never implement on your website.

Here is a brief outline of the do’s and don’ts that will help you make a mobile friendly website:

DO’S

  1. Use CSS width expressions in percentage (100%) instead of pixels.

Thus you make the width relative to the screen size instead of keeping it fixed in size, else your site content may fall out of the viewport for some mobile devices.

  1. Use retina images on your blog if your theme supports it. This helps the mobile viewers zoom in and make the image larger. Check out a few retina images on this post.
  2. Use <iframe> embeds to make your YouTube videos mobile-friendly.

DON’TS

  1. Don’t use Flash on your website for mobile viewers unless it has HTML5 embed tag or code snippet.
  2. Try not to create a separate website for mobiles like m.yourwebsite.com. Responsive themes are best for blogs.
  3. Don’t use interstitial as they block the user from completing tasks. Instead use HTML banners.

Further, Google is telling you NOT to make these common mistakes if you want a website that is mobile-friendly.

Here is all about mobile-friendly websites that Google wants you to know. If you are not aware of or up-to-date with the mobile-friendliness and mobilegeddon buzz, then read this straight from the horse’s mouth.

Here is an excerpt from that article and I’m sure you would be interested in it:

Question – Unfortunately, my mobile-friendly pages won’t be ready until after April 21st. How long before they can be considered mobile-friendly in ranking?

Answer – We determine whether a page is mobile-friendly every time it’s crawled and indexed — you don’t have to wait for another update.

Once a page is mobile-friendly, you can wait for Googlebot for smartphones to naturally (re-)crawl and index the page or you can expedite processing by using Fetch as Google with Submit to Index in Webmaster Tools.

For a large volume of URLs, consider submitting a sitemap. In the sitemap, if your mobile content uses pre-existing URLs (such as with Responsive Web Design or dynamic serving), also include the lastmod tag.

Recapping: What You Need To Do To Make Your Website Mobile Friendly

If you want your website to get ranked in Google’s mobile search index, then keep in mind the following points:

  1. Use a responsive theme for your website (preferably).
  2. Make sure every page of your website has the meta viewport tag.
  3. Adjust the site layout, including the tap targets and font size.
  4. Make your website fully crawlable by the Googlebots.
  5. Make the above-the-fold area non-blocking.
  6. Inline, defer, or async the scripts and stylesheets as per the need.
  7. Optimize the images and use proper CSS that promote responsiveness.
  8. Resolve the crawl errors in your Google Webmasters Tools account.

Finally, this is a very helpful resource website that you should visit to make your website better and mobile-friendly.

There is a lot more you can do that requires coding and technical expertise. But this post deals with all what we can do as non-technical bloggers and webmasters.

Also do read these five steps to a mobile-friendly website by Google.

However, I need to add a disclaimer here – I’m a non-technical blogger and I’ve written about my personal experiences and best information that I gathered on the Internet. Though most of the information would help you, I would appreciate if you share your technical opinion and suggestions.

Things that worked for me might not work for you. So, kindly use your discretion and do not hesitate to take a developer’s help if you are in doubt or do not completely understand the process that I have explained in this post. Thanks.

So, what are you waiting for? If you haven’t made your website mobile friendly for Google yet, then make use of this week.

If you have any questions after reading this post, then shoot them in the comments or join the discussion with other blogging and WordPress experts in the community forum.

We also offer services to help you speed-up your blog and make it mobile-friendly. If interested, contact here.

Over To You –

Is your website prepared to face the Google Mobilegeddon? How did you make your website mobile friendly? What is your take away from this post? What more should bloggers and webmasters do? Please share in the comments.



Show Comments

60 Comments - Read and share thoughts

  1. Dennis Seymour

    May 12, 2015 at 8:45 am

    EPIC POST Vinay!

    I’ve prepared for this for all my sites but the results were pretty underwhelming. LOL. I did expect this but kind of wanted a bit more movement in the SERPs.

    My fav plugin is definitely WP rocket for wordpress. It takes a ton of work off my shoulders.

    Sharing this out! 🙂

  2. Ahsan

    May 9, 2015 at 12:35 pm

    Hello Vinay Kachhara,

    Mobile Friendly website is now burning issue for Google Search Engine. So every blogger needs to close look upon it. You described very briefly about the issue. A new blogger will learn it clearly from the article. I have also find some error issue in my site. I also need to solve it.

    Thanks & Have a nice day 🙂

  3. Bilal Tahir Khan

    May 7, 2015 at 12:11 am

    Hi Vinay Kachhara Sir,
    Great I improve my blog and make blog Mobile friendly this post is very helpful for me Thanks For Sharing with us keep up it Have a nice week.

  4. Nisha Pandey

    May 6, 2015 at 8:05 pm

    Hello Vinay sir,

    This has been the most comprehensive guide on mobilegeddon that I have come across. In fact, I had also posted a blog on the topic, but yours stands out from all of them. It’s so elaborate and I will go through it several times and implement the strategies given here on my sites.

    Thanks for putting so much effort into it for all the website owners.

    Have a great day!

  5. vidyarth srinivasan

    May 6, 2015 at 8:53 am

    Hi Vinay,

    Firstly, What an informative post! I am really glad you wrote an article on how to make a blog mobile friendly because I was struggling with the same concept.

    Your post is easy to understand and any non-technical person can easily follow the steps that you have clearly outlined.
    Your post is a complete checklist on how to improve page speed and make our blog more mobile friendly.

    Thanks to you I know have a mobile friendly site and my page speed has improved to a 95 after implementing your suggestions 🙂

    Great going Vinay 🙂 You are a life saver 🙂

  6. Donna Merrill

    May 5, 2015 at 11:24 pm

    Hi Vinay,

    This is the best detailed post on mobile friendly websites I’ve ever come across. I have read the rest, and how here is the best!

    I had my site mobile ready long before Google put their foot down lol. I keep testing it and it’s fine. But just now when I ran a test again, I did find that I have to fix my images. That is what is slowing me down a bit.

    I’m sure glad I had this done for me because when it comes to technical stuff, I am always at a loss. It drives me crazy lol.

    Here you show plainly and user friendly all the how tos and I so appreciate that.

    Now I’m off to spread this post to the rest of the world!

    -Donna

  7. Ikechi Awazie

    May 3, 2015 at 6:34 am

    Hi Vinay

    Thank you for such a superb post and It is strange that you say that you are non-techy because you have written a detailed post.

    I had to try it out before making a comment and I must say again thank you for this resource. I have been able to check my page insight and get a 100% user experience through the tweaks that you suggested.

    I had some breaks though and I am still testing to see if other issues will come up but so far no issues.

    Thanks for sharing.

  8. Vikash

    May 3, 2015 at 12:29 am

    Hi Vinay Sir.. Personally this is my first visit to Aha-Now. I read this article about making websites mobile friendly, as we know that the new google algorithm introduces, so we all worry about that. I was also worry but I found this post from the google search.And to be frank I got this article is very useful to me.
    I have a question, If my blog is Mobile friendly, but loading speed is little slow than It will effect? Thank you in advance.

  9. Hiidee

    May 2, 2015 at 7:52 pm

    Great Post and Information here, Although my site is usually mobile friendly at all time for satisfaction of my readers but I can see my spped test just low and would try as much as possible in fixing it.
    Thanks for sharing

  10. Jens-Petter Berget

    May 2, 2015 at 12:51 am

    Hi Vinay,

    This is the most comprehensive and detailed explanation I’ve read Google mobile friendly websites. I am not technical at all, but I have been testing my site in various ways and it seems to be ok. I am using mobile responsive design and I have just found about 50 posts that are not ok with Google (it might seem a lot, but it’s not).

    I’ll go though your list and see if I can do even more to make my website better in the eyes of Google.

    Thanks.

  11. Joy Healey

    May 2, 2015 at 12:48 am

    Hi Vinay

    My goodness – what an informative post, thanks so much.

    I applied a responsive theme to my blog last Christmas so “stage 1” is fine, and I also sped up my site with a premium theme, but my takeaway from this article you have made me aware that I still have more tests to apply.

    So thanks for this extra knowledge.

    Joy

  12. Ethan

    May 1, 2015 at 6:04 pm

    thanks to sharing all things about mobile friendly and speed test by pingdom tool. ropbot.txt and all about SEO feature will be need in any website really amazing

  13. Harish Kumar

    May 1, 2015 at 9:14 am

    Hi Vinay,
    You have knocked the ball out of the ballpark with this post! I have been in the lookout for a post that goes deep into the testing and dynamics of mobile friendly websites and I have to look no further. But there is so much goodness and awesomeness in this post that I have to bookmark this and come back and re-read and implement.

    You have made several wonderful points. I have struggled in the past to get all the elements right for an effective mobile responsive website. I switched over to Genesis recently and I believe the robustness of the code made it easier for me to implement mobile-friendliness. My major issue in the past was that my header image was getting cropped when I placed it as a header image. But some digging around and researching solved the issue by making the image responsive by html image tags and placing it in a header area widget and so on. Perhaps not a big deal for some more code aware people but I lean more on the design side and not so much on the code side. Even though the code side is getting more and more interesting :).

    I totally agree with you that the SEO plugin by Yoast is a once in a lifetime Jack of all trades awesome sauce. It can even make Google webmaster tools and site approval into a one step process without having to manipulate the header.php file (which I believe is not sure a big issue either). But I am going to give your suggestions about the robots file a try and see where I stand with mine.

    It is a slow learning process and I think that posts such as this provide bloggers with great value. Thanks a lot for your effort on putting this post together. I promise you that I will be back, notepad in hand and freshly made coffee in another.

    Harish

  14. Lorraine Reguly

    May 1, 2015 at 4:36 am

    My site has always been responsive and is mobile-friendly.

    I use many of the plugins you suggested. But I am not very techie!
    I’d like to hire you to improve my site. I sent you a question via Twitter about this, too.

    Currently my page gets 49/100 for speed, and I’ve no idea how to change this, even with your excellent tutorial. 🙁

    Please let me know if you are available for hire to help me.

    Thanks,
    Lorraine from Wording Well.

  15. Makary

    April 30, 2015 at 8:09 pm

    Now is wery important to have a mobile freandly blog.
    To make shoure My web will be propely displayed on mobile devices I used Word Press plug in and now everything lucks good
    Great informational article
    Thanks for sharing

  16. Carol Amato

    April 30, 2015 at 4:11 am

    Hello, Vinay and Harleena,

    What a timely article as this is so very important these days if we want our blogs to show up in mobile search. Awesome how to guide, and I will definitely be sharing this. Not everyone has complied yet, which is understandable.

    To answer your first question, yes – I have made my website and mobile friendly. I took care of this in 2014, And outsourced it to make sure it was done properly and thoroughly.

    You have provided a lot of resources that are extremely helpful, thank you for that.

    It’s amazing to note that more than half of all Internet users are accessing the Internet via mobile devices. Staggering, isn’t it?

    Thanks for sharing this all important topic, and I’ll definitely be sharing with friends.

    Have a wonderful evening.

    ˜Carol

  17. Babanature

    April 29, 2015 at 9:02 pm

    Hello Vinay,

    What a nice post every blogger should know and apply if their blogs are not mobile friendly.

    The funny thing is, I have already set my blog to be mobile friendly since four and half years ago… Well, i did not use stress, I just installed a mobile theme plugin that take care of things. So when my computer visitors visits me, they will see the desktop view of my blog and when they visit me, they will see the mobile version of my blog.

    This method helps my mobile users save more data while browsing my site.

    Thank you for dropping such a wonderful post. Do have a good week ahead…

  18. Rohan Chaubey

    April 29, 2015 at 8:58 pm

    Hi Vinay sir,

    I badly needed something like this because I checked my site and its poor on mobile (better on desktop). I think its still not late. A timely post indeed. 🙂

    Thanks for linking to the fortune[dot]com article. According to that post, Google still uses a “variety of signals to rank search results,” and a page with high quality content could still rank high even if it is not mobile friendly. This brings some relief. 🙂

    With mobile devices becoming in demand and almost most of them are used to access the internet it was a wise decision of the search engine giant to take this step.

    Yay! I too checked my site and it shows it is mobile-friendly. Good to know that Aha!NOW too got the same results. It seems you have taken enough steps to make Aha!NOW ready for the update. The new font looks great and the other tweaks including the new home page would be beneficial too.

    Using GTmetrix I got poor grades that is B and D. 😛 The scores for Aha!NOW are impressive! The Pingdom score was also low for my site. Looks like I need to do some tweaks.

    Wow! I was shocked to see moz[dot]com not mobile friendly. Oh, I got a great tip to clear the above the fold area. My blog has highest quality images above the fold and that is what I guess is preventing it from loading quick.

    Thank you so very much for linking to some relevant pages that have quality resource which might help optimizing the site. I have bookmarked it. Will read and implement things slowly. I hope I don’t get penalized by Google. 😛

    I am happy to read that question and the answer as I too am late to update my site. Thank you for the detailed instructions. That will help everyone a lot. I am taking away actionable insights. I am aiming to improve my results. 🙂

    Thank you,
    Rohan Chaubey.




Leave a Reply

Your email address will not be published. Required fields are marked *



Google Mobile Friendly Websites – The Complete How-To Guide