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


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?

3 Answers 3


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.


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.

  • Wouldn't this also add some extra traffic because of the session handling?
    – Christian
    Mar 30, 2012 at 8:14
  • Only a few HTTP requests on the first page load. Once the images are loaded, they will be cached and not loaded on subsequent pages until the cache expires.
    – Craige
    Mar 30, 2012 at 13:01
  • But when the cache expires, the page will again need a longer time to load it? The mobile internet in my town is very slow... Mar 30, 2012 at 15:24
  • @ÍcaroLeandro - While I do see your point, I think the benefit would out weigh the cost. ~3 HTTP requests would save multiple kilo's bandwidth on subsequent requests by allowing you to eliminate content you won't be seeing. Also, if you serve these off the same domain, they will be loaded in parallel. Finally (though I'm not 100% sure about this), putting these declarations at the end of the CSS file, as well as putting #sometag at the end of the <body> should cause them to be loaded after all/most of the rendering is done, thus not impeding the user experience.
    – Craige
    Mar 30, 2012 at 15:32
  • 1
    Amendment to my above comment: the images will be loaded in parallel to other content, not to each other. Also, you could return a 204 (No Content) status from the web server as opposed to an image, thus saving even more bandwidth.
    – Craige
    Mar 30, 2012 at 15:35

How about deferred loading of the content?

Insert some javascript which verifies screen resolution or some other parameters and only loads the content when the correct values are met.

  • 3
    This is kind of a tricky scenerio/answer. I'm not sure if this violates progressive enhancement or not.
    – Craige
    Mar 29, 2012 at 13:33
  • Like, triggers to open some script? The trouble is, the system is PHP, so the content must load after the page open using javascript triggers... And again the page require a little more time to open fully... Right? Mar 29, 2012 at 15:28
  • Think you have to test it. When all data is requested by the client, it will take a little longer. But for the clients only needing parts of the data, it will be faster, depending on the amount of data.
    – Christian
    Mar 30, 2012 at 8:12
  • If the javascript runs after the page is read, you basically start with the same page and then larger screensizes see their page increase in content. As to progressive enhancement, the real question is how much beyond the initial load is needed for a good experience. If none (which I would expect, otherwise those with screens < 800px are going to have a bad experience) then I don't see any immediate concerns. Jan 7, 2015 at 14:26

IMHO this should be handled by browser not you as developer. Why?

1) If you are loading lower resolution images for < 800px width what will happen with desktop users that might load your page with only fraction of their desktop size used (not all users run browsers maximized) and then press 'maximize' button?

2) Using javascript to detect if content is shown will kill mobile phones CPUs & battery so if you decide to use it be very carefull not to abuse it

Responsive design is cool new technique but it will take some time to get everything right. If you look at bostonglobe.com you will see that almost all of the content is loaded independently of your browser width :(


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.