Hello all.

 

I have a query regarding the best practice for responsive web design. My query is, what is the best practice for not displaying content when using media queries? Is it OK to use display: none?

 

For example, if you are design a site using the mobile first approach and you have content (ie a slider or images) that you only want to appear on the desktop version of the site. Is it OK to use display: none in CSS to hide this content from the mobile size?

 

Is there a better way to do this?

 

I am interested to find out what other people do in this situation.

 

Thanks.

Years back there was a risk that some search engines would see content hidden with CSS as Black Hat SEO. But today it is so common to conditionally hide content that search engines accept this practice, At least if it makes sense what you are hiding.

There is nothing wrong with hiding images on small screens but I'm sure that you are aware that all the devices will load the images even if they dont display them. So the technique will not have an effect on performance only on the layout.

Edited September 14, 201510 yr by Nillervision

I wouldn't use display: none.

 

There's a good article https://developer.yahoo.com/blogs/ydn/clip-hidden-content-better-accessibility-53456.html

that covers hiding elements but leaving them still accessible to non visual devices. You can just pop the CSS inside of a media query to toggle the visibility state.

Thanks for your replies. I am aware that if you use display: none the content will still load. I will have a look at the article that rbrtsmith posted.

 

Can you use this technique to hide a nav bar? For example, on a mobile site you would have the nav in a slide out menu. On a desktop you would have a full width nav. Would the technique outlined in the article be a good way to hide the full width nav from smaller screen sizes, or is display: none the best option?

 

Is this really still best practice as we're nearly a decade on from when that was posted? I'm not arguing, I'm just surprised that things haven't changed in 8 years.

 

Good job I re-read that article, I was about to say it's from 2012, but then I noticed the "from 2007"

 

It would be interesting to know, as I use the display:none now and again.

This is a bit more 'recent' but things really have not changed that much.

https://css-tricks.com/places-its-tempting-to-use-display-none-but-dont/

 

Just because something is old doesn't always mean it's out of date.

.visuallyhidden { 
  position: absolute; 
  overflow: hidden; 
  clip: rect(0 0 0 0); 
  height: 1px; width: 1px; 
  margin: -1px; padding: 0; border: 0; 
}

^^That is pretty much what I've used since day one, and unless some kind of new CSS spec comes out and all browsers including legacy somehow? support it, I don't see any reason why this would change.

In terms of accessibility I'd like to qoute Chris Coyier (too) on whether to offset stuff or use display:none in media queries

 

Are you hiding a bunch of crap that isn't important to the page? Or are you hiding useful things that a person using a screen reader should have access to like they normally would.

 

(same article that Robert links to, He is faster on the keys that I am )

In the case with the image slider I would say that could very well categorize as "a bunch of crap". No offense OP.

Edited September 15, 201510 yr by Nillervision

I should add that i think generally hiding content on small screens is a bad idea anyway, mobile users should not be getting a substandard experience, you should look into presenting the same content in a different way, Just hiding it seems lazy to me.

Of course there are exceptions where stuff should be hidden, but it most certainly should not be the norm.

I use display: none; for toggling UI elements. If screen readers can't pick up on that UI until it's visible, that's fine, because it would only confuse the person using a screen reader otherwise. I'm talking about things like toggle buttons, and mobile UI elements, that you don't want interfering on a desktop screen reader.

 

As for actual content. We don't build mobile first, but we design with actual content, and design very component based. The end result is that we choose priority over content and lose anything else, which helps avoid the whole hiding content situation.

Thanks for all the replies. I agree that hiding content from small screens is not best practice. I just wanted to know if there was a better option than using display: none to not show content that you don't want to appear.

 

It's good to see how other people approach this issue. As it is still OK to use display: none, I think I will use that.

I use display: none; for toggling UI elements. If screen readers can't pick up on that UI until it's visible, that's fine, because it would only confuse the person using a screen reader otherwise. I'm talking about things like toggle buttons, and mobile UI elements, that you don't want interfering on a desktop screen reader.

 

As for actual content. We don't build mobile first, but we design with actual content, and design very component based. The end result is that we choose priority over content and lose anything else, which helps avoid the whole hiding content situation.

 

I agree with the non-mobile first approach. I think people adopted this in the early days because it might have been easier to reason about? Honestly I don't see any real benefit doing mobile first. I prefer the content first approach then let that dictate the UI.

I tend to work across multiple artboards in Sketch. It helps keep the content and UI consistent across every template. Here's a recently project.

 

Every one of those components is re-usable. Some are elements hidden using buttons, but they're the same piece of UI when opened.