no-show in responsive design

[Historical Forums User]

The other day I was listening to the recent Shop Talk (#40) and they discuss not using no-shows in responsive design for hiding elements in certain views.

.mobile-no-show { visibility: hidden; display: none; }

Why is this bad practice and what are alternatives to this?

[mmoustafa]

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

And when it comes to images, you need to check this out http://timkadlec.com/2012/04/media-query-asset-downloading-results/ .

Plus you’re loading content you won’t be using anyway, so it’s a larger document size for nothing.

[Historical Forums User]

Thanks mmoustafa for the links, checking them out now!

[seansean11]

Ok, so I just listened to Laura’s interview last night, and started to wonder the same thing. She was very adamant about designing mobile first…which leads me to think that she sets up her media queries with min-width (for scaling up) instead of something like max-width (for scaling down). I just checked out her site and it seems like she did just that. The illustration on the right isn’t loaded on the body element until you reach min-width 1200px. According to the media query article posted by @mmoutstafa, this seems like the best way to go about setting up your images.

The one thing I don’t quite understand yet is, what do I do with inline images (img)? Does this suggest that I need to add extra unneeded markup and load them as bg images, in order to prevent their loading on small screens? I know there are js plugin solutions out there, but it would be nice to accomplish without having to rely on loading more files. Any ideas?

[Paulie_D]

Inline images are Content whereas bg images are Design.

That’s the way I remember it.

If I’m adding content then I want it seen on all devices but I’ll make images responsive/adaptive and structure my site accordingly.

[seansean11]

I like your explanation @Paulie_D. I ask though because I’ve had situations where I’ve added inline img’s that were actually decorations, just because I would have had to add extra markup in order for them to be visible as background images (ex: empty span or div). Is this semantically incorrect (using decorative inline images)? I’d assume that for responsive designs sake, I should probably add the extra markup and load them as background images.

[Paulie_D]

As ‘web people’ we tend to get hung up on what things ‘should’ be and often we can get quite defensive of our various positions.

I’m a little more relaxed about it, perhaps. If your code requires extra markup to achieve the required design then so be it. I would make sure that my divs/spans/whatever have classes that are descriptive as to what they are doing.

Such as

.span_border_img_xxx

Often there are ways to avoid extra HTML with, erm, creative CSS but that’s how we learn?

[Paulie_D]

Ah…you see I wrap my link text in p tags which reduces the need for spans and such. They inherit lots other p styling and the a styling to.

I found the way Twitter bootstrap does it’s buttons interesting, they are just p tags with a class of .button…and you can go from there.

[Author]

Posts