Guía informativa breve pero que debes leer antes de ejecutar tu envío.


¿Por qué es importante?

En los últimos años hemos visto sorprendentes avances en tecnología. Nuestros teléfonos celulares y las tabletas ahora son tan veloces y sofisticados como una computadora, lo que significa que más personas están recibiendo y leyendo sus correos desde algún dispositivo móvil. Esto presenta un nuevo e interesante desafío que los prestadores de servicios web de todo el mundo deben considerar. El mundo está evolucionando, y la forma de hacer email-marketing tiene que evolucionar con él.


Pero antes de considerar hacer cualquier tipo de movimiento, primero debes conocer a tu público y sus limitaciones. Esto lo puedes verificar mediante una prueba con nuestra nueva herramienta Litmus (contáctanos para saber cómo). Si tu audiencia se compone en su mayoría de usuarios de computadoras, el camino del diseño responsivo puede no ser una opción a considerar. Sin embargo, si tu audiencia es en su mayoría dispositivos móviles, es el momento de pensar en un diseño efectivo para mostrar tu mensaje.


¿Cuáles son las opciones?


Optimización para móvil

La optimización para dispositivos móviles es la forma más sencilla de asegurarse de que tus correos electrónicos se ve bien en la mayoría de las pantallas de diferentes dispositivos. Es una plantilla básica, diseñada pensando en la optimización de dispositivos de escritorio y móviles. Generalmente está construida con un diseño de una columna y comprendida entre 380 y 600 píxeles de ancho. Los tamaños de fuente son típicamente 14 píxeles o mayor, y los enlaces están diseñados para ser grandes para fácilmente poder hacer clic. La idea es que el correo electrónico se escale hasta el tamaño de la pantalla de los dispositivos móviles (como el iPhone) sin reducir todos los elementos del diseño hasta el punto de ilegibilidad.


Diseños Fluidos

Los diseños fluidos se construyen utilizando porcentajes de ancho. Esto permite que el contenido del correo electrónico pueda llenar la ventana de la bandeja de entrada sin reducir los tamaños y/o botones de texto.


Diseño Responsivo

Aquí es donde se pone un poco complicado. Los diseños Responsivos se construyen utilizando @media dentro de una etiqueta <style> en la parte superior de tu HTML. Estos están llenos de nuevas instrucciones a seguir cuando un correo electrónico se abre en un dispositivo con un tamaño de pantalla más pequeña (indicado por un max-width). Debido a esto, el contenido de tu correo electrónico puede cambiar en función de si se ha abierto en una computadora de escritorio o un dispositivo móvil.


Por ejemplo:


<style>

 @media screen and (max-width:400px){

 *[class].width100 {width: 100% !important;}

*[class].hide {display:none !important;}

 *[class].block {display:block !important; width: 100% !important;}

*[class].width20 {width:20px !important;}

}

</style>


Diseño adaptativo

Los diseños adaptativos combinan elementos fluidos y responsivos para cubrir todas las posibilidades.


Una lista de comprobación

Con nuestra nueva interfaz de usuario, hemos hecho que sea más fácil para nuestros usuarios utilizar el diseño responsivo. También puedes subir tus propias plantillas y hojas de estilo, o podemos diseñar una plantilla para ti. Sin embargo, mientras que ahora es mas sencillo para ti y tu equipo editar y enviar mensajes de correos electrónicos responsivos, hay detalles adicionales que se deben comprobar en el diseño antes de ejecutar el envío:


• ¿Tiene todo lo que necesita un identificador de clase, cuenta con uno?

o Para aclarar, un identificador de clase instruye una sección de código para hacer una determinada acción, está escrita en la etiqueta de estilo en la parte superior de tu HTML.

• *[class]. width100 {width:100% !important;}

• <img class=”width100” src=”resp-dsgn.jpg”>


o Esto afectaría cualquier cosa que quieras visualizar de manera diferente en un dispositivo móvil: cambios de fuente, cambiar el tamaño de imagen, apilado o reorganización de tablas, etc. Un identificador de clase si falta puede desconfigurar todo el correo electrónico y causar una serie de problemas de rendimiento.


o Es muy importante prestar atención a las imágenes: tienes que asegurarse de que tus imagen están configuradas para reducir su tamaño o de que su ancho de ajuste es un porcentaje. De lo contrario, la imagen retendrá su tamaño de escritorio, deteniendo la adaptación a móvil del resto tu correo electrónico.


• Al asignar tus clases, asegúrate de siempre empezar con una letra, los títulos de clases que comienzan con números puede que se corrompan (es decir, ir con width100 en lugar de 100width).


• Asegúrate de que tu código esta ubicado correctamente.

1. DocType

2. Meta tags

3. Embedded style sheet

4. Body 

5. Preheader


• Prueba, prueba y vuelve a probar.


Y para que lo sepas, hay algunos dispositivos y clientes de correo electrónico que son simplemente incapaces de interpretar el estilo responsivo. No eres tú, son ellos. Esto incluye todas las Blackberries y la aplicación de Gmail en iOS y Android.


Servicios completos de diseño

Ten en cuenta que el diseño responsivo requiere de conocimiento de programación y que puede ser un poco complicado para aquellos que sólo están familiarizados con WYSIWYG (lo que ves es lo que obtienes). Si ése es tu caso, nosotros podemos ayudarte. Ofrecemos servicios de diseño completos, donde nuestro equipo de diseño te proporcionara los códigos y no tendrán que preocuparte de nada. Contáctanos hoy para aprender más.