Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS no-show in responsive design

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #40513

    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?

    #112959
    mmoustafa
    Member

    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.

    #113107

    Thanks mmoustafa for the links, checking them out now!

    #113911
    seansean11
    Participant

    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?

    #113921
    Paulie_D
    Member

    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.

    #113984
    seansean11
    Participant

    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.

    #113997
    Paulie_D
    Member

    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?

    #114015
    Paulie_D
    Member

    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 8 posts - 1 through 8 (of 8 total)
  • The forum ‘CSS’ is closed to new topics and replies.