Grow your CSS skills. Land your dream job.

Prevent hidden html from loading on mobile

  • # April 29, 2013 at 7:11 pm

    It is possible and worth preventing html to be loaded on mobile, if it will not be displayed? Something like media queries for html.
    The only solution i found, other than “do not load images” solutions, was [this one](https://github.com/Podders/Jquery-Media-Comments “jquery media comments”), but it’s realy recent.

    # April 29, 2013 at 10:50 pm

    it’s easier to create a mobile version of your site entirely. and have users redirect if on mobile to the mobile version.

    # April 29, 2013 at 11:21 pm

    Seems you’re talking about a responsive based design. You can take a look at Chris’ last post on setting a cookie to check client side information, then adjust what content gets displayed server side. Or, like Jarolin said, you could keep your site responsive, but also UA sniff to serve a completely different mobile site when appropriate.

    # April 30, 2013 at 4:58 am

    It’s an option, but I don’t want to go that far.
    Sometimes we have a few elements in a responsive website we don’t want to show in the mobile version. Usually, people just set display:none, or something with the same result, to hide it. The problem with this solution is that these elemets will be loaded and slow the website.
    That’s why I was wondering on solution to say “if @media (min-width: 321px) show this block of html, else don’t. Something like [IE Conditional Statements](http://css-tricks.com/how-to-create-an-ie-only-stylesheet/ “IE Coonditional Statements”), for instance.

    # April 30, 2013 at 6:18 am

    Perhaps tackle the problem with JavaScript width detection and AJAX?

    # April 30, 2013 at 3:00 pm

    Google conditional loading.

    Its pretty much having the content on another page somewhere on your server, and then bring it in using the .load function with jQuery.

    # April 30, 2013 at 3:26 pm

    you can add display:none to the elements you want to hide when the window size reaches a certain size. The HTML element will be loaded but it would act as if it weren’t even there.

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

You must be logged in to reply to this topic.

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