Retina Display

Entenda como funcionam as telas com resolução de alta densidade e como adaptar seu CSS.

Transcript

1. Retina Display Telas com alta densidade de pixels
2. Telas com alta densidade de pixels http://imageshack.us/photo/my-images/203/2222u.png/sr=1 “Because the Retina display's pixel density is so high, your eye is unable to distinguish individual pixels.” - Apple Inc.
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. http://migre.me/9kefd A pixel is not a pixel is not a pixel
5. Media Queries @media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { ... } @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) { ... } 1.5 pixel ratio 2.0 pixel ratio var dpr = 1; if(window.devicePixelRatio !== undefined) dpr = window.devicePixelRatio; Javascript
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%; } } http://migre.me/9kg0C jQuery Retina Plugin No caso de tags <img> utilize js para substituir versões da imagem.
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. http://migre.me/9kgS4 Cross-browser kerning-pairs & ligatures
9. Obrigado. contato@juanpujol | twitter: @juanpujol