Como garantir experiências visuais ideais em todos os dispositivos

Atualizado em 22 de agosto de 2022

Abra a página de melhor conversão em seu site em três dispositivos – celular, tablet e desktop.

Realmente, faça isso. Eu vou esperar.

Seu conteúdo é exibido tão bem quanto você esperava?

Muitos profissionais de marketing descobrirão que não. A experiência do usuário e a consistência das mensagens são insatisfatórias. Às vezes, é francamente horrível.

Como você chegou aqui? Afinal, sua empresa investe muitos recursos para publicar conteúdo. Você ainda maximiza esses recursos de conteúdo adotando o método COPE – crie uma vez, publique em qualquer lugar.

E esse pode ser o erro.

Anime-se, colega de marketing de conteúdo. Estou aqui para ajudar com um pequeno ajuste – COPE-M.

Entenda por que o COPE-M é necessário

Usando uma estratégia COPE tradicional, você carrega um pedaço de conteúdo uma vez (definição, imagem, descrição, etc.), e o CMS extrai (não cola) esse pedaço em várias entregas. Quando você atualiza o conteúdo original, a atualização passa pelo seu repositório.

Como estratégia de conteúdo, o conteúdo COPE é elegante. É eficiente. É lógico. Aumenta a reutilização do seu conteúdo e amortiza seus investimentos em conteúdo original. Funciona com texto, áudio e vídeo.

Mas o COPE não é uma panacéia para sua publicação de conteúdo. Os navegadores modernos refluem seu texto, mas as imagens são reduzidas para seus dispositivos. Uma imagem que fica ótima em um desktop pode ficar irreconhecível em um dispositivo móvel. (Seu público não gosta disso e o Google também não, o que pode prejudicar a classificação do seu conteúdo.)

COPE é um ótimo ponto de partida, mas é necessária uma abordagem mais em camadas para o controle de imagem. Eu chamo isso de COPE-M – crie uma vez, publique em todos os lugares principalmente. O COPE-M pode ser a ponte entre uma boa experiência do usuário e uma ótima.

Adotar uma abordagem COPE-M para sua estratégia de publicação de conteúdo pode aprimorar a experiência do usuário, aumentar a consistência e melhorar a otimização do mecanismo de pesquisa (SEO) com conteúdo atualizado.

As imagens não são necessariamente as melhores amigas do COPE

Muita coisa mudou desde 2009, quando Daniel Jacobson delineou o conceito e a abordagem técnica dessa estratégia de reutilização de conteúdo. COPE continua sendo um conceito sólido, mas hoje o conteúdo é distribuído por meio de vários tipos de dispositivos. O público também consome o conteúdo em mais formatos.

Texto de fonte única visualizado em vários navegadores ainda funciona, mas é um problema para imagens. O texto pode ser separado de sua aparência. As folhas de estilo em cascata permitem que a aparência do texto, como tamanhos de fonte e larguras de coluna, seja alterada sem alterar a fonte original.

As imagens não são tão maleáveis. Gráficos renderizados (por exemplo, arquivos JPEG, PNG) não podem ser separados de sua aparência. Um tamanho de uma única fonte nem sempre serve para todos. Um infográfico que fica bem em um desktop pode ser ilegível em um iPhone. Isso deixa o espectador beliscando, ampliando, apertando os olhos e resmungando tentando vê-lo.

Escolha as imagens para multifonte

Até que os sistemas de gerenciamento de conteúdo se tornem inteligentes o suficiente para fornecer automaticamente experiências de visualização ideais para cada imagem em cada dispositivo, você deve considerar quando COPE e quando não COPE com suas imagens.

Volte ao meu pedido original – abra sua melhor página de conversão para ver como ela aparece em vários dispositivos. Faça isso com as outras páginas e imagens importantes do seu site. Você provavelmente já os marcou em seu software de análise.

DICA: restrinja sua seleção de páginas àquelas que recebem tráfego significativo de dispositivos móveis.

Para identificar quais imagens devem ser multiorigem, teste as páginas selecionadas em vários dispositivos. Pegue uma pilha de dispositivos e um designer, estrategista de conteúdo ou pessoa de UX. Carregue seu conteúdo da maneira que seu cliente faria. Se uma imagem parecer esmagada, adicione-a a uma lista de imagens a serem multifonte.

