Retina

Pixel ratio

specifies how a physical display pixel compares to a pixel on a “normal” density screen

• Nexus One: resolution 480 physical pixel and 320 virtual, as a result pixel ratio = 1,5
• MacBook with retina: resolution 2880 physical pixel and 1440 virtual, as a result pixel ratio = 2

Retina on Android

• LDPI 0,75 — old smartphones
• MDPI 1,0 — normal smartphones
• HDPI 1,5 — Nexus One
• XHDPI 2,0 — Galaxy Nexus, Galaxy Note

Design for Mobile

			<meta name="viewport" content="
			      initial-scale=1,
			      maximum-scale=1">
		

Detecting retina screens in JavaScript

			function isRetina(){
			    return (('devicePixelRatio' in window &&
			    devicePixelRatio > 1) ||
			    ('matchMedia' in window && 
			    !matchMedia("(-moz-device-pixel-ratio:1.0)").matches))
			}
		

Detecting retina screens in CSS

			@media(-webkit-min-device-pixel-ratio:1.5),
			       (min--moz-device-pixel-ratio:1.5),
			       (-o-min-device-pixel-ratio:3/2),
			       (min-resolution:1.5dppx) {
			       E { something }
			       }
		

Text is text, and won’t flow differently on a retina screen

PNG

1. PNGs for background gradients ➤➤➤ use CSS gradient (CSS Hat or Сolorzilla)
2. For UI elements ➤➤➤ convert to SVG
3. Use two versions ➤➤➤ if icon or small text rendered on a UI element might get blurry at smaller sizes
4. Others ➤➤➤ use a larger version and scale down on normal screens

Basic two-image variation CSS snippet

			E {
			    background:url(50px.png) no-repeat;
			    }
			@media (retina) {
			    E { background:url(100px.png) no-repeat; }
			    }
		

Snippet to larger version and scale down

			E {
			    background:url(100px.png) no-repeat;
			    background-size:50px 50px;
			}
		

• But, not all pictures scalable
• bg-size=80% cross-browser compatibility

CSS Sprite

			.location {background: url(sprite.png) no-repeat0 0; }
			....
			.fav-link {background: url(sprite.png) no-repeat0 -100px;}
			@media only screen and (-webkit-min-device-pixel-ratio: 2), 
			only screen and (min-device-pixel-ratio: 2) {
			    .location,....,.fav-link {
			        background-image: url(sprite@2x.png);
			        background-size: 200px 200px;
			    }
			}
		

For content images, double the resolution but lower the quality. Don’t bother with two versions

Need to create an .ICO file with two size variants:

• 16px by 16px for standard screens
• 32px by 32px for retina screens

For this:

1. create the two icon and save them as 32-bit PNGs with an alpha channel
2. use a icon editor app to create the .ICO file xiconeditor

Fallback with jQuery and Modernizr

			<img src="example.svg" data-png-fallback="example.png" />
			$(document).ready(function(){
			    if(!Modernizr.svg) {
			      var images = $('img[data-png-fallback]');
			      images.each(function(i) {
			        $(this).attr('src', $(this).data('png-fallback'));
			      });
			    }
			});
		

Fallback for IE6-8

			E {
			    background:url(image.png) no-repeat;
			    background:
			        rgba(0, 0, 0, 0)
			        url(image.svg) no-repeat;
			    }
		

Snippet for making icon

			<img src="logo.svg" width="512" height="512">
			<img src="logo.svg" width="256" height="256">
			<img src="logo.svg" width="128" height="128">
			<img src="logo.svg" width="32"  height="32">
			<img src="logo.svg" width="16"  height="16">
		

base64 format

			<image id="icon-16"  xlink:href="data…
			<image id="icon-32"  xlink:href="data…
			<image id="icon-128" xlink:href="data…
			<image id="icon-256" xlink:href="data…
			<image id="icon-512" xlink:href="data…
		

Usecase

			#icon-16, #icon-32, #icon-128,
			#icon-256, #icon-512 {
			    display:none;
			    }
			@media screen and (width:16px) {
			    #icon-16 { display:inline }
			    }
		

SVG vs PNG

Testing

• Adobe Edge Inspect
• Opera Mobile Emulator
• Android Emulator (Android SDK)
• iOS Simulator, included in Xcode
• Quartz Debug (Graphics Tools for Xcode)

Retina.js for less

1. Add the .at2x() mixin from retina.less to your LESS stylesheet
2. In your stylesheet, call the .at2x() mixin anywhere instead of using background-image

Retina.js for js

1. Place the retina.js file on your server
2. Include the script on your page

   <script type="text/javascript" src="/scripts/retina.js">

			#logo {.at2x('/images/my_image.png', 200px, 100px);}
		

Will compile to:

			#logo { background-image: url('/images/my_image.png'); }
			@media all and (-webkit-min-device-pixel-ratio: 1.5) {
			    #logo {
			        background-image: url('/images/my_image@2x.png');
					  background-size: 200px 100px;
				}
			}
		

FUTURE

			E {
			    background-image:url(picture.png);
			    background-image:image-set(
			        url(small.jpg) 1x,
			        url(medium.jpg) 2x);
			    }