Upload
juan-pujol
View
1.188
Download
0
Tags:
Embed Size (px)
DESCRIPTION
Boas práticas para implementar layouts "responsive" com suporte para Retina Display.
Citation preview
Retina DisplayTelas com alta densidade de pixels
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.
Apple e o restoO 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)
CSS Pixel RatioÉ bem diferente dos pixels reais do dispositivo. 100px sempre serão 100px com CSS Pixel Ratio.
http://migre.me/9kefdA pixel is not a pixel is not a pixel
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
LayoutsAlgumas 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.
ImagensFique 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([email protected]); background-size:50%; }
}
http://migre.me/9kg0CjQuery Retina Plugin
No caso de tags <img> utilize js para substituir versões da imagem.
TipografiaNada 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/9kgS4Cross-browser kerning-pairs & ligatures
Obrigado.contato@juanpujol | twitter: @juanpujol