Blog de Fidelizador.com

Tips y artículos para optimizar tu Email Marketing.

Guía sencilla para email responsive

 

¿Qué es?

El diseño responsivo es un diseño que responde al tamaño del dispositivo desde el que se está visualizando el email, adaptando las dimensiones del contenido y mostrando los elementos de una forma ordenada y optimizada sea cual sea el soporte.
La tendencia en el mundo de las páginas web y correos electrónicos es que el usuario cada vez más acceda desde dispositivos móviles como teléfonos o tablets.

Desde que esta tendencia se consolidó en el “mundo web”, el equipo de Fidelizador ha incorporado las buenas prácticas del diseño responsivo en algunas de nuestras plantillas actualmente disponibles en nuestra plataforma, de forma que nuestros clientes puedan tener la oportunidad de usarlas como estimen conveniente.

Beneficios

Antes de comenzar quiero explicarles cuales son las ventajas de empezar a modelar sus campañas de correo “Responsive”:

Un solo diseño:

Se reducen costes de desarrollo. Teniendo un solo diseño optimizado para todos los dispositivos en vez de varios diseños independientes, uno para cada dispositivo.

Mejora en las aperturas:

Baja el rebote de usuarios. Una buena parte de los usuarios que ven un nuevo correo al entrar desde un dispositivo móvil es porque no pueden visualizar correctamente el contenido. Con el diseño responsivo, el usuario disfrutará siempre de una buena experiencia de navegación.

Efectividad:

Al tener un correo que se ve de forma optimizada para móviles y tablets, el porcentaje de usuarios que desea adquirir el producto publicitado es mucho mayor.

Media Queries

Primero que todo deben saber que los emails con responsive hacen uso de las media queries de CSS, que son una serie de reglas condicionales que se basan en la resolución de la pantalla del dispositivo para aplicar unas reglas de estilos u otras. Mediante el uso de las media queries conseguimos adaptar el diseño de nuestros emails a cualquier dispositivo.

Hubo un tiempo en el que las ‘media queries’ eran suficientes para conseguir que emails responsive funcionasen en las aplicaciones de correo de iOS y Android, ambos soportaban ‘media queries’.

Desde entonces, hubo una proliferación de aplicaciones de correo creadas tanto para iOS como para Android, con diversos grados de soporte para los métodos de desarrollo de los emails responsives.

La más notable es la última actualización de la app de Gmail para Android, la cual es el doble de popular que la aplicación de correo por defecto para los usuarios de Android (que ahora abarca el 11% de todas las aperturas). Nunca soportó ‘media queries’, y sigue sin hacerlo, sin embargo ahora escala tus emails comprimiendo el tamaño de la tabla exterior para encajarla al área visible de la pantalla. Es difícil de controlar y, cuando todo tu correo electrónico se basa en ‘media queries’ para visualizarse correctamente en móviles, genera algunos resultados muy desagradables.

Los tamaños de corte que se suelen tomar como mínimo suelen ser 480px, 640px y 1024px. Siendo 480px el corte para móviles en vertical, 640px el corte para tablets en vertical y móviles en panorámico y 1024px el corte para escritorio y tablets en panorámico. De modo que tendríamos las siguientes reglas de CSS:

<style type="text/css">
@media screen and (max-width:1024px) {
// ESTILOS DE TABLETS PANORÁMICO
}
@media screen and (max-width:640px) {
// ESTILOS DE TABLETS VERTICAL Y MÓVIL PANORÁMICO
}
@media screen and (max-width:480px) {
// ESTILOS DE MÓVIL VERTICAL
}
</style>

 

Lamentablemente esta tecnología de codificación llamada Media Queries no es reproducible por algunos dispositivos, acá te dejamos una lista:

Cliente Soporte Media Queries
Amazon Kindle Fire Si
Amazon Kindle Fire HD Si
Android 2.1 Eclair No
Android 2.2+ Si
Apple iPhone Si
Apple iPad Si
Apple iPod Touch Si
BlackBerry OS 5 No
BlackBerry OS 6+ Si
BlackBerry Playbook Si
Microsoft Windows Mobile 6.1 No
Microsoft Windows Phone 7 No
Microsoft Windows Phone 7.5 Si
Microsoft Windows Phone 8 No
Microsoft Surface No
Palm Web OS 4.5 Si
Samsung Galaxy S3+ No

Fuente: Campaignmonitor

Estructura ‘Fluid’

Las buenas noticias son que tú puedes diseñar y construir un email que se vaya a ver genial en todas las aplicaciones de correo, incluyendo aquellas que no soporten ‘media queries’. Puedes hacer ésto utilizando una estructura ‘Fluid’.

Hay, sin embargo, unos cuantos compromisos de diseño que debes realizar. Aquellas geniales plantillas con el mismo número de columnas que se apilan en una única columna no funcionan demasiado bien usando este método. Si puedes aprender a vivir sin ellas, hay unos cuantos diseños muy funcionales que pueden funcionar extremadamente bien.

