Parar de seguir as resoluções de tela
Vivemos em um momento tão emocionante no mundo da web. A tecnologia e os padrões estão avançando a um ritmo talvez mais rápido e mais empolgante do que nunca. À medida que as coisas mudam, o mesmo acontece com os nossos hábitos, e uma área que acredito ter visto mudanças maiores do que a maioria teria de ser a alteração na resolução que nossos dispositivos estão executando agora.
Resolução é algo engraçado de se medir; Não é uma mudança de tamanho físico, mas sim uma mudança de clareza. Não está fazendo imagens, mais brilhantes ou mais ricas em cores, mas tornando-as mais densas. Também é algo que as pessoas raramente entendem o valor de até que elas vejam por si mesmas.
Claro, quando temos um gostinho de telas de alta resolução, estamos viciados. E todos nós queremos que nossos sites (e os sites de nossos clientes) fiquem impressionantes com os dispositivos que exibem esses dispositivos. Muitos web designers estão correndo para esse objetivo, criando imagens para cada nova resolução que aparece em nosso caminho. Ou, como eu estou chamando neste artigo, "perseguindo resoluções de tela".
Uma introdução ao SVG
Muitos de nós sabem o que são SVGs (Scalable Vector Graphics). Já vimos no site W3C HTML5, em "3D, gráficos e efeitos". O SVG é uma tecnologia HTML5 padrão, que exibe imagens com código. Ou alguma coisa.
Pelo menos, essa é a resposta geral que recebi quando perguntei às pessoas sobre gráficos SVG. Não é realmente algo que as pessoas estão interessadas, porque o seu valor não é totalmente compreendido.
Eu quero mostrar a você como evitar “perseguir resoluções de tela”, e acontece que o padrão SVG pode nos ajudar a fazer exatamente isso.
O estado da retina gráficos
Quando digo “gráficos de retina”, refiro-me a qualquer dispositivo que tenha uma resolução de tela maior do que a dos monitores tradicionais, com uma resolução acima de 72ppi (pixels por polegada).
A Apple quebrou a barreira de 72 ppi com o iPhone 4, um dispositivo que tinha uma nova e fantástica tela de alta resolução, que parece diferente de tudo que já vimos antes. Exceto quando você usou para navegar na web ... a web parecia lixo.
A web tinha 72ppi de imagens otimizadas. No momento em que escrevo isto, a maior parte da web ainda funciona, dois anos após o lançamento do iPhone 4.
Agora, temos todos os tipos de dispositivos com gráficos de qualidade Retina. Está lentamente percorrendo toda a linha de produtos da Apple, estendendo-se ao iPod Touch, iPad e até mesmo ao MacBook Pro mais recente. Os smartphones estão surgindo em todo o lugar com telas de alta resolução, tanto que uma tela de resolução “padrão” quase parece antiquada nesta fase.
Ainda dependente da resolução
Quando a comunidade de web design superou o problema de imagens desfocadas com imagens @ 2x carregadas condicionalmente (imagens criadas com o dobro do tamanho de suas contrapartes originais, carregadas apenas em dispositivos de alta resolução), a Web ficou boa novamente, na maior parte . Alguns designers até anunciaram seus sites como "independentes de resolução".
Claro, o que eles realmente deveriam ter anunciado seus sites como foi "otimizado para duas resoluções de tela".
Os dispositivos continuarão melhorando, as resoluções continuarão melhorando e a Web continuará a ser aproveitada em um número crescente de fatores de forma. E quanto ao futuro inevitável @ 3x? E quanto a 4x? E se o padrão “1x” se tornar desnecessário? O que faz 3x “@ 3x” e não “@ 2.5x”?
Desarrumado de fato.
Além do mais, esse tipo de técnica é pouco difundida. Eu navego na Web no já mencionado MacBook Pro com Retina Display, e a maior parte da web infelizmente está exatamente onde sempre esteve desde o iPhone 4: embaçado. Criar todas as suas imagens da Web novamente é uma tarefa árdua, especialmente quando todo o mundo de design da Web projeta com bitmaps por tanto tempo.
Web unzoomable
Mesmo hoje, com nossas imagens @ 2x, ainda não podemos ampliar as páginas da web sem que elas fiquem feias novamente. O texto gerencia um zoom muito bem, mas, em comparação, as imagens clamam por aquelas futuras exportações @ 4x (algo que ninguém considerará apropriado para servir apenas na chance de que alguém possa gostar de ampliar 4x em seu ícone RSS) .
Indo verdadeiramente independente de resolução
O problema é com imagens de bitmap. Nós sempre soubemos que eles não são de alto nível, e agora não é diferente. O que precisamos é de gráficos vetoriais em nossos sites. Os gráficos vetoriais são calculados por uma série de instruções, em vez de serem colocados em uma grade, onde cada pixel representa uma cor. Digite, SVG.
Um tamanho serve para todos
Como os gráficos SVG são gráficos vetoriais (daí o nome “Scalable Vector Graphics”), eles ficarão impressionantes com as resoluções de tela de ontem, de hoje e até de amanhã. Além disso, devido à natureza estereotipada dos gráficos vetoriais, você pode ampliar qualquer dispositivo e as imagens ficarão ótimas.
Tempos de carregamento mais rápidos
Fazer uma imagem de 2000px por 2000px, para um web designer, soa nada menos do que ridículo. Levaria muito tempo para carregar, deixaria alguns dispositivos móveis de joelhos e a versão “@ 2x” de 4000 x 4 px seria loucura. E conforme as resoluções melhoram, é simplesmente insustentável. Com o SVG, já que é um formato vetorial, não importa se a imagem é 20px ou 2000px; o tempo de carregamento será exatamente o mesmo. A única coisa que faz diferença nos tempos de carregamento é a complexidade de cada arquivo de imagem.
Você pode usá-lo hoje
O SVG pode não ser suportado em todos os lugares, mas Modernizr pode detectar o recurso. Ao servir uma versão SVG e não-SVG, você pode aproveitar todos os benefícios do SVG, deixando os navegadores legados com um @ 1x PNG. É tão simples assim:
.no-svg .logo { background: url('logo.png'); }.svg .logo { background: url('logo.svg'); }Limitações do SVG
Não é difícil criar gráficos SVG a partir de qualquer imagem baseada em vetores. Muitos aplicativos profissionais, como o Adobe Illustrator e o Inkscape, podem exportar para o SVG nativamente. Existem algumas coisas que você precisa saber sobre SVGs para a Web, no entanto.
Eles não podem conter imagens de bitmap de qualquer tipo.
Claro, você pode adicioná-los em aplicativos de criação de SVG, como o Illustrator ou o InkScape, e salvar seu trabalho como SVGs, mas eles não serão renderizados onde for importante: seu navegador da web. A magia de CSS será necessária para carregar um bitmap na parte superior do SVG, quando apropriado.
Pode demorar uma eternidade para carregar se complicado
Se você fizer um SVG complicado, será atingido com tempos de carregamento não muito diferentes da imagem 2000px x 2000px mencionada anteriormente. Você não gostaria de desenhar uma pintura complexa no formato SVG, por exemplo.
Tenho que manter isso simples
Aplicativos como o Illustrator e o Inkscape podem fazer muito mais do que o seu navegador da Web pode manipular. Eles são aplicativos de ilustração completos, não aplicativos criadores de conteúdo SVG da web. Na verdade, é seguro assumir que 90% das funcionalidades que esses tipos de aplicativos oferecem não estarão disponíveis para os espectadores na Web. Se você estiver familiarizado com o software vetorial, precisará aprender maneiras alternativas de criar os efeitos que você aprendeu a amar.
Tente aprender o idioma
O código SVG não é algo que você possa “ver em sua mente” como quando lê HTML. É uma série de instruções mapeadas umas contra as outras, elemento por elemento, camada por camada. Infelizmente, a partir de hoje, você provavelmente terá que mergulhar lá de tempos em tempos, já que há alguns resultados que nem o Adobe Illustrator oferece.
Por exemplo, imagens no Illustrator têm uma tela na qual você desenha; é uma largura definida por uma altura definida. Isso é ótimo, mas se você quiser controlar esses detalhes no navegador, precisará que essas informações sejam removidas do próprio SVG (observe: alguns navegadores interpretarão seu CSS independentemente de quaisquer dimensões declaradas do SVG, mas nem todas). Não é particularmente difícil, mas pode ser uma dor de cabeça. Vale a pena gastar um pouco de tempo para conhecer a linguagem, para que você possa manipular SVGs ainda mais.
SVG no selvagem
Logotipos
Normalmente, os logotipos devem estar em um formato vetorial, por isso são uma ótima maneira de levar o SVG aos designs de seu website. Usando a marcação acima, você tem tudo o que precisa para colocar online os seus primeiros elementos SVG.
Ícones
Os ícones são ótimos candidatos para o SVG. Tanto é assim que eu criei um conjunto completo de ícones usando gráficos SVG. A natureza escalável do SVG significa que os ícones podem ser usados em qualquer tamanho, acomodando uma ampla gama de designs de sites.
Animações
As animações também são ótimas para o uso de gráficos SVG. Como as animações são normalmente conectadas a uma largura e altura fixas, o SVG ajuda de alguma forma as animações a serem responsivas. Flash usou elementos gráficos vetoriais, agora animações HTML5 também podem.
Imagens de fundo
Imagens de plano de fundo sempre foram um ponto complicado para desenvolvedores da Web; os tempos de carga em potencial, como mencionei acima, podem ser loucos. Imagens de fundo SVG podem ser tão grandes quanto você gosta; eles ainda têm tempos de carregamento rápidos, desde que não sejam realmente complexos.
Conclusão
Em suma, a independência da resolução é uma meta fantástica para os desenvolvedores de sites e desenvolvedores. Isso vai até significar que seus gostos de design estarão desatualizados antes que as imagens do site deles estejam. Embora seja importante abordá-los com os olhos abertos, é muito claro ver como os gráficos SVG podem aproximá-lo de um futuro de total independência de resolução.
Quando você carrega um site habilitado para SVG em um dispositivo de alta resolução, como um iPad 3, e você aumenta o zoom, você será vendido.
Espero que este artigo seja de certa forma encorajador na resolução de pensamentos independentes em web design e desenvolvimento, e espero que tenha incentivado alguns de vocês a pensar sobre como o SVG pode trabalhar para o seu próximo site.
Eu estive na piscina SVG por um tempo, e eu tenho que dizer, a água nunca foi tão bonita.
Você é um SVG convert ou serve bitmaps escalonados para displays de retina? Os vetores são o futuro dos gráficos da web? Deixe-nos saber nos comentários.
Imagem em destaque / miniatura, imagem vetorial via Shutterstock.