Projetar um belo “artigo” é feito com toneladas de considerações. Ao contrário, digamos, de uma página inicial, um artigo de formato longo é menos sobre o design de uma interface do que sobre o design de texto de uma maneira que crie uma experiência de leitura relaxada e confortável.
Isso porque os artigos tratam de conteúdos longos que, por sua vez, tendem a ser valorizados por uma interação “tempo na página” com os usuários. Queremos que alguém leia uma narrativa completa. Há um espaço natural entre o momento em que alguém chega a um artigo e lê todas as palavras. E esperamos que esse espaço seja imersivo o suficiente para não apenas manter o usuário, mas também provocar pensamentos, ideias e, possivelmente, ações. Pelo menos é o que espero, pois tenho sua atenção e você percorre o próprio artigo que está lendo.
Há um equilíbrio. Por um lado, ouvimos que “ninguém lê a internet”. Por outro, um artigo de formato longo exige atenção cuidadosa. Considerando o valor atual do marketing de conteúdo e a crescente impaciência dos usuários, cativar os leitores pelo maior tempo possível deve ser uma preocupação fundamental. Vamos dar uma olhada em algumas práticas recomendadas e exemplos de páginas de artigos incríveis para ter uma ideia melhor do que torna uma experiência de leitura visualmente atraente para artigos de formato longo (sem sacrificar a experiência do usuário) e como podemos replicar os efeitos.
Vitórias rápidas
Deixe-me listar rapidamente o que acho que já pode ser óbvio para muitos de vocês, mas são coisas eficazes para a legibilidade do conteúdo:
- Aumentar o tamanho da fonte: Sabemos que
16pxé o padrão e está perfeitamente bem em muitos designs, mas um tamanho de fonte maior é convidativo, pois implica que o usuário é livre para se inclinar para trás e se acomodar sem ter que se inclinar para a frente com a tela em seu rosto para ler. - Apontar para caracteres por linha: Pouquíssimas pessoas que conheço gostam de trabalhar mais do que precisam, e isso vale para a leitura também. Em vez de usar a largura total da janela de visualização, tente restringir as coisas e equilibrar isso com o tamanho da fonte maior para obter menos caracteres em cada linha de texto. Seu ponto ideal pode variar, embora muitas pessoas sugiram algo entre 45 e 75 caracteres por linha para ajudar a limitar o quanto o olho do leitor precisa trabalhar para ir da esquerda para a direita. Chris tem um bookmarklet para ajudar a contar caracteres, mas também temos o
chunit em CSS para obter resultados previsíveis. - Aumente a altura da linha: Uma altura de linha padrão vai parecer esmagada. É engraçado, mas mais espaço entre as linhas (até certo ponto, é claro) é menos trabalhoso para os olhos, o que parece antitético ao conselho de caracteres por linha, onde geralmente queremos que os olhos percorram uma distância menor. Uma altura de linha entre
1.2e1.5parece ser um intervalo bastante típico para conteúdo de formato longo.
Se você não viu antes, Pierrick Calvez tem um grande "Cinco minutos" guia de tipografia que embala um monte de frutas baixas como essas.
Design para espaço extra para respirar
Você pode estar acostumado a projetar “acima da dobra” onde o setor imobiliário é uma mercadoria primordial. Isso é como uma propriedade à beira-mar no mundo da web, porque é onde estamos acostumados a embalar coisas de alto valor, como banners de heróis, chamadas para ação e qualquer outra coisa para ajudar a vender uma coisa. Acima da dobra pode ser muito parecido com um centro urbano denso com alto tráfego e arranha-céus.
Os artigos são diferentes. Eles permitem que você se estique um pouco. Se quisermos levar a analogia do desenvolvimento da cidade um pouco mais longe, os artigos têm a área para se apoiar em uma abordagem de design do tipo “menos é mais”. É isso que torna escolhas de design aparentemente pequenas – como tipo – tão importantes para a experiência geral.
Confira o exemplo abaixo. Os sublinhados do link têm um pouco mais de espaço para respirar (especificamente, eles aparecem abaixo dos descendentes). Na verdade, isso é algo que você pode ativar em todo o site, mas fica especialmente bonito nas páginas do artigo, pois aumenta a legibilidade. Esse é o tipo de escolha de design sutil que contribui para um espaço extra para respirar.
text-underline-position: under; é a linha de CSS que faz isso funcionar. Naturalmente, text-decoration deve ser definido para algo diferente de none (underline neste caso), também.
O exemplo acima também apresenta text-decoration-thickness, que altera a espessura dos sublinhados (e outros tipos de linha). Você pode usar essa propriedade CSS para corresponder a espessura de uma linha ao tamanho e/ou peso de uma fonte.
Aqui está um exemplo completo:
a {
text-decoration: underline;
text-decoration-thickness: 2px;
/* or */
text-decoration: underline 2px;
text-underline-position: under;
}Mas antes de chegar ao text-decoration abreviação, Šime Vidas tem algumas “pegadinhas” quando se trata de usá-lo que vale a pena revisar.
Conduzindo ao conteúdo
Drop caps são letras estilizadas que podem ser colocadas no início de um documento ou seção do documento. Eles já foram usados em textos latinos, mas hoje eles são usados principalmente por motivos decorativos.
Pessoalmente, acho que as letras maiúsculas dificultam a legibilidade. No entanto, eles podem ser uma boa maneira de “conduzir” um leitor ao conteúdo principal e não devem apresentar problemas sérios de acessibilidade, desde que você esteja usando o ::first-letter pseudo-elemento. Há outro (mais velho) métodos que envolvem mais HTML e CSS, bem como o uso de atributos ARIA para que o conteúdo permaneça acessível.
utilização ::first-letter, o CSS ficaria assim:
/* select the first letter of the first paragraph */
article > p:first-child::first-letter {
color: #903;
float: left;
font-family: Georgia;
font-size: 75px;
line-height: 60px;
padding-top: 4px;
padding-right: 8px;
padding-left: 3px;
}Com certeza seria bom se pudéssemos usar o initial-letter propriedade, mas praticamente não há suporte para isso no momento em que estou escrevendo isso. Se tivéssemos, toda essa matemática para tamanho da fonte e altura da linha seria calculada para nós!
CodePen desafiou as pessoas a mostrarem suas habilidades de estilo de capitulação há vários anos e você pode ver um monte de exemplos interessantes em esta coleção.
Ir para o conteúdo principal
Os leitores de tela permitem que os usuários pulem para o conteúdo principal, desde que o envolva em um <main> elemento. No entanto, aqueles que navegam em sites por abas não se beneficiam disso. Em vez disso, devemos criar um link âncora “pular para o conteúdo principal”. Esse link costuma estar oculto, mas é revelado quando o usuário faz sua primeira guia (ou seja, mostra em foco).
Seria algo parecido com isto:
<!-- anchor -->
<a id="skip-link" href="#main">Skip to main content</a>
<!-- target -->
<main class="main">
<!-- main content -->
</main>#skip-link {
position: absolute; /* remove it from the flow */
transform: translateX(-100%); /* move it off-screen so that it appears hidden but remains focusable */
}
#skip-link:focus {
position: unset; /* insert it back into the flow */
transform: unset; /* move it back onto the screen */
}
.main {
scroll-margin: 1rem; /* adds breathing room above the scroll target */
}Há outras maneiras de fazer isso, é claro. Aqui estão alguns mergulhos mais profundos na criação de links de salto.
Visuais perfeitos
Adoro as ilustrações em Este artigo. Apesar de parecerem incríveis, eles não exigem muita atenção cognitiva. Eles introduzem breves momentos de prazer, mas também sugerem que o próprio artigo tem algo mais importante a dizer. Em parte, isso se resume ao uso da transparência, enquanto as imagens retangulares capturam mais espaço negativo e, portanto, exigem mais atenção (o que é bom se esse for o efeito desejado e as imagens forem cruciais para a história).
No entanto, é importante saber que as imagens não são realmente transparentes, mas sim JPEGs não transparentes com a mesma cor de fundo do conteúdo. Estou presumindo que é para manter o tamanho das imagens menor em comparação com PNGs que suportam transparência.
A desvantagem de “fingir” um plano de fundo transparente como esse é que exigiria truques adicionais (e manutenção) para suportar um IU do modo escuro se o seu site oferecer um. Se as ilustrações forem bastante planas e simples, o SVG pode ser o caminho a seguir, pois é pequeno, escalável e capaz de se misturar em qualquer plano de fundo.
Mas se você for obrigado a usar imagens rasterizadas e preferir trabalhar com arquivos PNG para transparência, você vai querer usar imagens responsivas e os votos de loading="lazy" atributo para tempos de carregamento mais rápidos.
Coloque o foco no tipo e semântica
Você pode ter muito pouco a dizer sobre como or onde alguém lê conteúdo na web hoje em dia. Quer o usuário o receba em um feed RSS, o entregue por e-mail, o veja copiado e colado de um colega, o encontre em um site copiado ou outros enfeites, seu conteúdo pode parecer diferente do que você prefere. Você pode criar o que você acha que é o artigo mais lindo de todo o país e o usuário ainda pode esmague esse botão do modo de leitor para sua consternação.
Isso está ok! A descoberta do conteúdo é tão importante quanto o design dele, e muitos usuários têm suas próprias maneiras de descobrir conteúdo e preferências para o que torna uma boa experiência de leitura.
Mas há razões pelas quais alguém iria querer um Modo Leitor. Por um lado, é como “não ver nenhum CSS”. Com isso, quero dizer Modo de leitura do Safari or Admirável SpeedReader, que usam aprendizado de máquina para detectar artigos. Não há busca ou execução de CSS, JavaScript ou imagens que não sejam de artigos, o que aumenta o desempenho e também bloqueia anúncios e rastreamento.
Esse tipo de “bruto minimalismo" coloca o foco no conteúdo e não nos estilos. Então, você pode realmente queremos adotar os estilos de leitura opinativos de um navegador especificamente para esse propósito.
A maneira de fazer isso não é usando CSS, mas prestando mais atenção ao seu HTML. Os modos de leitor funcionam melhor com marcação que usa HTML simples, semântico e relacionado a artigos. Você tem que fazer mais do que simplesmente dar um tapa tags ao redor do artigo para tirar o máximo proveito dele.
Você pode achar que um design minimalista que enfatiza a legibilidade sobre a lisura é realmente uma boa estratégia para usar no design do seu site. Eu sugiro fortemente a leitura do post de Robin no “menor CSS” para uma experiência de leitura sólida.
Resumo de artigos longos!
Eu compartilhei muito do que acho que contribui para uma ótima experiência de leitura para artigos longos na web. Mas ver para crer e reuni vários exemplos que mostram o que abordamos.
-
O Polygon usa um visual forte e provocativo para prender os leitores ao conteúdo principal. Observe como a capitular, o tamanho da fonte maior e a altura da linha aumentada fazem com que isso pareça uma página com a qual você pode sentar e relaxar. -
O site TASTE usa imagens transparentes que se misturam com a cor de fundo do conteúdo. Há muito espaço entre os elementos e acentos em negrito - como bordas grossas e uma capitulação pesada - puxam os olhos do leitor pela página. -
The Outline é um excelente exemplo de minimalismo. Observe como algo tão sutil quanto uma regra horizontal rabiscada pode ser um enfeite atraente quando há menos coisas competindo por atenção. -
O estilo brutalista do blog do Dropbox é provavelmente controverso. As cores, as fontes e o uso do espaço estão por toda parte, e o conteúdo flutuando para a direita parece estranho. Mas isso quebra alguma 'regras' de design? Não. Eu poderia gostar disso com o tempo, especialmente de uma forma mais suave. -
O design do Urban Beardsman é extremamente linear. Como alguém que tem dificuldade de concentração e é facilmente distraído por barras laterais, caixas de CTA no artigo e até citações em bloco, eu gosto muito de como é fácil ler este blog como um livro. O exemplo perfeito de “menos é mais”. -
Não há nada de único no blog GoSquared, mas conseguiu incluir praticamente todas as coisas que discutimos no artigo - um design de sublinhado melhor, imagens perfeitas e uma tipografia muito legível. Bem impressionante. -
O blog Smart Passive Income prova até onde você pode chegar apenas escolhendo uma fonte legível e usando tamanhos de fonte legíveis, alturas de linha, espaçamentos entre letras e espaçamentos entre parágrafos. -
Páginas de receitas são consistentemente ruins, mas não Little Fat Boy. A falta de uniformidade em toda a página facilita o salto para diferentes partes da receita sem se perder. Além disso, os ingredientes são fixados no canto superior direito para sua conveniência.
