Fiquei aterrorizado com a história deste cara: o redesenho do seu site, de três páginas, levou oito meses e consumiu US$ 46 mil. Felizmente, o do Manual do Usuário levou bem menos tempo (duas semanas) e só custou algumas horas do meu tempo.
Bem-vindo(a) ao novo visual do Manual! É diferente, mas não muito. O que mais chama a atenção é a disposição do cabeçalho, os blocos de posts mais populares e últimos podcasts lá embaixo e o tamanho da fonte dos posts. Ah, sim: posts especiais (aqueles longos) ganharam um cabeçalho bonitão (exemplo). E… bem, é isso.
Não estava nos meus planos uma troca de leiaute agora. Quando migramos de hospedagem, subimos um “staging” (uma cópia idêntica do site para testes) e dei uma olhada nos temas padrões do WordPress. Uma coisa leva a outra e, quando me dei conta, estava personalizando o Twenty Nineteen.
O antigo leiaute tinha sido feito em cima do _underscore, uma base bem mais crua para o desenvolvimento de temas para WordPress. Funcionava bem, eu gostava muito dele, mas sempre senti falta de uma maior padronização em elementos de interface, como botões e formulários.
Essa padronização foi o principal fator que me levou a considerar o Twenty Nineteen como nova cara do site. E aqui estamos.
Testei exaustivamente o novo leiaute, com a ajuda de leitores mais próximos, então não acredito que exista algo muito grave quebrado. Se encontrar qualquer coisa fora do lugar, avise-me — ali nos comentários ou por e-mail.
O leiaute anterior estava com a gente desde 2019. Antes dele, usamos por quase quatro anos uma versão modificada do Twenty Fifteen — o leiaute mais duradouro até aqui.
Um registro para a posteridade do leiaute anterior:
Eu ainda não tinha aberto o MdU no computador e agora sim vi o impacto as mudanças no leiaute. Na minha opinião foram positivas, pena que as melhorias de tipografia quase não se notam nas telas do celular e tablet.
Alinhar à esquerda é intencional? Por que não centralizado?
Gostei muito do novo leiaute!
Ainda não testei em outras telas/dispositivos além do móvel (iPhone SE) então virei outra hora pra dizer com mais detalhes, mas pelo menos até então estou plenamente satisfeita com o novo espaçamento lateral e com a seção de comentários – que melhorou muito.
Parabéns, Ghedin!
Muito bom, tudo parece muito promissor e já causou um efeito positivo na leitura! Parabéns pelo esforço Ghedin. Era sempre o q eu pedia quando chegava no meu e-mail aquelas pesquisas de opinião sobre o Manual. As imagens nos cabeçalhos ficaram legais e causam uma ótima impressão!
Cara, textos longos com um cabeçalho caprichado ficam muito muito atraentes!
Vou postar aqui os comentários que fiz no Post Livre, com uma modificação que percebi agora:
Eu tenho o hábito de ler selecionando o texto as vezes e notei que aqui*, quando faço isso, fica um fundo azul claro com letra branca, impossível de ler.
*aqui = desktop, chrome, modo escuro. Testei no Firefox e é igual. Acredito que seja alguma configuração de css.
Enquanto de início eu achei estranho agora o site ocupar boa parte da tela (ainda mais em tela ultrawide, fica particularmente largo o site), gostei bastante da nova caixa de escrever o comentário, não sei se a fonte está diferente, com tamanho diferente, mas achei mais interessante, até! Notei, ainda que o que ocupa boa parte da tela é o texto dos comentários, não do artigo em si. Não sei se é proposital, mas não me incomoda, particularmente.
O tamanho maior e o fato das linhas verticais não serem contínuas é questão de costume!!
Achei engraçado como ficou em tela cheia esse artigo!
Eu gelei quando comecei a ler “Parabéns, você…” em letras gigantes na minha tela, achando que tinha sido invadido ou algo do tipo! 🤣
Valeu pelo feedback, Felipe!
A seleção de textos no modo escuro estava zoada mesmo. Fiz uma mudança no CSS, vamos ver se resolve. (Talvez demore um pouco para aparecer aí, devido ao cache.)
A largura dos comentários não era proposital, hehe. Arrumei para que cada comentário fique com a mesma largura dos posts.
Ficou bem agradável a largura dos comentários agora, considerando que algumas janelas uso metade da tela ultrawide. Ficou sem muito espaço vazio na direita.
O CSS realmente ainda não atualizou aqui.
Outro detalhe que estava notando aqui enquanto redigia essa resposta: O botão “Publicar comentário” é azul com letra branca. Será que esse fundo azul não deveria ser uma cor mais dentro da “paleta de cores” que você definiu para o site? De azul aqui só noto os links. Todos os outros fundos são ou preto ou grafite (essa, inclusive, é a cor que aparece aqui quando passo o cursor do mouse por cima do botão).
Outro ponto a se pensar: ali na barra superior, todas as seções tem seus links nos nomes por extenso (apoie, newsletter, seções…), exceto a busca, que é um ícone. Será que não ficaria mais interessante manter tudo como texto? Ou até usar um daqueles ícones minimalistas, para combinar com o logo do MdU mesmo.
Bem, desculpe se estou já caçando pelo em ovo 🤣
Em ultrawide, imagino que qualquer alinhamento deixará espaços vazios em algum lugar 😄 O leiaute é alinhado à esquerda mesmo; minha sugestão é diminuir um pouco o tamanho da janela do navegador.
A cor do botão segue a dos links, é a cor de realce. É como alguns sistemas operacionais modernos, como macOS e Ubuntu, trabalham, e pessoalmente acho legal. É quase uma identificação de “coisas interativas”, sejam links, sejam botões.
Trocar o emoji da lupa por um ícone pode funcionar!
Aqui ainda não mudou o CSS para a seleção de textos. Até tentei recarregar o cache usando o modo de desenvolvedor, mas não funcionou. Será que deu zebra em alguma coisa?
Percebi também um outro problema no contraste de algumas caixas que tem fundo amarelo, como essa e essa. Acho que só fazer o cinza da fonte ficar mais escuro já resolveria.
O que mais estranhei é o texto à esquerda neste novo leiaute, mas está realmente muito mais moderno – lembrando-me um pouco até o MacMagazine – e a cor da seleção de texto (?) no modo escuro que ofusca o texto selecionado (provavelmente há um termo técnico que eu desconheço para tal). De resto, ficou excelente e extremamente agradável! Parabéns!
Aliás, há alguma chance de “open-sourcezizar” o leiaute anterior? 🥲 Adorava a simplicidade e centralização do leiaute anterior, e já tentei procurar outros temas parecidos para um futuro projeto pessoal, mas meu conhecimento zero em CSS e HTML dificultam esta aventura.
O tema anterior está disponível no GitHub. Meio desatualizado, mas é ele.
Opa Ghedin! Ficou excelente! Para duas semanas de trabalho e menos que R$ 46 mil, um trabalho formidável!
Tinha te falado sobre as fotos escurecidas e vejo que no novo layout, em modo escuro no iPadOS, elas aparecem normais, sem opacidade – o que realmente acho melhor.
Do novo layout, minha sugestão é adaptar a cor da fonte de texto para causar menos contraste com o fundo. Adotaria um texto grafite escuro no fundo claro e um cinza bem claro no fundo escuro. A diferença é sutil, mas, na prática, os blocos de textos com esse contraste atenuado fica mais leve no geral que o preto 100% no branco e vice-versa.
Valeu, Ivan!
O modo escuro foi pouco testado, ainda tem várias coisas pendentes. Dei uma amenizada na cor da fonte — deixei a mesma que estava no leiaute anterior. Talvez demore um pouco para mudar aí. Sugiro testar no modo anônimo ou limpar o cache do domínio
manualdousuario.netpara acelerar as alterações.Atualizado aqui!
Ficou ótimo!
Em tempo: a caixa de comentários escura – que alguém já tinha sugerido escurecer – também ficou perfeita!
Vida longa ao leiaute atual (que também é bom!) rsrs
Muito legal. No geral gostei.
Só senti falta daquele botão de minimizar (?) um fio de comentários. Era bem útil no post livre.
faço o endosso do mesmo.
ta muito bom!
só uma contribuição:
O campo de seleção à pergunta “Receber novos comentários por e-mail?“ ficou maior do que a tela (pelo menos a do meu celular – iphoneSE2020, safari , 100%, modo escuro).
E os campos de formulário nos comentários (Comentário e Nome) ficaram brancos no modo escuro, oq ficou meio desagradável. Detalhe que o campo do “E-mail”, ao contrário dos outros, acompanhou a escuridão do modo escuro.
Tenho as mesmas observações a respeito do novo leiaute. Essa diferença na cor dos campos de comentário, nome e e-mail, bem como no tamanho do texto “Receber novos comentários por e-mail?“, gerou uma certa “quebra” visual a meu ver.
Fora isso, ficou muito bom o redesign!
Boas observações, Unnicked e William. Arrumei tudo — talvez demore um pouco para mudar aí por causa do cache.
“Era um bom leiaute.” 🥲
Muuuuuuito bom! Gostei do novo leiaute, mais simples e funcional.
Me agradou, achei melhor. Minha única ressalva é o tamanho das fontes de um modo geral, que achei muito grande. Mas é um incômodo meu bem fácil de resolver, basta eu dar um zoom out. Parabéns pela busca pela simplicidade, funcionalidade e padronização.
Como contraponto, eu adorei o tamanho maior das fontes 😅
Também gostei desse tamanho maior.
O que estranhei relacionado a fonte é o estilo diferente (_typeface_ e espaçamento entre linhas, por exemplo) nos formulários.
Corrigi a fonte e o espaçamento entrelinhas dos formulários, Danilo. Valeu pelo toque!