Aos leitores, sedentos por conteúdo, eis aqui meu novo Blog. Web, mobile, otimizações web, cloud computing e o que mais eu achar interessante. Bem vindos!
Roda Wordpress? Não, graças a Deus. O blog é baseado no DocPad. Por isso, ele é mais simples, mais rápido e otimizado, responsivo, funciona bem em mobile. E é um blog opensource -- você pode ver o código, customizações e até posts e drafts no repositório. Pull requests com correções são muito bem vindos!
É capaz de você estar fazendo a mesma pergunta que me fiz antes de ler esse livro: sério, um livro só sobre como lidar com telas retina na Web? Sim, e o livro é fantástico.
O Retinafy.me é um ebook curto, um PDF -- sem DRM -- de apenas 60 páginas. É publicado diretamente pelo autor, o Thomas Fuchs, e tem um preço meio salgado -- 29 dólares. Mas tem dicas fenomenais sobre como lidar com telas de alta resolução, tão comuns em tablets e celulares, e que agora começam a chegar aos notebooks e desktops. Valeu cada centavo (ok, comprei no beta ainda, por 19 dólares, mas ainda é um valor alto).
O livro é bastante direto e prático, curto e grosso com as dicas de imagens, CSS, HTML e JS pra você suportar telas retina. É fruto do muito estudo feito pelo Thomas e apresenta as conclusões dele pra que você não precise pesquisar tudo de novo por conta própria. E o Thomas não é um cara qualquer; é o autor do Zepto.js, do script.aculo.us, commiter do Rails e de mais um monte de coisa importante.
Pra mim, o maior insight desse livro é a ideia de usar um JPEG gigante com qualidade mais baixa. Como os pixels em telas retina são muito pequenos, a qualidade visual fica boa. E, nas telas normais, o downscale do browser faz a diferença de qualidade ficar imperceptível. É uma sacada genial. No fim, em muitos casos, o arquivo JPEG fica até com tamanho menor -- um JPEG com o dobro de largura mas qualidade 30 em geral é menor que um JPEG com metade da largura e qualidade 80.
No livro, ele mostra vários exemplos. E, depois do livro, mais gente está falando dessa técnica com ainda mais exemplos comprovando a eficiência da técnica.
No livro, o autor defende a ideia de criarmos sites retina desde já. No futuro, só teremos displays retina, e é bom estar preparado. Isso significa criar as imagens @2x pra tudo no site que não for vetorizável -- texto, CSS3, icon fonts e SVG. E, para o autor, na maioria das vezes, você não precisa do trabalho de criar uma versão @1x e do monte de CSS e gambiarras de JavaScript para trocá-las.
Eu concordo completamente com essa técnica. Meu fluxo hoje de desenvolvimento pensando em mobile e telas retina é de migrar o máximo possível pra CSS3 e icon fonts, depois usar SVG, e por último um JPG, PNG ou GIF já exportado com dobro de resolução. Aí uso o background-size pra adaptar a imagem no CSS e pronto. Não crio várias versões do mesmo arquivo.
A principal preocupação costuma ser performance, já que o arquivo vai ter o quádruplo de pixels -- e quem me segue sabe que sou bem preocupado com performance. Para fotos JPG, a técnica anterior de diminuir a qualidade é fantástica e eficiente. Para PNGs e gráficos, em geral, a diferença de tamanho não é significativa. E, mesmo que tenha uns KBs a mais, sou da opinião de que o maior gargalo de rede hoje quando falamos de Web é a latência de rede, e não tanto a banda.
Meu único receio de performance é com relação ao uso de memória do browser, que aumenta. De qualquer forma, tudo isso é melhor, mesmo, que usar bibliotecas JavaScript pra ficar trocando imagens. Essa bibliotecas são péssimas pra performance e grandes gambiarras.
Na minha leitura, separei algumas citações de pontos que me marcaram. Mas, lembre, há muito mais no livro, com códigos, exemplos práticos, dicas etc.