Categorías
Email Marketing

Utiliza las imágenes correctas en tus emails

Imágenes en tu campaña de email marketing

Utilizar imágenes en tus boletines tiene varias ventajas, empezando porque permite complementar tu información con elementos visuales que capturen la atención del usuario de manera más rápida y, por supuesto, efectiva.

En esta infografía te compartimos lo que debes conocer y tomar en cuenta para el uso de imágenes en tus correos, tales como:

  • formatos
  • resolución y tamaño
  • optimización
  • mejores prácticas

Toma en cuenta estas sugerencias para motivar al usuario a que realice la acción que deseas.

infoimagenes

 

Categorías
Email Marketing

¿Estás listo para tu primera campaña en ContinuaPro?

Si ya decidiste iniciar tu campaña de comunicación con ContinuaPro, lo primero que debes saber es que nuestra herramienta está diseñada para que puedas crear y enviar tus propias campañas de Email marketing, usando las plantillas prediseñadas o personalizadas que has instalado en ContinuaPro. En este artículo una breve guía para iniciar desde la importación de tu lista de contactos. ¿Estás listo?

Subir tu lista de contactos

El primer paso para enviar tus boletines electrónicos, es contar con una lista de contactos. Si ya la tienes, te compartimos los primeros pasos para importarla a la plataforma de ContinuaPro.

Antes de exportarla es importante que cuentes con el permiso de las personas de tu lista para enviarles información por correo, que la lista contenga emails reales y que no contenga dominios inexistentes. Puedes preguntar por nuestro servicio de limpieza de listas para corroborar esta información.

Primero: crea tu base de datos

En un Excel (o cualquier hoja de cálculo), crea las columnas necesarias para tu lista de contactos con el nombre de referencia de cada una en la parte superior, tal como se muestra en el ejemplo.

lista1

Guarda tu documento como .CSV o .XLS

lista2

Segundo: crea una lista de contactos en ContinuaPro

En la pestaña de Lista de contactos selecciona la opción de Crear lista e ingresa los datos generales.

 

lista3

lista4

Posteriormente, aparecerá esta pantalla en la que debes dar clic a Añadir contactos.

lista5

Marca la casilla que indica que tienes el permiso de los contactos de tu lista para enviarles información.

lista6

Carga tu archivo .XLS o .CSV con la lista de contactos que creaste previamente.

lista7

Selecciona los campos que deseas importar: el campo de email es obligatorio.

lista8

Aparecerá la siguiente pantalla con el proceso de carga. Si hay cualquier error al importar te lo indicará la plataforma en esta pantalla.

lista9

¡Listo! Puedes visualizar tu nueva lista en la pestaña Lista de contactos de la parte superior.

lista10

Pasemos a la siguiente parte del proceso.

Crea tu campaña

Una vez que ingresas a la plataforma con tu usuario, bajo la pestaña Campañas, ve a la opción Crear una campaña.

Crear Campaña 1

Elige el tipo de campaña que requieras. Para ejemplificar, en la imagen utilizaremos la primera opción.

2

Dale un nombre a tu campaña y selecciona la base de datos de los contactos a quienes dirigirás la comunicación.

crea-campana3

Completa los datos de tu campaña como el asunto, el nombre del remitente, etc.

crea-campana4

Otra de las opciones que tienes al utilizar la herramienta de ContinuaPro, es la personalización. Esta parte te permite enviar email con la información de quien lo recibirá, haciendo más probable que tu lector se identifique y abra tu correo.

El proceso es sencillo, solo debes agregar la información de los campos que elijas de tu lista o base de datos. Sigue los pasos a continuación:

Dentro del editor del email, coloca el cursor en el área donde quieres agregar la información del campo (dentro del correo).

Posteriormente das clic en la opción Campos y agregas el que necesitas. El campo aparecerá dentro de unos corchetes, por ejemplo [nombre].

Es muy importante no modificar el texto dentro de los corchetes para que su funcionalidad quede intacta.

personalizacion

Selecciona tu plantilla

Puedes elegir una de las plantillas que ya existen en la plataforma o una de las diseñadas por ti, estas últimas las encuentras en la pestaña Tus Plantillas.

seleccion-plantilla1

Después, elige el tipo de editor para tu plantilla.

Usa el editor WYSIWYG para actualizar la información y cambiar los elementos.

seleccion-plantilla2

Para reemplazar las imágenes, sólo da doble clic en la imagen que deseas editar y selecciona el archivo con la que será reemplazada. Es necesario que mida lo mismo que la imagen actual.

seleccion-plantilla3

