Grow your CSS skills. Land your dream job.

Best approach for conditional loading (mobile-first)

  • # March 8, 2013 at 9:57 am

    Hi guys

    I am about to create my first ‘mobile-first’ website and am unsure on the best way to conditionally load content as the viewport increases.

    For example, lets say I wish to load a twitter feed only for desktop browsers, not mobile, how would I do this?

    Option 1) Display: none – This is bad as content still loads for mobile

    Option 2) Have content in markup, but remove.element with javascript – I believe this content still loads first, then is removed after? If so, not good.

    Option 3) Using javascript, if viewport is wide enough, load content – This seems to be the recommended approach, from what i’ve read, but Is it a good idea to have markup in javascript? I am thinking about accessibility, semantics and seo.

    Any advice would be greatly appreciated.

    # March 8, 2013 at 10:00 am

    I’m not exactly a JS expert (basically a n00b really) but is there a reason why the content could be already sitting as a separate HTML ‘slug’ sitting on your web server waiting to be injected when the browser hits a certain width?

    HMTL markup isn’t in the JS, it’s a div id on a ‘separate pgae’ waiting to be injected….if that makes any sense.

    # March 8, 2013 at 10:09 am

    @Paulie_D – Of course! So when you conditionally load content in javascript, all you do is an ajax call to load in that snippet? This could be the missing piece of the puzzle I was after.

    The reason for this is let’s say I wish to display a latest tweet on the webpage. This obviously needs javascript. It’s just a small addition in the footer which doesn’t really need to be served to mobile users, so would rather not serve that to them, especially as social API’s tend to slow down pages.

    I was also asking as a general technique as I may wish to use this elsewhere.

    Thanks again for your help

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

You must be logged in to reply to this topic.

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