Content hidden on mobile responsive design

Question

As much as this should have been a well-covered issue, I couldn't find a definite answer to this specific question anywhere.

We run a scientific website which displays lots of well-established data about biological entities (such as proteins, enzymes, RNA and more).

The site is currently not mobile-friendly (i.e. no meta viewport, horizontal scrolling due to the width of the tables and some of the elements etc.), and we're about to turn it into being mobile-friendly, using media queries and all that.

The site has some info pages (not a problem) but the heart of the site, the vast majority of pages, are one-page-per-each-main-entity (such as a protein or well-known RNA sequence), where each entity page is full of data: text, tables, images, in-page searches.

Obviously, making these entity pages mobile-friendly is the primary challenge, since these are the harder to convert and are the long-tail of the site.

There are 2 issues though:

1. Some of the content is very hard to alter to make it mobile-friendly, specifically those multi-column tables (and they can't just turn from horizontal to vertical, since it would make no sense from scientific and usability points of view), or wide images that display genomic mappings.

2. We think (still need to be confirmed by A/B testing but this is going to be lengthy and expensive) that most of the scientific usage of the site is done by desktop, while mobile users are more interested in the main pieces of data which can be several summary texts, one main image etc. - about 1/3 of the full entity page.

These make us want to implement the mobile-friendly design such that about 2/3 of the content is only visible on tablets and desktops, but not on mobile phones. It probably won't hurt the mobile phone users who don't do deep scientific research from their phones, but it will provide very useful pieces of data for them; basically answering their main question: "What is this entity about?"

• It's not '98-style black hat keyword hiding
• It's not cloaking
• It's genuine and aimed to provide usable mobile phone experience and usable tablet/desktop experience.

But, It's still hiding lots of portions of the site.

My questions are:

1. First and foremost, is this going to penalize us in any way?

2. Will it cause Google to only consider the mobile-phone-visible content for its ranking?

Answer 1

Nice question. I'm afraid we will only be able to know the truth after a test. Nevertheless, I answer you based on my experience in similar situations.

We faced in the past the same situation when decided to use AMP. Some content was missing in the AMP version and that caused that some mobile visitors where redirected -by Google- to de non-AMP version with the full information.

Where we find that an AMP page doesn't contain the same critical content as its non-AMP equivalent, we will direct our users to the non-AMP page. Source

Despite you are not using AMP, I'll say that there are a lot of probabilities that you face the same scenario. Luckily we were able to analyze those visits and after knowing exactly which content they were searching for, we included it in the mobile version.

Quickly answers to your questions:

1. First and foremost, is this going to penalize us in any way?

I doubt it, you could lose some traffic if the mobile/desktop versions are not well formed or linked.

2. Will it cause Google to only consider the mobile-phone-visible content for its ranking?

That could happen so, I'll start making a test with one subfolder and analyze the results. After that, check which Google-Bot user-agent gets first and what kind of organic visitors Google send us. That will provide enough information to set up the next steps.

Answer 2

Google has enabled Mobile First Indexing, means it’s going to use the mobile version of the content for indexing and ranking.

But as mentioned in this official Google post, here are the exceptions:

1. If your site is Desktop only and doesn’t have a mobile friendly version, then there won’t be any change. Your mobile version is the same as the desktop version.

Since you have mentioned that it’s a science research site and there are pictures and large tables on the desktop version, then ideally you can add horizontal and vertical scroll bars for table. For pictures, you can show a small icon as as preview and provide a large image when someone clicks on it. This will serve the purpose.

Some of the mobile friendly site guidelines are available here:

Keep in mind that Google understands website and it’s content far better than anyone of us. So the problems what we discuss here, they already have worked on it and have solutions for them.

They aim to eliminate spam and show the accurate information to their users. Since your site is research based and I assume all content are original, Google is going to rank you higher ~ even for the mobile version.

Answer 3

Answering your questions;

1. First and foremost, is this going to penalize us in any way?

Answer. It won't penalize, but you will see a drop in ranking. The only way not to see a drop in ranking is to implement AMP on your website. So google do not give any error, but indexes AMP (AMPs are relatively faster and more google friendly).

2. Will it cause Google to only consider the mobile-phone-visible content for its ranking?

Answer. No, Google see every aspect of the website before indexing it. Many people say that it is only "Mobile Friendliness" which is not true at all. Google see for better SEO on website to rank it.

Suggestion: I would suggest you to create a subdomain m.yourwebsite.com and buy a mobile theme and apply on that sub domain and create a redirect from your cloudflare, so all your mobile visitors goes to Mobile part.