Dani Guerrato

Design Responsivo & Retina Display: desenvolvimento web em alta resolução

Por | Comentários: 13

Este artigo vai te ensinar a criar alternativas de alta resolução para dispositivos com tela Retina e impressionar os seus clientes e usuários com imagens incrivelmente nitidas. Vamos analisar boas praticas e técnicas de aplicação por CSS, Javascript e PHP.

O que é uma tela Retina?

Retina Display, ou tela Retina, é um termo inventado pela Apple para batizar seus novos monitores de alta resolução. Basicamente as telas Retina tem uma densidade de pixels maior do que monitores comuns. Em termos práticos isto resulta em imagens muito mais nitidas. Segundo a Apple a densidade de pixels é tão alta que o olho humano não consegue distinguir cada um separadamente. Exageros a parte, a nitidez destes monitores é realmente impressionante.

O primeiro dispositivo a utilizar esta tecnologia foi o iPhone 4 que tem uma densidade de pixels 4 vezes maior que o modelo anterior. As últimas versões do iPad e do Macbook Pro também possuem telas Retina. Arrisco dizer que dentro de alguns anos este tipo de tecnologia deve se tornar padrão. Afinal, que empresa de tecnologia vai querer ficar para trás? Esta semana saiu uma notícia sobre um documento vazado da Samsung para um tablet de codinome “P10” que utilizaria uma tecnologia semelhante. Esta parece ser realmente a tendência para os próximos anos. Mas de nada adianta ter um monitor com o dobro da densidade de pixels se a maioria dos sites da internet utilizar imagens em tamanho padrão. Para os usuários dos monitores retina a internet inteira vai parecer embaçada… Exceto o seu site se você seguir estas dicas! :D

iPhone 3GS  x iPhone 4S iPhone 3GS (esquerda) x iPhone 4S (direita)

O que é “@2X”?

É um padrão de nomenclatura da própria Apple para imagens de alta resolução. Criado inicialmente para programação de aplicativos, o termo acabou sendo “emprestado” para desenvolvimento web. É uma boa prática de nomenclatura e bem simples de usar: basta utilizar @2x como um sufixo do nome do arquivo. Por exemplo, se você tem uma imagem “foto.jpg” a sua versão com o dobro da resolução deve ser chamada de “foto@2x.jpg”. É altamente recomendável seguir esta boa prática por uma questão de organização e compatibilidade com plugins.

A solução por CSS

O jeito mais fácil de utilizar imagens de alta resolução para um website é utilizando o bom e velho CSS. É através de media queries que podemos alcançar apenas os usuários que possuem um dispositivo com densidade de pixel maior que 2. Basta utilizar o parâmetro “-webkit-min-device-pixel-ratio: 2”. No exemplo abaixo substituímos uma imagem de fundo:

Não sabe como funcionam os Media Queries? Este artigo do nosso blog explica direitinho.

A Solução por Javascript

Retina.js
Retina.js é um script que facilita pra caramba o nosso trabalho como desenvolvedores. Ele checa se existem imagens com a terminação @2x e substitui automaticamente caso a pessoa esteja utilizando um dispositivo de alta resolução. Desta maneira você não precisa ficar escrevendo variáveis de media queries para todas as imagens do seu site o que salva muito tempo e trabalho… Só é bom lembrar que as imagens precisam estar na mesma pasta para a técnica funcionar.

A solução por PHP

Apesar destas duas tecnicas acima funcionarem bem, seria pouco prático fazer isto para todas as imagens de um site grande! O problema é que não compensa que as pessoas com monitores “normais” carreguem também estas imagens. O dobro da resolução significa imagens duplamente mais pesadas e, consequentemente, mais tempo para realizar o download…

Retina Images

Uma solução seria utilizar o Retina Images. Este método funciona através de cookies que informam ao servidor qual é a densidade de pixels da tela do usuário. Se for maior do que 1, uma imagem de alta resolução é carregada. Do contrário é exibida a versão padrão. A grande vantagem é que apenas uma das imagens é baixada pelo usuário.  A grande desvantagem é que todas as tags <img> precisam necessariamente ter um atributo largura ou altura especificado. O que pode atrapalhar potencialmente o código de um site responsivo e tornar impraticável a reformulação de um site já existente que contenha muitas imagens. Embora a documentação seja clara, é necessário conhecer um pouco sobre PHP para utilizar esta solução. Editar o arquivo .htacess pode potencialmente dar errado se você não souber o que está fazendo.  A dica para quem utiliza o WordPress é o plugin WP Retina 2x  que adapta esta tecnica para o CMS.

E um app para quebrar o galho dos designers…

Slicy

Quem cria layouts no Photoshop sabe como é chato exportar todas as imagens layer por layer. No caso do desenvolvimento de um site com imagens de alta resolução isto significa duas vezes mais imagens e o dobro do trabalho! O Slicy (anteriormente chamado de Layer Cake) é um app que facilita muito este trabalho. Basta nomear as layers para exportação com o nome final do arquivo e jogar o .psd na janela do programa que ele exporta todas as layers ou grupos em imagens, já com as devidas versões @2x. Mágico, né? O único contra é que o app é pago – custa $29 – e só funciona para Macs.

