Web design and the Retina Display

[pelsar]

I've been reading and reading and still dont get the answers:
the Retina display has 2x the pixels, which means as i understand it, if i'm designing a website thats good for the MBP and its retina display i have to make the site 2x as large as i normally do

of course on the non retina screens, which is most of the world thats absurd.

so am I designing 2 websites? one for the retina display and the second for the rest of the world?

and since its a responsive website, of those two sites which one go to the iPad and iPhone?

[theluggage]

Originally Posted by pelsar

the Retina display has 2x the pixels, which means as i understand it, if i'm designing a website thats good for the MBP and its retina display i have to make the site 2x as large as i normally do

No, the rMBP/iPad 3/4 scale up the site so that 1 "pixel" width in HTML/CSS = 2 physical pixel widths on the screen. You don't have to do anything.

If you want your bitmap graphics to take advantage of the retina display, then the quick'n'dirty solution is to prepare them at twice the size, then specify the "real" size in the HTML or CSS.

E.g. if you currently have a 200x200 pixel image, prepare a 400x400 version then make sure the HTML says <img src="whatever" style="height: 200px; width: 200px;"> - or use CSS 'physical' units such as mm or points. Retina displays will display the full 400x400 pixels, regular displays will downsample it to 200x200. Only if you have lovingly hand-crafted pixel-by-pixel graphics that would be desecrated by downsampling do you need to do two sets of graphics.

Only fly in the ointment is that if you use CSS background images rather than <img> tags then you are limited to newer browsers that support "background-size" - but then you just need to supply two sets of images and use different stylesheets for older browsers (which you may need to do anyway).

[pelsar]

Originally Posted by theluggage

No, the rMBP/iPad 3/4 scale up the site so that 1 "pixel" width in HTML/CSS = 2 physical pixel widths on the screen. You don't have to do anything.

If you want your bitmap graphics to take advantage of the retina display, then the quick'n'dirty solution is to prepare them at twice the size, then specify the "real" size in the HTML or CSS.

E.g. if you currently have a 200x200 pixel image, prepare a 400x400 version then make sure the HTML says <img src="whatever" style="height: 200px; width: 200px;"> - or use CSS 'physical' units such as mm or points. Retina displays will display the full 400x400 pixels, regular displays will downsample it to 200x200. Only if you have lovingly hand-crafted pixel-by-pixel graphics that would be desecrated by downsampling do you need to do two sets of graphics.

Only fly in the ointment is that if you use CSS background images rather than <img> tags then you are limited to newer browsers that support "background-size" - but then you just need to supply two sets of images and use different stylesheets for older browsers (which you may need to do anyway).

wow...thats easy enough to understand....so the "cost" is the downloading the heavier images, but thats it, and no background images....

thank you....

[circa7]

Originally Posted by theluggage

No, the rMBP/iPad 3/4 scale up the site so that 1 "pixel" width in HTML/CSS = 2 physical pixel widths on the screen. You don't have to do anything.

If you want your bitmap graphics to take advantage of the retina display, then the quick'n'dirty solution is to prepare them at twice the size, then specify the "real" size in the HTML or CSS.

E.g. if you currently have a 200x200 pixel image, prepare a 400x400 version then make sure the HTML says <img src="whatever" style="height: 200px; width: 200px;"> - or use CSS 'physical' units such as mm or points. Retina displays will display the full 400x400 pixels, regular displays will downsample it to 200x200. Only if you have lovingly hand-crafted pixel-by-pixel graphics that would be desecrated by downsampling do you need to do two sets of graphics.

Only fly in the ointment is that if you use CSS background images rather than <img> tags then you are limited to newer browsers that support "background-size" - but then you just need to supply two sets of images and use different stylesheets for older browsers (which you may need to do anyway).

Originally Posted by pelsar

wow...thats easy enough to understand....so the "cost" is the downloading the heavier images, but thats it, and no background images....

thank you....

I would create two sets of images depending on the scenario. But use CSS as much as possible to minimize having to deal with images at all. Of course, I dont know what type of images you're referring to, so this is definitely a generalization.

[lucidmedia]

Originally Posted by pelsar

wow...thats easy enough to understand....so the "cost" is the downloading the heavier images, but thats it, and no background images....

thank you....

Its a very heavy cost... particularly when you consider how much of the web is viewed over mobile data connections. Use javascript to profile your user and serve up images optimized for their device. Don't make everyone download retina-ready images.

[olup]

Originally Posted by lucidmedia

Its a very heavy cost... particularly when you consider how much of the web is viewed over mobile data connections. Use javascript to profile your user and serve up images optimized for their device. Don't make everyone download retina-ready images.

Is there any way to check the bandwidth with javascript or would one have to do some browser sniffing in that case?

I'm still very new to javascript, so I'm not sure, if this is correct and would actually work.

<script>
var body=document.getElementById('body')[0],
     lowBandwidth==4000,
     highBandwidth>==20000;

if(lowBandwidth){
     lowBandWidth.src='images/lowResPic.jpg';
}else if (highBandwidth) {
      highBandwidth.src='images/retinaPic.jpg';
}else {
           body.innerHTML='Sorry there is no data connection in your area';
}
</script>