Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Retina Display

Juan Pujol
September 01, 2012

Retina Display

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

Juan Pujol

September 01, 2012
Tweet

Other Decks in Design

Transcript

  1. 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.
  2. 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)
  3. 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
  4. 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
  5. 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.
  6. 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([email protected]); background-size:50%; } } http://migre.me/9kg0C jQuery Retina Plugin No caso de tags <img> utilize js para substituir versões da imagem.
  7. 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