Utiliza el editor HTML para controlar y modificar elementos más específicos desde el código fuente de la página, usando la opción HTML en la esquina superior.

plantilla-html

Haz una prueba de envío

Comprueba que tu campaña está lista para enviarse. Da clic en el botón Guardar en el menú lateral izquierdo, luego en Probar campaña y elige la opción Enviar un email de prueba.

prueba-envio1

Puedes seleccionar uno o más destinatarios para el envío de la prueba.

prueba-envio2

Existen herramientas como Litmus.com que ayudan en el proceso de validación de tu email, con ello podrás asegurarte que diseño se ve correctamente en diversos dispositivos y clientes de correo.

Envía tu campaña

Revisa tu prueba en el email que elegiste como destinatario, si todo funciona correctamente estarás listo para enviar tu campaña dando clic en el botón Programar y enviar.

envia-campana1

Puedes elegir enviarlo en ese instante o programarlo.

envia-campana2

¡Listo! Tu campaña ha sido enviada y podrás empezar a consultar las estadísticas de tu envío desde la plataforma de ContinuaPro.

envio4

Recuerda que nuestro equipo de expertos está atento para darte soporte y capacitación ante cualquier duda que tengas.

¡Bienvenido a ContinuaPro!


¿Más dudas?, te dejamos aquí nuestra sección de ayuda.

 

Categorías
Diseño gráfico

¿Cómo creamos una identidad gráfica?

La creación de una identidad gráfica representa el momento culminante en el que la empresa se muestra ante los ojos del cliente. Se trata de sintetizar lo más posible todo el significado de una marca en un diseño que, al momento de implementarse, logre transmitir al cien por ciento su esencia.

Es todo un arte, y como tal, se requiere de un proceso creativo para lograr el objetivo. Cada diseñador define su propio camino a seguir, en esta ocasión te compartiremos los puntos básicos que tomamos en cuenta cuando elaboramos una identidad gráfica.

Conceptualizamos

Es decir, buscamos palabras o conceptos breves que encierren las ideas y significados que el cliente nos ha compartidos sobre su marca. En esta parte del proceso, es fundamental tener claro lo que ofrece, a quién va dirigido el producto/servicio y cuál es el mensaje principal.

Representarlo iconográficamente

Una vez aterrizados varios conceptos, el siguiente paso es averiguar cómo representarlo iconográficamente. Lo ideal es buscar varios iconos o imágenes para los conceptos, sin hacer referencia a la marca aún. En el caso que se ejemplifica a continuación, la idea era proyectar a Hospicio como un espacio de co-working para crear relaciones de trabajo e interacción entre los usuarios. A partir de ahí surgieron varias ideas para representarlo.

1
Conceptos para Hospicio

Bocetaje

En este punto del proceso combinamos tanto la conceptualización como la representación iconográfica y además utilizamos a la marca como elemento principal. Por ejemplo, si existe un eslogan, podemos considerar incluirlo o no en el logo. También hay que tomar en cuenta la tipografía y el conjunto de elementos gráficos que acompañarán esta identidad.

Nos gusta empezar aterrizando las ideas en papel, esto agiliza el proceso de bocetaje. Después lo llevamos a digital, ya con una estructura un poco más definida.

2
Bocetaje en papel
2-6
Origen y evolución de los elementos
Digitalización, aquí optamos por hacer modificaciones a la tipografía para mantener el mismo concepto.
Digitalización, aquí optamos por hacer modificaciones a la tipografía para mantener la misma línea de diseño y concepto.

Jugamos con el color

Hasta el momento todo el proceso está en blanco y negro, llegó la hora de determinar el color tomando en cuenta la emoción y sensación que queremos transmitir. Elegimos por lo menos dos opciones posibles que generen armonía con todos los elementos.

Pruebas de color
Pruebas de color
4
Composición conceptual del logotipo

Pruebas de usabilidad

La última etapa consiste en saber cómo se verá tu identidad gráfica ante el ojo del cliente. Tomamos como referencia todas las aplicaciones posibles como tarjetas de presentación, empaques, hojas membretadas, publicidad, etc. y también los distintos tamaños en los que se puede presentar. Probamos con los colores en positivo y en negativo para asegurarnos de que la opción elegida es la mejor.

Aplicaciones
Aplicaciones

Una vez que elegimos la opción final, se comienza a desarrollar el manual de uso de la imagen en sus distintas aplicaciones. En otro artículo te compartiremos los elementos que este manual debe incluir para terminar de aterrizar tu identidad gráfica.

Categorías
Email Marketing

