It’s been
over a week since the Google mobile friendliness has been introduced as part of
their ranking system. What this means is that whether your website is mobile
friendly or not will now be factored into their algorithm ranking. This is a
major change particularly as people are searching more frequently from mobile
phones.
Web pages
that are deemed mobile-friendly will have a higher perceived ranking by Google
than those that are not. In case you have missed it – Google said the
mobile-friendly signal would take effect beginning on April 21. Which means it
has been in effect for just over a week.
This change
isn’t overall a bad thing and makes your website more accessible. Many people
with severe vision impairments actually prefer to use iPad and if your content
shows up nicely on the iPad then that is great. The screen size of an iPad is more
suited as some have "tunnel vision" and for others it enables them to hold the screen more closely to their eye to see content. Both benefits which cannot be easily achieved on a desktop screen.
Checking for Mobile Friendliness
The most
important point is that the approval isn’t on a website basis but rather on a
page-by-page basis which is checked in real time. This means you need to ensure
that every page on your website satisfies the page mobile friendliness test.
You can
test it by entering the full page URL at:
What happens if you Failed the Test?
If your
website had failed the test then simply follow the instructions and feedback
provided by Google.
Initially
Hueyify website failed the Google mobile-friendly test. We actually had checked the Hueyify
website on several different mobile devices of varying screen sizes and all
were readable. Hueyify website was already using responsiveness and didn’t
think there would be an issue. Clearly we were misguided and wrong.
However, it
seems that Google didn’t accept our viewport widths (we were using fixed widths
that degraded gracefully depending on the varying device screen dimensions). It
took us a while to track down exactly what the error was since the Google hint feedback
was vague and unhelpful.
Make sure you are using viewport tag and use the width=“device-width”. The moment you alter the width you will get an error from Google that in our opinion wasn’t technically correct. However, we can waste more time arguing about this point as opposed to just rectifying the error in a way that is suited for Google.
Make sure you are using viewport tag and use the width=“device-width”. The moment you alter the width you will get an error from Google that in our opinion wasn’t technically correct. However, we can waste more time arguing about this point as opposed to just rectifying the error in a way that is suited for Google.
Additionally,
we couldn’t determine what dimensions was Google using as part of the
mobile-friendly testing. After some trial and error it seems that Google is
testing the mobile based on the early versions of the iPhone screen dimensions.
This means if your content fits nicely on about 320px then you will be fine and pass the test.
Obviously, 320px is very narrow so you would need to make sure your website
displays nicely on larger screens.
Take care
that you can not simply just scale your desktop website version to simply just
fit onto the mobile screen as this would mean the content for the most part is
illegible due to too small fonts. Tapping is also impossible due to all the
elements being spaced too closely together. Google can spot this when your
scale factor is unreasonable and will report this back to you as an error.
Does this mean I need to maintain several versions of websites?
This is not
necessary at all. The whole point of making your website responsive was so that
you only needed one set of HTML and control the responsiveness through CSS3 or
JScripting. For the most part if you follow the responsive design website then
the changes required to pass the Google mobile test in our opinion is probably
minimal.
If you are stuck as to what all this means then visit:
If you are stuck as to what all this means then visit:
You can
find a whole wealth of information on website and responsiveness at the
following links:
