Novo cabeçalho mais informativo

[rghedin]

Estava lendo umas coisas de UX e newsletters. Abri o site do Manual e tentei me colocar no lugar de alguém que tenha caído ali pela primeira vez. Talvez falte um pouco de informação no topo, não?

Fiz um mockup aqui de algo que talvez sane esse problema:

Aproveito o parágrafo como menu também, “polvilhando” links importantes no texto.

Ainda não estou certo se funciona, ou se é uma boa ideia.

[claromes]

Fiquei pensando: achei que nesse formato de texto corrido, ficou com cara de aviso e não de header. Eu acho legal o texto introdutório, mas senti falta de algo mais "menu". Não sei quais foram as suas referências, mas pensei em um formato sem os links no texto e organizados:

De qualquer forma, esse texto abre espaço para encaixar a busca no header. Inserir o ícone da lupa na navegação:

E quando clicado, surge o form:

O que acha?

(Talvez até tirar o BG do ícone do usuário...)

[rghedin]

Hmmm, essa solução realmente deixa as coisas mais organizadas. Tive a ideia do cabeçalho depois de topar com este site. Não é a mesma coisa, mas deu um estalo em mim.

Gosto do modelo inicial só por ser pouco (ou nada) convencional. Há um grande risco em tentar esse tipo de coisa (pouco ou nada convencional), principalmente de confundir os leitores, mas talvez nesse caso não aconteça?

Vamos arriscar o modelo original. Se confundir, partimos para sua proposta.

A lupa da pesquisa ali ficaria bom demais. Poderia até ser uma camada que sobrepõe todo o cabeçalho em vez de abrir embaixo dele. Eu não manjo fazer isso :(

O BG do usuário eu acho legal manter. Acho aquele menu mais importante que o ícone da aparência e um eventual ícone da pesquisa, e talvez sirva também como distinção do ícone que tem mais coisas embaixo/segundo nível.

[rghedin]

Aliás, dei uma boa enxugada no texto. Dá para ver no staging.

[rghedin]

O povo não curtiu, não, @claromes 🥲 Reabrindo aqui.

[claromes]

Sobe o 2.7 por enquanto...

[rghedin]

Uma dúvida de leigo em git, @claromes: nesse caso, eu continuo trabalhando no branch revertido (2024-6) ou crio um novo? Tinha algumas alterações no CSS fora do cabeçalho e rodapé naquele branch que gostaria de manter.

[claromes]

Abre um novo, aquele eu já fiz o merge. Mas se quiser posso voltar a main para o código do 2.7, só que você vai precisar escrever essas mudanças de novo.

[rghedin]

Vou abrir um novo. Valeu!

[claromes]

Continuando...

Minha sugestão de menu completo:

Ou

Benchmark de mobile:

[rghedin]

Gosto (muito) da lupa ali, mas ainda acho que o ícone do RSS deveria ficar ao lado da newsletter.

Não sei explicar muito bem o porquê, exceto que RSS e newsletter têm uma relação (ambos meios de acompanhar o site) e, pelos mockups, achei o menu de palavras meio apagado sem o ícone laranja.

De um ponto de vista mais pragmático, o arranjo atual permite inserir o ícone da lupa sem ter que mexer no logo (inconsistência para a marca/apresentação) nem ter que apelar ao menu de hambúrguer (só em último caso, né?).

O que acha?

[claromes]

Entendi. Confesso que acho o ícone RSS perdido ali.

Esse espaçamento menor é proposital, certo?

O menu hambúrguer era só uma alternativa pra deixar o header limpo em telas menores. Dado que 4 ícones (como no exemplo) + menu em texto fica muita informação.

[rghedin]

Sim, é proposital para fortalecer a relação entre newsletter e RSS. Pensando agora, talvez passe a impressão de que é um RSS da newsletter, né?

Quatro ícones e menu em texto seria muito ruim? (Seria o padrão para telas grandes, certo?) Porque estava pensando aqui, e se definirmos um max-width: 50%; (ou até 60%) para a classe .site-branding e diminuir um pouco o gap do bloco de ícones, cabem quatro ícones ali:

[claromes]

Acho que a diminuição na imagem já seria necessário para três ícones. Ela deve ser responsiva. Bom, vou seguir com a busca/lupa e vamos ajustando no que for necessário.

[rghedin]

A propósito, o CSS só tem um breaking point no momento (max-width: 670px). Talvez haja espaço para um de telas muito pequenas (max-width: 360px?) para empilhar os itens desse menu totalmente na vertical:

Logo
Menu de ícones
Menu de palavras

(No 3.0, tentei ao máximo evitar criar novos breaking points no CSS, mas acho que não vai ter jeito dessa vez… a menos que a gente dê um jeito usando flex-wrap no breaking point de 670px.)

***

Ah, meio relacionado, alguns leitores reclamaram da ausência de seções e podcasts. Uma solução aventada ali é destacar novamente a página de arquivo/mapa. Gosto dessa ideia, só não sei se caberia no menu de palavras.

[claromes]

Ah, meio relacionado, alguns leitores reclamaram da ausência de seções e podcasts. Uma solução aventada ali é destacar novamente a página de arquivo/mapa. Gosto dessa ideia, só não sei se caberia no menu de palavras.

Antes estava no user menu, não? Pode resolver até a gente finalizar o header.

[rghedin]

Sim, estava como um substituto à busca. Pelo feedback, parece que a busca não substitui o mapa 🥲

Vou refletir um pouco aqui.

[rghedin]

52 fechou esta issue, certo? Qualquer coisa, reabrimos.