Correos electrónicos con GIFs, Pros y Contras.

Una buena manera de hacer que la información del correo electrónico sea más atractiva es usar animaciones. Estas pueden usarse para hacer énfasis a ciertos elementos, para mostrar diferentes vistas de un mismo producto, entre otras.

Una de las técnicas es usar GIFs animados, este tipo de archivos muestran imágenes en secuencia, similar a un video, pero sin audio y pueden contener mucha información visual. Se pueden hacer GIFs para mostrar un producto, parte de un video, títulos con movimiento y más, no existe límite.

j_jill

Pero no todo es miel sobre hojuelas ya que esta práctica tiene sus dos aristas, y desconocer sus repercusiones técnicas nos puede causar muchos problemas de visibilidad en nuestras campañas de email.

A continuación se señalan algunas ventajas y desventajas, esperando que esta información les ayude a tomar una mejor decisión en base a sus objetivos para su próxima campaña de email:

Ventajas

  1. Son visualmente más atractivos.
  2. Se puede mostrar mucha información en un mismo espacio.
  3. No existe límite de los contenidos a mostrar dentro del GIF.
  4. No es necesario tener instalado o descargar un plugin para ver este tipo de archivos.
  5. Permite transparencias.

Desventajas

  1. Una imagen GIF puede llegar a ser mucho mas pesada que un JPG, esto debido a que la información que guarda es más extensa.
  2. No todos los clientes de correo soportan GIFs animados, esto es un grave problema a causa de que algunos clientes de correo solo mostrarán el primer frame de animación, algo a considerar en la planeación.
  3. El tiempo de desarrollo es un poco más largo, puesto que se tienen que planear las animaciones y su función.
  4. La paleta de colores es más limitada, un GIF solo permite 256 colores.
  5. La velocidad del internet es algo a considerar, si la conexión es muy lenta la animación puede tardar en iniciar.

En conclusión, es muy recomendable usar este tipo de elementos animados, siempre y cuando tengamos claro el objetivo del diseño del email y estemos conscientes de los pros y contras que nos ofrece un GIF animado, ya que habrá ocasiones en que estos elementos pueden estar de más.

Cabe comentar que existen maneras alternativas de generar emails con animación, una de ellas es con base en CSS, pero esto lo veremos en otro post.

Categorías
Comunicación y estratégia

El SMS y sus beneficios en tu comunicación

¿Estás considerando integrar los mensajes de SMS dentro de tu estrategia de marketing?

El Marketing por SMS tiene grandes ventajas, también tiene sus desventajas.

La principal ventaja es su nivel de apertura, más del 90% de las personas que reciben un mensaje SMS lo abren.

La principal desventaja es que si tu mensaje y tu empresa no son relevantes para quién lo recibe, se puede considerar un mensaje intrusivo.

Pero déjanos platicarte más de las ventajas que ofrece:
  1. Entrega Inmediata. EL SMS llega de manera inmediata a el teléfono del suscriptor o cliente.
  2. Plataforma Flexible. Envía mensajes transacciones, sementados, con Url’s.
  3. Altas Tasas de Apertura. Comparado con el email marketing, SMS tiene una impresionante tasa de apertura. Prácticamente cualquier mensaje SMS es abierto y leído. Cuando un suscriptor escucha su teléfono o lo siente vibrar casi siempre revisan.
  4. Alta Tasa de Conversión. Mediante los mensajes SMS existe un alto nivel de acciones de los suscriptores.
  5. Confiable. Los envíos de mensajes de SMS no batallan con el buzón de Spam u otro tipo de filtros. Es la conexión más directa que se puede tener en una campaña de comunicación.
  6. Mensajes Cortos. Los 160 caracteres que permiten los SMS te ayudan a hacer mensajes más directos. Puedes incluso configurar mensajes de dos vías para comunicación de ida y vuelta.
  7. Los SMS son Cool. Un mensaje SMS bien dirigido y en el momento indicado puede ser de gran ayuda y una pieza fundamental de comunicación.
  8. Potencial de Mercado Ilimitado. ¿Tienes idea de la cantidad de teléfonos móviles existentes? Cada día más. En México se estima que por lo menos 1 de cada 2 personas tenga teléfono móvil, pero la cifra crece día con día. Bien utilizados, los mensajes SMS son una gran manera de llegar a tu mercado.
  9. Verde. El verde esta de moda. Comunica toda una estrategia de manera inmediata y sin invertir en tiempo, uso de transporte y impresiones.

* Tomado del artículo “Top 10 Benefits of SMS Marketing” publicado por Simply Cast https://www.simplycast.com/blog/top-10-benefits-sms-marketing/

