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?

2 de novembro de 2009

[Ubuntu] Imprimir direto para PDF

Seguindo o hábito de registrar as configurações que faço no meu Ubuntu, aqui vai a dica de como habilitar a impressão para PDF.

Eu acho que essa funcionalidade já deveria vir funcionando no Ubuntu. Hoje em dia é cada vez mais comum imprimir para PDF e às vezes a opção de gerar PDF do Open Office não é suficiente.

Eu peguei essa receita de bolo em http://embraceubuntu.com/2006/03/23/print-to-pdf-using-cups-pdf e deixo-a aqui, traduzida, com alguns ajustes e incrementos:
  1. Entre no Synaptic Package Manager (ele está em System > Administration), procure pelo pacote cups-pdf (digite esse nome na caixa de pesquisa) e marque-o para instalação. Se você não tem medo da linha de comandos, digite sudo apt-get install cups-pdf
  2. Edite o arquivo /etc/cups/cupsd.conf e modifique a linha que tem:
    RunAsUser Yes
    para
    RunAsUser No
    Obs.:
    a) No meu computador, essa linha não existia e eu a incluí.
    b) O arquivo cupds.conf deve ser editado com sudo.
    c) As letras maiúsculas e minúsculas devem ser respeitadas, ao modificar ou incluir essa linha.
  3. Reinicie o cups com o seguinte comando no terminal: sudo /etc/init.d/cups restart
  4. Configure o tamanho default do papel indo em System > Administration > Printing. Lá, clique com o botão direito na impressora PDF criada pelo cups e escolha Properties. Na janela que abrir, selecione Printer Options no menu lateral esquerdo e configure o tamanho. No meu caso, escolhi A4.
É isso.

Lendo sem distrações

Quem lê muita notícia online acaba se distraindo e clicando em coisa que não interessa muito.

Outro dia eu encontrei o Readabilty. Uma ferramenta inteligente que mantém o texto principal da página e tira as propagandas.

É ótimo para ler notícias de sites como Computerworld e blogs com muita propaganda.

O processo de instalação é super-simples: você escolhe o estilo visual das notícias que quer ler e arrasta o link para a barra de links do seu navegador.

Como eu uso o Firefox e escondo a barra de links para ganhar espaço vertical no meu monitor wide de 14", fiz isso e ainda atribuí uma keyword ao link. Assim eu posso usar o Readability pelo teclado. ;-)

Dá uma conferida nele. É bom!