How does google check for responsive design?

Question

I know that google is checking for responsiveness when ranking sites and I'm wondering, how it is done.. is it looking at media queries only?

I want to make a page with many absolutely positioned elements and javascript taking care for responsive layout (so no need for using css media queries). Would google take into account that type of responsiveness?

Answer 1

There are multiple options to check wether a site is responsive or not, some easier than others:

• Viewport - The viewport meta tag tells the browser/css how wide the screen is. A common value is width:device-width, telling the browser to use the width of the device. While this can affect desktop layout, it's often used to

• Dedicated mobile domain - While technically not a responsive test, it is a test if there is a mobile version of the site. A simple check for m.example.com or mobile.example.com would suffice. There could be a redirect from the main domain to it, making things even easier

• Line Height - Because it's more difficult to click an element with your finger compared to a mouse, they test if clickable element (e.g.: listed anchors as menu) has the proper line-height, so that the user doesn't accidentally click the wrong element. They often recommend 40px for this.

• Parse result - The folks at Google (and other SE's) are pretty skilled. They can parse the result as a browser would, resulting in the same/similar result as an user would get. How to check for mobile? Try setting the parse-browsers max-width to 320px, or 768px. Can you scroll sideways? Then the result is broader then the screen. This is a vital clue that the website is not responsive.
  This also gives them the ability to check if there's a difference for different sizes/devices (e.g.: phone, phablet, tablet)

• Change device header - Often a browser sends out the HTTP_USER_AGENT value in the request. This contains the browser and version of the program. This header is easily changable, so change it to one of an iDevice, an Android, or Windows device. Does that result in changes in the website? then that's a clue.

Answer 2

Google provides a web interface to test websites' performance - including many things related to responsiveness - at PageSpeed Insights.

You would imagine that the things they are testing there are similar to what they test when ranking.

The kind of things they are testing are:

• existence of the viewport meta tag (Info)
• size and spacing of tap targets
• text size/legibility

Answer 3

You should create an account in the Google Search Console (aka Webmaster Tools). Once you verify your website, you'll have access to a section called Mobile Usability (under the Search Traffic category).

It will explicity tell you any mobile configuration errors that you may have on your site (e.g. viewport configuration, small font size, touch elements too close, content not sized to viewport, flash usage, etc.)

This article also is about as transparent as they get when it comes to what they look for in responsive design: https://support.google.com/webmasters/answer/6101188