Categorías
Diseño web Email Marketing

Gmail y sus nuevas mejoras para el diseño de emails

La manera tradicional de diseñar nuestros emails cambiará, Gmail ha anunciado que sus clientes de correo ahora tendrán soporte de «CSS embedded».

css

¿Qué significa esto y cómo nos beneficia?

email
Históricamente, Gmail ha sido uno de los clientes de correo que no contaba con soporte de CSS incorporado en dentro de la etiqueta HEAD, lo que no permitía Emails responsivos debido a que las instrucciones Media Queries se colocan ahí. Ahora con esta actualización no solo podremos tener emails responsivos en Gmail e Inbox, sino que podremos diseñar correos con etiquetas DIVs y hacer uso de IDs para referenciar a nuestras clases CSS.

Esto es una muy buena noticia para los programadores; sin embargo aun estamos lejos de tener un email estándar para todos los clientes de correo ya que aun tendremos que usar TABLAS para Outlook.

No más Inline CSS

coding
Otro beneficio de esta actualización es que ya podremos omitir el CSS inline, colocando todas nuestras clases directamente en la etiqueta HEAD, haciendo que nuestro código sea más limpio y reutilizable, ahorrándonos mucho tiempo en la programación.

El soporte para Backgrounds es una realidad

background
Gmail ha añadido soporte para las propiedades background-clip, background-position y background-size, con ello tendremos backgrounds escalables y responsivos.


En general, estas actualizaciones nos proporcionaran nuevas y mejores maneras de planear nuestros emails, esperemos que Outlook y Yahoo sigan el ejemplo y pronto nos sorprendan con mejoras que nos permitan pronto diseñar un email estándar para todo tipo de cliente de correo.

Categorías
Comunicación y estratégia Email Marketing

Diseño de Email 6 – Comentarios finales

¡Bienvenidos a la última parte de nuestra guía para crear newsletters 2016!
Anteriormente revisamos detalles acerca de la maquetación y estilos de tu newsletter, así como algunos consejos para que la programación en las imágenes y links de tu newsletter sea una base sólida para tu campaña.También revisamos brevemente los consejos para que tus comunicados causen el mismo impacto en una computadora de escritorio que en un dispositivo móvil, lo cual es muy útil en estos días donde la cantidad de dispositivos a los que llegaría tu newsletter es incontable y diversa en las tecnologías utilizadas.Ahora revisaremos los últimos consejos para realizar una campaña exitosa, pero recuerda que debes de conocer poco a poco a tus usuarios, sus gustos, sus horarios y sus reacciones para que obtengas la guía desde ellos mismos.

• Versión Web

Crea una versión en línea de tu newsletter para quienes no lo vean correctamente, esto le permitirá al usuario tener una segunda oportunidad de verlo, sin necesidad de hacer muchos clicks o ajustes a sus configuraciones.

• Atributos “alt” y “title”

Son muy útiles para cuando los usuarios reciben los newsletters y las imágenes no se muestran.

• Evita enviar una sola imagen

Al enviar una sola imagen dentro del cuerpo del correo, corremos el riesgo de parecer spam para los servidores de correo.
Otro riesgo es que el comunicado no tenga el impacto esperado, ya que si el usuario tiene bloqueadas las imágenes, lo más probable es que ignore tu mensaje. Es preferible utilizar una tabla donde insertes un poco de texto de introducción, o las ligas a tu sitio y redes sociales, además de la imagen.

• Crea un diseño sencillo y directo

No es necesario tener un micrositio lleno de botones, links y banners dentro de la bandeja de correo de tus contactos.
Recuerda que tu newsletter debe tener una intención clara y precisa, por lo que, entre menos distractores le des al usuario, obtendrás mejores resultados.

• Evita crear newsletters horizontales

Los usuarios seguramente terminarán sin leerlos. Estamos acostumbrados a leer de manera vertical, como en una hoja de un libro, por lo que si realizas este cambio, lo más probable es que los usuarios se confundan con la navegación y por lo tanto ignoren tu comunicado.

• Pon a la mano la opción de “darse de baja”

Debes dejar esta opción de manera clara, si bien no es necesario que llame la atención, tampoco debe de estar oculto a tus usuarios, recuerda que solo te interesa llegar a quien le interese tu información, además, el tener esta opción tan oculta, puede ser un motivo para que te marquen como spam.

• Pon a la mano la opción de “darse de baja”

