Responsive Design – Preventing Useless Content Load on the Page

csshtmljavascript

In responsive design, elements are hidden in the page with @media queries and display: none in CSS.

Ok.

In my design however browsers that have less than 800px in width should avoid loading some content at all.

When accessed with on a device with more than 800px of screen, the page loads fully. In mobile devices or even on desktop with less than 800px of width some content is hidden.

I want to make the page load faster for low-resolution devices and avoid loading chunks of content that the user will never see. How can I go about this?

Best Answer

I thought long and hard about this all morning. This is a very interesting question.

I think the solution that Christian purposed, which is also the defacto-standard, is an inelegant solution that works against progressive enhancement. While it could be said that it is progressive because if the user does not have the site Javascript enabled, they will simply see a slim version of the website without the extra goodies loaded on view.

However, I don't like this approach. I have Javascript mostly disabled in my browser, and I run my windows at 1024 - 1280px most of the time, and a site designed for a base of 800px with Javascript on-loads will look pretty bare to me.

That said, I think I may have come up with a solution.

I think the best way to go about responsive design might be by using a tracking image and server-side intervention.

In your style sheets, you could have:

@media (screen and max-device-width(800px) {
    #sometag {
        background-image: url('track-800.gif');
    }
}

@media (screen and max-device-width(496px) {
    #sometag {
        background-image: url('track-496.gif');
    }
}

Now, provided that image is served on a cookie-enabled domain, the web browser will pass the session id back to the server, enabling sessions on that request. If you have these images served by a php-script, you can now track and store the size of the device the user is using.

Given this information now stored in a session variable, you can disable areas of the page (on subsequent page loads) that will never display for the users device resolution.

Disclaimer

This method would require utilizing max-device-width() media queries, rather than max-width() queries. The difference is the application size would be based on the size of the users display, rather than the size of the window.

Related Topic