How responsive websites load images/RWD questions

Printable View

Jan 8, 2013, 12:43
DrQuincy

How responsive websites load images/RWD questions

Hi,

I'm looking as media queries and responsive websites and have three questions:

1. If you have largebgimage.jpg as a background image and smallbgimage.jpg as a background image set in your CSS, will it load both images regardless? Or will it depend on the width of the browser at load time? From what I can see the main con of RWD is that, for mobiles, it is heavy on bandwidth.
2. Is there a guide anywhere that shows support for media queries on different browsers/devices?
3. What's the difference in media queries between max0width and max-device-width?

Thanks.
Jan 9, 2013, 01:40
NightStalker-DNS

Hi

I have been out of this for a while now, but I will answer your questions the best I can.

1. With media queries, it will load only the images and elements as needed based on screen size. So it will save on bandwidth.
2. http://caniuse.com/css-mediaqueries
3. Should basically just be support. I would go with max-device-width

Good luck
Jan 9, 2013, 15:25
Pullo

Hi there,

With regard to point three I just wanted to elaborate a little on what NightStalker said:

As you probably know, width is the width of the browser viewport, whereas device-width is the width of the device's screen.
However, please also bear in mind that width is measured in CSS pixels, whereas device-width is measured in device pixels. The latter value (device-width) does not change on a device and thus cannot be used to switch style sheets or CSS directives as the screen is rotated or resized.

If you're interested, you can try this out:
This example is for an iPhone3 (or any other device with a 320px device width), but you can tailor it to suit.

Here, the colour of the heading will change as you rotate the device from landscape to portrait:

HTML Code:

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0"> <title>Responsive demo width</title> <style> @media screen and (max-width : 320px) { h1 {color: blue}; } @media screen and (min-width : 321px) { h1 {color: red}; } </style> </head> <body> <h1>Hello, World!</h1> </body> </html>

In this example, it doesn't matter how you hold your phone, the device width is constant (320px) and the second rule will never be applied:

HTML Code:

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0"> <title>Responsive demo device-width</title> <style> @media screen and (max-device-width : 320px) { h1 {color: blue}; } @media screen and (min-device-width : 321px) { h1 {color: red}; } </style> </head> <body> <h1>Hello, World!</h1> </body> </html>

In short:
You are going to be a lot more flexible using min-width and max-width, as it will adapt to screen size on the fly.
You might consider using device-width if you are just trying to target small devices with a separate stylesheet.

There's a really good video by PPK (and also an article) which goes into more detail.[/QUOTE]
Jan 10, 2013, 13:43
Spartinman

Just something to note, i have run into some bad responsive web designes, some i worked with wordpress templates, and they were not all that friendly with some mobile devices and the formatting they scale down to. Just something to ponder over when choosing a responsive design to be a strong contender for mobile traffic.
Jan 11, 2013, 01:52
DrQuincy

Thanks for the responsive posts (pun intended!). Very useful.

Regarding point 1, I have heard it said that RWD is less bandwidth-efficent than a mobile site. Is this because developers tend to use high-res images and set the width to a %? So on smaller devices they aren't viewing an optimised image. If so, is there any way to serve images dynamically, based on size? What I like about mobile sites is it's easy to control exactly what is being sent.

So, just to reiterate, if you do a media query that contains a background-image, it will find the rule that applies and only load that image. Correct?

Thanks again.
Jan 11, 2013, 07:18
Pullo

Quote:

Originally Posted by DrQuincy

So, just to reiterate, if you do a media query that contains a background-image, it will find the rule that applies and only load that image. Correct?

Although that is essentially how I understand it should work, it is unfortunately a tad more complicated and varies from browser to browser.
Perhaps this article might help: http://timkadlec.com/2012/04/media-q...ading-results/
In particular, look at test four which describes what you are asking here.
Jan 11, 2013, 10:54
DrQuincy

Great link, thanks!