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 esta guía sencilla para email responsive 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:
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 | |
| Amazon Kindle Fire HD | |
| Android 2.1 Eclair | |
| Android 2.2+ | |
| Apple iPhone | |
| Apple iPad | |
| Apple iPod Touch | |
| BlackBerry OS 5 | |
| BlackBerry OS 6+ | |
| BlackBerry Playbook | |
| Microsoft Windows Mobile 6.1 | |
| Microsoft Windows Phone 7 | |
| Microsoft Windows Phone 7.5 | |
| Microsoft Windows Phone 8 | |
| Microsoft Surface | |
| Palm Web OS 4.5 | |
| Samsung Galaxy S3+ |
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 esto 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:
Comenzando
Empecemos con nuestra plantilla vacía
|
|
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:
|
|
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.
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 | |
|
|
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.
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 | |
|
|
Hecho esto obtendremos este resultado:
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 | |
|
|
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.
Leer más
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 nuestra guía sencilla para email responsive. 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.
Escrito por Sebastián Alvarez Ríos.