Designing for Retina Display
To take advantage of high-resolution displays on iPad, laptops and phones, images used on existing websites may need modification. Images designed for desktop screens can look blurred on Retina displays, and several options have to be considered.
Present different images/photos based on media queries? A higher resolution version can be shown, however consider possible download size limitations. Is this the best solution?
Good page to test media queries code:
http://timkadlec.com/mq/
http://timkadlec.com/2012/02/media-query-asset-downloading-tests/
Present SVG images instead where possible. Use icon ‘sprites’, display controlled by CSS.
http://coding.smashingmagazine.com/2012/01/16/resolution-independence-with-svg/
Good information for CSS and Scallable Vector Graphics.
http://perishablepress.com/target-iphone-and-ipad-with-css3-media-queries/
http://www.webdesignerdepot.com/2011/05/big-vs-small-challenges-in-responsive-web-design/
http://blog.sarahlynndesign.com/new-ipad-retina-display-responsive-design/
http://www.webmonkey.com/2012/03/what-the-new-ipads-retina-display-means-for-web-developers/
http://www.webmonkey.com/2012/06/make-sure-your-site-looks-good-on-the-new-retina-macbook-pro
http://menacingcloud.com/?c=highPixelDensityDisplays