Cuándo no hacer frente a sus imágenes web [vídeo]

Para pensar estratégicamente sobre su contenido visual basado en la web, debe hacer más que elegir qué imágenes usar; También debe asegurarse de que esas imágenes funcionen para pantallas grandes y pequeñas.

Si una imagen funciona para todos los tamaños de pantalla, genial. Sube un archivo (fuente única de la imagen) y listo.

No todas las imágenes te facilitan la vida. A veces, vale la pena proporcionar varias versiones de una imagen para brindarles a las personas lo que necesitan de la imagen en cualquier dispositivo.

Eso dice Buddy Scalera, director senior de estrategia de contenido de The Medicines Company. En su charla de la Conferencia de contenido inteligente, Creación y ejecución de una estrategia de contenido visual que escala, Buddy nos dijo que está a favor del abastecimiento único ... excepto cuando no lo está. Aboga por lo que él y otros llaman "COPE principalmente" (COPE-M), especialmente cuando se trata de imágenes.

COPE significa "crear una vez, publicar en todas partes". El contenido de COPE es contenido de una sola fuente. En muchos sentidos, el contenido de COPE es ideal. Usted crea una parte del contenido una vez (una descripción del producto, una especificación, una definición, una imagen) y el sistema puede extraer (no pegar) esa parte en múltiples entregables. Cuando actualiza la fuente, la actualización se propaga a través de su repositorio. El contenido de COPE es elegante. Es eficiente. Es lógico. Ahorra a las empresas millones de dólares en costos de traducción. Les ayuda a evitar inconsistencias vergonzosas, enloquecedoras y que generan demandas. COPE funciona bien con texto, audio y video (si usa YouTube).

Aún así, a veces COPE es el camino equivocado. Los navegadores modernos reajustan el texto, pero las imágenes se reducen para sus dispositivos. Una imagen que se ve muy bien en el escritorio puede volverse irreconocible en un teléfono inteligente. (Hola, pellizca y amplía).

Ahí es donde entra la M en COPE-M. “Si bien es un buen objetivo preparar su contenido para la reutilización multicanal, no todo el contenido se escala de manera efectiva en el modelo COPE”, dice Buddy.

En este artículo, resumo el consejo de Buddy en su charla sobre la CPI. Todas las imágenes de esta publicación provienen de sus diapositivas, y todas las citas, a menos que se indique lo contrario, provienen de su charla y de mis conversaciones posteriores con él.

Por qué es difícil hacer frente a algunas imágenes

Buddy lanza lo que él llama una "bomba de verdad" sobre las imágenes: no son lo mismo que el texto.

El texto se presta a una fuente única porque el texto se puede separar de su apariencia. Las hojas de estilo en cascada permiten que el texto varíe en apariencia de una instancia a otra sin cambiar la fuente de texto subyacente. “El texto es un activo maravilloso, flexible, fluido, reutilizable, independiente del canal que funciona muy bien en el mundo digital”, dice.

No es así con las imágenes. No pueden separarse de su apariencia. Con las imágenes, un tamaño no siempre sirve para todos.

Como dijo Justyn Hornor hace unos años, el "elefante en la habitación" para el diseño web receptivo "es cómo manejar las imágenes". Una imagen pequeña puede verse nítida en un teléfono celular y ridículamente pequeña en un monitor de alta resolución. Es posible que una imagen grande tarde en renderizarse en un dispositivo pequeño donde una imagen más pequeña sería suficiente.

Cómo pensar en imágenes de fuentes múltiples

En lugar de esperar que una sola imagen funcione para todos los dispositivos al comprometer los extremos alto y bajo, es posible que al menos ocasionalmente valga la pena cargar varias imágenes y luego decirle al sistema en qué punto de interrupción usar cada una.

