Considere o conteúdo, o layout e o design gráfico ao criar para uma variedade de usuários e dispositivos.
Como as pessoas leem na Web
O guia de redação do governo dos EUA resume o que as pessoas querem da redação na Web:
As pesquisas mostram que as pessoas não leem páginas da Web, elas escaneiam. Em média, as pessoas leem apenas 20 a 28% do conteúdo da página da Web. A leitura em telas é muito mais lenta do que a leitura em papel. As pessoas vão desistir e sair do seu site, a menos 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 antecipadamente. Para que a redação funcione em uma variedade de dispositivos e janelas de visualização, transmita seus pontos principais no início: como regra, o ideal é nos quatro primeiros parágrafos, em cerca de 70 palavras.
Pergunte-se o que as pessoas querem do seu site. Elas estão tentando descobrir algo? Se as pessoas visitarem seu site para obter informações, verifique se todo o texto está orientado para ajudá-las a atingir a meta. Escreva na voz ativa, ofereça ações e soluções.
Publique apenas o que seus visitantes querem e nada mais.
A pesquisa do governo do Reino Unido também mostra que:
Em outras palavras: use linguagem simples, palavras mais curtas e estruturas de frases simples, mesmo para um público técnico e alfabetizado. A menos que haja um bom motivo para não fazer isso, mantenha o tom de voz conversacional. Uma regra antiga do jornalismo é escrever como se você estivesse falando com uma criança inteligente de 11 anos.
O próximo bilhão de usuários
A abordagem simplificada da redação é particularmente importante para leitores em dispositivos móveis e é essencial ao criar conteúdo para smartphones de baixo custo com janelas de visualização pequenas que exigem mais rolagem e podem ter telas de qualidade inferior e menos responsivas.
A maioria do próximo bilhão de usuários que vão acessar a Internet terá dispositivos baratos. Eles não vão querer gastar o orçamento de dados navegando por conteúdo longo e podem não estar lendo no idioma nativo. Reduza o texto: use frases curtas, pontuação mínima, parágrafos de cinco linhas ou menos e títulos de uma linha. Considere o texto responsivo (por exemplo, usando títulos mais curtos para janelas de visualização menores), mas esteja ciente das desvantagens.
Uma atitude minimalista em relação ao texto também vai facilitar a localização e a internacionalização do conteúdo, além de aumentar a probabilidade de que ele seja citado nas mídias sociais.
O resultado:
- Simplifique
- Mantenha a organização
- Vá direto ao ponto
Eliminar conteúdo desnecessário
Em termos de tamanho de bytes, as páginas da Web são grandes e estão ficando maiores.
As técnicas de design responsivo possibilitam a veiculação de conteúdo diferente para janelas de visualização menores, mas é sempre sensato começar simplificando texto, imagens e outros conteúdos.
Os usuários da Web geralmente são orientados para a ação, "inclinando-se para a frente" na busca por respostas à pergunta atual, em vez de se inclinar para trás para absorver um bom livro.
Jackob Nielsen
Pergunte-se: o que as pessoas estão tentando alcançar quando acessam meu site?
Cada componente da página ajuda os usuários a atingir o objetivo?
Remover elementos de página redundantes
Os arquivos HTML constituem quase 70 mil e mais de nove solicitações para a página da Web média, de acordo com o HTTP Archive.
Muitos sites conhecidos usam vários milhares de elementos HTML por página e vários milhares de linhas de código, mesmo em dispositivos móveis. O tamanho excessivo do arquivo HTML pode não deixar as páginas mais lentas, mas um payload HTML pesado pode ser um sinal de conteúdo inchado: arquivos .html maiores significam mais elementos, mais conteúdo de texto ou ambos.
A redução da complexidade do HTML também vai reduzir o peso da página, ajudar a ativar a localização e a internacionalização e facilitar o planejamento e a depuração do design responsivo. Para informações sobre como escrever HTML mais eficiente, consulte HTML de alta performance.
Cada etapa que você faz um usuário executar antes de obter valor do seu app vai custar 20% dos usuários
Gabor Cselle, Twitter
O mesmo se aplica ao conteúdo: ajude os usuários a chegar ao que querem o mais rápido possível.
Não apenas oculte o conteúdo dos usuários de dispositivos móveis. Busque a paridade de conteúdo, já que adivinhar quais recursos seus usuários de dispositivos móveis não vão perder está fadado a falhar para alguém. Se você tiver os recursos, crie versões alternativas do mesmo conteúdo para diferentes tamanhos de janela de visualização, mesmo que apenas para elementos de página de alta prioridade.
Considere o gerenciamento de conteúdo e o fluxo de trabalho: os sistemas legados estão resultando em conteúdo legado?
Simplificar o texto
À medida que a Web se torna móvel, você precisa mudar a maneira de escrever. Simplifique, reduza a desordem e vá direto ao ponto.
Remover imagens redundantes
As imagens podem ser bonitas, divertidas e informativas, mas também usam espaço na página, aumentam o peso da página e aumentam o número de solicitações de arquivos. A latência piora à medida que a conectividade piora, o que significa que um excesso de solicitações de arquivos de imagem é um problema crescente à medida que a Web se torna móvel.
As imagens também consomem energia. Depois da tela, o rádio é o segundo maior dreno da bateria. Mais solicitações de imagem, mais uso de rádio, mais baterias descarregadas. Mesmo apenas para renderizar imagens, é necessário energia, e isso é proporcional ao tamanho e ao número. Confira o relatório de Stanford Who Killed My Battery? (link em inglês).
Se possível, livre-se das imagens.
Veja algumas sugestões:
- Considere designs que evitem imagens completamente ou use imagens com moderação. Somente texto pode ser bonito! Pergunte-se: "O que os visitantes do meu site estão tentando alcançar? As imagens ajudam nesse processo?"
- Antigamente, era comum salvar títulos e outros textos como gráficos. Essa abordagem não responde bem às mudanças de tamanho da janela de visualização e aumenta o peso e a latência da página. Usar texto como um gráfico também significa que o texto não pode ser encontrado por mecanismos de pesquisa e não é acessível por leitores de tela e outras tecnologias assistivas. Use texto "real" sempre que possível. As fontes da Web e o CSS podem permitir uma tipografia bonita.
- Use CSS em vez de imagens para gradientes, sombras, cantos arredondados e texturas de plano de fundo, recursos compatíveis com todos os navegadores modernos. No entanto, lembre-se de que o CSS pode ser melhor do que as imagens, mas ainda pode haver uma penalidade de processamento e renderização, especialmente significativa em dispositivos móveis.
- As imagens de plano de fundo raramente funcionam bem em dispositivos móveis. Você pode usar consultas de mídia para evitar imagens de plano de fundo em janelas de visualização pequenas.
- Evite imagens de tela de apresentação.
- Use CSS para animações de interface.
- Conheça seus glifos; use símbolos e ícones Unicode em vez de imagens, com fontes da Web, se necessário.
- Considere fontes de ícones; elas são gráficos vetoriais que podem ser escalonados infinitamente, e um conjunto inteiro de imagens pode ser baixado em uma fonte. No entanto, esteja ciente de essas preocupações.
- O elemento
<canvas>pode ser usado para criar imagens em JavaScript a partir de linhas, curvas, texto e outras imagens. - Imagens SVG ou URI de dados inline não vão reduzir o peso da página, mas podem reduzir a latência, diminuindo o número de solicitações de recursos. O SVG inline tem ótimo suporte em navegadores para dispositivos móveis e computadores, e as ferramentas de otimização podem reduzir significativamente o tamanho do SVG. Da mesma forma, os URIs de dados são bem aceitos. Ambos podem ser inline no CSS.
- Considere usar
<video>em vez de GIFs animados. O elemento de vídeo é compatível com todos os navegadores em dispositivos móveis (exceto o Opera Mini).
Para mais informações, consulte Otimização de imagens e Eliminação e substituição de imagens.
Criar conteúdo para funcionar bem em diferentes tamanhos de janela de visualização
"Crie um produto, não o reimagine para telas pequenas. Ótimos produtos para dispositivos móveis são criados, nunca portados."
Mobile Design and Development, Brian Fling
Ótimos designers não "otimizam para dispositivos móveis", eles pensam de forma responsiva para criar sites que funcionem em uma variedade de dispositivos. A estrutura do texto e de outros conteúdos da página é fundamental para o sucesso entre dispositivos.
Muitos dos próximos bilhões de usuários que vão acessar a Internet usam dispositivos de baixo custo com janelas de visualização pequenas. Ler em uma tela de 3,5 ou 4 polegadas de baixa resolução pode ser difícil.
Confira uma fotografia dos dois juntos:
Na tela maior, o texto é pequeno, mas legível.
Na tela menor, o navegador renderiza o layout corretamente, mas o texto fica ilegível, mesmo quando ampliado. A tela está desfocada e tem um "desvio de cores" (o branco não parece branco), o que torna o conteúdo menos legível.
Criar conteúdo para dispositivos móveis
Ao criar para uma variedade de janelas de visualização, considere o conteúdo, o layout e o design gráfico, crie com texto e imagens reais, não conteúdo de marcador de posição.
"O conteúdo precede o design. O design na ausência de conteúdo não é design, é decoração."
Jeffrey Zeldman
- Coloque o conteúdo mais importante na parte de cima, já que os usuários tendem a ler páginas da Web em um padrão em forma de F.
- Os usuários acessam seu site para atingir uma meta. Pergunte-se o que eles precisam para atingir esse objetivo e se livrar de tudo o mais. Seja rigoroso com enfeites visuais e textuais, conteúdo legado, links excessivos e outras desordens.
- Tenha cuidado com os ícones de compartilhamento social. Eles podem desordenar layouts, e o código deles pode deixar o carregamento da página mais lento.
- Crie layouts responsivos para conteúdo, não tamanhos de dispositivos fixos.
Conteúdo de teste
- 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 vários cenários de conectividade.
- Tente ler e interagir com seu conteúdo em um smartphone de baixo custo.
- Peça a amigos e colegas para testar seu app ou site.
- Crie um laboratório de testes de dispositivos simples. O repositório do GitHub para o Mini Mobile Device Lab do Google tem instruções sobre como criar o seu. OpenSTF é um aplicativo da Web simples para testar sites em vários dispositivos Android.
Confira o OpenSTF em ação:
Os dispositivos móveis são cada vez mais usados para consumir conteúdo e obter informações, não apenas como dispositivos para comunicação, jogos e mídia.
Isso torna cada vez mais importante planejar o conteúdo para funcionar bem em uma variedade de janelas de visualização e priorizar o conteúdo ao considerar o layout, a interface e o design de interação entre dispositivos.
Entender o custo dos dados
As páginas da Web estão ficando maiores.
De acordo com HTTP Archive, o peso médio da página para os principais milhões de sites agora é de mais de 2 MB.
Os usuários evitam sites ou apps considerados lentos ou caros. Por isso, é fundamental entender o custo do carregamento de componentes de páginas e apps.
A redução do peso da página também pode ser lucrativa. Chris Zacharias, do YouTube, descobriu que, quando reduziram o tamanho da página de exibição de 1,2 MB para 250 KB:
Em outras palavras, reduzir o peso da página pode abrir mercados totalmente novos.
Calcular o peso da página
Há várias ferramentas para calcular o peso da página. O painel Network do Chrome DevTools mostra o tamanho total de bytes de todos os recursos e pode ser usado para determinar pesos de tipos de recursos individuais. Você também pode verificar quais itens foram recuperados do cache do navegador.
O Firefox e outros navegadores oferecem ferramentas semelhantes.
WebPagetest oferece a capacidade de testar o primeiro e os carregamentos de página subsequentes. Você pode automatizar os testes com scripts (por exemplo, para fazer login em um site) ou usando as APIs RESTful. O exemplo a seguir (carregando developers.google.com/web) mostra que o armazenamento em cache foi bem-sucedido e que os carregamentos de página subsequentes não exigiram recursos adicionais.
O WebPagetest também oferece um detalhamento de tamanho e solicitação por tipo MIME.
Calcular o custo da página
Para muitos usuários, os dados não custam apenas bytes e desempenho, mas também dinheiro.
O site What Does My Site Cost? (link em inglês) permite estimar o custo financeiro real do carregamento do seu site. O histograma abaixo mostra quanto custa (usando um plano de dados pré-pago) para carregar amazon.com.
Lembre-se de que isso não considera a acessibilidade em relação à renda. Os dados de blog.jana.com (link em inglês) mostram o custo dos dados.
| Custo do plano de dados de 500 MB (USD) |
Salário mínimo por hora (USD) |
Horas de trabalho para pagar o 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 é apenas um problema para mercados emergentes. Em muitos países, as pessoas usam planos móveis com dados limitados e evitam seu site ou app se o considerarem pesado e caro. Mesmo os planos de dados de celular e Wi-Fi "ilimitados" geralmente têm um limite de dados além do qual são bloqueados ou limitados. Por esses motivos, é melhor ser o mais transparente possível sobre a quantidade de dados que sua página consome. A postagem de blog a seguir oferece práticas recomendadas específicas: Uso da transparência de custos para aumentar a confiança
O resultado: o peso da página afeta o desempenho e custa dinheiro. Otimizar a eficiência do conteúdo mostra como reduzir esse custo.