Dez 2.0, a nova versão do leiaute do Manual

15

Há cerca de duas semanas, abri o código do leiaute do Manual para padronizar os tamanhos das fontes.

Aquele trabalho virou uma bola de neve que, na sexta (27/10), culminou no que chamei de “versão 2.0” do leiaute.

Você talvez tenha reparado em algumas mudanças estéticas e técnicas aqui, no site. Se não, listo as mais importantes:

  • Todo o CSS, a parte do código responsável pela apresentação do site, foi reestruturado e simplificado;
  • Os formulários (de comentar, de pesquisar etc.) foram refeitos, agora seguindo um padrão visual;
  • Trouxe para a capa do site as cinco conversas mais populares do momento no Órbita (agradecimento ao Renan Altendorf pela atualização no plugin que permitiu isso);
  • Clarissa Mendes atualizou o menu principal (hambúrguer) a fim de dispensar o código em JavaScript que a versão anterior exigia;
  • Modifiquei o rodapé das páginas, com mais links e uma distribuição melhor/dinâmica. Ainda está meio feio; é algo em que pretendo mexer nos próximos dias;
  • Atualizei o script littlefoot.js para a última versão disponível (4.0.1). Ele gera aquelas notas de rodapé “inline”1;
  • Lucas Pereira refez o logo do Manual em SVG, eliminando falhas de renderização do antigo.
  • Agradecimento ao Matheus Fantinel, que achou uns errinhos e melhorias no leiaute e corrigiu-os.

No embalo, implementei algumas mudanças mais evidentes/editoriais:

  • No logo do Lucas, incluí “por Rodrigo Ghedin” e tirei meu nome dos posts que assino. Meio egocêntrico, mas achei melhor assim do que ter “Rodrigo Ghedin” repetido umas 15 vezes na capa do site. Posts de outros(as) autores(as) seguem exibindo seus nomes;
  • Inaugurei uma nova seção nesta quarta (1º), de indicações de aplicativos. (Era aquela parte da newsletter de links, que pretendo “espalhar” no site ao longo da semana e continuar consolidando na newsletter.) Na capa do site, esses posts são destacados com um fundo azul clarinho. Veja o primeiro app.
  • Dei o mesmo tratamento, só que com um roxo clarinho, aos posts do podcast Guia Prático.

Todas essas mudanças resultaram em um site (ainda) mais rápido, acessível e aderente às melhores práticas de desenvolvimento e SEO (não que eu liguei para SEO; é só a consequência de um bom código). Nota 100, segundo o Google, e acessibilidade garantida.

Se encontrar algo fora do lugar, avise-me, por favor.

  1. Tipo esta. ↩

A newsletter do Manual. Gratuita. Cancele quando quiser:

Quais edições extras deseja receber?

Siga no Bluesky, Mastodon e Telegram. Inscreva-se nas notificações push e no Feed RSS.

15 comentários

  1. Nossa, parabéns a todos os envolvidos.
    O site tá bem bonito e trazendo uma lucidez cativante na obtenção das informações.

    Não sei se consigo realmente traduzir o que sinto, mas é como se voltasse no sentido positivo da expressão à época dos jornais, com conteúdos interessantes, de linguagem precisa e de contemplação tranquila. Muito mais do que a fonte da informação, um momento prazeroso de leitura.

  2. No Orbita, lembro de uma pesquisa específica dele para encontrar publicações (ao invés de criar novos tópicos iguais), mas agora não vejo mais, vejo apenas a pesquisa geral do site. É assim mesmo? Obrigado!

    1. Achei por acaso a pesquisa do Orbita: ao entrar no Orbita, precisei clicar no menu e selecionar “Tudo”. A partir daí, apareceu a pesquisa mais abaixo.

  3. Achei quase tudo ótimo, parabéns! Mas não gostei de que tenha removido o nome do autor dos posts.. mesmo redundante, é repetido para quem acompanha o site mas para quem lê eventualmente, seja por uma busca no Google ou via algum compartilhamento, pode soar estranho. Eu particularmente odeio (talvez seja uma palavra forte demais ahaha) quando leio um texto que não tenha data e autor. O nome na logo não é tão intuitivo pra esse tipo de identificação.

    1. O autor dos posts está lá em cima, no logo 🥲

      Lembrando que quando é alguém diferente de mim, o nome aparece no post normalmente.

      1. Eu entendi isso mas não gostei hehe.. mas gostei de 99% das novidades ;)

  4. Ficou muito bom. Adorei!

    O interessante é que, ao invés de fazer um visual novo, vocês estão refinando o que já existe. Isso da uma sensação de consistência e seriedade para a identidade do blog.

  5. Tinha percebido umas alterações no design aqui ou ali ao longo das últimas semanas. Acho que a mais notável, pra mim, foi aumentar a largura da página que o texto ocupa, o que fez caber mais conteúdo na tela. Ficou ótimo assim, além das demais mudanças. Parabéns!

    Se eu puder dar uma sugestão (que nem tem a ver exatamente com o design), seria colocar de volta aquela página que mostra quais tags são aceitas nos comentários (e adicionar as sintaxes Markdown aceitas também). Não sei se isso é uma dor só minha, mas várias vezes fico em dúvida se tal tag é aceita, e/ou como usar, e nunca encontro essa página facilmente nas vezes que estou escrevendo um comentário. Seria legal ter um link pra ela aqui perto dos comentários ou mesmo uma “tooltip” (tipo no estilo de uma nota inline) mostrando as principais tags/sintaxes aceitas.

    1. A página que me refiro é essa aqui: https://manualdousuario.net/doc-comentarios/

      Não encontrei um link pra ela em nenhum lugar aqui no site, tive que pesquisar no Google pra ter acesso a ela. Talvez só apareça para usuários não logados? Mesmo assim, seria uma boa ideia deixá-la mais acessível, mesmo para usuários logados.

  7. Ghedin, esse sistema de rodapé “inline” na versão dark mode do site (a melhor versão, TBH) está bugada: https://i.imgur.com/UaXjZY2.png O texto só fica legível quando o seleciono. No mais, parabéns sempre pelas incrementações! O atual design está extremamente bacana.

  8. O design novo ficou muito bacana, espero que continue aprimorando a experiência do site, que concordo, ser muito acessível e simples.

Escolhas do editor

Posts aleatórios