3 de novembro de 2009

Site para leitura mais confortável

Colocar um blog no ar é simples, rápido e gratuito. Mas no afã de dizermos ao mundo o que pensamos, esquecemos do conforto visual dos nossos leitores. Não estou dizendo que você precisa de cores extravagantes ou menus em lugares esquisitos. Coisas assim só atrapalham. Tente seguir os padrões e o bom-senso.

Algumas pessoas já me disseram que gostam de ler os artigos no meu blog. Elas dizem que é confortável. Mas, por que?

São pequenos detalhes. Esse blog aqui usa um tema bem simples, mas personalizado. Muita gente não nota nenhuma diferença, nem percebe que mexi no visual. Na verdade, eu prefiro que seja assim. Não é para perceber mesmo.

Tentando atingir um objetivo do design de interfaces homem x máquina, procuro ser invisível. Eu quero que as pessoas assimilem as informações, e não que fiquem admirando minha obra de arte. Portanto, objetividade é fundamental. O browser Google Chrome também tinha esse objetivo. Na minha opinião eles acertaram em cheio!

Você entra aqui para ler informações. Elas devem ser mostradas rapida e confortavelmente. Eu não posso materializar para você um monitor de 22", mas posso usar algumas técnicas que ajudam a você gostar de ler aqui e sem distraí-lo.

Cor, tamanho e tipo da fonte

Eu optei por usar a fonte com 20% acima do tamanho padrão do navegador. O tamanho original do tema era muito pequeno e ficava ruim de ler. Além disso, deixei a coluna da direita com o tamanho de letra menor do que os posts.

A cor original era um cinza da mesma cor da coluna da direita. Daí eu destaquei o texto dos posts colocando preto neles. Afinal, eles são mais importantes, certo?

As fontes originais do tema são Georgia e Times New Roman. Eu não mudei, porque com a fonte maior, a serifa não atrapalha mais.

Aparência dos links

De vez em quando eu leio alguma coisa que o Jacob Nielsen escreve, principalmente a coluna Alert Box. Ele é controverso, mas vai ao ponto em certos detalhes que nem nos apercebemos. O artigo Guidelines for Visualizing Links, de 2004, é uma ótima fonte sobre o assunto.

Os links são áreas clicáveis e devem ser identificadas como tal ao primeiro passar de olhos. Principalmente dentro de um texto.

Esse tema usava cores pálidas para os links. Resultado: os textos dos links ficavam difíceis de ler. O que eu fiz? Deixei os links sublinhados e em azul para os não-visitados e roxo para os já visitados. Simples assim.

Tem coisa que é melhor não tentar inventar.

Só deixei os links pálidos na coluna da direita, para não brigarem com os que estão nos posts.

Largura das linhas

É certo que linhas longas tornam a leitura mais cansativa e menos produtiva. Mas linhas curtas demais também atrapalham, fazendo muito movimento ocular vertical.

Algumas pessoas defendem que linhas limitadas a 66 caracteres ajudam muito a leitura. Outras, acham que desse jeito a largura das telas wide-screen não é valorizada. Essa discussão é grande e não vou entrar nesse mérito.

Nesse blog eu não mudei a largura default do site, mas no Aprenda Python, eu alarguei um pouco e até que ficou bom.

Espaçamento entre linhas

Tão importante quanto a largura das linhas, é o espaçamento vertical entre elas.

Talvez essa tenha sido a mudança mais simples e que trouxe maior conforto para a leitura do blog.

Se o texto que você tem que ler é grande, parece que as linhas vão "trepando" umas nas outras. Isso pode ser facilmente resolvido com a propriedade line-height do CSS, que cuida justamente do espaçamento entre as linhas.

Eu uso o espaçamento 50% maior do que o padrão. Essa altura a mais dá uma folga pro seu olho, fazendo-o descansar quando passa para a linha de baixo e evita ficar com o dedão na tela para não perder a linha que você estava lendo.

Esse é um dos principais motivos que tornam a leitura mais confortável, além do tamanho das letras.


Além dessas personalizações, resolvi colocar a lista dos últimos posts e comentários escritos, para facilitar a vida de quem não assina o feed. Vai que tem ali alguma coisa que o visitante se interessa?

Se você tiver que mostrar algum conteúdo em tabela, leia o texto "(as minhas) 7 boas práticas Tipográficas para Tabelas". É uma receita de bolo bem equilibrada.

E você, o que faz para que seu blog seja mais confortável para os leitores?