Google Mobile Friendly Websites – The Complete How-To Guide

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

Profile photo of Vinay Kachhara - | 60 Aha! comments | Posted in category: Blogging & Making Money

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. Carolyn Nicander Mohr

    April 28, 2015 at 1:34 am

    Hi Vinay, Wow, what a comprehensive explanation of how we can maximize our mobile-friendliness and avoid mobilegeddon. I’m happy to report that The Wonder of Tech passed the MFT right out of the gate. I had switched to a Genesis theme in September called Beautiful Pro that simplified a lot and reduced the load time while making my site mobile friendly and responsive.

    I know your excellent explanation will help many bloggers who have been struggling with this issue. I have tested a few sites and have been surprised at how many of them have failed Google’s MFT.

    As someone who is very active on mobile, I’m thrilled that Google has declared mobilegeddon. It’s very frustrating to arrive at a website on my mobile device, only to be unable to read or navigate it. Sometimes there are pop-ups that can’t be closed, sometimes there are images that don’t render well to a smaller screen, etc.

    The more sites are mobile-friendly, the better for the site owners and the readers! I will be spreading the word about this article widely as I know it will benefit many people, Vinay.

    • Profile photo of Vinay Kachhara

      Vinay Kachhara

      April 29, 2015 at 1:31 pm

      Hi Carolyn,

      I’m glad you liked this post. Though its far from being perfect, but I’m sure it will help a lot of bloggers who want to make their websites mobile friendly.

      Good to know that your Genesis theme made it work for you. A responsive blog theme has become a “must” for every blogger.

      I tested the sites of a few ABC community members. I found that while most of them had responsive themes, they still did not have 100% user experience tag on the Google mobile friendly test and also had many render blocking files that could be removed. I hope they can all take some cues from this post and find some time to work on this issue.

      I agree with you that Google’s mobilegeddon is definitely helpful – I think Google has been trying to get people improve their websites for mobiles for a long time, and when things were not moving as fast, this ultimatum was essential.

      Thanks for visiting and sharing your insights.

  2. Jennifer

    April 28, 2015 at 2:28 am

    Very important to be sure your website is mobile friendly!! Thanks for all your information here–very thorough.

    • Profile photo of Vinay Kachhara

      Vinay Kachhara

      April 29, 2015 at 1:38 pm

      Hi Jennifer,

      Glad you found the information useful. Hope to see you around. Thanks for visiting.

  3. Chery Schmidt

    April 28, 2015 at 2:57 am

    Hello Vinay, OH My what an article, I had someone work on making my blog mobile ready early today and now it is gone, So much for this. I am not giving up and hopefully some of your advice here will help me overcome my challenge.

    I took 2 pages of notes and have book marked this page for future reference.

    We all know that everyone is going mobile so we had better be ready huh?

    Thanks for info.. Chery :))

    • Profile photo of Vinay Kachhara

      Vinay Kachhara

      April 29, 2015 at 1:42 pm

      Hi Chery,

      I’d be happy if this post could help in you in anyway. You might also want to research about a few plugins that can help you in making your blog mobile-friendly if the methods as explained in this post seem difficult.

      I agree that thesedays if your blog is not mobile, it’s not worthwhile. 🙂

      Thanks for visiting and all the best!

  4. Balroop Singh

    April 28, 2015 at 7:37 am

    Hi Vinay,

    Thanks for such a detailed post, it is going to help a lot of bloggers. Thanks for providing the links to check our blogs efficiency. Your research seems to be quite painstaking! Congratulations for writing such a wholesome post. Stay blessed! Have a nice week 🙂

    • Profile photo of Vinay Kachhara

      Vinay Kachhara

      April 29, 2015 at 1:44 pm

      Hi Balroop,

      More and more people are accessing blogs and websites from their mobiles. In this scenario, whether you are a professional or a hobby blogger, you need to cater for the mobile visitors. I hope this post helps all bloggers and webmasters.

      Thanks for your visit and wishes.

  5. Profile photo of Yvonne I. Wilson

    Yvonne I. Wilson

    April 28, 2015 at 8:39 am

    Hi Vinay

    Awesome! What a comprehensive report this is in helping bloggers and webmasters to make or site mobile friendly and to avoid mobilegeddon. The theme that I am using for my blog is responsive and mobile friendly. In terms of the load speed, I have some minor tweeking to do so this post is very helpful in that regard.

    Great work, and a well researched article.

    • Profile photo of Vinay Kachhara

      Vinay Kachhara

      April 29, 2015 at 1:48 pm

      Hi Yvonne,

      I’m glad you find the post helpful. Good that your blog theme is capable of avoiding mobilegeddon and I’m sure you’ll sort out the speed related issues too.

      Do let me know if I can be of any help. Thanks for visiting and commenting.

  6. Perambur Kumar

    April 28, 2015 at 8:55 am

    Hi Vinay,
    This is one of the best tutorials I’ve ever read.
    Thanks for this wonderful tutorial on Mobile Friendly site.
    In-fact I have written this subject 20 days back but I mainly concentrate on next Google update. But I have not covered other things which you’ve listed here.
    Well, one thing is sure, this article clearly shows how much time you have spent for this both in terms of collecting information and writing this post. Hats off to you.
    Writing 3000 to 4000 words is not easy. But you and harleena mam doing it with ease every-time.
    God bless both of you
    Have a Nice Day.
    Enjoy your blogging. Because this is the secret of success.

    • Profile photo of Vinay Kachhara

      Vinay Kachhara

      April 29, 2015 at 1:52 pm

      Hi Perambur Kumar,

      Thanks for all the kind words, I really appreciate it.

      Well, this is a 5300+ words post and I’ve more information that I could have added but that would have made the post difficult to digest. 😉 So, may be I will deliver that in some future post.

      Thanks for your visit and for the valuable comment.

  7. Profile photo of Swadhin Agrawal

    Swadhin Agrawal

    April 28, 2015 at 10:20 am

    Hi Vinay sir,
    Whoa! I was waiting for this post as Harleena maam had said me but I am more than thrilled to read this. Was it a guide or an ebook or what! Its amazing full of information.

    I think my site passed the mobilegeddon when it was declared and I was like wow mine is a mobile friendly site and now I am like OMG that was just the skinny the whole serving is yet to come.

    I did not know you need to customize it to this level as I thought a responsive theme is all you need.

    I was unaware you had a post on W3TC I would love to read and install it because you are someone I trust. I had read the post on other blogs but was hesitant to try it on my blog because if anything would go wrong I was all alone!

    My site has a crappy above the fold area and I am sad because I don’t understand anything. My theme, unlike yours doesn’t have option to control what appears on the above fold area.

    CSS and Minify? God I am so dumb when will I learn all these 🙁

    I don’t know about moz but I think my site is too slow. Alexa shows 8.33 seconds where as pingdom shows 4-5 seconds based on servers.

    While I am thankful to you for this guide it also increased my anxiety and fear of falling back. No not your fault, its my bad.
    Thanks a ton or may be two tons for this guide you are the best. 🙂

    • Profile photo of Swadhin Agrawal

      Swadhin Agrawal

      April 28, 2015 at 10:23 am

      Also, my site doesn’t include this line

      in the source code. What does that mean is my site not mobile friendly. Oh yes one more serious problem my site also doesn’t open on “opera mini” is it because google laid a penalty? My site opens on other mobile browsers like dolphin or chrome or firefox but not on opera mini 🙁
      God There are two many confusions in this world 🙂

      • Profile photo of Vinay Kachhara

        Vinay Kachhara

        April 29, 2015 at 2:39 pm

        Swadhin, I checked and found that your blog theme has the meta viewport tag. Every responsive theme will have that.

        I do not have any idea about opera mini, but I’m sure its nothing to do with Google penalty. Probably you can try re-installing opera mini on your smartphone or any other phone with opera mini browser.

        I hope this helps.

    • Profile photo of Vinay Kachhara

      Vinay Kachhara

      April 29, 2015 at 2:04 pm

      Hi Swadhin,

      I intended this post to be a mini-guide but more like a post. 🙂

      Actually, getting the mobile friendly tag from Google’s MFT is easy, but then more needs to be done to get the “100% user experience” tag and sort out the above-the-fold area to get rid of the render blocking files. These two are important steps to making your blog mobile friendly in the real sense.

      All you need to control what appears on the above-the-fold area are plugins like the W3TC in the way I’ve explained in the post. Basically, all you need to take care of are the CSS and JS files that appear in the “head” section of your theme.

      If you find it difficult to understand the methods explained in this post, you can always research for and use some plugins that help you make your blog completely mobile-friendly and get good scores on the Google PSI tool test.

      As for the speed test results, they will mostly vary, not only between various speed testing sites, but even on the same site on different times or locations. So, your own browsing experience and the feedback of your site visitors becomes important.

      Do let me know if you have any question or need any help. Thanks for visiting and your comment.

      • Profile photo of Swadhin Agrawal

        Swadhin Agrawal

        April 30, 2015 at 10:25 pm

        Hello sir, thanks for your awesome support. I am now going to use the W3TC
        plugin first and then would ask you my doubts further. I am also shifting to genesis soon so after that I might need your able guidance in clearing the then above fold. Thank you sir 🙂

  8. Mansi AGG

    April 28, 2015 at 10:27 am

    This is awesome … really liked the way how you have explained all the steps so clearly. … a lot of non techie girls like me will have to really take a lot of efforts to follow each step get our sites corrected … but atleast due to this article I know how to go about sorting every issue.. thanks for such a wonderful article.

    • Profile photo of Vinay Kachhara

      Vinay Kachhara

      April 29, 2015 at 2:43 pm

      Hi Mansi,

      I’m glad you find the post helpful. You can always look for plugins that can help you improve your Google PSI tool test results. But if you can follow the steps as mentioned in this post, you will certainly see a great improvement on your blog’s Google PSI tool test results.

      Do let me know if you face any problems. Thanks for visiting and hope to see you around.

  9. Profile photo of Naveen Kumar

    Naveen Kumar

    April 28, 2015 at 12:34 pm

    Hi Vinay Sir,
    Thanks for the awesome guide. You have explain each and every step in a very well way that is very helpful even who have very less knowledge of programming and coding. He can be able to check his website status that his website is mobile friendly or not. What he need to do and how he can make it more mobile friendly.
    In my case, I was not aware these tools but when I use them after reading here, I find them very useful and easy to use. Even I was also able to make little changes in my blog.
    Thanks again.
    Have a great day 🙂

    Naveen

    • Profile photo of Vinay Kachhara

      Vinay Kachhara

      April 30, 2015 at 7:29 am

      Hi Naveen,

      Glad you liked the guide. You can really make your blog completely mobile-friendly without any knowledge of coding and programming. I hope the tools and resources help you and others.

      Do let me know if you have any questions when you try them out. Thanks for your visit and the feedback.

  10. Profile photo of Erik Emanuelli

    Erik Emanuelli

    April 28, 2015 at 12:35 pm

    Hi Vinay,
    this is a very detailed guide on how to optimize a website for mobile.
    I use Genesis Framework and a personalized child theme, so my blog is already responsive.
    For a couple of my niche sites, I used “WPTouch” plugin, to create a mobile version of the blogs.
    Thanks for sharing such useful information,
    have a great week!

    • Profile photo of Vinay Kachhara

      Vinay Kachhara

      April 30, 2015 at 7:38 am

      Hi Erik,

      Yes, a responsive theme is essential but I wanted to convey the message that it is not enough to just get a mobile-friendly tag from Google’s MFT. It helps more if you get the 100% user experience tag too, besides making it fast.

      I had used WP Touch long back before my blog was responsive. But it helps on non-responsive blogs. Thanks for sharing your experiences.

  11. Profile photo of Sasidhar Kareti

    Sasidhar Kareti

    April 28, 2015 at 1:30 pm

    Hi Vinay sir,

    What a tutorial! With a case study of hands-on making Aha-Now a mobile friendly website, you have made it sleek and simple(though having bundle of keywords).

    Actually, I was working on a tutorial on making mobile friendliness and this, in right time gave me a lot of information. I’ll surely be specifying it in my upcoming post.

    Thank you for such a comprehensive guide. The screenshots are truely inspiring.

    Have a nice week ahead 🙂

    • Profile photo of Vinay Kachhara

      Vinay Kachhara

      April 30, 2015 at 7:49 am

      Hi Sasidhar,

      Glad you liked this tutorial. I wanted a non-technical touch on this post so all can benefit from it. Yes, I did use some keywords, but the rest just naturally added in. 🙂

      I read your tutorial and I think all bloggers and webmasters need to pay attention to the pointers mentioned there as well.

      Glad that you were inspired by this post. Thanks for visiting and commenting.

  12. Mayura

    April 28, 2015 at 4:46 pm

    Hi Vinay,

    Excellent guide with step-by-step instructions 🙂 You nailed it! I’m sure that non-technical bloggers would definitely appreciate turning your experience into a helpful post.

    You’re absolutely right about chasing full scores or top grade 🙂 I’ve got some questions on attaining the full scores in desktop or mobile versions, as they wanna optimize the performance of their sites too. Some suggestions are impossible if the blog isn’t self-hosted or core files are inaccessible. I believe bloggers will realize that by reading through this post 🙂

    However, a mobile plugin might come in handy if all this seem quite technical to pursue or they can’t afford to hire an expert for the moment. Isn’t it? I’ve noticed some mobile plugins delivering very good scores while blending in with cache plugins and CDN. If I may, even a site scores over 90%, taking a look at the mobile site by yourself would be a good idea. ‘Cause some components may alert it’s loaded already, but not work as it suppose to until for a few more seconds or so. Especially, the sharing / related posts widgets and comment section.

    We can be thankful to Google for imposing the need of being mobile-friendly too. Isn’t it? Actually, I think it would be much better if this happened some time earlier since web traffic starting to dominated by mobile users (ignoring the bots) 🙂 Wondering why we are still behind on mobile optimization while talking about wearable and next generation tech already too. But, it’s not too late indeed!

    Have a wonderful week there mate 🙂

    Cheers…

    • Profile photo of Vinay Kachhara

      Vinay Kachhara

      April 30, 2015 at 8:02 am

      Hi Mayura,

      Thanks for the appreciating words.

      I did waste some of my time trying to achieve cent percent performance in Google’s tests but then soon realized that I was going nowhere – all that was not required. More so, as you mention, not all files used on the blog are ours or under our control. So, its not possible to achieve perfection.

      You can always use some mobile plugins, if there are those that not only make your blog mobile-friendly, get it a 100% user experience tag, but also clear the above-the-fold area to make the blog fast. Presently, I’m not aware of any such free WordPress plugin.

      Yes, you do need to inspect your site yourself to analyze and assess the practical changes or problems that are not reported in the tests. Actually, we all needed this ultimatum from Google because sometimes we don’t budge and make the move until we have deadlines looking into our face.

      I read Google’s posts dated back to 2009, where it emphasized improving the mobile sites, but I guess the extensive mobile traffic only began since a year or so.

      Thanks for visiting and sharing your wise suggestions and insights.

  13. Profile photo of Yatin Khulbe

    Yatin Khulbe

    April 28, 2015 at 5:17 pm

    Hi Vinay Sir
    Thanks for this detailed guide for mobile friendly websites. I have passed the mobile friendly site because I am using a responsive theme. I am also using plugins like Yoast by SEO and W3 total cache. I have already made some change in settings in Yoast By Seo plugin. But, I was completely unaware about the settings of cache plugin. I will definitely take your post guidance on that issue.
    I have some issues with Pingdom. It shows variable loading page results. Sometimes, it shows load up speed of 5 seconds and on some occasions, 2-3 seconds.
    I am definitely going to bookmark this page. As I am from non-technical background also, it will take some time to understand the depth of your post. I will follow the guidelines to improve the loading speed of my blog.

  14. lisa thomson

    April 28, 2015 at 8:54 pm

    Hi Vinay, What an informative post! Thank you for all this information. I will be doing some extra reading. I have installed a plug in on my wordpress site WPMobile Pack. My site passed the test and besides looks way better on my mobile device than it used to.

    Still, there is a lot of info you’ve shared here that I would like to learn more about. Thank you!!

  15. Nirmala

    April 28, 2015 at 11:04 pm

    Hello Vinay,

    I’d say that it is a complete guide to making the blog mobile-friendly. I aware of only few stuff which you’ve mentioned here but learned a lot.

    My blog’s theme is responsive, but I feel that I should take more care to improve its appearance on mobile devices.

    You’ve nailed the topic by consolidating all possible matters, nothing is missed, thanks!

    Have a great rest of the week.

  16. Corina Ramos

    April 29, 2015 at 2:05 am

    Thank you so much for sharing this. I just checked my site and I have some work to do. Your post will definitely help me fix these issues because you’re right, all that lingo is like Greek and Latin to me. You made it easy for the not-so-techie people like me to follow along :).

    I’m off to start working on this.. Thank you again for putting this together Vinay!

    I hope you and Harleena are having a great night! Hi Harleena!

  17. Sherman Smith

    April 29, 2015 at 2:36 am

    Hey Vinay,

    Wow you really did your due diligence here with this post. There’s so much information here that I may have to read it a few times to really get the gist of it.

    This post would definitely be a great reference for all of us bloggers who want to speed up our blog and make them mobile ready. I didn’t know it was thus involved lol. But it’s great to know it’s written down.

    You just reminded me to check my Google webmaster tool. I haven’t checked it in almost a year (Yes I know, bad huh?) but it’s never too late to get rid of the crawl errors.

    Thanks Vinay for this extensive lesson! Take care and have a great week!

  18. Corina Ramos

    April 29, 2015 at 6:01 am

    HI Vinay and Harleena!

    Thank you for putting this post together. It’s going to be very helpful for me when I start working on getting my website to load faster. 🙂

    I can’t use the W3TC plugin but I’m using the WP Super Cache plugin and it’s working perfectly.

    Thankfull my site is mobile ready but I can improve my site’s load time.

    I hope you two are having a great day!

    Cori

  19. Profile photo of Saurabh Tiwari

    Saurabh Tiwari

    April 29, 2015 at 6:09 am

    Hi Vinay Sir

    Great Article! I love this update by search giant Google. Now, every blogger, SEO Professional and webmaster should make their websites mobile friendly if they want great places in Google search. I really like some points like: Mobile focused keyword research & we should add mobile URL in sitemap.

  20. Sylviane Nuccio

    April 29, 2015 at 6:38 am

    Hi Vinay,

    There’s no doubt that we all need to have a mobile friendly website nowadays, since it’s going to count for ranking now. I didn’t know that, so thanks for the info.

    Very good article with lots of great info. Will share.

  21. Profile photo of Nikshep D Apasangi

    Nikshep D Apasangi

    April 29, 2015 at 7:54 am

    Hi Vinay!

    I recently read in the papers that most of the e-commerce giants like Flipkart are going to be only on mobile platforms in a few years! This means websites need to be competitive and fast and avoid being crushed by the mobilegaeddon!

    So awesomely timed post! I’m glad to say my site uses a responsive theme and I guess is 70% prepared for mobile reading. Though a lot of later points you brought out were not known by me at all!

    So I guess a little more house-keeping is in order! And I was wondering about the change in home page 🙂 now I know! Thanks for writing this!

    Cheers,
    Nikshep

  22. chandra

    April 29, 2015 at 8:35 am

    Wow..very2 complete for me.. I’m blogger…thanks for sharing This article for me. great article and completely….good job sir… 🙂
    Salam from indonesia blogger

  23. Mohinder Verma

    April 29, 2015 at 10:50 am

    This is surely going to help all bloggers whether new or old. Because you have explained each and everything in details along with the do’s and don’ts.

    I have updated some of your tips in my blog and waiting for the changes to take effect in terms of better results and I will give update about the performance of my blog after these changes.

    Thanks for sharing such a wonderful and helpful tips about making a blog mobile friendly.

    Mohinder Paul Verma

  24. Profile photo of Nanda Rahmanius

    Nanda Rahmanius

    April 29, 2015 at 2:45 pm

    Hi Vinay,

    My head spins when reading this. Honestly, I’m not very good with coding and that sort of thing. LOL 😀

    But, I was amazed by this article. It really covers everything. Indeed, now I do not quite understand about this yet. But, I think some next time I’ll understand about it.

    I will share it then. Thanks for sharing, Vinay!
    Keep up the good work. 🙂

    ~Nanda

  25. Ovais Mirza

    April 29, 2015 at 6:01 pm

    Hello Vinay and Harleena,

    Google has just come out with this Mobile friendly ranking algorithm and it is expected as well for most of us bloggers as of now most of the searches are being taken place on mobile. So, Google too is now targeting mobile devices in a different way and according to the user’s queries and interests over Mobile. I have already shifted my blog to mobile friendly interface as soon as i saw the message in Google Adsense Dashboard.

    Regards,
    Ovais Mirza

  26. David Hartshorne

    April 29, 2015 at 8:07 pm

    Hi Vinay,

    What a brilliant extensive post on the Google Mobile Friendly Test, and also digging deeper into the Page Speed side of things too.

    I made sure I chose a mobile responsive theme from Thrive Themes at the start of the year, so I’m all good on that front. I do however have a speed issue according to the Google test and therefore I’m looking to change my host. One thing at a time, right!

    Thanks again Vinay!
    – David

  27. Profile photo of Rohan Chaubey

    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.

  28. 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…

  29. Profile photo of Carol Amato

    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

  30. 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

  31. 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.

  32. Profile photo of Harish Kumar

    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

  33. 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

  34. 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

  35. 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.

  36. 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

  37. 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.

  38. Profile photo of Ikechi Awazie

    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.

  39. 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

  40. Profile photo of vidyarth srinivasan

    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 🙂

  41. 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!

  42. 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.

  43. 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 🙂

  44. Profile photo of Dennis Seymour

    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! 🙂




Leave a Reply

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



Read more posts in the category: Blogging & Making Money




Google Mobile Friendly Websites – The Complete How-To Guide

by Vinay Kachhara time to read: 22 min