O mundo do design responsivo está em constante evolução, e com ele as recomendações e propostas de trabalho do W3C, particularmente em termos de evolução de CSS. A tipografia também tem uma palavra a dizer e o uso de fontes web traz as suas soluções. Este artigo apresenta uma série de links relevantes para prosseguir uma discussão de longa data.
Nas revistas de papel, o texto é muito mais fluido do que na web: ele pode seguir os contornos de uma imagem, ou preencher contornos complexos. Isto é o que permitem as exclusões CSS com um resultado visual muito atraente. As regiões e o fluxo (regions e flow) definem as áreas onde o texto é apresentado de uma maneira fluida. Quando o usuário fazer um zoom ou alterar o tamanho da fonte, o desenho fica o mesmo, o texto adaptando-se fluidamente nas áreas permitidas. O suporte para este projeto de trabalho é mais do que limitado, mas, como frequentemente, um polyfill já permite usá-lo.
A flexibilidade de uma guia feita em CSS (adaptativa) e o layout clássico de uma tabela como nos bons velhos tempos da etiqueta <table>. Com uma paginação multi-coluna (recomendação candidata do W3C), é possível especificar o número de colunas de um elemento e su espaçamento, ou a largura de uma coluna, deixando o navegador escolher o número de colunas a apresentar. Esta recomendação ainda não é suportada por todos os navegadores (IE suporta-a apenas a partir da sua versão 10), mas um polyfill já foi desenvolvido num plugin jQuery.
A escolha do tamanho da fonte para exibir não pode depender do gosto pessoal desde o início do apocalipse zumbi que se lançou silenciosamente sobre a web. O contexto de utilização é tão importante como o tamanho das telas (ou tal vez mais). A verdadeira questão para perguntar é agora: a qual distância da tela fica o utilizador? A escolha do tipo de letra, da altura das linhas e do contraste decorrem deste simples facto.
Em vez de basear os pontos de controlo ou de quebra das suas media queries em pixéis (que eles dependem do seu projeto particular, ou do tamanho do viewport do dispositivo usado), por que não os baseiar numa unidade de medida mais relativa, como o em? Isto é o que já propunha Lyza Gardner em março de 2012. Uma vantagem desta abordagem, é que se o usuário aumentar o zoom alterando o tamanho da fonte, o design adapta-se à sua escolha.
Usar fontes web para dar um estilo ao seu site pode dar origem a uma falta bastante difundida de gosto, a do falso itálico ou do falso negrito. Aplicar a etiqueta <em> (ou <i>) a um elemento sem ter definido a fonte em itálico correspondente faz com que o navegador italiciza a fonte de base inclinando cada carácter, o que pode dar um resultado muito diferente do que o esperado. Esta falta de gosto tipográfico não incomoda só os estetas, mas cada visitante, uma vez que a lisibilidade do texto é reduzida. Seria uma vergonha não a corrigir.
Exibir um vídeo YouTube ou uma apresentação Slideshare que se ajusta ao tamanho do ecrã mantendo sempre a proporção da imagem? Eis uma solução duradoura baseada unicamente em CSS que encapsula o iframe sem utilizar a etiqueta video do HTML5.
Para ir mais longe no conhecimento pratico do RWD, recomendo a leitura destes dois livros:
Responsive Web Design by Example, por Thoriq Firdaus, edições Packt Publishing (março de 2013)
E o classico Responsive Web design, por Ethan Marcotte, edições A Book Apart (2011)
Regiões e fluxo CSS
Nas revistas de papel, o texto é muito mais fluido do que na web: ele pode seguir os contornos de uma imagem, ou preencher contornos complexos. Isto é o que permitem as exclusões CSS com um resultado visual muito atraente. As regiões e o fluxo (regions e flow) definem as áreas onde o texto é apresentado de uma maneira fluida. Quando o usuário fazer um zoom ou alterar o tamanho da fonte, o desenho fica o mesmo, o texto adaptando-se fluidamente nas áreas permitidas. O suporte para este projeto de trabalho é mais do que limitado, mas, como frequentemente, um polyfill já permite usá-lo.
Colunas CSS
A flexibilidade de uma guia feita em CSS (adaptativa) e o layout clássico de uma tabela como nos bons velhos tempos da etiqueta <table>. Com uma paginação multi-coluna (recomendação candidata do W3C), é possível especificar o número de colunas de um elemento e su espaçamento, ou a largura de uma coluna, deixando o navegador escolher o número de colunas a apresentar. Esta recomendação ainda não é suportada por todos os navegadores (IE suporta-a apenas a partir da sua versão 10), mas um polyfill já foi desenvolvido num plugin jQuery.
Que tamanho de fonte mostrar?
A escolha do tamanho da fonte para exibir não pode depender do gosto pessoal desde o início do apocalipse zumbi que se lançou silenciosamente sobre a web. O contexto de utilização é tão importante como o tamanho das telas (ou tal vez mais). A verdadeira questão para perguntar é agora: a qual distância da tela fica o utilizador? A escolha do tipo de letra, da altura das linhas e do contraste decorrem deste simples facto.
Tipografia responsiva: em e não pixéis
Em vez de basear os pontos de controlo ou de quebra das suas media queries em pixéis (que eles dependem do seu projeto particular, ou do tamanho do viewport do dispositivo usado), por que não os baseiar numa unidade de medida mais relativa, como o em? Isto é o que já propunha Lyza Gardner em março de 2012. Uma vantagem desta abordagem, é que se o usuário aumentar o zoom alterando o tamanho da fonte, o design adapta-se à sua escolha.
Falta de gosto tipográfico
Usar fontes web para dar um estilo ao seu site pode dar origem a uma falta bastante difundida de gosto, a do falso itálico ou do falso negrito. Aplicar a etiqueta <em> (ou <i>) a um elemento sem ter definido a fonte em itálico correspondente faz com que o navegador italiciza a fonte de base inclinando cada carácter, o que pode dar um resultado muito diferente do que o esperado. Esta falta de gosto tipográfico não incomoda só os estetas, mas cada visitante, uma vez que a lisibilidade do texto é reduzida. Seria uma vergonha não a corrigir.
Vídeos responsives
Exibir um vídeo YouTube ou uma apresentação Slideshare que se ajusta ao tamanho do ecrã mantendo sempre a proporção da imagem? Eis uma solução duradoura baseada unicamente em CSS que encapsula o iframe sem utilizar a etiqueta video do HTML5.
Livros
Para ir mais longe no conhecimento pratico do RWD, recomendo a leitura destes dois livros:
Responsive Web Design by Example, por Thoriq Firdaus, edições Packt Publishing (março de 2013)
E o classico Responsive Web design, por Ethan Marcotte, edições A Book Apart (2011)
Some news on the RWD front (em inglês)
Quelques nouveautés du design responsif (em francês)
Algúno nuevo en el diseño de respuesta (em espanhol)
Sem comentários:
Enviar um comentário