Debes dejar esta opción de manera clara, si bien no es necesario que llame la atención, tampoco debe de estar oculto a tus usuarios, recuerda que solo te interesa llegar a quien le interese tu información, además, el tener esta opción tan oculta, puede ser un motivo para que te marquen como spam.

• Revisa la personalización del mensaje

Para tus usuarios, recibir un email que contenga su nombre o el nombre de su empresa, es más atractivo que un email genérico, recuerda que el trato personalizado hace la diferencia.

• Realiza las pruebas necesarias

Antes de enviar tu campaña a todos tus contactos, haz pruebas directamente en tu bandeja de correo, recuerda que un pequeño error puede cambiar la intención de tu campaña.

• Aprende de tus estadísticas

Descubre el comportamiento de tus usuarios analizando todos los datos que se arrojan de tu envío, conoce tu sección de reportes y estadísticas y te ayudará a definir parámetros para ir mejorando tus campañas con cada envío.


Aquí te dejamos el resumen de nuestra Guía para Newsletters 2016:

  1. Diagramación
  2. Estilos CSS
  3. Imágenes
  4. Los vínculos (links)
  5. Newsletters para móviles
Categorías
Comunicación y estratégia Email Marketing

Diseño de Email 5- Newsletters para móviles

Según el último estudio (2016) hecho por iab.Mexico, menciona que en 2015, 68 millones de mexicanos son internautas, (57% de la población) y el 68% de ese segmento utiliza un dispositivo móvil para conectarse a internet y lo hacen en un promedio de 6hrs al día, 24 minutos más que en 2014.
Por lo tanto es importante conocer las posibilidades que tenemos para que nuestros newsletters lleguen de manera óptima a usuarios tanto de dispositivos de escritorio, como móviles. Ya que los requerimientos de cada uno son distintos, por ejemplo, en un móvil tienes una conexión a internet más restringida, una pantalla más pequeña, un cursor (el dedo del usuario) más grande, entre otras cosas; mientras que en una computadora de escritorio tienes menos limitaciones tanto de espacio como de tamaño, imágenes y contenido.
Con esta guía aprenderás las bases para crear newsletters que puedan ser útiles y agradables para el usuario tanto en dispositivos de escritorio, como en dispositivos móviles y así asegurarte que reciban la información correcta, sin importar su dispositivo de acceso.

Esta guía es para usuarios de nivel: intermedio y superior

• Aprende sobre los «media queries»

Los «media queries» son filtros en css que nos permiten crear o modificar estilos de objetos que estén dentro de nuestro HTML dependiendo del tamaño o resolución de la pantalla en la que se esté visualizando.
Es importante recalcar que estos «media queries» deben de estar dentro de las etiquetas de «<style>» en el «<head>» del HTML, por lo que, en las aplicaciones móviles de correo de algunos clientes como Gmail o Hotmail, aún no funciona completamente la programación con «media queries», ya que, como revisamos anteriormente, estos eliminan todo el código que está dentro de la etiqueta «<head>» de nuestro HTML.
A grandes rasgos, un «media queries» funciona de la siguiente manera::
<style type="text/css">
 @media only screen and (max-device-width: 450px) {
 /* Aquí se muestran los estilos CSS que se activarán en
 dispositivos con pantallas de máximo 450px */
 }
 /* Y aquí el CSS normal, pero recuerda que este CSS
 deberá incluirse también en los tags de style de cada objeto*/
 </style>
Por lo tanto, para que tu newsletter tenga estas posibilidades, tendrás que utilizar clases en tus objetos de HTML. Para conocer más sobre los «media queries», te recomendamos leer este enlace

• Crea links y botones «clickeables»

Recuerda que tu dedo es mucho más grande que el cursor de tu computadora de escritorio o laptop.
Por lo tanto, a través de los «media queries» dale a los links o CTA (call to action) un «padding» de al menos 15px, esto hará el espacio más grande y por lo tanto la experiencia será más amigable para el usuario.

• Considera los tamaños mínimos

Por ejemplo, un iPhone tiene la restricción de mostrar tipografías de mínimo 13px, por lo tanto si creas un texto con un tamaño inferior, en un iPhone se crecerá al mínimo, es decir 13px, corriendo el riesgo de afectar tu diseño.

• Las pantallas son diferentes

El diseño para dispositivos móviles tiene un espacio para mostrarse mucho más pequeño (esto es, la pantalla de una tablet o un smartphone, con sus variantes en tamaño y proporción), considera aproximadamente 320px de ancho mínimo.

• Oculta lo que esté de más

