Hiding content or links in responsive design

[NurunMTL]

Hi,

I found a lot of information about responsive design and SEO, mostly theories no real experiment and I'd like to find a clear answer if someone tested that.

Google says: 
Sites that use responsive web design, i.e. sites that serve all devices on the same set of URLs, with each URL serving the same HTML to all devices and using just CSS to change how the page is rendered on the device
https://developers.google.com/webmasters/smartphone-sites/details

For usability reasons sometimes you need to hide content or links completely (not accessible at all by the visitor) on your page for small resolutions (mobile) using CSS ("visibility:hidden" or "display:none")

Is this counted as hidden content and could penalize your site or not?

What do you guys do when you create responsive design websites?

Thanks!

GaB

[brad.s.knutson]

I understand what you are referring to about having to hide certain elements on smaller screens.  Sometimes not everything fits or flows correctly.

When this happens, however, I try to hide design elements as opposed to text or links.  I'm also OK with hiding images.  If a block of text or a link seems out of place or doesn't flow properly, I will build a dropdown for it.  I'm sure you've seen mobile sites with dropdown navigation menus.

I wouldn't leave it to up to Google to interpret what you are doing.  Don't hide any links.

[Saijo.George]

The way I see it.

Google does not have a problem with proper use of things like media queries. More info : https://developers.google.com/webmasters/smartphone-sites/details . They ONLY have problem with webmasters when the hidden text is only available to search engines for SERP manipulation.

Read more into the " The Vary HTTP header " bit in the link above and some info from Matt : http://www.youtube.com/watch?v=va6qtaiZRHg&feature=player_detailpage#t=219

[bridget.randolph]

Hi,

Saijo and Bradley are right in saying that hiding elements on a smaller screen should not be an issue (as it's a correct implementation of responsive design). Bear in mind as well that there is a Googlebot and a Smartphone Googlebot, so as long as the Googlebot is seeing what desktop users see and the Smartphone Googlebot (which uses an iPhone5 user agent) is seeing what mobile users see, it shouldn't be a problem.

The only thing I would add:

If you are going to use display:none to prevent a user from seeing something when they view your site, it's good to include an option to 'view full site' or 'view desktop site'. Also in that case I would question whether you actually need that content on the desktop site at all? Because best practice is to provide all the same content regardless of device.

If it's hidden but still accessible to the mobile user (in a collapsible div for instance) there's no cloaking involved so it shouldn't cause a problem.

As a side note: the Vary HTTP header is really for a dynamically served website (that is, a single URL which checks user agent and then serves the desktop HTML to desktop devices and mobile HTML to mobile devices).

Hope that helps!