Page 1 of 1

Responsive sites, do they download the desktop content too?

Posted: Tue Jun 23, 2015 8:07 am
by simonmlewis
We have had some issues with Responsive web sites.

They are generally controlled in CSS with the display:none feature, as well as percentages, but to stop it showing on mobile, you use that line.

But, does it stop the mobile browser generating it, and downloading it (because it is not displaying it), or does it literally download THE LOT?

It's because on the iPhone6 and 6+ there appears to be a commonly known problem with sliders that responsive to screensize. So we decided to stop the mobile version from showing certain content.

The browser doesn't "display" the content, but does it stop it from processing how?
Basically.... what happens with the "not shown" content?

Re: Responsive sites, do they download the desktop content t

Posted: Tue Jun 23, 2015 1:07 pm
by requinix
Yup. That's the main reason I don't like responsive design: the client downloads everything and then decides what parts to show and how. Web designers have this wet dream about being able to serve one version to everybody regardless of device and don't care about things like mobile bandwidth or data usage.

There are exceptions for CSS assets with @medias, like if you use a different background image for different devices then only one will be downloaded.

Re: Responsive sites, do they download the desktop content t

Posted: Tue Jun 23, 2015 1:19 pm
by simonmlewis
Sure. But to not show something does that mean the browser isn't handling it coz its told not to, and is only downloading it on the background?

Re: Responsive sites, do they download the desktop content t

Posted: Tue Jun 23, 2015 3:02 pm
by requinix
Depends what it's not showing.

Anything in the HTML will be downloaded. The browser has to download the whole thing. Along the way it will download CSS and Javascript, some images and such too, and they'll apply what they know when they can.
Like if your CSS says that an element should be hidden, the browser will download the whole HTML, figure out it needs to download CSS files, do that, learn that it should hide an element, then do so. Exactly how or when depends on the browser but my educated guess is that they generally don't try to render elements until they think they're "ready" to - it's why pages don't look weird in the split second between downloading the HTML and downloading and applying the CSS.
Generally anything in the <head> gets loaded before the page is rendered (which is why you put CSS <link>s in there and important Javascript references) and stuff in the <body> gets loaded and acted upon when it's processed (which is why you put less important Javascript references there).

If you reference a CSS file then the whole thing will be downloaded too (unless you indicate not to in the HTML, like with the media attribute). The browser will apply the CSS it needs to, and that may involve loading other files through @import or images through a url().

Re: Responsive sites, do they download the desktop content t

Posted: Tue Jun 23, 2015 3:09 pm
by simonmlewis
Do you know of the known iphone6 issues of sliders breaking when turning phone from portrait to landscape?

Re: Responsive sites, do they download the desktop content t

Posted: Tue Jun 23, 2015 3:38 pm
by requinix
No, but I'm no mobile dev so I probably wouldn't have heard if there was. I tried checking with Google but I'm only getting results about bugs with rotation in general or with the slide to unlock screen.

Re: Responsive sites, do they download the desktop content t

Posted: Tue Jun 23, 2015 7:39 pm
by Christopher
I find with Responsive designs that what is being "downloaded" and not displayed is pretty minimal. Since images are usually specified as background images, they are not downloaded. And that is a many K reduction in the load size. Not displaying a couple of nested, styled divs is a few hundred bytes.

And of course, do you actually have a performance problem? Is you mobile site large compared to the average mobile site? Or are you just engaged in Premature Optimization?