Recuerda que el usuario de un smartphone o dispositivo móvil tiene menos tiempo y hasta cierto punto menos atención en su dispositivo (puede ser que esté caminando, vaya en el tráfico o simplemente dando una «revisada rápida» a sus emails) por lo tanto hay cosas como imágenes o textos que puedes ocultar, para que el mensaje llegue a él de manera más clara y concisa.
Para esto, en tus «media queries» utiliza un «display:none;» en los objetos que desees ocultar (como renglones de una tabla o imágenes muy grandes).

• Dale opciones a los usuarios

Seguramente algunos usuarios con planes de datos limitados no querrán descargar las imágenes de tu comunicado, por lo tanto puedes ofrecer un poco de información de referencia en ellas utilizando los atributos «title» y «alt» dentro de las etiquetas de tus imágenes, como lo vimos en la guía para imágenes.

• Se más conciso en tu línea de asunto

Plantea correctamente tu línea de asunto, ya que en los teléfonos móviles solo se mostrarán máximo 5 palabras, considera incluir lo más importante en no más de 50 caracteres.

• Crea emails ligeros

Con planes de datos tan restrictivos, redes de internet para móviles de baja velocidad y los procesadores menos potentes que tienen los dispositivos móviles, no diseñes un newsletter que convierta en una tortura la espera.
Te recomendamos que tu newsletter no pese más de 80Kb sumando código e imágenes.

• Haz pruebas, muchas pruebas…

Nuestra recomendación más importante, prueba tus resultados, envía a tu propio móvil los diseños que hayas hecho con estas recomendaciones y verifica que todo aparezca de manera correcta y amigable. Existen varias herramientas que te pueden ayudar en este proceso, una de ellas es Litmus en la cual podrás visualizar tu boletín en diversos clientes de correo y diversas medidas de dispositivos.
Como puedes ver, convertir tu newsletter en una versión amigable con dispositivos móviles requiere un poco más de dedicación que uno normal, por lo que es importante valorar tus bases de datos a partir de tus estadísticas, revisando qué tipo de dispositivo es el más popular entre tus usuarios.

Aquí te dejamos algunos enlaces que te pueden interesar:
Categorías
Comunicación y estratégia Email Marketing

Diseño Email 4- Los vínculos

Para continuar con nuestra serie de recomendaciones para tus newsletters, pasaremos a un punto muy importante en tus comunicados: los vínculos o enlaces.

Cuando creamos una campaña, el objetivo principal siempre es hacerle llegar a nuestros usuarios información, la cual puede estar dentro del mismo comunicado o algunas veces en otras herramientas de comunicación, como una landing page, nuestro blog, redes sociales, entre otros; así que para llevarlos a esa información, necesitamos incluir enlaces (o links) dentro de nuestro comunicado.A continuación te presentamos algunas recomendaciones para que utilices estos enlaces de manera correcta y puedas encausar a tus usuarios a la información que tienes preparada para ellos.

Al finalizar ésta guía crearás enlaces de manera más adecuada para tus usuarios y su uso correcto en newsletters.
Esta guía es para usuarios de nivel: básico e intermedio
Para crear un vínculo en HTML se utiliza la etiqueta «<a>» la cual indica al navegador que el elemento (texto o imagen) que está dentro de ella, contiene un vínculo a cierta URL, para conocer más sobre ésta etiqueta, visita aquí.

• Vínculos completos

Para evitar errores en los enlaces, es necesario que en el atributo «href» de tu etiqueta de enlace «<a>» escribas el vínculo completo al que quieres dirigir a tus usuarios, esto incluye lo conocido como «protocolo» el cual puede ser http, https, ftp, entre otros.
Por ejemplo:

Incorrecto:

<a href=”www.google.com”>enlace a google</a>Incorrecto

Correcto:

<a href=”http://www.google.com”>enlace a google</a>Correcto
Para conocer más sobre los protocolos de transferencia, te recomendamos leer este enlace

• Estilo y colores en los enlaces

Para que un texto tenga un hipervínculo y no se vea siempre azul, es necesario utilizar el «style» dentro de la etiqueta «<a>» por ejemplo al utilizar:

<a href=”http://www.google.com.mx” style=”color: #FF3366; text-decoraton:underline;»>enlace a google</a>
Obtendremos un enlace que dirá «enlace a google» pero que será rosa y estará subrayado. Para darle diseño y estilo a tus enlaces, te recomendamos leer la parte 2 de nuestra guía de diseño, que trata sobre Estilos CSS.

• Abrir enlaces en ventana nueva

