Boas práticas para implementar layouts "responsive" com suporte para Retina Display.

1. Retina Display
Telas com alta densidade de pixels

2. Telas com alta densidade de pixels
“Because the Retina display's pixel density is so high, your eye is
unable to distinguish individual pixels.” - Apple Inc.
http://imageshack.us/photo/my-images/203/2222u.png/sr=1

3. Apple e o resto
O termo Retina Display foi anunciado pela Apple. Porém, isso não
quer dizer que são os únicos com a tecnologia.
Nexus One (1.5) Galaxy S II (1.5) Galaxy Nexus (2)

4. CSS Pixel Ratio
É bem diferente dos pixels reais do dispositivo.
100px sempre serão 100px com CSS Pixel Ratio.
A pixel is not a pixel is not a pixel
http://migre.me/9kefd

5. Media Queries
@media
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen
only screen
and
and
(-o-min-device-pixel-ratio: 3/2),
(-webkit-min-device-pixel-ratio: 1.5),
1.5 pixel ratio
only screen and (min-device-pixel-ratio: 1.5) {
...
}
@media only screen and (-moz-min-device-pixel-ratio: 2),
only screen
only screen
and (-o-min-device-pixel-ratio: 2/1),
and (-webkit-min-device-pixel-ratio: 2),
2.0 pixel ratio
only screen and (min-device-pixel-ratio: 2) {
...
}
Javascript
var dpr = 1;
if(window.devicePixelRatio !== undefined) dpr = window.devicePixelRatio;

6. Layouts
Algumas coisas para ter em conta quando implementar um layout
“responsive” com suporte para Retina Display.
• Entenda a diferença entre as queries min-device-width e min-width.
• Aproveite o poder de navegadores de última geração.
• Use CSS para fazer degrades, cantos arredondados e sombras.
• Economize banda do jeito que puder.
• Use webfonts para seus icones.
• Estude alternativas vetoriais como SVG.
• Aprenda como funcionam os frameworks.

7. Imagens
Fique de olho no peso das imagens. Plano de dados não é barato!
A menos que o projeto seja um aplicativo nativo.
#header { width:100px; height:50px; background:url(logo.png) }
@media only screen and (-moz-min-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
#header { background:url(logo@2x.png); background-size:50%; }
}
No caso de tags <img> utilize js para substituir versões da imagem.
jQuery Retina Plugin
http://migre.me/9kg0C

8. Tipografia
Nada supera um bom estudo tipográfico para seu site. Renderizar
texto com qualidade também é super importante.
• Saiba escalar suas fontes.
• Aproveite as vantagens do @font-face.
• text-rendering: optimizeLegibility; para otimizar kerning e ligaduras.
• Use text-shadow, e outras propriedades em vez de imagens.
Cross-browser kerning-pairs & ligatures
http://migre.me/9kgS4

9. Obrigado.
contato@juanpujol | twitter: @juanpujol