Big mistake - retina?

[jnash123]

Just purchased a new mac book pro retina version, i will be doing some light web design work.

seeing that retina is a new thing, am i destined to get bad quality on every non retina site i browse too?

as a web developer if you work on your website to retina, what sort of quality will a non retina viewer see?

Thanks in advance, but still have time to change order currently?

 

[dan1eln1el5en]

you make the retina graphics and then make a copy in half size and use a script to figure out what the user have e.g. http://retinajs.com/

 

[jnash123]

hey thanks for this, so no real change from using my dell...

what about normal sites on the retina display, does it look really bad..? - i can imagine testing out the site on my retina and it not looking right so would need another machine to test with?

 

[Consultant]

If your site "looks" bad, you should probably add retina capability and images to it.

Plenty of web developers using retina devices, and the world is moving toward retina due to high resolution devices such as smartphones and iPad.

You don't need another machine. Just get an external display with standard DPI, and use display spanning. Use internal display to test retina, use external display to test non-retina.

 

[theluggage]

you make the retina graphics and then make a copy in half size and use a script to figure out what the user have e.g. http://retinajs.com/

You don't always need a script.

For old-school 'img' tags, just prepare the images at (say) 300 x 200 pixels, then scale them down to exactly half-size: <img src="foo.png" width="150" height="100" > (you can set the height and width via CSS if you prefer to keep metrics out of your html).

Browsers on retina displays will double the dimensions you specify, so they won't actually resize the images. Most other browsers do a half-decent job of resampling the images to half size (bonus - if they zoom in they'll get the extra detail).

...if you use CSS background images, use the CSS background-size property to do the resize.

Alternatively, I haven't tried it, but a quick google reveals:

http://css-tricks.com/snippets/css/retina-display-media-query/

...which lets you (e.g.) load different background images via CSS on a retina machine. Useful if you want to support older browsers that don't have the CSS background-size.

Best practice would be to use those techniques to produce a site that works without JavaScript, then if you're not happy with the resampled images add an optional script that loads custom non-retina images.

 

[zioxide]

hey thanks for this, so no real change from using my dell...

what about normal sites on the retina display, does it look really bad..? - i can imagine testing out the site on my retina and it not looking right so would need another machine to test with?

You need to build your site so it can scale for all different screen sizes & pixel densities.

How?

Ditch as many images as you can. Obviously, logos, photos, etc. still need to be there. For logos and other small graphics, you can follow the suggestion of the post just above mine and just make your image twice the size, and set the size thru CSS.

For example: if your logo is 100x100, make the file 200x200, and then use CSS to set the height and width of the element. Browsers will automatically scale it down, and on high density displays, you'll still have all the detail.


For graphics that are part of layout elements.. like when you used to need little image files to do rounded corners, gradient backgrounds, etc... ditch them. You can do many of these effects with CSS3.


For icons/small graphics, many of them can also be ditched now in favor of icon fonts. Icon fonts are vector based and load/function just like regular text fonts, so you can scale them up and down with no loss in quality.

Check out Font Awesome, it's probably the most popular: http://fortawesome.github.io/Font-Awesome/


For larger images or photos, look into RetinaJS that was mentioned or AdaptiveImages.php.

 

[blanka]

I saw a nice test where they compressed twice the size images with a higher JPEG setting. It does have more artifacts, yet on Retina these artifacts are invisible.
It turned out that 200x200 pixel JPEG at say quality 30 was good enough, and had the same file size as the previously used 100x100 pixel JPEG at quality 60.

So you can go with just 1 image at double density for all. The width/height property will render it the correct size.

En to get your logo's right: Open the vector in Photoshop at 4x resolution with anti aliasing. Then downscale to 2x resolution with BILINEAR filtering, NOT BICUBIC! Otherwise the logo will loose sharpness and halo's will appear on contrasty edges.

 

[Cole Carrera]

I have a 2007 MBP at 1440x900.

The web looks fine. (??)