Cada día vemos avances en la optimización de los newsletters para distintos dispositivos e incluso para distintas apps móviles.
Por lo tanto es importante considerar que nuestros usuarios pueden ver su email en un teléfono móvil, en una tablet o en una computadora de escritorio, o en las 3... así que debemos asegurarnos que en cada uno de estos dispositivos, reciba la información de la manera más amigable posible; para esto es importante optimizar cada uno de nuestros comunicados para que "responda" al dispositivo, es decir, crearlos bajo el concepto de "responsive".
Esta guía es para usuarios avanzados, familiarizados con conceptos de programación, al finalizar obtendremos una plantilla básica para practicar las funciones responsive en los newsletters.
Te regalamos esta plantilla responsiva y te decimos como hacerla paso a paso:
Sin duda, diseñar y programar un newsletter para que sea responsivo es una tarea que implica más trabajo y algunos “trucos” por aprender, sin embargo, si seguimos un proceso para cada sección de nuestro comunicado, lograremos hacerlo amigable y por lo tanto, aumentaremos su posibilidad de éxito.
Inevitablemente, existen algunos detalles de diseño que debes considerar… por ejemplo, algunas plantillas, con tablas más complejas pueden ser menos viables para este tipo de diseños, sin embargo los beneficios de un newsletter responsivo pueden fácilmente justificar el crear una plantilla más sencilla.
Te recomendamos que al iniciar, pienses en el diseño y cómo será visto en una pantalla estrecha (una de un móvil, por ejemplo) y una pantalla normal, donde podrás ver los clásicos 600px.
Si tu newsletter se ve así en una computadora de escritorio:
Si no está adaptado para móviles, en un móvil donde solo se haga el ajuste de tamaño se mostrará así:
Como podrás ver, los textos son demasiado pequeños, y los enlaces son muy complicados para darles click con un dedo.
Lo más recomendable es que en la pantalla de un móvil, tu newsletter se vea así:
Para comenzar, crearemos una plantilla vacía:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Email Responsive Básico</title>
<style type="text/css">
body {margin: 0; padding: 0; min-width: 100%!important;}
.content {width: 100%; max-width: 600px;}
</style>
</head>
<body yahoo bgcolor="#f0f0f0">
<table width="100%" bgcolor="#f0f0f0" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<table class="content" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
¡Hola Mundo!
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Paso 1.
{Agrega un espacio para tus css}
<style type="text/css">Básicamente necesitas definir estilos y etiquetas dentro de un espacio <style>, aquí también definiremos los estilos para que nuestro diseño se adapte a distintas pantallas.
body {margin: 0; padding: 0; min-width: 100% !important;}
.content {width: 100%; max-width: 600px;}
</style>
Para definir estilos y clases para pantallas donde se verá a 600px nuestro comunicado, definiremos los estilos dentro de este media querie:
@media only screen and (min-device-width: 601px) {...}Para pantallas menores a 479px (móviles), utilizaremos este media querie:
@media only screen and (max-width: 479px) {...}Fix para Yahoo
Yahoo interpreta tus media queries sin importar que los usuarios estén viendo tu newsletter en una versión de escritorio, por lo que si están en su equipo de escritorio es muy probable que vean la versión móvil de este, así que es importante agregar éste código al tag body:
<body bgcolor="#f0f0f0" yahoo>Después, a cada clase dentro de tus media queries que necesites que no interprete yahoo puedes precederla con “body[yahoo]”-
Paso 2.
{Ajustando los Fluid Width para tus tablas}
Como podrás notar, la tabla principal tiene un width de 100% lo que la convierte en un objeto fluido, por lo tanto tomará el 100% del espacio disponible en cualquier dispositivo donde se muestre, así que le asignaremos un ancho máximo de 600px con “max-width” para evitar que ocupe la pantalla completa en dispositivos más grandes.
Sin embargo, la propiedad “max-width” no está disponible para todos los clientes de email por ejemplo Outlook y Lotus Notes, así que debemos de “envolver” estas tablas en otro código que sea condicional, que únicamente se muestre cuando se esté utilizando IE (que es el motor de render que utilizan Lotus Notes y Microsoft Outlook), que quedará así:
<!--[if (gte mso 9)|(IE)]> <!-- Inicia la tabla con el código condicional para IE -->Mientras que en Mail de Apple, lo solucionaremos utilizando las media queries, en el que definimos para ver nuestro comunicado a 600px, definiremos la clase para la tabla y pondremos la propiedad con un !important, para forzar a la aplicación a asignarle un tamaño:
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]--> <!-- Termina la primera parte de la tabla para IE -->
<!-- Inicia la tabla “normal” con max-width -->
<table class="content" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
¡Hola Mundo!
</td>
</tr>
</table>
<!-- Finaliza la tabla “normal” con max-width -->
<!--[if (gte mso 9)|(IE)]> <!-- Inicia el cierre de la tabla para IE -->
</td>
</tr>
</table>
<![endif]--> <!-- Finalizamos la tabla para IE -->
@media only screen and (min-device-width: 601px) {Paso 3.
.content {width: 600px !important;}
}
{La primera fila responsive}
En nuestra plantilla en blanco, vamos a editar el renglón donde se encuentra nuestro “¡Hola Mundo!” de manera que quede así:
<td class="nsl_header" bgcolor="#c7d8a7" style=” padding: 40px 10px 10px 10px;”>Y después en el espacio de <style> asígnale a esta clase el espacio para crear un margen interior:
¡Hola Mundo!
</td>
.nsl_header {padding: 40px 10px 10px 10px;}En este espacio crearemos 2 tablas que se ajustarán a su lugar utilizando la propiedad “align” de HTML.
En nuestro dispositivo móvil deberá mostrarse así:
+14.18.33.png)
Y en una pantalla de al menos 600px, así:
+14.18.19.png)
Primero crearemos la columna izquierda, reemplazaremos nuestro “Hola Mundo!” por la tabla:
<table class="nsl_izquierda" align="left" border="0" cellpadding="0" cellspacing="0" style="width: 100%; max-width: 100px;">
<tr>
<td height="100" style="padding: 0px 20px 10px 0px;">
<img src="logo.png" width="100" height="100" border="0" alt="" style="margin:auto;" / >
</td>
</tr>
</table>
Ahora crearemos la columna derecha, con otra tabla que también estará alineada a la izquierda, esta tabla tendrá un ancho de 455px, lo que nos dejará un espacio de 25px entre cada tabla, estos 25px son el espacio mínimo que necesita Outlook para alinear las tablas correctamente en un renglón, de lo contrario, las alineará una después de la otra, de manera vertical:
A estas tablas, que irán una de lado de la otra, también las envolveremos en un código condicional, para que ambas abarquen el 100% del ancho en un móvil para poder después centrar (dentro de los media queries) su contenido, el código quedaría así:
<!--[if (gte mso 9)|(IE)]>Ambas tablas tienen asignada una clase, “nsl_izquierda” y “nsl_derecha”, las cuales tendrán sus respectivos códigos dentro de los media queries,
<table width="100" align="left" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table class="nsl_izquierda" align="left" border="0" cellpadding="0" cellspacing="0" style="width: 100%; max-width: 100px;">
<tr>
<td height="100" style="padding: 0px 20px 10px 0px;">
<img src="logo.png" width="100" height="100" border="0" alt="" style="margin:auto;" / >
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
<!--[if (gte mso 9)|(IE)]>
<table width="455" align="left" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table class="nsl_derecha" align="left" border="0" cellpadding="0" cellspacing="0" style="width: 100%; max-width: 455px;">
<tr>
<td height="70">
<p class="nsl_titulo" style="font-family:Verdana, Geneva, sans-serif; color: #019e95; text-align:left; font-weight:bold; font-size:22px; margin:0px; margin-top:25px;">Tutorial: Newsletters Responsivos</p>
<p class="nsl_subtitulo" style="font-family:Verdana, Geneva, sans-serif; color: #696969; text-align:left; font-weight:normal; font-size:16px; margin:0px;">Crea una plantilla en pocos pasos</p>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
@media only screen and (min-device-width: 601px) {En el primer media querie forzamos los tamaños máximos para que funcionen en Mail de Apple, como habíamos comentado, y en el segundo cambiamos estos valores, utilizando un !important, como puedes notar se duplica la instrucción width, junto con max-width, para que funcione en ambas opciones; así mismo, utilizamos un “text-align” para que el contenido de estos espacios pueda quedar centrado y sea más agradable visualmente en las pantallas de los móviles.
.nsl_content {width: 600px !important;}
.nsl_derecha {width: 455px !important;}
.nsl_izquierda {width: 100px !important;}
}
@media screen and (max-width: 479px) {
body[yahoo] .nsl_content {width: 320px !important; max-width: 320px !important; margin:auto !important;}
body[yahoo] .nsl_derecha {width: 310px !important; max-width: 310px !important; margin:auto !important;}
body[yahoo] .nsl_izquierda {width: 310px !important; max-width: 310px !important; margin:auto !important; text-align:center !important;}
body[yahoo] .nsl_titulo{text-align:center !important; margin-top:0px !important;}
body[yahoo] .nsl_subtitulo{text-align:center !important;}
}
En estos media querie puedes modificar lo que desees para las pantallas más pequeñas, incluso los colores o el tamaño del texto, siempre y cuando añadas al final de la propiedad el texto "!important".
Recuerda que todos los estilos también deben de estar declarados en la etiqueta HTML, y dentro de los media queries declarar únicamente las propiedades que deseamos modificar, por ejemplo:
<p class="nsl_titulo" style="font-family:Verdana, Geneva, sans-serif; color: #019e95; text-align:left; font-weight:bold; font-size:22px; margin:0px; margin-top:25px;">Tutorial: Newsletters Responsivos</p>
body[yahoo] .nsl_titulo {text-align:center !important; margin-top:0px !important;}
Paso 4.
{Texto de bloque}
Para que un párrafo de texto se ajuste al ancho de la tabla, crearemos una nueva celda a la que le asignaremos un espacio interior, de padding, y simplemente pondremos el texto dentro, con las etiquetas necesarias para hacer algún ajuste si se necesita en los media queries para que quede alineado y tenga estas 2 variantes:
En escritorio:
+12.27.44.png)
Por lo tanto el código resultaría así:
<tr>
<td bgcolor="#ffffff" style="padding:10px; border-bottom: solid 1px #e9e9e9;">
<p class="nsl_titulo" style="font-family:Verdana, Geneva, sans-serif; color: #fbae3b; text-align:left; font-weight:bold; font-size:20px; margin:0px; margin-top:10px;">Bloque de texto</p>
<p style="font-family:Verdana, Geneva, sans-serif; color: #7e7e7e; text-align:left; font-weight:normal; font-size:14px; margin:0px; margin-top:5px;">Fusce a metus eu diam varius congue nec nec sapien. Vestibulum orci tortor, sollicitudin ac euismod non, placerat ac augue. Nunc convallis accumsan justo. Pellentesque habitant morbi tristique senectus.s</p>
</td>
</tr>
@media screen and (max-width: 479px) {
body[yahoo] .nsl_titulo {text-align:center !important; margin-top:0px !important;}
}
Paso 5.
{Texto con imagen}
Generamos un nuevo renglón en nuestra tabla principal, “.container” y dentro de ella haremos la siguiente sección.
En escritorio:
+12.29.07.png)
En móvil:
Esta sección tiene una imagen con un texto a un lado, además de un botón. Utilizaremos el mismo estilo de construcción que en el encabezado del newsletter, pondremos 2 tablas, una a un lado de la otra, y le daremos las medidas correspondientes, así mismo, a estas tablas las envolveremos con código condicional, al final, el resultado en código será así:
<tr>Al final, en la versión móvil, queremos alinear los 2 bloques (como lo hicimos anteriormente), centrar el título (con la clase que utilizamos en el texto anterior) centrar y crecer un poco el espacio del botón (recuerda que nuestros dedos, en un dispositivo touch, son más grandes que un cursor en la pantalla), por lo que nuestros estilos dentro del media querie, quedaron así:
<td bgcolor="#ffffff" style="padding:10px; border-bottom: solid 1px #e9e9e9;">
<!--[if (gte mso 9)|(IE)]>
<table width="100" align="left" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table class="nsl_izquierda_dos" align="left" border="0" cellpadding="0" cellspacing="0" style="width: 100%; max-width: 180px;">
<tr>
<td height="145" style="padding: 0px 10px 0px 0px;">
<img src="articulo.png" width="185" height="145" border="0" alt="" style="margin:auto;" / >
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
<!--[if (gte mso 9)|(IE)]>
<table width="455" align="left" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table class="nsl_derecha_dos" align="left" border="0" cellpadding="0" cellspacing="0" style="width: 100%; max-width: 360px;">
<tr>
<td height="70" align="left" valign="top">
<p class="nsl_titulo" style="font-family:Verdana, Geneva, sans-serif; color: #ee513b; text-align:left; font-weight:bold; font-size:18px; margin:0px; margin-top:0px;">Bloque de texto</p>
<p style="font-family:Verdana, Geneva, sans-serif; color: #696969; text-align:left; font-weight:normal; font-size:14px; margin:0px;">Fusce a metus eu diam varius congue nec nec sapien. Vestibulum orci tortor, sollicitudin ac euismod non, placerat ac augue. Pellentesque habitant morbi tristique senectus.</p>
<table class="nsl_btnw" bgcolor="#e05443" border="0" cellspacing="0" cellpadding="0" style="margin: 5px 0px;">
<tr>
<td class="nsl_btn" height="45" style="text-align: center; font-size: 16px; font-family: sans-serif; font-weight: bold; padding: 0 15px 0 15px;">
<a href="#" style="color: #ffffff; text-decoration: none; margin:0px;">Saber más</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
@media screen and (max-width: 479px) {
body[yahoo] .nsl_izquierda_dos {width: 310px !important; max-width: 310px !important; margin:auto !important; text-align:center !important;}
body[yahoo] .nsl_derecha_dos {width: 310px !important; max-width: 310px !important; margin:auto !important; text-align:center !important;}
body[yahoo] .nsl_titulo{text-align:center !important; margin-top:0px !important;}
body[yahoo] .nsl_btnw {margin:auto !important; margin-top: 10px !important; margin-bottom:10px!important; max-width:200px !important;}
body[yahoo] .nsl_btn { padding: 0 30px 0 30px !important;}
body[yahoo] .nsl_btn a {font-size:16px !important;}
}
Paso 6.
{Imagen del ancho de la tabla}
Este espacio es en realidad muy sencillo, únicamente crearemos otro renglón en nuestra tabla principal e insertaremos la imagen, pero el ancho lo definiremos al 100% para que pueda adaptarse conforme se modifica el ancho de la tabla que lo contiene:
<tr>Haremos lo mismo con el siguiente espacio, para hacer el texto del pie de página:
<td bgcolor="#ffffff" style="padding:10px; border-bottom: solid 1px #e9e9e9;">
<img src="imagen.png" alt="Imagen" width="100%" />
</td>
</tr>
<tr>Paso 7.
<td bgcolor="#ee513b" style="padding:10px; border-bottom: solid 2px #d5422d;">
<p style="font-family:Verdana, Geneva, sans-serif; color: #ffffff; text-align:center; font-weight:normal; font-size:14px; margin:0px;">Vestibulum orci tortor, sollicitudin ac euismod non, placerat ac augue.</p>
</td>
</tr>
{Espacio para Redes Sociales}
Por último crearemos un pie de página donde insertaremos las redes sociales, en la versión de escritorio los íconos de las redes sociales medirán 25px * 25px, mientras que en la versión móvil los creceremos hasta 50px * 50px.
En escritorio:
+12.31.11.png)
Además, asignaremos una separación más grande entre ellos, por lo tanto les asignaremos una clase y deberán quedar de este modo:
<tr>Y nuestros estilos, para la versión móvil, serían únicamente para la clase “.nls_redes”
<td bgcolor="#ee513b" style="padding:10px; border-bottom: solid 2px #d5422d; text-align:center;">
<a href="#"><img src="facebook.png" alt="Facebook" title="Facebook" class="nsl_redes" style="width:25px; height:25px; margin:0px 10px;" /></a>
<a href="#"><img src="twitter.png" alt="Twitter" title="Twitter" class="nsl_redes" style="width:25px; height:25px; margin:0px 10px;" /></a>
<a href="#"><img src="email.png" alt="Email" title="Email" class="nsl_redes" style="width:25px; height:25px; margin:0px 10px;" /></a>
</td>
</tr>
@media screen and (max-width: 479px) {Y con esto el resultado es un newsletter sencillo pero amigable con cualquier dispositivo. Si lo deseas, puedes descargar aquí nuestro zip con todos los archivos y el HTML completo de nuestra nueva plantilla, para que puedas experimentar y analizar las funciones utilizadas en nuestro newsletter.
body[yahoo] .nsl_redes { width:50px !important; height: 50px !important; margin: 0px 20px !important;}
}
Al final, solamente sube todos tus archivos a nuestro editor y haz pruebas, ¡no necesitas editar nada más!
