Fundo azul, com uma chamada para um PlayStation 5 no centro. À esquerda, a frase “Ofertas de verdade, lojas seguras e os melhores preços da internet.” À direita, “Baixe o app do Promobit”.

O novo visual do Manual do Usuário

por Rodrigo Ghedin em

Não é tão diferente assim, diz aí. Mas há mudanças importantes por baixo do capô. A primeira e mais importante é que o Manual do Usuário ficou ainda mais rápido. Faça um teste, mesmo se estiver no 3G pré-pago no celular. Aliás, é nessas condições adversas que a velocidade se faz notar.

Fora isso, as novidades de fato do novo layout são estas:

  • Capa do site organizada em ordem cronológica inversa.
  • Posts relacionados ao final de cada um.
  • Botões de compartilhamento mais bonitos e rápidos, no começo e no final dos posts, incluindo WhatsApp, Pocket e o bom e velho e-mail.
  • Fontes serifadas e bonitonas. A antiga também era, mas acho essa nova mais legível, com mais espaços para respirar.

Mais uma vez fica o agradecimento ao Julian, que faz um trabalho sensacional nos bastidores do Manual do Usuário e conduziu a implementação do novo visual de forma tranquila e segura.

Gastamos um tempão ajustando o tema e testando ele, então é provável que tudo esteja correto. (Caso o visual pareça esquisito, limpe o cache do seu navegador.) Se mesmo após fazer isso encontrar algo fora do lugar, fale comigo.

Deixe um comentário

Seu e-mail não será publicado. Dúvidas? Consulte a documentação dos comentários.

