O documento discute telas Retina e como desenvolver sites para dispositivos com alta densidade de pixels. Explica que a tecnologia Retina não pertence apenas à Apple e discute como lidar com pixels, imagens, tipografia e layouts em telas com mais 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