Qual destes métodos é a melhor?

Bem, isto vai variar de acordo com o tamanho do seu projeto, quantidade de imagens e gosto pessoal. Cada um tem suas vantagens e desvantagens. Vale a pena conhecer todos para saber qual funciona melhor para o seu projeto.

Conhece alguma outra solução não mostrada aqui? Deixe o link nos comentários. Até a próxima! :)

Tags: > , , , ,

Dani Guerrato

Dani Guerrato

Uma geek que adora Design, Literatura Fantástica, Games de RPG e mochaccinos de chocolate branco - não exatamente nesta ordem. É designer, desenvolvedora front-end, palestrante e co-fundadora da PopUp. Gosta de coisas estranhas como cheiro de livro e bandas de heavy metal que ninguém ouviu falar.

Você pode achar a Dani por aqui:
Facebook - Twitter - - Instagram

  • Sérgio Lopes

    Bom artigo! Outra dica que eu daria para retina é preferir trabalhar com gráficos vetoriais usando SVG ou Icon Fonts e efeitos CSS3 (gradientes, sombras etc). Ajuda na manutenção e funciona bem em todo tipo de resolução (até numa futura @3x Super Retina).

  • http://www.facebook.com/teniossa Estenio Nobrega

    Gostei boa matéria!!!!

  • Marcelo Copetti

    Gostei
    do artigo, vou lê-lo com mais atenção durante o final de semana. Como
    estamos falando em desenvolvimento web, vale comentar que a Tag está
    errada. Deveria ser @2x e está 2@x.
    Um abração e bom final de semana

  • Ricardo Carvalho

    ótimo artigo parabéns continue postando.

  • Everton de Paula

    Então mais uma vez teremos que montar de diversos CSS’s, e imagens diferentes para conseguir utilizar as telas retina de todos os dispositivos. Por exemplo Apple = imagem@2x.jpg. Sansung = imagem@10p2.jpg Motorola = iamgem@motox.jpg. :(…

    espero que a W3C crie um padrão universal para isso.

    • http://www.popupdesign.com.br/ Dani Guerrato

      Não necessariamente.

      O Media Querie identifica densidade de pixels. Ou seja, você só precisa criar duas versões (normal e HD). Como nomear o arquivo é só uma convenção.

      Estamos em um período de transição e esta é uma solução temporária. Não será necessário criar um padrão já que a tendência é que ocorra uma substituição natural e no futuro todos os monitores tenham alta densidade de pixels.

      • Everton de Paula

        áaaa é verdade é Media Querie que faz a veirificação, desculpe eu me perdi no meio da leitura e acabei me confundindo.

        Obrigado por esclarecer.

  • http://www.chinnonsantos.com Chinnon Santos

    Slicy já resolve meu problema em Layouts para Apps, e um saco ter que ficar criando essas imagens @2x, e se não criar elas, seu App corre um grande risco de não ser aprovado na Apple Store ou sofrer avaliações negativas por conta do design. Já para Web na minha opinião a melhor solução é o retina.js, já que faço uso de Canvas do PHP a muito tempo é ele já faz o trabalho side-server… mas é igual a Dani falou, para cada necessidade existe uma solução que mais convêm. Parabéns pelo post!

  • Marcelo

    Acho o site excelente, mas acho que falta a data nos artigos publicados. ;)

    • Anderson

      A falta da data é proposital. Assim o visitante não se liga se o Blog é atualizado ou não.

  • Lucas Moura

    muito bom o seu artigo, seguindo vc jáaa rsrsrs

  • Leandro Xavier

    Muito bom o seu artigo parabéns. Soube explicar de maneira simples direta.

  • http://marcelop.com Marcelo Pires

    Obrigado pelas dicas fantásticas, Dani. Só uma correção culinária: é Mocaccinos, sem “h”. É uma delícia mesmo.

Postamos coisas legais aqui


Google

Adicione no GOOGLE+

Instagram

Siga nosso perfil no INSTAGRAM

Quer utilizar o conteúdo do BlogUp?

Gostamos de compartilhar conhecimento por isto os textos sa seção Blog são licenciado sob Creative Commons com as condições: Atribuição - Não Comercial - CompartilhaIgual.

Em português claro, você pode reproduzir este artigo se cumprir TODOS os requisitos:
1. Ninguém esteja lucrando nada em função disto.
2. Exista crédito para a PopUp Design e o autor do post em um local claro com link para o conteúdo original.
3. O material derivado seja distribuido da mesma maneira.

Obs 1. Leia a licença completa para entender todos os termos.
Obs 2. Se o seu site tiver qualquer tipo de anúncio, como AdSence, por exemplo, isto já é considerado fim comercial e portanto você não pode reproduzir o texto.
Obs 3. Se você gostaria de utilizar este material sob outros termos e/ou possui dúvidas envie um e-mail contato@popupdesign.com.br e requisite uma autorização.