57 comentários

  1. Gostei de todas mudanças, a unica coisa, talvez MUITO banal que eu queria de volta, eram o numero de comentarios abaixo do Titulo da matéria, que aparecia sem precisar clicar no post, pois sempre que havia um novo eu voltava ao post pra ver etc, mas isso é bem bobo eu sei, mas o site ta ótimo!

    Responder

  2. No meu Moto X1, usando o Chrome, agora que o post foi recomendado no Disquis existe uma quebra na linha ente o recomendado e a ordem dos comentários. É assim mesmo?

    Responder

    1. Normal, no iPhone também. Mesmo que desse para diminuir a fonte (não dá, o Disqus praticamente não permite alterações no visual), ela precisaria ficar muito pequena para alinhar as duas frases — tão pequena que talvez prejudicasse a legibilidade.

      Responder

  3. E o número de comentários de cada post? É que gosto de saber qual a reação do pessoal e principalmente ver que os comentários são excelentes.

    Responder

    1. Olha só, eu que gosto muito do Google+ não sei se existe uso. O que eu mais faço é acompanhar comunidades, não tem tantos amigos utilizando o serviço.

      Responder

      1. ouvi dizer que as marcações no +1 impactam seu posicionamento na pesquisa orgânica do google… se não impacta, então deixa. ;)

        Responder

          1. Até onde sei, o Google nunca deixou claro se o +1 influencia ou não nos resultados da pesquisa. Ainda que sim, é só um entre diversos fatores, e com o declínio do Google+, negligenciado pelo próprio Google que, nos últimos meses, tem desmantelado o serviço, achei melhor aposentar o botão dele para dar espaço a outros — WhatsApp, e-mail e Pocket. Em telas pequenas o espaço estava apertado, então tive que sacrificar algum e… bem, a concorrência é pesada para o Google+.

  5. Não nego, era bem complicado antes.

    As vezes eu ia no site procurar uma notícia que vi somente o título no meu leitor RSS no mobile, chegava na capa e não sabia onde estava a notícia quentinha… tinha que usar o buscar ou as vezes sair e entrar pelo Google.

    Agora pela ordem cronológica tenho certeza que vou encontrar os posts mais recentes.

    Parabéns pelas mudanças.

    Mas, mesmo via computador eu cheguei a ver o botão de compartilhar no whatsapp, clicando faz nada… não seria legal apresentar este botão somente se estiver em navegando em mobile? ;)

    Responder

    1. É o ideal mesmo, só não sei muito bem como fazer. Tentei esconder com CSS, mas aí o JavaScript dos botões continua “enxergando” ele e quebra o dimensionamento automático dos demais ícones. Teria que ser algo de nível mais baixo para funcionar certo.

      Continuarei pesquisando aqui até encontrar solução melhor.

      Responder

      1. Hmm.. vamos resolver, vamos resolver com uma gambiarra javascript :)

        .sumirBotao { display: none}

        var is_mobile = /mobile|android|iPhone|iPod|iPad|IEMobile|BlackBerry|iOS/i.test (navigator.userAgent);

        if (is_mobile == true) {

        $(‘#campowhatsapp’).removeClass(‘sumirBotao’);

        } else {

        $(‘#campowhatsapp’).addClass(‘sumirBotao’);

        }

        e no campo do whatsapp adiciona a classe sumirBotao como padrão.

        Pronto, toda vez que detectar que é mobile ele tira a classe (mostra o botao) se não for mobile ele apaga o botão.

        :D

        Responder

  6. O que achei interessante é o layout responsivo. Quando dou um zoom, as letras ficam boas e a impressão é de uma leitura como em um tablet. (Notebook, 1366×768, Win 7 x64, Opera Chrominium). Gosto quando é possível fazer este tipo de leitura, já que deixo o notebook distante do corpo (entre 60 cm a 1m) :)

    Responder

  8. Infelizmente agora no meu smartphone não aparece os comentários do Disqus (antes estava normal e precisei usar o computador para comentar). =(

    Responder

  9. Cara, ficou simplesmente show de bola. Gosto muito dessa ideia de minimalismo e como as coisas ficam muito mais organizadas e bem mais bonitas aliando a simplicidade com qualidade.

    Parabéns Ghedin e Julian, MdU está cada vez melhor!

    Responder

  11. O design do site sempre foi muito bom e agora que está mais rápido, ficou melhor ainda.

    Algumas opiniões:
    Acho as fontes sem serifas mais interessantes. Talvez por ter me acostumado com a anterior, que era muito boa. Ficou “esquisito” essa nova, inclusive aqui no Disqus.
    Os botões de comparilhamento com certeza ficaram bem melhores por não precisar carregar todos os scripts. Às vezes demorava para carregar a página por completo.
    Posts em ordem cronológica reversa: melhor decisão já tomada, nunca gostei do formato “magazine”. Ou quando a lógica da home é diferente e fica difícil verificar os últimos posts.

    Aproveitando, aquelas imagens gigantes no topo dos posts que tinha num dos layouts antigos eram muito fodas. Seria interessante tê-las de volta, pelo menos quando acessado pelo desktop :)

    Responder

    1. Acho que a fonte é questão de costume. Nas primeiras iterações do novo layout havíamos testado a mesma fonte do layout anterior; elas ficaram grandes/desproporcionais, então voltamos a esta, serifada, e a composição era mais agradável assim. Sério, é só questão de costume :)

      Sobre as fotos gigantes, realmente fazem falta. Até tentamos mexer na estrutura do tema para abrigá-las, mas demandaria mudanças muito profundas, o que acrescentaria complexidade ao código e à manutenção. No fim, decidimos seguir sem elas. Fica para o próximo, talvez.

      Responder

    2. Acho que a fonte é questão de costume. Nas primeiras iterações do novo layout havíamos testado a mesma fonte do layout anterior; elas ficaram grandes/desproporcionais, então voltamos a esta, serifada, e a composição era mais agradável assim. Sério, é só questão de costume :)

      Sobre as fotos gigantes, realmente fazem falta. Até tentamos mexer na estrutura do tema para abrigá-las, mas demandaria mudanças muito profundas, o que acrescentaria complexidade ao código e à manutenção. No fim, decidimos seguir sem elas. Fica para o próximo, talvez.

      Responder

      1. Pelo menos não dá para colocar a imagem de “capa” na lateral ou topo dos textos na página inicial? Também senti falta das imagens em alguns, pois a identificação é mais fácil :)

        Responder

  12. O site ficou ainda melhor. O layout clean, perfeito tanto em desktop como mobile. Parabéns pelo site.

    Responder

  13. Ghedin, cada “redesign” ele fica melhor!! Parabéns, tá lindão!
    Mas, uma observação, a barra esquerda está rolando junto com a página pra cima, ela cola encima e pra baixo ela normaliza, não sei se é pra ser assim, ou é pra tá fixa.

    Responder

    1. Depende da resolução da sua tela. Se for grande, digamos… maior que 1600×900, ela fica fixa. Em resoluções menores ela “cai” até o final quando começa a rolagem e para; ao voltar ao topo da página, a barra lateral segue o movimento.

      Responder

      1. Entendi… Mas, como sugestão, acho que daria pra manter ela fixa dentro de 1366×768. A barra fica com o conteúdo inalterado e dá mais conforto visual.

        Responder

        1. Engraçado que eu testei em 1366×768, usando uma extensão do Chrome, e a barra não se mexia nessa resolução. Vou tentar enxugar mais alguns pixels ali para mantê-la parada.

          Responder

          1. Essas extensões de vez em quando me enrolam também. Aki só no F11 que ela fica parada.

  14. Ghedin, cada “redesign” ele fica melhor!! Parabéns, tá lindão!
    Mas, uma observação, a barra esquerda está rolando junto com a página pra cima, ela cola encima e pra baixo ela normaliza, não sei se é pra ser assim, ou é pra tá fixa.

    Responder

  16. Gostei bastante, parabéns. Sobre os botões de compartilhar, tenho notado muitos sites usando (também uso no meu) e realmente da muito diferença não precisar carregar scripts e css externos do Facebook e/ou Twitter.

    Responder

  17. Gostei bastante, parabéns. Sobre os botões de compartilhar, tenho notado muitos sites usando (também uso no meu) e realmente da muito diferença não precisar carregar scripts e css externos do Facebook e/ou Twitter.

    Responder

  22. Mano do ceu que site lindo. Parece até que foi eu que fiz pra mim mesmo de tão perfeito que tá. Aff vou morar aqui dentro.

    Responder

  24. No wifi capenga da UnB e no meu igualmente lerdo iPhone 4s está tudo rápido e bem organizado.

    Responder

  25. No wifi capenga da UnB e no meu igualmente lerdo iPhone 4s está tudo rápido e bem organizado.

    Responder

  28. Já achava o visual anterior fantástico por ser minimalista, agora que ficou mais rápido então, perfeito! Ótima escolha de layout Ghedin.

    Responder

Compre dos parceiros do Manual:

Manual do Usuário