The #ChromeDevSummit site is live, happening Nov 12-13 in San Francisco, CA
Check it out for details and request an invite. We'll be diving deep into modern web tech & looking ahead to the platform's future.

Conteúdo para vários dispositivos

Como as pessoas leem na Web

O guia de escrita do governo dos EUA resume o que as pessoas querem da escrita na Web:

Ao escrever para a Web, use uma linguagem simples que permita que os usuários encontrem o que precisam, entendam o que encontraram e usem isso para atender às suas necessidades.

A escrita também deve permitir ações e ser localizável e compartilhável.

Pesquisas mostram que as pessoas não leem páginas da Web, elas passam os olhos. Em média, as pessoas só leem de 20 a 28% do conteúdo de uma página da Web. A leitura em uma tela é muito mais lenta do que em papel. As pessoas desistirão e deixarão seu site a não ser que as informações sejam fáceis de acessar e entender.

Como escrever para dispositivos móveis

Concentre-se no assunto em questão e conte a história diretamente. Para que o seu texto seja adequado para diversos dispositivos e janelas de visualização, exponha seus pontos principais desde o início: em regra, idealmente nos quatro primeiros parágrafos, em cerca de 70 palavras.

Pergunte-se qual é o objetivo das pessoas ao acessar seu site. Elas estão querendo descobrir algo? Se as pessoas visitarem seu site em busca de informações, seu texto deve ser direcionado a ajudá-las a atingir esse objetivo. Escreva em voz ativa, ofereça ações e soluções.

Publique apenas o que seus visitantes querem e nada mais.

Pesquisas do governo do Reino Unido também mostram que:

80% das pessoas preferem frases escritas em linguagem direta — quanto mais complexa for a questão, maior é essa preferência (por exemplo, 97% preferem a expressão “entre outros” ao latim “inter alia”).

Quanto mais instruídas as pessoas são e mais especializados são seus conhecimentos, maior é sua preferência pela linguagem direta.

Em outras palavras: use uma linguagem direta, palavras curtas e estruturas de frase simples, mesmo para um público-alvo letrado e técnico. A não ser que haja um bom motivo para não fazer isso, mantenha o tom coloquial. Uma antiga regra do jornalismo é escrever como se você estivesse conversando com uma criança de 11 anos inteligente.

O próximo bilhão de usuários

A abordagem minimalista de escrita é particularmente importante para leitores de dispositivos móveis e é essencial ao criar conteúdo para celulares de baixo custo com pequenas janelas de visualização que exigem mais rolagem e podem ter telas de menor qualidade e menos responsivas.

A maioria do próximo bilhão de usuários que acessar a Internet terá dispositivos baratos. Esses usuários não desejarão gastar seu orçamento de dados navegando por conteúdos demasiadamente longos e podem não ler em sua língua materna. Reduza o texto: use frases curtas, pontuação mínima, parágrafos de até cinco linhas e cabeçalhos de uma linha. Considere usar um texto responsivo (por exemplo, use títulos mais curtos para janelas de visualização menores), mas esteja ciente das desvantagens.

Uma atitude minimalista também tornará seu conteúdo mais fácil de localizar e internacionalizar, além de tornar mais provável que ele seja citado nas redes sociais.

Em resumo:

  • Mantenha a simplicidade
  • Elimine elementos desnecessários
  • Seja direto

Elimine conteúdo desnecessário

Em termos de tamanho de byte, as páginas da Web são grandes e estão ficando cada vez maiores.

Técnicas de design responsivas possibilitam o fornecimento de diferentes conteúdo para uma janela de visualização menor, mas é interessante começar otimizando o texto, as imagens e outros conteúdos.

Usuários da Web se orientam frequentemente por ações, sempre indo em busca de respostas para suas dúvidas em vez de sentar e absorver um bom livro.

Jakob Nielsen

Pergunte a si mesmo: qual é o objetivo das pessoas quando acessam meu site?

Todos os componentes da página ajudam os usuários a atingir esse objetivo?

Remova os elementos redundantes da página

Arquivos HTML constituem quase 70.000 e mais de nove solicitações para uma página da Web em média, segundo o HTTP Archive.

Muitos sites populares usam milhares de elementos HTML por página e milhares de linhas de código, mesmo em dispositivos móveis. Arquivos HTML de tamanho excessivo podem não fazer com que as páginas sejam carregadas mais lentamente, mas uma carga de HTML pesada pode ser um sinal de conteúdo excessivo: arquivos .html maiores significam mais elementos, mais conteúdo de texto ou ambos.

