Grow your CSS skills. Land your dream job.

Mobile First

  • # January 24, 2013 at 2:47 pm

    Hi All, have been looking it rewriting one of my existing website using the theory of mobile first, i understand media queries in css, and how they can be used.

    I would like some help on how to add content as the screen size goes up i.e. changing the code that displays a static image in a div to a slider and all the mark up that is involved.

    I have used display: none before, but as i understand it, the content is still downloaded but just hidden which works but doesn’t help on the amount of data that is being downloaded.

    Thanks, Alfie

    # January 24, 2013 at 3:30 pm

    @Alfie, the basic rule of thumb is, you never want to limit content based on your audience’s preferred device (don’t present content on the desktop that isn’t on the mobile), only change the presentation of the content, BUT, with that being said, there may be scenarios that you won’t want to present that blog post thumbnail to a mobile user, because of the precious bandwidth, that’s where scripts like [response.js](http://github.com/ryanve/response.js/ “”) come in, where they can assist you with dynamically serving images/blocks of code, based on screen resolution.

    # January 24, 2013 at 4:34 pm

    I agree with @ChrisP — I believe content should always be the same regardless of the device that’s being used. And, images (static or slider) I would consider content too. Having said that, Chris’ solution for response.js would indeed do the trick.

    In general however, if you have anything that should not be seen on small screens but should be seen on higher screen widths, the display:none method is the easiest, most straightforward way to do it.

    # January 24, 2013 at 5:48 pm

    Thank you for you advise, will have a look at response.js and between that and display:none should be all i need.

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

You must be logged in to reply to this topic.

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