Quando não COPE com suas imagens da web [Vídeo]

Para pensar estrategicamente sobre seu conteúdo visual baseado na web, você tem que fazer mais do que escolher quais imagens usar; você também deve se certificar de que essas imagens funcionam para telas grandes e pequenas.

Se uma imagem funciona para todos os tamanhos de tela, ótimo. Faça upload de um arquivo (fonte única da imagem) e pronto.

Nem todas as imagens tornam sua vida tão fácil. Às vezes, vale a pena fornecer várias versões de uma imagem para dar às pessoas o que elas precisam da imagem em qualquer dispositivo.

É o que diz Buddy Scalera, diretor sênior de estratégia de conteúdo da The Medicines Company. Em sua palestra na Intelligent Content Conference, Criando e Executando uma Estratégia de Conteúdo Visual que Escala, Buddy nos disse que ele é totalmente a favor do fornecimento único ... exceto quando não é. Ele defende o que ele e outros chamam de “COPE principalmente” (COPE-M), especialmente quando se trata de imagens.

COPE significa “crie uma vez, publique em todos os lugares”. O conteúdo COPE é um conteúdo de fonte única. Em muitos aspectos, o conteúdo COPE é ideal. Você cria um pedaço de conteúdo uma vez - uma descrição do produto, uma especificação, uma definição, uma imagem - e o sistema pode puxar (não colar) esse pedaço em vários produtos. Quando você atualiza a fonte, a atualização se espalha pelo seu repositório. O conteúdo COPE é elegante. É eficiente. É lógico. Isso economiza milhões de dólares em custos de tradução para as empresas. Isso os ajuda a evitar inconsistências embaraçosas, absurdas e que geram processos judiciais. COPE funciona bem com texto, áudio e vídeo (se você estiver usando o YouTube).

Ainda assim, às vezes COPE é o caminho errado a seguir. Os navegadores modernos refletem o seu texto, mas as imagens diminuem para os seus dispositivos. Uma imagem que parece ótima no desktop pode se tornar irreconhecível em um smartphone. (Olá, belisque e aplique zoom.)

É aí que entra o M no COPE-M. “Embora seja uma boa meta preparar seu conteúdo para reutilização multicanal, nem todo conteúdo é dimensionado de forma eficaz no modelo COPE”, diz Buddy.

Neste artigo, resumirei o conselho de Buddy em sua palestra na ICC. Todas as imagens neste post vêm de seus slides, e todas as citações, a menos que indicado de outra forma, vêm de sua palestra e de minhas conversas subsequentes com ele.

Por que é difícil COPE com algumas imagens

Buddy lança o que ele chama de “bomba da verdade” sobre imagens: elas não são o mesmo que texto.

O texto se presta a fonte única porque o texto pode ser separado de sua aparência. As folhas de estilo em cascata permitem que o texto varie em aparência de uma instância para outra sem alterar a fonte de texto subjacente. “O texto é um ativo maravilhoso, flexível, capaz de fluir, reutilizável e agnóstico de canal que funciona muito bem no mundo digital”, diz ele.

Não é assim com imagens. Eles não podem ser separados de sua aparência. Com imagens, nem sempre um tamanho serve para todos.

Como Justyn Hornor disse há alguns anos, o "elefante na sala" para web design responsivo "é como lidar com imagens". Uma imagem pequena pode parecer nítida em um telefone celular e ridiculamente pequena em um monitor de alta resolução. Uma imagem grande pode demorar muito para renderizar em um dispositivo pequeno onde uma imagem menor seria suficiente.

Como pensar sobre imagens multisourcing

Em vez de esperar que uma única imagem funcione para todos os dispositivos, comprometendo os pontos altos e baixos, você pode achar que vale a pena fazer upload de várias imagens pelo menos ocasionalmente e então dizer ao sistema em qual ponto de interrupção usar cada uma.

Um breakpoint é o ponto em que o sistema para de puxar uma imagem e puxar outra - maior ou menor, dependendo da resolução do dispositivo. 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.

Os pontos de interrupção são definidos de acordo com a largura do dispositivo porque temos capacidade de rolagem vertical infinita, mas largura limitada.

Buddy descreve uma época em que uma das equipes de conteúdo de sua empresa imprimiu um folheto que incluía um gráfico respondendo às perguntas dos médicos sobre um determinado produto.

O gráfico parecia ótimo impresso. E então eles colocaram em um site, e ficou menor. Quando visualizado em um smartphone, o gráfico era ilegível. Pessoas procurando algo em um smartphone em um hospital têm um nível de urgência. Eles precisam da resposta. Eles não precisam estar beliscando e fazendo zoom.

Em muitos casos, é aceitável fazer upload de uma imagem grande para o seu site (em outras palavras, para uma fonte única da imagem) e deixar o navegador dimensioná-la para você. Em outros casos, as imagens se tornam quase ilegíveis quando comprimidas em uma pequena janela ou tela. Para ilustrar esse ponto, Buddy mostra o que acontece quando um navegador dimensiona uma foto de 800 pixels de suas filhas:

Este é um exemplo COPE. Infelizmente, quando o navegador dimensiona essa imagem para uma janela ou tela estreita, é difícil ver os rostos das meninas. Se a imagem for um gráfico ou infográfico, o texto na tela menor pode ficar ilegível.

Para elementos visuais essenciais para a narrativa de sua marca, você pode fazer um esforço extra para usar várias imagens. Essa abordagem, que Buddy chama de "direção de arte responsiva", dá às pessoas uma chance melhor de perceber os detalhes importantes em qualquer tela.

