Go Back   MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Reply
 
Thread Tools Search this Thread Display Modes
Old Dec 31, 2012, 02:59 AM   #1
pelsar
macrumors regular
 
Join Date: Apr 2008
Location: israel
Web design and the Retina Display

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?
__________________
MacBook Pro 1.83GHz Intel, 1.5GB 667MHz, Leopard 10.5.6
pelsar is offline   0 Reply With Quote
Old Dec 31, 2012, 04:20 AM   #2
theluggage
macrumors 65816
 
Join Date: Jul 2011
Quote:
Originally Posted by pelsar View Post
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).
theluggage is offline   0 Reply With Quote
Old Dec 31, 2012, 04:37 AM   #3
pelsar
Thread Starter
macrumors regular
 
Join Date: Apr 2008
Location: israel
Quote:
Originally Posted by theluggage View Post
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....
__________________
MacBook Pro 1.83GHz Intel, 1.5GB 667MHz, Leopard 10.5.6
pelsar is offline   0 Reply With Quote
Old Jan 12, 2013, 02:49 AM   #4
circa7
macrumors regular
 
Join Date: Jan 2013
Quote:
Originally Posted by theluggage View Post
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).
Quote:
Originally Posted by pelsar View Post
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.
circa7 is offline   0 Reply With Quote
Old Jan 13, 2013, 01:00 AM   #5
lucidmedia
macrumors 6502a
 
Join Date: Oct 2008
Quote:
Originally Posted by pelsar View Post
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.
lucidmedia is offline   0 Reply With Quote
Old Jan 13, 2013, 04:22 AM   #6
olup
macrumors regular
 
Join Date: Oct 2011
Quote:
Originally Posted by lucidmedia View Post
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.

Code:
<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>
olup is offline   0 Reply With Quote

Reply
MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Similar Threads
thread Thread Starter Forum Replies Last Post
Web design on Retina MacBook Pro KimHansenDK MacBook Pro 33 Yesterday 06:46 PM
Web and graphic design on MacBook Pro with Retina Display jontarbuck MacBook Pro 3 Nov 22, 2013 08:30 AM
Graphic / web design - Retina or not-Retina w41uigi MacBook Pro 29 Apr 4, 2013 03:01 AM
Retina Display and the Web Franciturci iPad 2 Aug 13, 2012 07:13 AM
Is anyone else avoiding the newer design MBP because of the Retina display? cathyy MacBook Pro 21 Jul 8, 2012 01:34 PM

Forum Jump

All times are GMT -5. The time now is 07:10 PM.

Mac Rumors | Mac | iPhone | iPhone Game Reviews | iPhone Apps

Mobile Version | Fixed | Fluid | Fluid HD
Copyright 2002-2013, MacRumors.com, LLC