Is Your Site Responsively Compliant?

Is Your Site Responsively Compliant?

When Google announce an algorithm update, they usually do it fairly quickly, with little to no warning.

Many Internet Marketers are painfully aware of the impact of Google’s Panda, Penguin and Hummingbird updates. Especially those Marketers whose site’s were hit and tumbled down the SEO rankings to some far-flung page in the outer-listings.

I was still too new at IM when those updates were rolled out, but I did read of many horror stories, where the website incomes of Marketers was just wiped out overnight.

It must have been very tough for those whose sites were affected, but I guess that some of them were “living on the edge” by indulging in techniques and activities that reside on the darker sides of “white-hat”. So it was only a matter of time – really –  before Google would react. And react they did, by hitting them where it hurt, a direct slap down the rankings for everyone they deemed as trying to “game” their systems.

For me and others who started out in the last year, the Google updates have actually been of benefit to us, by helpfully highlighting the things we shouldn’t be doing. When learning anything new, it is very annoying having to “un-learn” something when you find out that it could expose you to unnecessary risk and is just plain wrong.

The other main benefit for newbies, is that the after-effects of the Google updates, put everything on a far more level basis than it had been for a very long time.

So that brings me to the point of this post.

At least a month ago, maybe longer, Google announced the coming of the Mobile Ranking Algorithm:

“Starting April 21, we will be expanding our use of mobile-friendliness as a ranking signal. This change will affect mobile searches in all languages worldwide and will have a significant impact in our search results.”

This algorithm will include mobile-friendly usability factors, as more people are using smartphones and other mobile devices, it is now more important than ever that all sites are mobile-friendly.

The word from Google is “Responsive Design”.  So it is up to all site owners to ensure that all pages are available and render correctly to all devices from the same URL.

More details are available Here

Three Simple Ways To Test A Site For Responsiveness

Number 1 – Resize Your Browser Window

A quick and simple test is to adjust the browser window size to see if the site would be usable on a small screen.

The first screenshot below, with the caption “Site Viewed In Wide Browser Window” shows the Home page of my site in a wide browser window. It was taken from a 24inch display screen and is perfectly OK.

However, the second screenshot with the caption “Site Viewed In Thin Browser Window” is a totally different story. I have reduced the width of the browser window – on the same 24inch display – and you can see that my banner and the share icons are the only elements on the page that are responsive.

All the text, the menu and the dark grey background have gone.

Unfortunately for me, it means that my site will fail the mobile responsive design test! And that is exactly the reason why I am currently rebuilding my site off-line.

Chrome Developer View

Site Viewed In Wide Browser Window

 

Site viewed in thin browser window

Site Viewed In Thin Browser Window

 

Number 2 – Google Chrome Browser

Another way, for those that use the Google Chrome browser, is to right-click anywhere on the page.  A menu will then appear, as shown in this image  below with the caption “Right Click Menu In Chrome With Inspect Element Highlighted”

Right Click Menu In Chrome

Right Click Menu In Chrome With Inspect Element Highlighted

 

A “Developer Area” showing lines of code will appear at the bottom of the screen, taking up approx 25% of the display area, as shown in the image below:

Chrome Developer Area At Bottom Of Screen

Chrome Developer Area At Bottom Of Screen

 

The screenshot shows the screen as viewed  from the  bottom left section.  I have drawn a red arrow pointing at a mobile-phone icon, which will display a drop-down menu  called “Device” in the upper left area of the screen, as shown in the screenshot below:

Device Drop-Down In The Upper Left Area Of The Screen

Device Drop-Down In The Upper Left Area Of The Screen

The drop-down menu lists quite a number of mobile devices from different manufacturers. Devices ranging from smartphones to tablets can be chosen and the page shown under the list will adjust according to the dimensions of the selected device.  This feature of Chrome makes it possible to see how your site will look on a range of different devices – all for free!

 

Number 3 – Google On-Line Tool

To test the mobile friendliness of a website, Google have produced an on-line tool which is available Here

The preferred result is the display of the following message, in green –  “Awesome! This page is mobile-friendly”.  Unlike the message I got from the test, as shown below:

Googles Mobile-Friendly Test Tool

Googles Mobile-Friendly Test Tool

 

Oh dear, I’ve got some work to do before the 21st of April!

The Tool shows the problems found and what needs to be done to make the site compliant. My mission is to do just that and achieve  an “Awesome! This page is mobile-friendly” in a nice friendly green! I am actually in the process of rebuilding my website, with WordPress locally installed on my PC using WampServer.
WampServer is a Windows web development environment. Mac users have a number of alternatives to go at,  as listed Here

 

Six Tips For A Mobile-Friendly Website

  • Use The Same Domain for mobile and desktop sites. Don’t use a different domain, subdomain or subdirectory for mobile users.
  • Media content, including video & audio, to be available to play in the required formats of all mobile devices.
  • 404 Mobile Error. If a page is not available for mobiles devices, don’t just redirect to a default 404 error for desktops.
  • Avoid Duplicate Content on site versions for desktop & mobile. That’s why Google wants all sites to have a Responsive Design.
  • Don’t block JavaScript, CSS and image files. The Googlebot needs to have easy access to these website files.
  • Mobile Page Speed is important to the user experience and the site’s loading process will have to be optimised.  Google’s Page Speedtest Tool is Here.

 

I hope this information has been of some benefit to you. I will certainly be working on the responsive conversion of this site and uploading it before the 21st deadline, which is actually Tuesday of next week. And achieving the “Awesome – Mobile-Friendly” status from Google.

Actually, if you are inspired by the word “Awesome”, there is something else I want to point out to you that is truly deserving of the word.  Most affiliate programs out there are much the same, in terms of their commission payments, differing only by 1 to 2 percentage points. And apart from providing a few banners and emails to use, you are pretty much by yourself when it comes to promoting the product.

This one is different.

But, you don’t have to take my word for it, just click The Affiliate Club banner below and find out for yourself.

If you’re not yet ready to dive into the world of affiliate marketing, then maybe this would be more suitable for you. Just click the banner below

Kind Regards,

Mike Flanagan

Mike Flanagan