En la etiqueta «<a>» es necesario incluir siempre el atributo «target» con la propiedad «_blank» esto le indicará al navegador que cuando el usuario de click en ese link, lo lleve a una ventana o pestaña nueva, mientras que el newsletter siga activo en la pestaña que estaba visitando. La mayoría de los clientes de correo ya lo hacen por default, pero si alguien está viendo la versión en línea, no queremos que deje tu newsletter por pasar a alguno de los links que éste contiene:

<a href=”http://www.google.com.mx” style=”color: #FF3366; text-decoraton:underline;» target=»_blank» >enlace a google</a>

• Utilizar el atributo «title»

También es recomendable que dentro de la etiqueta «<a>» utilices el atributo «title» que es utilizado para darle al usuario información adicional sobre a donde se dirige por medio de ese enlace, además, para los clientes de correo esto es una buena práctica ya que puede evitar que tu newsletter sea catalogado como spam.

Unas cuantas palabras que complementen la información del link, serán suficientes:

<a href=”http://www.google.com.mx” style=”color: #FF3366; text-decoraton:underline;» target=»_blank» title=»Este link se abrirá en una nueva ventana» >enlace a google</a>
Espera nuestra siguiente edición, donde hablaremos de los newsletters pensando para dispositivos móviles, seguiremos actualizándote en esta lista de buenas prácticas para ayudarte a crear campañas más efectivas.
Categorías
Comunicación y estratégia Email Marketing

Diseño de Email 3- Imágenes

Como en la mayoría de las aplicaciones publicitarias, que un newsletter sea atractivo puede depender mucho de las imágenes que acompañan al contenido.

Actualmente, por cuestiones de seguridad, muchos de los clientes de correo cuentan con múltiples restricciones para la correcta visualización de imágenes dentro de los emails, muchas veces el usuario tiene que permitir que se vean, o indicar que desea verlos, pero para usuarios de email menos familiarizados con la opción podrían pasarla por alto, por lo que hay que tratar de que, independientemente de la configuración del usuario, podamos hacerles llegar la información de manera adecuada, siguiendo los tips que te presentaremos a continuación.

Al finalizar ésta guía podrás optimizar la visualización de las imágenes en los diferentes servidores de correo y tener opciones para las diferentes restricciones que éstos tienen para las imágenes.Esta guía es para usuarios de nivel: básico e intermedio

• Animaciones

Para enviar imágenes animadas el único formato soportado por los servidores de correos es el «.gif», (aunque en Outlook desde la versión 2007 no se verá la animación, sino que se mostrará el primer frame de esta), ya que Outlook detiene los archivos con formato «.gif», por seguridad, así que al insertar una imagen animada en ese formato, trata de que el primer cuadro o frame de la animación tenga el contenido suficiente para que el usuario sepa de que se trata, por si alguno de tus usuarios utiliza Outlook.
Ejemplo de animación en newsletters

• Imágenes para Retina

La optimización de las imágenes para monitores high DPI o retina es algo relativamente nuevo, estos monitores tienen el doble de pixeles que su contraparte, por ello, para evitar que nuestras imágenes se vean borrosas en estos dispositivos necesitamos crear nuestras imágenes al doble de tamaño del que las necesitamos pero en el código de inserción de imagen indicar el tamaño correcto, ejem:

Para un boletín necesitamos un cabezal con el logo de 600x150px; pero para solucionar la cuestión del monitor Retina y evitar que se vea borroso, lo exportaremos a 1200x300px pero colocaremos las dimensiones necesarias en la etiqueta IMG:

<img alt="Logo" src="logo@2x.png" width="600" height="150" style="display: block; border: 0px;" border="0">
Esto puede hacer que tus imágenes y boletín en general incremente su peso, por lo que tienes 2 opciones para optimizar tus imágenes:
  1. Para la primera opción, necesitas crear tus imágenes cuatro veces el tamaño que las necesites, luego en Photoshop exporta para web y selecciona la calidad más baja al momento de guardar.
  2. La segunda manera es mantener tus imágenes al doble de tamaño del que las necesitas y usar alguna aplicación para darles compresión como JPEGMini, Tinypng, Compressor.

• Optimizar las imágenes

La recomendación siempre es que tus imágenes sean lo más ligeras posibles, entre menos kilobytes (Kb) mejor. Para esto, si utilizas Photoshop o Fireworks al optimizar una imagen selecciona máximo una calidad del 75% para imágenes de tamaño regular (de 600px * 600px por ejemplo) o hasta el 65% en imágenes muy grandes.

Cuando la imagen es algo muy importante para tu comunicado, podrías utilizar menos optimización, así su calidad mejorará, pero ten en cuenta que no es recomendable enviar imágenes con un peso superior a 250kb, si usas muchas imágenes en tu comunicado, el peso combinado de todas ellas no debe exceder los 300kb.

