Both designers and developers are accustomed to having to adapt to new technologies. We know the standards are now higher than ever with HTML5, CSS3 and responsive designs and it won’t come as a surprise if we tell you that’s not all you have to keep an eye on.
We already talked about the explosion of new devices on the market and how you have to optimise for each and every one. Most designers optimise for standard resolutions of the tablets, smartphones, desktop computers or laptops, but many of them overlook a new technology implemented by Apple, the Retina Display.
What exactly is the Retina Display
Apple claims that, if a device is held at a typical viewing distance, the human eye is not able to see the pixelation on a Retina display. Since you will not hold a MacBook as close as an iPhone, the pixel density of the retina displays featured on these products will vary from 220 to 326.
Please note that the number or pixels is basically the same (physically), but In order to compensate for the small pixels (digitally), all the User Interface element’s are usually doubled.
How to optimise
Media queries – just as we explained in the article about responsive design, the usage of media queries is essential when optimising for Retina displays.
Scalable vector graphics – SVGs (or simply vectors) have infinite scaling abilities, therefore they will look good when scaled to large dimensions.
Another CSS – You should have a separate CSS for your 2x version.
Larger HTML embedded images – You can have two sets of pictures (standard and 2x) and you can use a cool script like retina.js.
___
photo via apple.com
Follow