Reduzir a complexidade do HTML também reduzirá o peso da página, ajudará a permitir a localização e internacionalização e tornará o design responsivo mais fácil de planejar e depurar. Para saber mais sobre como escrever um HTML mais eficiente, consulte HTML de alto desempenho.

Cada etapa que o usuário precisar realizar antes de obter valor com seu aplicativo custará 20% dos seus usuários

Gabor Cselle, Twitter

O mesmo se aplica ao conteúdo: ajude os usuários a obterem o que desejam o mais depressa possível.

Não oculte o conteúdo de usuários de dispositivos móveis. Busque a paridade de conteúdo, pois tentar adivinhar quais recursos os usuários de dispositivos móveis não precisarão acabará sendo um erro para alguém. Se você tiver os recursos, crie versões alternativas do mesmo conteúdo para tamanhos diferentes de janelas de visualização, mesmo que apenas para os elementos de página de alta prioridade.

Considere o gerenciamento de conteúdo e o fluxo de trabalho: os sistemas legados resultam em conteúdo de legado?

Simplifique o texto

Conforme a Web passa para o ambiente móvel, você deve adaptar seu conteúdo. Mantenha a simplicidade, reduza elementos excessivos e seja direto.

Remova imagens redundantes

HTTP Archive mostrando um aumento no número de solicitações de imagens e tamanhos de transferência de imagens
De acordo com dados do HTTP Archive, uma página da Web comum faz 54 solicitações de imagens.

Imagens podem ser bonitas, divertidas e informativas, mas elas também ocupam espaço na página, aumentam o peso da página e aumentam o número de solicitações. A latência piora de acordo com a conectividade, o que significa que solicitações excessivas de arquivos de imagem é um problema cada vez maior conforme a Web ocupa o espaço móvel.

Gráfico de pizza do HTTP Archive mostrando a média de bytes por página de acordo com o tipo de conteúdo, 60% do qual são imagens
Imagens constituem mais de 60% do peso da página.

Imagens também consomem energia. Depois da tela, o rádio é o segundo maior consumidor de bateria. Mais solicitações de imagem, mais uso de rádio, mais baterias esgotadas. Apenas a renderização das imagens já consome energia e esse consumo é proporcional ao tamanho e ao número. Confira o relatório da Stanford Who Killed My Battery? (Quem acabou com a minha bateria?)

Se possível, livre-se das imagens!

Veja algumas sugestões:

Para saber mais, consulte Otimização de imagens e Eliminar e substituir imagens.

Crie conteúdo de forma que ele se adeque a diferentes tamanhos de janela de visualização

"Crie um produto, não reimagine um existente para telas pequenas. Bons produtos para dispositivos móveis são criados, nunca adaptados."

Design e desenvolvimento para dispositivos móveis, Brian Fling

Grandes designers não ‘otimizam para dispositivos móveis’, mas pensam de forma responsiva para criar sites que se adequam a uma grande variedade de dispositivos. A estrutura do texto e dos demais elementos da página são essenciais para o sucesso em diferentes dispositivos.

Muitos do próximo bilhão de usuários que acessarão a Internet usarão dispositivos de baixo custo com pequenas janelas de visualização. A leitura em uma tela de 3,5 pol ou 4 pol com baixa resolução pode ser difícil.

Veja uma imagem dos dois celulares juntos:

Foto comparando a exibição de uma postagem do blog em celulares de baixo custo e sofisticados

Na tela maior, o texto é pequeno, porém legível.

Na tela menor, o navegador renderiza o layout corretamente, mas o texto fica ilegível, mesmo ampliando o zoom. A tela fica desfocada e as cores desbotadas — o branco não parece branco — o que torna o conteúdo menos legível.

Crie conteúdo para dispositivos móveis

Ao criar conteúdo para diversas janelas de visualização, considere o conteúdo, o layout e o design gráfico, crie designs com texto e imagens reais, não conteúdo fictício

"O conteúdo está à frente do design. Design sem conteúdo não é design, é decoração."

— Jeffrey Zeldman

  • Coloque seu conteúdo mais importante na parte superior, pois os usuários tendem a ler páginas da Web em um padrão de F.
  • Os usuários acessam seu site para cumprir um objetivo. Pergunte-se do que eles precisam para cumprir esse objetivo e livre-se do resto. Seja rígido quanto a ornamentos visuais e textuais, conteúdo de legado, links excessivos e outros itens desnecessários.
  • Tenha cuidado com ícones de compartilhamento social, pois eles podem deixar o layout desorganizado e seu código pode tornar o carregamento lento.
  • Crie layouts responsivos para o conteúdo e não tamanhos fixos de dispositivo.