Si no utilizas Photoshop, puedes usar herramientas en linea como tinypng o webresizer para reducir el tamaño de tus imágenes.

• Atributos “alt” y “title”

Son muy útiles para cuando los usuarios reciben los newsletters y no muestran las imágenes a la primera, sino que es necesario descargarlas, pero si alguien no quiere/puede descargarlas, utilizando los atributos «alt» y «title» podremos darle una referencia de lo que se trata la imagen.
También puedes combinar los estilos CSS con el contenido del atributo «alt» de la imagen, creando un texto alternativo con un poco más de estilo, para lograrlo, únicamente añade el atributo «style» dentro de la etiqueta <img> con el formato que deseas.
new-netflix-mailing

• Etiquetas para poner imágenes de fondo

Muchas veces, para hacer más rico el contenido o añadir textura y profundidad, queremos utilizar un pattern o una imagen de fondo en alguna de las celdas, o en todo el comunicado, pero cuando hacemos las pruebas únicamente se ve en algunos servidores de correo, o por ejemplo un software instalado en nuestro equipo (Outlook o Mail en sus versiones más antiguas) no los muestra correctamente.
Ejemplo de imágenes de fondo en newslettersPara solucionarlo, en la etiqueta <td> o <table> que necesitamos que tenga el fondo vamos a utilizar el atributo de «background», donde insertaremos la imagen de fondo y, con el afán de prevenir, también utilizaremos la propiedad de css «background» dentro del atributo style que pondremos dentro de <td>, <table> o incluso aplica para ponerlo en el fondo general del archivo, en la etiqueta <body>. En ambas opciones pon lo que sea necesario para que se repita o no, quede fijo etc… con las propiedades css de posición, y siempre utiliza un color de fondo (para prevenir que no se vea blanco u otro color si el servidor de correo no está mostrando la imagen).

Ejemplo:

<td style=”background:url(http://www.dominio.com/fondo.jpg) top center repeat #f9fdfa;” background=” http://www.dominio.com/fondo.jpg” bgcolor=”#f9fdfa” valign=”top” width=”105“> Correcto

• Rutas absolutas de imágenes

Incorrecto:

<img src=”miimagen.jpg” width=”100” height=”100” style=”display:block;” /> Incorrecto

Correcto:

<img src=”http://www.dominio.com/ubicacion/miimagen.jpg” width=”100” height=”100” style=”display:block;” />Correcto

• Imágenes sin espacios en blanco

Para las imágenes, es muy importante siempre utilizar, dentro del atributo «style» , la propiedad «display» con el parámetro «block» . Ya que Gmail y Hotmail siempre añaden un margen alrededor de las imágenes, también es importante definir los márgenes y el padding en ceros. Así podremos utilizar imágenes una junto a otra y que no se vea una separación:

• Crear carpetas para las imágenes

Es importante crear carpetas para almacenar las imágenes de cada newsletter, a fin de no crear conflictos con los nombres de las imágenes, por ejemplo si subimos el newsletter A, que tiene una imagen que se llama «top.jpg» con cierto diseño, y después subimos el newsletter B, con una imagen del mismo nombre «top.jpg» pero con otro diseño y en la misma ubicación, la imagen del newsletter A, será reemplazada con la del último y se perderá.

• Newsletters hechos solo con imágenes

Para envíos de promoción o novedades, normalmente se utilizan newsletters basados casi en su totalidad en imágenes.
Las empresas que desarrollan campañas muy gráficas prefieren utilizar este tipo de envíos, el inconveniente es que cuando el usuario tiene desactivadas las imágenes, el newsletter se verá en secciones o cajas vacías, por lo que es muy importante añadir una liga al newsletter en línea.

Newsletter de imágenes

Sin embargo la proporción ideal es un 80% texto y un 20% imágenes, para tener un tamaño máximo recomendado de 80kb en tu boletín.


Una de las claves en Email Marketing, es no centrar el diseño de la pieza en las imágenes, ya que muchos agentes no permiten la visualización de ellas por default. A esto hay que sumarle que si estas son demasiado pesadas, tardarán más tiempo en descargarse y, ¿sabes qué? solo tienes 4 segundos para impactar a tu usuario antes de que abandone tu Email.

Seguiremos actualizándote en esta lista de buenas prácticas para que tus campañas sean cada vez más efectivas.

A continuación algunos links que seguramente te servirán para mejorar el uso de los estilos CSS de tus newsletters: