Grow your CSS skills. Land your dream job.

no-show in responsive design

  • # October 29, 2012 at 4:01 pm

    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?

    # October 30, 2012 at 5:56 pm

    For the following reasons http://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.

    # October 31, 2012 at 6:05 am

    I personally disagree. If you’re hiding elements from view for a reason, IE stripping out content for mobile or small screens for example, it should realistically not be available to screen readers anyway since visual users won’t be seeing it either.

    # November 1, 2012 at 10:06 am

    Thanks mmoustafa for the links, checking them out now!

    # November 10, 2012 at 11:26 am

    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?

    # November 10, 2012 at 1:30 pm

    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.

    # November 11, 2012 at 7:40 pm

    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.

    # November 12, 2012 at 3:22 am

    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?

    # November 12, 2012 at 4:32 am

    @Paulie_D – I definitely appreciate where you’re coming from, I’m agonizing at the moment because I’m creating buttons (checkout this codepen).

    Sadly, because you can’t transition/animate an :after I’m having to use a span called after to achieve the roll over effect that I want.

    So it means inserting ugly HTML, it’s agonizing as I usually try to keep everything as light as possible.

    # November 12, 2012 at 8:49 am

    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.

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".