Un punto de interrupción es el punto en el que el sistema deja de extraer una imagen y extrae otra en su lugar, una más grande o más pequeña, según la resolución del dispositivo. Esta ilustración muestra tres posibles puntos de interrupción: 320 píxeles para un teléfono celular, 720 píxeles para una tableta o teléfono grande y 1024 píxeles para una computadora portátil.

Los puntos de interrupción se definen de acuerdo con el ancho del dispositivo porque tenemos una capacidad de desplazamiento vertical infinita pero un ancho limitado.

Buddy describe un momento en el que uno de los equipos de contenido de su empresa imprimió un folleto que incluía un gráfico que respondía a las preguntas de los médicos sobre un determinado producto.

El gráfico se veía muy bien impreso. Y luego lo pusieron en un sitio web y se hizo más pequeño. Cuando se ve en un teléfono inteligente, el gráfico era ilegible. Las personas que buscan algo en un teléfono inteligente en un hospital tienen un nivel de urgencia. Necesitan la respuesta. No necesitan pellizcar ni hacer zoom.

En muchos casos, es aceptable cargar una imagen grande en su sitio web (en otras palabras, para obtener la imagen de una sola fuente) y dejar que el navegador la escale por usted. En otros casos, las imágenes se vuelven casi ilegibles cuando se colocan en una pequeña ventana o pantalla. Para ilustrar este punto, Buddy muestra lo que sucede cuando un navegador escala una foto de sus hijas de 800 píxeles de ancho:

Este es un ejemplo de COPE. Desafortunadamente, cuando el navegador escala esta imagen para una ventana o pantalla estrecha, es difícil ver las caras de las chicas. Si esta imagen fuera un gráfico o una infografía, el texto de la pantalla más pequeña podría volverse ilegible.

Para los elementos visuales críticos para la narrativa de su marca, es posible que desee hacer un esfuerzo adicional para usar varias imágenes. Este enfoque, que Buddy llama "dirección de arte receptiva", brinda a las personas una mejor oportunidad de distinguir los detalles importantes en cualquier pantalla.

Cuando Buddy cambia el ancho de la imagen de 800 a 400 a 200 píxeles, también cambia la composición de la imagen: esto no es COPE. Esta es la planificación de imágenes. La foto de 800 píxeles de ancho muestra a las niñas y al perro uno al lado del otro en lo que él llama una toma horizontal de tres anchos. La foto de 400 píxeles de ancho une a las chicas más juntas y coloca al perro al frente para una toma vertical de dos anchos. La toma de 200 píxeles de ancho aprieta las tres figuras en una disposición de tótem.

Si estuviera viendo la página de ejemplo de Buddy en un navegador y estiró y redujo la ventana, la imagen cambiaría cada vez que alcanzara uno de los puntos de interrupción especificados en el código HTML. Para tener una idea de la experiencia del usuario, reproduzca este video de seis segundos:

Para experimentar este comportamiento en su propio navegador, visite la página de ejemplo de Buddy en un dispositivo que le permite cambiar el ancho de la ventana.

Si bien esta publicación no es un tutorial sobre cómo escribir este tipo de código, puede resultarle útil ver cómo se ve este código:

Lo principal a notar (mire entre las etiquetas de "imagen") es que Buddy ha especificado tres imágenes de origen:

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

Cada archivo JPG se asigna a un punto de interrupción:

• ancho máximo: 499px
• ancho máximo: 799px
• ancho mínimo: 800px

¿Cuántos puntos de interrupción debería crear? ¿Cómo determina sus anchos máximo y mínimo? No hay reglas. En un excelente artículo que señala Buddy, Jason Grigsby dice: "Seleccionar puntos de interrupción de imagen es algo que todos enfrentarán y, francamente, no tengo buenas respuestas para ti".

Probablemente no creará varias imágenes para cada imagen de su sitio web. Determine qué imágenes realmente le importan a su cliente. Si sabe que una imagen (por ejemplo, un gráfico, una tabla, una foto de un producto) es realmente importante para su usuario, no deje que el navegador web determine cómo renderizar esa imagen. Tomar el control.