Ésto es lo que crearemos hoy:

ss1

Comenzando

Empecemos con nuestra plantilla vacía

	
		
		
		

<style type="text/css">
		/* Estilos para clientes especificos */
			 #outlook a {padding:0;} /* Fuerza al cliente de Outlook a generar un boton para ver en la web de forma nativa. */
			 body{width:100% !important;margin: 0 !important;padding: 0 !important;} .ReadMsgBody{width:100%; !important} .ExternalClass{width:100% !important;}  /* Fuerza a Hotmail a mostrar el email a su ancho completo */
		 
		 /* Plataformas Webkit y Windows Mobile. */
			 body{-webkit-text-size-adjust:none; -ms-text-size-adjust:none;} /* Previene a la plataforma para aplicaciones Webkit y Windows Mobile que reemplace las fuentes determinadas en los estilos. */
			img {outline:none; text-decoration:none;border:none; -ms-interpolation-mode: bicubic;}
			 a img {border:none;}
			 p {margin: 0px 0px !important;}
			 table td {border-collapse: collapse;}
			 table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }
			 #backgroundTable {margin:0; padding:0; width:100% !important; line-height: 100% !important;}
		 
		/*################################################*/
         /* Resolución 640px (iPad) */
         /*################################################*/
			 @media only screen and (max-width: 640px) {
				 a[href^="tel"], a[href^="sms"] { text-decoration: none;color: #ffffff; pointer-events: none;cursor: default;}
				 .mobile_link a[href^="tel"], .mobile_link a[href^="sms"] { text-decoration: default; color: #ffffff !important;pointer-events: auto;cursor: default;}
				 table[class=devicewidth] {width: 440px!important;text-align:center!important;}
				 table[class=devicewidthinner] {width: 440px!important;text-align:center!important;}
				 td[class="menu"]{text-align:center !important;}
			 }
         /*##############################################*/
         /* Resolución 480px (iPhone) */
         /*##############################################*/
			 @media only screen and (max-width: 480px) {
				 a[href^="tel"], a[href^="sms"] {text-decoration: none; color: #ffffff;pointer-events: none;cursor: default;}
				 .mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {text-decoration: default;color: #ffffff !important;  pointer-events: auto; cursor: default;}
				 table[class=devicewidth] {width: 280px!important;text-align:center!important;}
				 table[class=devicewidthinner] {width: 280px!important;text-align:center!important;}
				 td[class=titulo] {width: 280px!important;text-align:center!important;}
				 img[class="bigimage"]{width: 260px!important;}
				 
			 }
		</style>

 

Texto

 

 

Lo que estamos creando aquí es nuestra página básica con su header y tabla de contenido con un color de fondo aplicado.

Presta atención

Nota: Te darás cuenta de que en este tutorial pondré el CSS al principio de nuestro documento. Generalmente coloco los estilos al principio cuando voy a reutilizarlos, y los pongo todos seguidos.

Importante: Siempre que uses reglas CSS al principio del documento, debes usar una herramienta para traerlos todos seguidos al final del proceso. Debes hacer estos porque algunos clientes, como Gmail, ignorarán o quitarán tus contenidos dentro del tag style, o simplemente lo ignorarán. Puedes también usar una herramienta como Premailer para poner tu propio CSS. Si usas Premailer o una herramienta similar, recuerda quitar tus ‘media queries’ antes de procesar (queremos que permanezcan intactas), luego reinsértalas al final.

Ocultando estilos móviles de Yahoo!

Te darás cuenta de que el tag ‘body’ tiene un atributo extra. A Yahoo Mail le encanta interpretar tus ‘media queries’ como un evangelio, así que para prevenir esto, es necesario usar selectores de atributos.

Encontré que la manera más sencilla de hacer esto es sencillamente añadir un atributo arbitrario al tag ‘body’. Utilizo el sugerido ‘yahoo’ pero podría ser cualquiera que les guste:


Puedes seleccionar clases específicas usando el selector de atributo de tu tag ‘body’ en el CSS.

body[yahoo] .class {}

Dos trucos para dominar el método Fluid

Como puedes ver, nuestra tabla de ‘principal’ está especificada a un ancho del 100% y así será fluid y tomará el ancho total de la pantalla de los smartphones o tablets. También estableceremos un ancho máximo de 600px para evitar que el email ocupe la pantalla entera en dispositivos más grandes.

Ahora hay dos pequeñas peculiaridades que debemos tener en cuenta para asegurarnos de que todo se muestra según lo previsto en todos los clientes de email.

1. El soporte para Max-Width

Desafortunadamente, max-width no está soportado en todos los clientes de email. Para que nuestro email se muestre correctamente en Outlook y Lotus Notes 8 & 8.5, necesitamos envolver cada tabla en código condicional que crea una tabla con un ancho establecido para contenerlo todo dentro. Se dirige a IE (que es el motor de renderizado usado por Lotus Notes) y Microsoft Outlook.

Envolvemos nuestra tabla entre código condicional:

 

Si no puede ver este email haga click aquí

 

2. Un arreglo para Apple Mail

Paradójicamente, Apple Mail (normalmente un muy avanzado cliente de email) no soporta tampoco la propiedad max-width. Soporta sin embargo las ‘media queries’, por lo que podemos usar una que ponga el ancho de nuestra clase ‘contenido’ de la tabla, siempre que el dispositivo pueda mostrar los 600px.

<style type="text/css">
@media only screen and (min-device-width: 601px) {
.content {width: 600px !important;}
}
</style>

 

Creando la Cabecera

Ahora insertaremos la primera fila de nuestra tabla – la cabecera. Añade el siguiente estilo a la fila que acabamos de crear:

 

Título de la campaña de email
 

Conóce nuestros servicios →

 

Y después en tu CSS, añade el ‘width’ ajustable para la cabecera:

@media only screen and (max-width: 640px) { table[class=devicewidth] {width: 440px!important;text-align:center!important;}}
@media only screen and (max-width: 480px) { table[class=devicewidth] {width: 280px!important;text-align:center!important;}}

Creando la Imagen de una Columna

Esta es una fila muy simple; sólamente estableceremos la imagen para que sea el 200px del ancho de la tabla padre de 600px y nos aseguraremos que su altura se establezca automáticamente usando CSS.

	   <img style="display: block; border: none; outline: none; text-decoration: none;" src="http://png-3.findicons.com/files/icons/175/halloween_avatar/256/mike.png" alt="" width="180" height="180" border="0" />

 

En nuestro CSS:

img {outline:none; text-decoration:none;border:none; -ms-interpolation-mode: bicubic;}

Añadiendo la primera fila responsiva

Ahora vamos a crear nuestra primera fila responsiva. La forma en que haremos estos es creando dos tablas en las que ‘float’ una al lado de la otra usando la propiedad HTML ‘align’.

Columna Izquierda

Cambia nuestro título “Texto” por lo siguiente:

 

 

Creamos nuestra tabla de 200px de ancho y también añadimos otra tabla que actuará como separador de las dos columnas. Esta tabla intermedia de debajo añadirá un poco de margen cuando las dos columnas se junten en el dispositivo móvil.

Columna Derecha

Crearemos la columna derecha otra vez alineando la tabla a la derecha. Esta tabla tendrá un ancho de 330px, lo que nos deja 70px para dejar en el lado derecho. Esto es muy importante porque Outlook automáticamente apilará las tablas si no hay al menos 25px de separación entre cada fila.

 

LOREM IPSUM
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
 

Leer más

 

Hecho esto obtendremos este resultado:

ss2

Ahora crearemos la segunda columna pero esta vez lo desplegaremos de la forma contraria con el texto a la izquierda y la imagen a la derecha

 

 

 

LOREM IPSUM
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
 

Leer más

 

ss3

Optimizando los botones para móviles

En móviles, es ideal que el botón entero sea un link, y no sólo el texto, porque es mucho más difícil apuntar a un pequeño link de texto con tu dedo. Al no ser posible hacer funcionar esto en todos los clientes de escritorio (el ‘padding’ no está totalmente soportado en los tags ), es algo que añado a las versiones móviles utilizando como ayuda los mismos ‘td’ de la tabla.

   <span style="color: #ffffff; font-weight: 300;"> 
    <a style="color: #ffffff; text-align: center; text-decoration: none;" href="#">Leer más</a>
   </span>

 

Ahora cuando pulses en cualquier sitio de tu botón coloreado en tu teléfono, será un link!

Probar y Listo!

Si te fijas es bastante sencillo y no hay mucho que entender, simplemente usando tablas y html puro es posible armar un email responsive de lujo, solo debes tener ojo en los tamaños, no exceder los 600px para tu tabla contenedora y usar de forma correcta los media queries.

Finalmente, como siempre, asegurate de validar (usando el validador W3C — sólo deberías obtener un error para el atributo propietario ‘yahoo’ en el tag del body)
y probarlo realmente a fondo usando dispositivos reales.

Disfruta creando emails responsivos que se vean bien en cada cliente de email!

Y ¡si!, no te preocupes te dejamos nuestra plantilla responsive base de forma gratuita para que comiences a ver la diferencia entre tus campañas que no eran responsive con tus nuevas con responsive.

Descargar plantilla gratis

 

Escrito por Sebastián Alvarez Ríos.

Suscríbete a nuestro newsletter

Y recibe todos los tips de nuestros expertos para tus campañas de Email Marketing.

Pruébalo gratis durante 15 días utilizando todas sus funcionalidades