Actualizado el 22 de agosto de 2022
Abra la página de mejores conversiones en su sitio web en tres dispositivos: móvil, tableta y computadora de escritorio.
De verdad, hazlo. Esperaré.
¿Tu contenido se muestra tan bien como esperabas?
Muchos vendedores encontrarán que no es así. La experiencia del usuario y la coherencia de los mensajes no son satisfactorias. A veces, es francamente horrible.
¿Cómo has llegado hasta aquí? Después de todo, su empresa invierte muchos recursos para publicar contenido. Incluso maximiza esos recursos de contenido al adoptar el método COPE: cree una vez, publique en todas partes.
Y ese puede ser el error.
Anímate, compañero de marketing de contenidos. Estoy aquí para ayudar con un ligero ajuste: COPE-M.
Una estrategia de crear una vez y publicar en todas partes puede ser un error cuando se trata de imágenes, dice @BuddyScalera a través de @Marketor.es. Haz clic para twittear
Entender por qué es necesario COPE-M
Usando una estrategia COPE tradicional, carga una porción de contenido una vez (definición, imagen, descripción, etc.) y el CMS extrae (no pega) esa porción en múltiples entregas. Cuando actualiza el contenido original, la actualización se propaga a través de su repositorio.
Como estrategia de contenido, el contenido de COPE es elegante. es eficiente es lógico Aumenta la reutilización de tu contenido y amortiza tus inversiones en contenido original. Funciona con texto, audio y video.
Pero COPE no es una panacea para la publicación de su contenido. Los navegadores modernos redistribuyen su texto, pero las imágenes se reducen para sus dispositivos. Una imagen que se ve muy bien en una computadora de escritorio puede ser irreconocible en un dispositivo móvil. (A su audiencia no le gusta eso y tampoco a Google, lo que puede afectar la clasificación de su contenido).
COPE es un excelente punto de partida, pero es necesario un enfoque más estratificado para el control de imágenes. Lo llamo COPE-M: crear una vez, publicar en todas partes principalmente. COPE-M puede ser el puente entre una buena experiencia de usuario y una excelente.
Create Once, Publish Everywhere Mostly (COPE-M) es un puente entre una buena experiencia de usuario y una excelente, dice @BuddyScalera a través de @Marketor.es. Haz clic para twittear
Adoptar un enfoque COPE-M para su estrategia de publicación de contenido puede mejorar su experiencia de usuario, aumentar la consistencia y mejorar su optimización de motores de búsqueda (SEO) con contenido actualizado.
CONTENIDO RELACIONADO SELECCIONADO A MANO: 9 pasos para optimizar imágenes para SEO
Las imágenes no son necesariamente las mejores amigas de COPE
Mucho ha cambiado desde 2009 cuando Daniel Jacobson delineado el concepto y enfoque técnico de esta estrategia de reutilización de contenidos. COPE sigue siendo un concepto sólido, pero hoy en día el contenido se distribuye a través de múltiples tipos de dispositivos. Las audiencias también consumen el contenido en más formatos.
Fuente única el texto visto en varios navegadores aún funciona, pero es un problema para las imágenes. El texto se puede separar de su apariencia. Las hojas de estilo en cascada permiten cambiar la apariencia del texto, como el tamaño de fuente y el ancho de columna, sin cambiar la fuente original.
Las imágenes no son tan maleables. Los gráficos renderizados (p. ej., archivos JPEG, PNG) no se pueden separar de su apariencia. Un tamaño de una sola fuente no siempre sirve para todos. Una infografía que se ve bien en una computadora de escritorio puede no ser legible en un iPhone. Deja al espectador pellizcando, haciendo zoom, entrecerrando los ojos y gruñendo tratando de verlo.
Las imágenes no son tan maleables como el texto en la codificación, por lo que una imagen de fuente única no siempre se ve bien en todos los dispositivos, dice @BuddyScalera a través de @Marketor.es. Haz clic para twittear
Elija las imágenes para múltiples fuentes
Hasta que los sistemas de administración de contenido sean lo suficientemente inteligentes como para brindar automáticamente experiencias de visualización ideales para cada imagen en cada dispositivo, debe considerar cuándo COPE y cuándo no COPE con sus imágenes.
Regrese a mi solicitud original: abra su mejor página de conversión para ver cómo aparece en varios dispositivos. Haz eso con las otras páginas e imágenes importantes en tu sitio web. Probablemente ya los etiquetó en su software de análisis.
PROPINA: Limite su selección de páginas a aquellas que obtienen un tráfico significativo desde dispositivos móviles.
Para identificar qué imágenes usar de varias fuentes, pruebe las páginas seleccionadas en varios dispositivos. Tome una pila de dispositivos y un diseñador, estratega de contenido o persona de UX. Cargue su contenido de la forma en que lo haría su cliente. Si una imagen parece aplastada, agréguela a una lista de imágenes para ser de varias fuentes.
PROPINA: No se limite a mirar para ver si se muestra la imagen. Eche un vistazo a cómo se muestra. Si el usuario debe pellizcar y hacer zoom para ver toda la imagen, es probable que COPE no sea el mejor método.
Comparta los resultados con todos los equipos relacionados con el contenido, incluida la estrategia de contenido, el diseño, la ingeniería de contenido y la experiencia del usuario, quienes deben saber cómo se cargan las imágenes de su sitio web.
Diseño para múltiples pantallas.
Con una imagen comprometida en los extremos alto y bajo para adaptarse a la pantalla de un dispositivo móvil, puede valer la pena cargar varias imágenes y decirle al sistema en qué punto de interrupción usar cada una.
Un punto de interrupción es un punto en el que el sistema deja de extraer una imagen y extrae una versión que se adapta mejor al dispositivo de visualización. Los puntos de interrupción están determinados por el ancho del dispositivo porque los usuarios pueden desplazarse verticalmente de forma infinita, pero no pueden ampliar la pantalla.
Esta ilustración muestra tres puntos de interrupción posibles: 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:
En este ejemplo, la imagen original de mis dos hijas y nuestro perro tiene 800 píxeles de ancho. Se ve muy bien en un escritorio renderizado a tamaño completo (lado izquierdo de la imagen). En una pantalla del tamaño de una tableta, la imagen original pierde detalles, lo que disminuye su impacto.
Si esta imagen fuera un gráfico o una infografía, podría volverse ilegible en una pantalla más pequeña. Es por eso que debe hacer un esfuerzo adicional para obtener múltiples imágenes. Este enfoque se llama «dirección de arte sensible». Es un truco del navegador que le da un poco más de control sobre la forma en que las imágenes se muestran a sus usuarios.
Así es como funciona con el ejemplo original. Esta vez, tomé fotos diferentes para cada tamaño: 800, 400 y 200 píxeles de ancho. Cuando se publican, sus rostros son aproximadamente del mismo tamaño en cada uno.
En la versión horizontal de 800 píxeles, una hija se sienta en las escaleras con nuestro perro, mientras que la otra está de pie junto a la barandilla con un vistazo del vecindario al fondo. En la versión vertical de 400 píxeles, ambas hijas se sientan en los escalones con el perro al lado de una de ellas con ambas barandillas a la vista. En la versión vertical de 200 píxeles, cada hija y el perro tienen su propio escalón, y solo se ve una barandilla.
Este enfoque no es COPE. Es la parte no mayoritaria de COPE-M. Creé tres veces más trabajo para mí. Es por eso que debe limitar este trabajo que requiere mucho tiempo solo al contenido de conversión esencial.
Vea cómo se codifican las imágenes de múltiples fuentes
Si bien este artículo no es un tutorial sobre cómo escribir este tipo de código, puede resultarle útil ver cómo se ve:
Entre las etiquetas de «imagen», especifiqué las tres imágenes de origen, que se nombran según el ancho de la imagen:
Ahora, cada imagen se activará cuando alcance su punto de interrupción:
- 499 píxeles (máx.) para teléfonos inteligentes
- 799 píxeles (máx.) para tabletas
- 800 píxeles (mínimo) para escritorio
Haga que COPE-M funcione para su marca
La mayoría de los sistemas de gestión de activos digitales (DAM) pueden crear múltiples salidas de una sola imagen en diferentes tamaños y proporciones. Si no puede volver a tomar las fotos, recórtelas para garantizar la mejor experiencia en todos los tamaños de pantalla. Puede ser mucho trabajo, así que no le pidas a tus diseñadores o desarrolladores que rediseñen cada imagen de tu sitio web. Centrarse en el impacto.
Si el SEO es una prioridad principal, consulte con sus especialistas en SEO antes de implementar el enfoque de múltiples imágenes. El algoritmo de Google puede penalizar las páginas web que no brindan exactamente la misma experiencia en computadoras de escritorio y dispositivos móviles. A pesar de que está brindando una mejor experiencia para los humanos, es posible que un rastreador de Google aún no lo sepa. Por supuesto, si más personas encuentran que su página merece su tiempo debido a una mejor experiencia de imagen, a Google le gustará eso.
¿Qué tal tu equipo? ¿A veces crea múltiples 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ázmelo saber en los comentarios.
CONTENIDO RELACIONADO SELECCIONADO A MANO:
Registro para asistir a Content Marketing World en Cleveland, Ohio. Usa el código BLOG100 para ahorrar $100.
Imagen de portada de Joseph Kalinowski/Content Marketing Institute