Vale la pena señalar que algunos de los sistemas de administración de activos digitales (DAM) pueden crear múltiples salidas de una sola imagen en diferentes tamaños y proporciones. No replicará lo que hizo Buddy con fotos separadas, pero debería explorar lo que ofrece su sistema de software.

La única regla que puedo sugerir es que tome sus decisiones estratégicas sobre las imágenes de la misma manera que toma decisiones estratégicas sobre cualquier otro contenido: pregúntese qué necesita su audiencia y por qué. Experimente con varias imágenes y puntos de interrupción. Repetir.

Para obtener más información sobre lo que Buddy tiene que decir sobre la creación y ejecución de una estrategia escalable para su contenido visual, consulte su presentación ICC anotada.

Cuándo realizar múltiples fuentes de imágenes

Si bien no querrá tomarse la molestia de crear varios archivos de origen para cada imagen, considere la posibilidad de utilizar varias fuentes de las imágenes que tienen el mayor impacto, por ejemplo, las imágenes principales en sus páginas de conversión. Como dice Buddy:

Piense en todo el dinero gastado en su sitio web. Si deja que las máquinas decidan cómo tratar todas sus imágenes, y las personas a veces no pueden ver las imágenes clave, está perdiendo una oportunidad.

Conoce las páginas e imágenes importantes de su sitio web. Probablemente ya los tenga etiquetados en su software de análisis. Es especialmente crítico probar estas páginas en dispositivos móviles, "no solo en los magníficos monitores de pantalla ancha que sus diseñadores usaron para crear contenido", dice Buddy.

También considere las imágenes de fuentes múltiples en cualquier otra página que la mayoría de la gente ve en dispositivos pequeños. “Mire la cantidad de tráfico que recibe de los dispositivos de su teléfono inteligente. Si es como nosotros, 65%, esa es tu audiencia. Tienes que atenderlos ”, dice Buddy. Si los usuarios de teléfonos inteligentes no pueden leer una imagen sin pellizcar y hacer zoom, es posible que desee personalizar la imagen para pantallas pequeñas.

La mejor manera de saber qué imágenes utilizar en múltiples fuentes es probar sus páginas web en varios dispositivos . Todos los equipos de contenido, incluidos sus colegas en estrategia de contenido, diseño, ingeniería de contenido y experiencia del usuario, necesitan saber cómo se cargan las imágenes de su sitio web en los teléfonos inteligentes. Tome una pila de dispositivos y un diseñador, estratega de contenido o persona de UX. Cargue su contenido como lo haría su cliente. "Si las imágenes que cargó con cariño en su sitio web se ven un poco aplastadas, considere las formas en que el navegador está escalando sus activos de imagen", dice Buddy, y planifique en consecuencia.

Conclusión

Hasta que nuestros sistemas de contenido se vuelvan lo suficientemente inteligentes como para brindar automáticamente a las personas experiencias ideales de cada imagen en cualquier dispositivo, considere cuándo COPE y cuándo no COPE con sus imágenes. Puede resultar rentable hacer un esfuerzo adicional y obtener varias fuentes de determinadas imágenes.

¿Y tu equipo? ¿A veces crea varias versiones de sus imágenes importantes para adaptarse a una variedad de tamaños de pantalla? ¿Qué ha aprendido al probar sus imágenes en varios dispositivos? Háznoslo saber en un comentario.

Aquí hay un extracto de la charla de Buddy:

Suscríbase a nuestro boletín electrónico semanal de Estrategia de contenido para especialistas en marketing , que presenta historias exclusivas y conocimientos del Asesor de contenido jefe de CMI, Robert Rose. Si es como muchos otros especialistas en marketing que conocemos, esperará leer sus pensamientos todos los sábados.

Imagen de portada de Joseph Kalinowski / Content Marketing Institute