Como Buddy muda a largura da imagem de 800 para 400 para 200 pixels, ele também muda a composição da imagem: Isso não é COPE. Isso é planejamento de imagem. A foto de 800 pixels de largura mostra as meninas e o cachorro lado a lado no que ele chama de uma tomada horizontal de três largos. A foto de 400 pixels de largura aproxima as garotas e coloca o cachorro na frente para uma foto vertical de duas pontas. A tomada de 200 pixels de largura espreme todas as três figuras em um arranjo de totem.

Se você estivesse visualizando a página de exemplo de Buddy em um navegador e esticasse e estreitasse a janela, a imagem mudaria cada vez que você atingisse um dos pontos de interrupção especificados no código HTML. Para ter uma noção da experiência do usuário, reproduza este vídeo de seis segundos:

Para experimentar esse comportamento em seu próprio navegador, visite a página de exemplo de Buddy em um dispositivo que permite alterar a largura da janela.

Embora esta postagem não seja um tutorial sobre como escrever esse tipo de código, você pode achar útil ver a aparência desse código:

A principal coisa a se notar (olhe entre as tags "imagem") é que Buddy especificou três imagens de origem:

• GirlsDog_200w.jpg
• GirlsDog_400w.jpg
• GirlsDog_800w.jpg

Cada arquivo JPG é atribuído a um ponto de interrupção:

• largura máxima: 499 px
• largura máxima: 799 px
• largura mínima: 800px

Quantos pontos de interrupção você deve criar? Como você determina suas larguras máximas e mínimas? Não há regras. Em um excelente artigo que Buddy aponta, Jason Grigsby diz: “Selecionar pontos de interrupção de imagem é algo que todos enfrentarão e, francamente, não tenho boas respostas para você”.

Você provavelmente não criará várias imagens para cada imagem em seu site. Determine quais imagens realmente importam para seu cliente. Se você sabe que uma imagem (por exemplo, gráfico, gráfico, foto do produto) é realmente importante para o seu usuário, não deixe que o navegador da Web determine como renderizar essa imagem. Assumir o controle.

É importante notar que alguns dos sistemas de gerenciamento de ativos digitais (DAM) podem criar várias saídas de uma única imagem em diferentes tamanhos e proporções. Não vai replicar o que Buddy fez com fotos separadas, mas você deve explorar o que seu sistema de software oferece.

A única regra que posso sugerir é tomar suas decisões estratégicas sobre imagens da mesma forma que você toma decisões estratégicas sobre qualquer outro conteúdo: pergunte a si mesmo o que seu público precisa e por quê. Experimente várias imagens e pontos de interrupção. Repetir.

Para saber mais sobre o que Buddy tem a dizer sobre a criação e execução de uma estratégia escalonável para seu conteúdo visual, consulte sua apresentação ICC comentada.

Quando multifonte suas imagens

Embora você não queira se dar ao trabalho de criar vários arquivos de origem para cada imagem, considere o multisourcing dessas imagens que têm o maior impacto, por exemplo, as imagens principais em suas páginas de conversão. Como diz Buddy:

Pense em todo o dinheiro gasto em seu site. Se você está permitindo que as máquinas decidam como lidar com todas as suas imagens e as pessoas às vezes não conseguem ver as imagens principais, você está perdendo uma oportunidade.

Você conhece as páginas e imagens importantes do seu site. Você provavelmente já os marcou em seu software de análise. É especialmente importante testar essas páginas em dispositivos móveis, “não apenas nos lindos monitores de tela ampla que seus designers usaram para criar conteúdo”, diz Buddy.

Considere também multisourcing de imagens em qualquer outra página que a maioria das pessoas visualiza em dispositivos pequenos. “Veja a quantidade de tráfego que você obtém de seus smartphones. Se for como nós, 65%, esse é o seu público. Você tem que atendê-los ”, diz Buddy. Se os usuários de smartphones não conseguem ler uma imagem sem apertar e aplicar zoom, você pode querer personalizar a imagem para telas pequenas.

A melhor maneira de aprender quais imagens originar múltiplas é testar suas páginas da web em vários dispositivos . Todas as equipes de conteúdo - incluindo seus colegas de estratégia de conteúdo, design, engenharia de conteúdo e experiência do usuário - precisam saber como as imagens do seu site são carregadas nos smartphones. Pegue uma pilha de dispositivos e um designer, estrategista de conteúdo ou pessoa UX. Carregue seu conteúdo da maneira que seu cliente faria. “Se as imagens que você carregou com amor em seu site parecem um pouco comprimidas, considere as maneiras como o navegador está dimensionando seus ativos de imagem”, diz Buddy, e planeje de acordo.

Conclusão

Até que nossos sistemas de conteúdo fiquem inteligentes o suficiente para fornecer automaticamente às pessoas experiências ideais de cada imagem em qualquer dispositivo, considere quando COPE e quando não COPE com suas imagens. Pode valer a pena colocar um esforço extra e múltiplas fontes de certas imagens.

E quanto a 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 testando suas imagens em vários dispositivos? Deixe-nos saber em um comentário.

Aqui está um trecho da palestra de Buddy:

Inscreva-se para receber nosso boletim eletrônico semanal de Estratégia de conteúdo para profissionais de marketing , que apresenta histórias e ideias exclusivas do consultor chefe de conteúdo da CMI, Robert Rose. Se você for como muitos outros profissionais de marketing que conhecemos, ficará ansioso para ler seus pensamentos todos os sábados.

Imagem da capa por Joseph Kalinowski / Content Marketing Institute