DICA: Não olhe apenas para ver se a imagem é exibida. Dê uma olhada em como ele é exibido. Se o usuário precisar pinçar e aplicar zoom para visualizar toda a imagem, COPE provavelmente não é o melhor método.

Compartilhe os resultados com todas as equipes relacionadas ao conteúdo, incluindo estratégia de conteúdo, design, engenharia de conteúdo e experiência do usuário, que devem saber como as imagens do seu site são carregadas.

Design para as várias telas

Com uma imagem comprometida nas extremidades superior e inferior para caber na tela de um dispositivo móvel, pode valer a pena fazer upload de várias imagens e informar ao sistema em qual ponto de interrupção usar cada uma.

Um ponto de interrupção é um ponto em que o sistema para de extrair uma imagem e extrai uma versão que seja mais adequada para o dispositivo de visualização. Os pontos de interrupção são determinados pela largura do dispositivo porque os usuários podem rolar verticalmente infinitamente, mas não podem ampliar a tela.

Esta ilustração mostra três pontos de interrupção possíveis: 320 pixels para um telefone celular, 720 pixels para um tablet ou telefone grande e 1.024 pixels para um laptop:

Neste exemplo, a imagem original de minhas duas filhas e nosso cachorro tem 800 pixels de largura. Parece ótimo em um desktop renderizado em tamanho real (lado esquerdo da imagem). Em uma tela do tamanho de um tablet, a imagem original perde detalhes, o que diminui seu impacto.

Se esta imagem fosse um gráfico ou infográfico, ela poderia ficar ilegível em uma tela menor. É por isso que você deve se esforçar mais para obter várias imagens. Essa abordagem é chamada de “direção de arte responsiva”. É um truque de navegador que lhe dá um pouco mais de controle sobre a forma como as imagens são exibidas para seus usuários.

Veja como isso funciona com o exemplo original. Desta vez, tirei fotos diferentes para cada tamanho – 800, 400 e 200 pixels de largura. Quando publicados, seus rostos são aproximadamente do mesmo tamanho em cada um.

Na versão horizontal de 800 pixels, uma filha está sentada na escada com nosso cachorro, enquanto a outra fica ao longo da grade com um vislumbre do bairro ao fundo. Na versão vertical de 400 pixels, as duas filhas sentam-se nos degraus com o cachorro ao lado de uma delas com as duas grades visíveis. Na versão vertical de 200 pixels, cada filha e o cachorro têm seu próprio passo, e apenas uma grade é visível.

Esta abordagem não é COPE. É a parte não-principalmente do COPE-M. Criei três vezes mais trabalho para mim. É por isso que você deve limitar esse trabalho demorado apenas ao conteúdo de conversão essencial.

Veja como as imagens de várias origens são codificadas

Embora este artigo não seja um tutorial sobre como escrever esse tipo de código, pode ser útil ver como ele se parece:

Entre as tags “picture”, especifiquei as três imagens de origem, que são nomeadas com base na largura da imagem:

• jpg
• jpg
• jpg

Agora, cada imagem será ativada quando atingir seu ponto de interrupção:

• 499 pixels (máximo) para smartphones
• 799 pixels (máximo) para tablets
• 800 pixels (mínimo) para desktop

Faça o COPE-M trabalhar para sua marca

A maioria dos sistemas de gerenciamento de ativos digitais (DAM) pode criar várias saídas de uma única imagem em diferentes tamanhos e proporções. Se não for possível refazer as fotos, corte-as para garantir a melhor experiência em todos os tamanhos de tela. Pode dar muito trabalho, então não peça aos seus designers ou desenvolvedores para redesenhar todas as imagens do seu site. Foco no impacto.

Se o SEO for uma prioridade, verifique com seus especialistas em SEO antes de implementar a abordagem de várias imagens. O algoritmo do Google pode penalizar as páginas da web que não oferecem exatamente a mesma experiência em desktops e dispositivos móveis. Mesmo que você esteja fornecendo uma experiência melhor para humanos, um rastreador do Google pode ainda não saber disso. Claro, se mais pessoas acharem sua página digna de seu tempo por causa de uma melhor experiência de imagem, o Google vai gostar disso.

E sua equipe? Você às vezes cria várias versões de suas imagens importantes para acomodar uma variedade de tamanhos de tela? O que você aprendeu ao testar suas imagens em vários dispositivos? Deixe-me saber nos comentários.

Imagem da capa por Joseph Kalinowski/Content Marketing Institute