Teste o conteúdo

  • Verifique a legibilidade em janelas de visualização menores usando o Chrome DevTools e outras ferramentas de emulação.
  • Teste seu conteúdo em condições de baixa largura de banda e alta latência; experimente o conteúdo em diversos cenários de conectividade.
  • Experimente ler e interagir com seu conteúdo em um celular de baixo custo.
  • Peça que amigos e colegas experimentem seu aplicativo ou site.
  • Compile um laboratório de teste de dispositivos simples. O repositório do GitHub para o Mini Mobile Device Lab da Google tem instruções sobre como compilar um laboratório próprio. O OpenSTF é um aplicativo da Web simples para testar sites em vários dispositivos Android.

Veja o OpenSTF em ação:

Interface do OpenSTF

Dispositivos móveis são cada vez mais usados para consumir conteúdo e obter informações, não apenas dispositivos para comunicação, jogos e mídia.

Isso faz com que seja extremamente importante planejar o conteúdo para que ele se adeque a diversos tipos de janelas de visualização e priorizar o conteúdo ao planejar o layout, a interface e o design de interação para vários dispositivos.

Entenda os custos dos dados

As páginas da Web estão ficando maiores.

De acordo com o HTTP Archive, o peso da página dos um milhão maiores sites agora é, em média, de 2 MB.

Usuários evitam sites ou aplicativos que parecem lentos ou caros, portanto, é essencial entender o custo de carregar os componentes da página ou do aplicativo.

Reduzir o peso da página também pode ser lucrativo. Chris Zacharias do YouTube descobriu que, ao reduzir o tamanho da propriedade watch-page de 1,2 MB para 250 KB:

Muitas pessoas que antes não conseguiam usar o YouTube passaram a conseguir.

Em outras palavras, reduzir o peso da página pode abrir mercados inteiramente novos.

Calcule o peso da página

Existem várias ferramentas para calcular o peso da página. O painel Network do Chrome DevTools mostra o tamanho total em bytes de todos os recursos e pode ser usado para identificar os pesos de tipos de ativos individuais. Você também pode verificar quais itens foram recuperados do cache do navegador.

Painel Network do Chrome DevTools mostra os tamanhos dos recursos

O Firefox e outros navegadores oferecem ferramentas semelhantes.

WebPagetest oferece a capacidade de testar o primeiro carregamento de página e os carregamentos subsequentes. Você pode automatizar os testes com scripts (por exemplo, para fazer login em um site) ou usando suas RESTful APIs. O exemplo a seguir (carregar developers.google.com/web) mostra que o armazenamento em cache foi bem-sucedido e que os carregamentos de página subsequentes não precisaram de recursos adicionais.

Resultados do WebPagetest mostrando o tamanho total em bytes da primeira visita a uma página e das visitas subsequentes

O WebPagetest também fornece um detalhamento de tamanho e solicitação por tipo MIME.

Gráficos de pizza do WebPagetest mostrando solicitações e bytes por tipo MIME

Calcule o custo da página

Para muitos usuários, os dados não custam apenas bytes e desempenho, custam dinheiro.

O site What Does My Site Cost? permite que você estime o custo financeiro real de carregar seu site. O histograma abaixo mostra quanto custa (usando um plano de dados pré-pago) para carregar o site amazon.com.

A estimativa do custo de dados (em 12 países) para carregar a página inicial do amazon.com

Lembre-se de que isso não considera a renda como fator acessibilidade. Os dados do blog.jana.com mostram o custo dos dados.

Plano de dados de 500 MB
custo (USD)
Salário mínimo
por hora (USD)
Horas de trabalho necessárias para pagar
pelo plano de dados de 500 MB
Índia US$ 3,38 US$ 0,20 17 horas
Indonésia US$ 2,39 US$ 0,43 6 horas
Brasil US$ 13,77 US$ 1,04 13 horas

O peso da página não é um problema apenas para mercados emergentes. Em muitos países, as pessoas usam planos móveis com dados limitados e evitarão seu site ou aplicativo se perceberem que ele será pesado e caro. Mesmo planos de dados de celular e Wi-Fi "ilimitados" geralmente têm um limite de dados que, se atingido, o fluxo de dados é bloqueado ou reduzido.

Resumo: o peso da página afeta o desempenho e aumenta o custo. Otimizar a eficiência do conteúdo mostra como reduzir esse custo.