Bastidores

O meta blog do Manual do Usuário

Dez, o novo leiaute do Manual do Usuário

27/12/2022

Print da capa do site Manual do Usuário, com o tema Dez, rodando no Safari do macOS.

Ao contrário do penúltimo leiaute do Manual do Usuário, este não foi feito a toque de caixa. Levou alguns meses de trabalho intermitente para ficar pronto. Gostei do resultado.

Antes de detalhar algumas coisas, acho legal dizer o porquê da mudança. Quando optei pelo leiaute baseado em um tema pronto (o Twenty Nineteen, lançado em julho), tentava “terceirizar” o trabalho de base, fundacional da estrutura e elementos visuais, para focar em personalizações para o projeto Manual.

Funcionou, até bem demais: a abstração do Twenty Nineteen era tanta, e seu código, tão complexo, que mudanças simples se tornavam muito difíceis de serem implementadas. Outro problema, menos grave, mas que a mim era uma espécie de unha encravada, eram os excessos — por ser um tema genérico, havia muito código desnecessário e que não dava para remover facilmente.

Voltei ao Underscores, o mesmo tema-base usado no leiaute anterior ao baseado no Twenty Nineteen. O novo, que batizei de Dez, em alusão ao décimo aniversário do Manual, entrou no ar no dia 12 de dezembro de 2022. Desde então, venho fazendo pequenos ajustes, mas o jeitão é esse mesmo que você encontra ao acessar o manualdousuario.net.

Desde o início, tirei a poeira do meu parco conhecimento de CSS e usei alguns recursos e técnicas modernas, como colunas com flexbox e variáveis globais (var(--variavel) no elemento :root) para padronizar cores e algumas formas.

Esses avanços facilitam a manutenção do tema e ajudam a manter a consistência visual.

(Falando em variáveis globais, dei um “tone down” nas cores: a versão clara tem um fundo levemente acinzentado e, na escura, abandonei o preto para usar um cinza bem forte. Essas eram velhas demandas de muitos leitores que, enfim, foram atendidas.)

Também dediquei um tempo a resolver alguns detalhes que sempre me incomodaram.

Um bom exemplo (e uma das coisas que haviam me motivado a adotar o Twenty Nineteen): campos de formulários com “alturas” diferentes. Um pouco de pesquisa me levou à descoberta de que a solução desse problema era mais simples do que eu poderia imaginar.

Área de trabalho do macOS com várias janelas do Pré-Visualização com campos de formulários em zoom (aproximados) e caixas de seleção conectando dois campos para testar a altura deles.

Dei atenção aos “breaking points” no CSS para adaptar o leiaute a diferentes tamanhos de tela. Ao contrário do que imagino seja o padrão hoje, fiz o desenho tendo como base a versão para computadores/telas grandes e, depois, adaptei-o a telas menores. Usei quatro breaking points principais:

O último breaking point foi criado quase que exclusivamente para abrigar a barra lateral, algo que o Manual não tinha há… sei lá, uns seis ou sete anos.

Em telas pequenas, essa barra “cai” para o final da página. Em telas de computador, ela fica ao lado, em local de destaque — antes de “dobra” da tela. Isso impõe um novo desafio, pois os elementos dessa área não podem ser muito importantes, porque ficam quase que escondidos em telas menores, que formam a maioria dos acessos ao site, nem supérfluos, porque os ficam em uma área nobre para os ~33% de leitores que acessam o site via computadores/telas grandes.

O que mais? A tipografia é bem simples, mas competente e bem definida:

É uma ruptura com boa parte da história do Manual — quase sempre usei fonte serifada no corpo dos textos, quase sempre a boa e velha Georgia.

Não há fontes oficiais, ou personalizadas. Com exceção da serifada, que continua sendo a Georgia, as demais são as padrões de cada sistema operacional. No caso da sem serifa, usuários de sistemas da Apple veem a San Francisco, do Android, Roboto, do Windows, Segoe UI e por aí vai.

Já no recesso, fiz outros pequenos ajustes, como converter imagens fixas para *.webp*, com “fallback” para .jpg/.png`. Tipo o logo do site, que foi reformulado e pela primeira vez incorpora o nome “Manual do Usuário” por extenso. (Gostei um bocado disso e pretendo expandir esse conceito/padrão para algumas seções do site.)

(Ainda estou em dúvida se passo a usar *.webp nas imagens usados nos posts. As deste post que você está lendo no Bastidores foram salvas em *.webp.)

Sem qualquer ordem, outros pequenos ajustes, melhorias e correções feitas nos últimos dias:

Todo esse trabalho surtiu efeito. O leiaute, quando lançado, já era extremamente rápido e aderente aos padrões web mais avançados. Depois das mexidas recentes, ele bateu pontuação máxima no Lighthouse, o benchmarking do Google para sites.

Print do Lighthouse, benchmarking do Google, aplicado ao Manual do Usuário. Notas 100 nos quatro critérios.

O que importa, mesmo, é que o site está bonito, leve e bem estruturado. Imagino que muita gente ainda se sinta meio perdida ao cair de paraquedas no Manual, mas tenho confiança que alguns segundos ou minutos navegando ali revelem a simplicidade da navegação.

No momento, considero o tema Dez completo. (Isso não deverá durar muito; logo, logo arranjo algo para mudar/melhorar.) Ainda há algum trabalho de bastidor a ser feito, como a exclusão de imagens sem uso, em especial as variações geradas automaticamente pelo WordPress, para aliviar o espaço em uso no servidor. Nada que afete a apresentação do site, porém.