Embed Size (px)
Citation preview
Utilizando texto e imágenes en sus emails
www.masterbase.com
eBook
MasterBase® Todos los Derechos Reservados – www.masterbase.comUtilizando texto e imágenes en sus emails
Comparta el eBook
Introducción
2
Hace unos días, me suscribí al envío de mensajes de una tienda de ropa. Me gusta la ropa de esa compañía y pensé que podría ser divertido recibir sus mensajes.
Después de unas pocas semanas, me di cuenta de que no había visto ni un solo mensaje de ellos. Se me ocurrió revisar mi carpeta de spam y me encontré con que todos habían llegado directamente a esa carpeta.
Abrí uno de los mensajes e hice clic en "no es spam". Tan pronto lo abrí, descubrí por qué fue catalogado como spam. Aparte de la información de CAN-SPAM obligatoria en la parte inferior del mensaje, no había texto. Peor aun, las imágenes no contenían etiquetas ALT.
Para todos los efectos, esto no era un mensaje, sino más bien, un saco de cajas vacías.
Me gustaría poder decir que éste ha sido el único caso que me ha tocado ver de un muy pobre diseño de mensaje; pero, lamentablemente, es muy común.
Empresas grandes y pequeñas cometen el mismo error a diario. Este error se puede explicar de la siguiente forma: mala relación en la conversión de texto a imagen.
Todos los días, cientos de mensajes son enviados automáticamente a la carpeta de spam. Algunos caen allí por contener asuntos con textos “spameros”, otros por incluir enlaces sospechosos, pero también hay casos en que la razón es su diseño, pues no toman en consideración la forma en que trabajan los filtros de email.
Y muchos de estos problemas se podrían haber evitado con unos pequeños cambios en de diseño
MasterBase® Todos los Derechos Reservados – www.masterbase.comUtilizando texto e imágenes en sus emails
Comparta el eBook
3
¿Por qué tantas empresas son susceptibles de caer en este tipo de error en particular?
Porque en sus orígenes Internet tenía como misión ser compatible con cuantos sistemas informáticos fuera posible.
No debía importar que se estuviera usando un PC, un Mac, o algún sistema basado en Unix, todo el mundo debía poder compartir y ver la misma información.
Esto era genial desde casi todo punto de vista, pero los artistas gráficos se fueron encontrando con que sus cuidadosamente elaborados diseños web a menudo se veían convertidos en un verdadero revoltijo al ser desplegados en un equipo distinto al suyo, y debieron resolver el problema haciendo que el texto fuera parte de la imagen.
Pero en los ambientes del email y del diseño web en general esto es una mala práctica, ya que interfiere con el SEO, pero también por otras varias razones.
En este eBook repasaremos cada una de ellas y plantearemos soluciones alternativas, que deberían traducirse en una mayor capacidad de entrega y en mejores tasas de clics de sus mensajes.
Alejandro Durán Director de Marketing MasterBase
MasterBase® Todos los Derechos Reservados – www.masterbase.comUtilizando texto e imágenes en sus emails
Comparta el eBook
El camino que sigue un mensaje hacia la casilla del destinatario
4
Para entender bien el concepto de imagen y texto, así como su importancia en la entregabilidad, es fundamental conocer el camino que recorre un mensaje desde que se diseña hasta que llega a la casilla de correos
Paso 1
Usted puede hacer uso del código HTML o de una herramienta como MasterBase. Muchos mensajes incorporan vínculos, gráficas, imágenes y colores, así como otros son sólo texto plano.
Diseño y código
Paso 2
Para que su mensaje sea exitoso, su herramienta de email debe cumplir con ciertas tareas antes de enviar su campaña;
Preparando su mensaje
Agregar preencabezados y pie de páginas
Hosteo de imágenes Personalización
Para eso debe alinear el cuerpo de su mensaje para los preencabezados y pies de página
Las imágenes deben ser i ng resadas de fo rma ordenada.
M a s t e r B a s e d e b e r e f e r e n c i a r d i c h a s imágenes
La personalización debe e s t a r c o r r e c t a m e n t e interpuesta entre el diseño y el texto del mensaje
MasterBase® Todos los Derechos Reservados – www.masterbase.comUtilizando texto e imágenes en sus emails
Comparta el eBook
5
Paso 3
El mensaje es procesado por el hardware y software de MasterBase.
Cada parte de su mensaje, HTML y texto es codificado de forma separada para el envío.
El mensaje será enviado por diversos servidores en su recorrido a la casilla de correos.
Cada servidor utiliza SMTP (Simple Mail Transfer Protocol) para generar esa transferencia
Procesamiento
Paso 4
Una vez que su mensaje de MasterBase a el administrador de correos del destinatario (Yahoo / Gmail) se instala en ese servidor.
Estos util izan uno o más p r o t o c o l o s p a r a l e e r s u mensaje.
Llegar a la casilla del destinatario
Además, pueden utilizar preprocesador para preparar el mensaje para su entrega.
Los preprocesadores pueden afectar la forma o diseño de su mensaje, modificando, removiendo o deshabitando parte de su mensaje, al identificarlo como peligroso o con riesgo de seguridad
Los protocolos son estándares para la transmisión de datos de un servidor a otro. (POP, Exchange, IMAP, DOMINO)
MasterBase® Todos los Derechos Reservados – www.masterbase.comUtilizando texto e imágenes en sus emails
Comparta el eBook
6
Paso 5
Su destinatario tiene la última palabra para decidir cómo ver ese mensaje.
El programa o dispositivo que elija para leer el mensaje es conocido como “cliente email”
El cliente email utilizado puede emplear también problemas de visualización del diseño al momento de mostrar el mensaje.
Ambos pueden afectar la forma o diseño de su mensaje, modificando, removiendo o deshabitando parte de su mensaje, al identificarlo como peligroso o con riesgo de seguridad.
También pueden bloquear imágenes por defecto.
La elección del destinatario
Como puede ver, es muy fácil “romper” el diseño de su mensaje, luciendo muy mal en la bandeja de entrada de los destinatarios, débil y poco profesional.
Así que, al margen de los factores que están completamente fuera de su control -como el navegador del suscriptor, el cliente email y el dispositivo-, ¿cómo puede asegurarse de diseñar un mensaje que luzca bien?
La clave está en utilizar texto e imagen de forma separada.
MasterBase® Todos los Derechos Reservados – www.masterbase.comUtilizando texto e imágenes en sus emails
Comparta el eBook
7
Los ISP (Yahoo/Gmail) no pueden leer el texto en imágenes. Los spammers saben esto y a menudo utilizan imágenes para sortear filtros que podrían lanzar sus mensajes de forma automática a la carpeta spam.
Como consecuencia, muchos ISP ahora revisan la relación de conversión de texto a imagen para identificar posible spam.
Relación Imagen-Texto
Si usted pone todo el énfasis en las imágenes, las métricas de entregabilidad sufren (al igual que las tasas de apertura y de clics). Nada sirve si el mensaje no llega a su objetivo final (casilla). Los parámetros de entrega varían de ISP a ISP, pero todos ellos examinan la relación texto-imagen al momento de decidir dónde clasificar un mensaje.
De pronto, envíos que una semana antes aterrizaron en la bandeja de entrada, se desvían a la carpeta general. En este caso, el uso de texto en un mensaje en el que anteriormente hubiera utilizado una imagen, puede hacer toda la diferencia.
¿Por qué requiere del texto?Todo mensaje debe incluir un texto legible, lo que además es una exigencia legal. Si usted tiene el hábito de convertir todo el texto a imágenes, por razones de diseño, le recomendamos replantearse esa política.
El buen diseño, por supuesto, ayuda a llamar la atención de los destinatarios, pero en un punto determinado, el sentido práctico. debe imponerse.
Cuando menos las llamadas a la acción deben ser siempre parte del texto y no de las imágenes. Hay muchas buenas razones para utilizar texto en sus mensajes. Este documento técnico examinará esas razones, y probará por qué convertir el texto en imágenes rara vez es el mejor curso de acción.
MasterBase® Todos los Derechos Reservados – www.masterbase.comUtilizando texto e imágenes en sus emails
Comparta el eBook
8
Consejos para trabajar sus HTMLPor defecto, la mayoría de cuentas de correo tiene configurada la opción que bloquea las imágenes. Entre los teléfonos, el iPhone es el único que por defecto despliega las imágenes.
Por supuesto, la gente siempre puede optar por activar la visualización de la imagen, y el 57% de la gente lo hace, pero hay todavía un 43% que no lo hace, por lo que no ve nada. Cuando usted trata de controlar la apariencia de su mensaje haciendo uso de la conversión a imagen, está desechando a la mitad de sus destinatarios.
Eso es muy lamentable si tomamos en cuenta que la información que se están perdiendo comenzó como un buen texto, desplegable en cualquier navegador de correo, independientemente de si las imágenes están activadas o desactivadas.
1. Asignar etiquetas ALT a las imágenesEvite los mensajes con imágenes pesadas, y cuando incluya imágenes, asegúrese de etiquetarlas con texto alternativo que describe claramente qué contiene.
No es infrecuente que el texto alternativo para mostrar en lugar de la imagen, cuando es el caso, resulte útil para dar a los destinatarios una idea de lo que se supone que la imagen contiene.
MasterBase® Todos los Derechos Reservados – www.masterbase.comUtilizando texto e imágenes en sus emails
Comparta el eBook
9
Evite mostrar la información importante en imágenes.
Como regla general, piense cómo se vería su mensaje si las imágenes no fueran mostradas. ¿Sus destinatarios obtendrían la misma información?
Si la respuesta es no, replantéese el diseño de su mensaje. Si incluye un llamado a la acción a través de un botón, incluya también uno en la forma de texto.
Si no lo hace, afectará significativamente la tasa de clics, ya que muchos no podrán ver ese botón. En este ejemplo, si bien la relación texto imagen es correcta, se pierde el botón de abajo “Ver todos las ofertas”
2. Asegúrese de que su mensajes se entienda sin las imágenes
MasterBase® Todos los Derechos Reservados – www.masterbase.comUtilizando texto e imágenes en sus emails
Comparta el eBook
10
CSS, o Cascading Style Sheets, es un tipo de lenguaje con una codificación más complicada que el HTML.
Debido a que no todos los clientes de correo o navegadores aceptan los mismos códigos, y considerando que el email tiende a no ser tan sofisticado como un navegador web, la inclusión de CSS en el mensaje suele ser una solución para paliar el desastre.
Para saber dónde y qué funciona en un mensaje respecto al código CSS, se debe recurrir a tablas para verificar qué acepta y qué no acepta cada administrador de correos.
Para mayor detalle de las tablas, puede recurrir a esta página haciendo clic aquí.
3. Evitar el CSS en sus mensajes
Además de las imágenes, otro elemento que tiende a descuadrarse en las presentaciones de HTML son las viñetas HTML de estilo.
Las viñetas que ordenan visualmente el contenido y lucen muy bien,
• como esta • y esta…
p r e s e n t a n e l r i e s g o d e p e r d e r s e o descuadrarse; por eso es preferible utilizar como alternativa algunos caracteres planos, como asteriscos (*) o guiones (-), que muy probablemente se desplegarán sin problemas en cualquier soporte.
4. Utilice caracteres planos en las viñetas
MasterBase® Todos los Derechos Reservados – www.masterbase.comUtilizando texto e imágenes en sus emails
Comparta el eBook
11
Las tablas se han convertido en cosa del pasado para el diseño web. Muchos de los atributos de la tabla, como el color y la alineación de fondo, están en desuso en HTML 5, en favor del uso de los elementos <div> para la creación de áreas únicas en una página web.
La tendencia actual es creer que las tablas deben quedar reservadas para los datos tabulares y nada más. Pero no es así. Las tablas son todavía una forma eficaz de organizar los datos en un mensaje, sobre todo en casos de combinación de texto e imágenes.
Más importante aun, todos los clientes de correo soportan las tablas, por lo que la compatibilidad no es un problema. Si usted prefiere utilizar elementos <div>, la información aquí todavía se aplica.
Las tablas tienen interesantes posibilidades en términos de diseño sin imágenes. Mediante la asignación de colores a las celdas individuales, puede crear efectos gráficos aprovechando su gran ventaja: que el público los verá de forma automática.
He aquí un ejemplo de un correo electrónico de H & M
5. Utilice Tablas
He aquí un texto en versión de tabla del mismo correo, todavía con las imágenes apagadas.
Aquí está el mismo correo que aparece en Gmail cuando las imágenes están apagados
Aquí está el correo aceptando las imágenes
MasterBase® Todos los Derechos Reservados – www.masterbase.comUtilizando texto e imágenes en sus emails
Comparta el eBook
12
Otra técnica popular para combinar texto e imágenes es el efecto fantasma. Con éste, la imagen se proyectará de nuevo en un área para que el texto sea más fácil de leer, donde se superpone la imagen.
Es una técnica de uso frecuente en revistas, pero también se utiliza en algunos envíos. A primera vista, puede parecer imposible duplicar el texto, pero es relativamente fácil de hacer con celdas de colores.
Aquí está la imagen de un mensaje electrónico enviado por Nieman Marcus para una venta estacional de abrigos:
6. Efecto fantasmas
1 2
3 1. Ejemplo de un mensaje normal que el filtro de imágenes no permitiría ver
2. Ejemplo de mensaje con todo el texto de la imagen convertida a texto real. La descripción del abrigo y de fijación de precios se coloca en las celdas que coinciden con el color principal, en cada una de las áreas en que se aplicó el efecto fantasma.
El uso de celdas de color no sólo no interrumpe la apariencia de la imagen, sino que proporciona solidez al texto.
3. Versión del mensaje sin las imágenes, Toda la información relevante ahora es legible, independientemente de si se muestran las imágenes o no.
MasterBase® Todos los Derechos Reservados – www.masterbase.comUtilizando texto e imágenes en sus emails
Comparta el eBook
13
Mensaje con efecto fantasma a través de un filtro de imágenes no activado
Mensaje con efecto fantasma a través de un filtro de imágenes activado
MasterBase® Todos los Derechos Reservados – www.masterbase.comUtilizando texto e imágenes en sus emails
Comparta el eBook
14
El uso más extremo de las tablas para reemplazar imágenes viene en forma de mosaicos. Los mosaicos toman la información de color de pixeles de una imagen y crean celdas pequeñas que imitan el aspecto de la imagen que debe aparecer en lugar de las celdas.
7. Mosaicos
Mensaje con uso de mosaicos a través de un filtro de imágenes activado
Mensaje sin uso de mosaicos a través de un filtro de imágenes activado
Como se puede ver, los resultados son impresionantes. Aquí usted no tiene que preocuparse de que sus imágenes se muestren o no. Usted puede agregar la información visual a cualquier dirección de correo.
MasterBase® Todos los Derechos Reservados – www.masterbase.comUtilizando texto e imágenes en sus emails
Comparta el eBook
15
Pero, primero, algunas advertencias.
La primera de ellas es que la mayoría de los lectores de correo y la web tienen problemas para mostrar estos objetos con precisión. Esto hace que trabajar con estas imágenes dentro de un editor visual sea difícil, si no imposible. Incluso si utiliza otra aplicación, como Dreamweaver, para el diseño de su mensaje, los mosaicos no se mostrarán correctamente.
Pero un problema más grande es el tamaño de los archivos que generan. Si es demasiado grande, algunos lectores de correo, como Gmail, terminarán el código HTML de la dirección de email llega a su límite, dejándolo en una situación peor que si utiliza realmente archivos de imagen.
En el caso de un logotipo por ejemplo, el archivo PNG pesa 10Kb en comparación con la versión de tabla HTML, que es de 93Kb, y eso sin haber agregado una sola línea de texto.
Los ISP bloquean imágenes para proteger la privacidad de sus clientes. Las imágenes requieren que el navegador recupere archivos desde un servidor del remitente, alertando que la persona ha abierto el mensaje. Si la persona no bloquea la imagen, no notifica que se abrió.
Con los mosaicos la privacidad no es el te,a, es banda ancha, en especial si pensamos en enviar una gran cantidad de mensajes. Considerando eso, limite su uso en los casos de grandes envíos.
MasterBase® Todos los Derechos Reservados – www.masterbase.comUtilizando texto e imágenes en sus emails
Comparta el eBook
16
Cada vez más gente elige leer sus mensajes en sus teléfonos. De acuerdo a un estudio de Forrester Research se proyecta que para el año 2017, el 78% de los usuarios de cuentas de correo accederá a sus mensajes a través de un dispositivo móvil.
Algunos de ellos están leyendo sus mensajes en tablets, que son un problema menor en términos de diseño. Como regla general, lo que funciona en un monitor tendrá buen desempeño en una tablet.
Diseño Responsive
Versión de escritorio Versión móvil
MasterBase® Todos los Derechos Reservados – www.masterbase.comUtilizando texto e imágenes en sus emails
Comparta el eBook
17
Sin embargo, una parte importante de estas personas revisa sus mensajes mientras está en movimiento. Como es natural, esto significa que quieren captar el contenido en forma rápida en un mensaje fácilmente legible.
Un mensaje que está diseñado exclusivamente para un "monitor de escritorio de 22” fallará al momento de trasladarse a un formato más pequeño.
Mientras usted esté utilizando texto, se puede controlar el flujo de las imágenes y el texto para crear una experiencia única, independientemente del dispositivo en el que se ve el mensaje.
Cuando todo se convierte en una imagen, usted tiene sólo dos opciones: diseñar una imagen suficientemente pequeña como para que quepa en la pantalla del teléfono, lo que podría ser demasiado pequeño para leer, o mantener el formato de imagen a tamaño completo, lo que significa que el destinatario debe desplazarse alrededor de la imagen para obtener la esencia del mensaje.
Cada vez más a menudo se recurre al diseño responsivo que permite, hasta cierto punto, que el mensaje se adapte al formato de pantalla de los dispositivos móviles.
Diseño Responsive
Si el ancho es menor a determinados márgenes, el diseño se reordena automáticamente para mejorar la legibilidad del mensaje en un dispositivo más pequeño.
MasterBase® Todos los Derechos Reservados – www.masterbase.comUtilizando texto e imágenes en sus emails
Comparta el eBook
18
Diseño ResponsiveEn este momento, el diseño responsivo todavía requiere un mayor desarrollo, pero a medida que más personas se familiaricen con sus técnicas y se estandaricen sus plantillas, podremos ver más y más de estos mensajes de despliegue versátil, en nuestras bandejas de entrada.
El diseñador que ya está utilizando texto e imágenes como partidas separadas en su diseño, está un paso adelante en esta tendencia, en comparación con la media.
Si opta por un diseño responsivo, debe tener en cuenta que no todos los clientes de correo reconocen esta técnica, por lo que debe seguir probando hasta averiguar qué diseño es hoy legible en tal o cual dispositivo móvil.
Esto significa trabajar siempre con imágenes de menos de 650 píxeles y con un tamaño de fuente suficiente para ser leído en una pantalla pequeña.
MasterBase® Todos los Derechos Reservados – www.masterbase.comUtilizando texto e imágenes en sus emails
Comparta el eBook
19
El email funciona mejor cuando se trabaja una combinación de imágenes y texto. Para que un mensaje cumpla eficientemente su objetivo, es aconsejable expresar cuanta información sea posible en forma de texto y no convertirla en imagen.
Hay dos razones principales para esto:
RESUMEN
Entregabilidad - Los ISP basan su puntuación de reputación para los envíos en base a varios factores. Uno de ellos es a relación texto-a-imagen. Demasiadas imágenes hace que su puntuación baje.
Para una empresa que ya posee una buena reputación esto podría no importar, pero si abusa de la conversión de texto a imagen, sus mensajes pueden acabar cayendo en la carpeta papelero.
Bloqueo por defecto de imágenes - Muchos ISP y algunos teléfonos móviles bloquean por defecto las imágenes. La mayoría de las personas no se molestan en cambiar este valor predeterminado, lo que signif ica que las probabil idades de conseguir que todos vean las imágenes son bajas. Si todo el texto está en la imagen, va a perder una oportunidad de venta.
Para entender bien el concepto de imagen y texto, así como su importancia en la entregabilidad, es fundamental conocer el camino que recorre un mensaje desde que se diseña hasta que llega a la casilla de correos
El recorrido de un mensaje a la casilla de los destinatarios debe tener en cuenta 5 pasos:
1) Diseño y código, 2) Preparar su mensaje, 3) Procesamiento, 4) Llegar a la casilla del destinatario y 5) Elección del destinatario
MasterBase® Todos los Derechos Reservados – www.masterbase.comUtilizando texto e imágenes en sus emails
Comparta el eBook
20
RESUMENHemos repasado diferentes consejos para trabajar sus HTML, tales como asignar etiquetas ALT a las imágenes, evitar las imágenes pesadas y etiquetar cada una de ellas con un texto alternativo que describa su contenido.
También le aconsejamos verificar que su mensaje se entienda prescindiendo de las imágenes, para lo cual es necesario concebirlo desde un principio como un diseño en modalidad texto. Posteriormente señalamos la importancia de evitar el CSS en sus mensajes y le sugerimos preferir texto plano en lugar de viñetas.
Respecto a las tablas, vimos que algunas de sus características las hacen muy adecuadas para el diseño de mensajes y deben ser aprovechadas. Aplicando color a las celdas, puede destacar ciertas zonas del mensaje, logrando mostrar un diseño atractivo, incluso cuando el bloqueo de imágenes está activado.
También es posible crear imágenes reales mucho más complejas utilizando estas tablas con celdas de colores. Es lo que se conoce como "mosaico", y, aunque suena muy interesante, tiene el inconveniente de generar archivos muy pesados, lo que pone en riesgo su entregabilidad.
Hay quienes prefieren incluir el contenido de su mensaje anclado a una imagen, ya que ésta puede ser reemplazada en cualquier momento, con lo cual reemplazan también el mensaje.
Sin embargo, mucho de esto puede lograrse por otras vías, haciendo un uso eficaz de las propiedades del contenido dinámico en el correo electrónico.
Si bien puede requerir más tiempo y trabajo de preparación, los beneficios son invaluables
Lo invitamos a más recursos de MasterBase®
eBooks Webinars Blogs Newsletter
Descargue nuestros eBooks prácticos y
didácticos
Inscríbase a nuevos webinars en vivo o
bien on demand
Artículos con novedades, mejores
prácticas y tendencias.
Boletín mensual con artículos prácticos y
más contenidos.
Baje un ebook > Vea un webinar > Lea los artículos > Suscríbase aquí >
Disfrute gratis de MasterBase®Sin contratos ni tarjetas de crédito. Hasta 500 registros
Sobre MasterBase®Somos una empresa tecnológica que ayuda a nuestros clientes a lograr una verdadera personalización 1a1 a través de comunicaciones relevantes.
Nuestra metodología, en base a estas 3 acciones, Obtener, Gestionar y Actuar le permitirá una interacción directa, inmediata y personalizada con sus clientes, a través de comunicaciones relevantes.
www.masterbase.com
