Dez, o novo leiaute do Manual do Usuário
27/12/2022
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.
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:
max-width: 320px: Para celulares muito pequenos. A referência aqui é o iPhone 5/5S/SE (1ª geração).max-width: 570px: Celulares pequenos para os padrões atuais. Referência: iPhone 7/8/SE (2ª e 3ª gerações).max-width: 860px: Tablets e celulares grandes. A referência usada foi o velho iPad Pro de primeira geração (tela de 9,7") em modo retrato.min-width: 1280px: Telas de computadores.
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:
- Fonte serifada para títulos e cabeçalhos de seções;
- Fonte sem serifa para textos longos e alguns menus;
- Fonte monoespaçada para meta dados.
É 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:
- Acrescentei suporte a “lazy loading” nativo nas imagens dos posts.
- Coloquei o player e os links dos podcasts da casa em uma caixa personalizada (exemplo), com fundo roxinho e um emoji de fones de ouvido.
- Consegui incluir os posts dos podcasts nos arquivos por data e autor (veja o do Guilherme Felitti) e nos resultados da busca. (Por padrão, eles não aparecem nesses lugares.)
- Coloquei imagens chamativas na barra lateral para a página de venda do zine/livrinho e o diretório de newsletters brasileiras.
- Migrei o diretório de newsletters do Airtable para uma solução própria — falarei disso em outro post aqui no Bastidores.
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.
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.