Guía práctica para diseñar con email responsive

Por Marketing Fidelizador el 21 enero, 2020

El diseño de email responsive ha estado creciendo constantemente y no es de extrañarse el por qué. La razón de crear un correo electrónico adaptado para móviles es crear la mejor experiencia posible para el usuario, por lo que es fundamental hacer que las conversiones sucedan.

Aunque todavía este método está en constante desarrollo para lograr el óptimo, muchas empresas lo están utilizando, incluyendo Gilt, Monster, Vodafone, Twitter, Expedia y Booking.

Es por esto que se convierte en nuestra responsabilidad como profesionales atender las necesidades de los usuarios, ofreciéndoles la mejor experiencia.

En este artículo aprenderás a cómo diseñar y desarrollar un email que se adapta a móviles.

1.- Estructura

Lo que debemos hacer antes de comenzar el diseño es crear una grilla que se adapte a nuestras necesidades. En este caso utilizaremos una grilla de 600px de ancho, en donde cada columna mide 190px de ancho con un espacio entre si de 15px. Cada columna en un formato móvil quedará una bajo la otra, adaptándose para una navegación rápida, sinónimo de una buena experiencia.

Grilla versión normal

Grilla versión móvil

2.- Diseño

En esta etapa comenzamos con nuestro diseño, en donde el concepto se basará en un newsletter de repostería. La idea de nuestro mailing es ir diseñando con la visión de como se verá en la versión móvil, y así tener una noción de como cada elemento está situado en el diseño.

Versión normal

Versión móvil

3.- Código HTML/CSS

Para crear una grilla sólida comenzaremos por definir el estilo CSS utilizando media queries para la versión móvil, así como se ve en ejemplo siguiente:

/*Contenedor*/

table.container {

width: 100%;

}

/*Contenido centrado*/

table.content {

width: 600px;

}

/*Columna*/

*.col {

display: block;

margin-top: 10px;

}

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

/* Formato móvil */

/*Contenido centrado*/

table[class=»content»] {

width: 96%!important;

clear: both;

padding-left: 2%!important;

padding-right: 2%!important;

}

/*Columna*/

*[class=»col»] {

width: 100%!important;

clear: both;

display: block;

}

/*Imagenes al 100% de la columna*/

img[class=»img»] {

width: 100%;

height: auto;

}

</style>

Como podemos ver en la versión normal como en la móvil definimos un Contenedor para todo el código que situaremos dentro de él. Definimos el ancho de nuestro diseño en el Contenido centrado. Para la versión móvil utilizamos media queries para indicar que si el ancho de la pantalla llega a ser de 480px o menor se adapte la grilla al porcentaje de cada clase.

Luego veremos la función que cumple img[class=»img»]. Sorpresa!

<!– Inicio del contenedor–>

<tr>

<td>

<!– Inicio del contenido centrado –>

<tr>

<td>

<tr>

<td>

<!– Inicio de la columna –>

<tr>

Si no puedes ver este mail, haz <a style=»color: #f8e0c9;» href=»#»>click aquí</a>

</font>

</td>

</tr>

</table> <!– Fin de la hilera –>

</td>

</tr>

</table>

</td>

</tr>

</table> <!– Fin del contenido centrado –>

</td>

</tr>

</table> <!– Fin del contenedor –>

Vemos que todo el contenido está dentro de nuestro contenedor que tiene un ancho de 100% y es en donde está el color de fondo.

En este caso utilizamos la clase img[class=»img»] en la imagen inferior, la cual nos sirve para que se adapte al 100% del ancho del contenido en la versión móvil. ¿Simple no?

Con esto ya tenemos la primera vista previa de nuestro mailing.

Versión móvil

Versión normal

Ahora ingresaremos las 3 columnas, por lo que volveremos a duplicar nuestro contenedor para agregarle un color de fondo que utilice el 100% del ancho de la pantalla.

<!– Inicio del contenedor–>

<tr>

<td>

<!– Inicio del contenido centrado –>

<tr>

<td>

Artículos

</p>

</td>

</tr>

<tr>

</td>

</tr>

<tr>

<tr>

<td>

<b>Lorem ipsum dolor</b>

</p>

sit amet, consectetur adipiscing elit. Integer rutrum

<a href=»#» style=»color:#b46645″>Seguir leyendo</a>

</p>

</td>

</tr>

</table>

</td>

</tr>

</table>

</td>

<td>

</table>

</td>

<tr>

<td>

<b>Lorem ipsum dolor</b>

</p>

sit amet, consectetur adipiscing elit. Integer rutrum

<a href=»#» style=»color:#b46645″>Seguir leyendo</a>

</p>

</td>

</tr>

</table>

</td>

</tr>

</table>

</td>

<td>

</table>

</td>

<tr>

<td>

<b>Lorem ipsum dolor</b>

</p>

sit amet, consectetur adipiscing elit. Integer rutrum

<a href=»#» style=»color:#b46645″>Seguir leyendo</a>

</p>

</td>

</tr>

</table>

</td>

</tr>

</table>

</td>

</tr>

<tr>

</td>

</tr>

</table>

</td>

</tr>

</table> <!– Fin del contenido centrado –>

</td>

</tr>

</table> <!– Fin del contenedor –>

Vemos que agregamos un título «Artículos» y bajo este hay un separador, el cual nos sirve para crear una división de 10px de alto y visualizarlo bien en los clientes de correo como Gmail y Outlook 2007.

<tr>

</td>

</tr>

La Columna se repite 2 veces a su derecha, el loop es el siguiente:

<tr>

<td>

<b>Lorem ipsum dolor</b>

</p>

<a href=»#» style=»color:#b46645″>Seguir leyendo</a>

</p>

</td>

</tr>

</table>

</td>

</tr>

</table>

</td>

Ahora revisemos como quedó

Versión móvil

Versión normal

Nota: Para que la imagen se visualice con un ancho de 100% debemos ingresar un ancho fijo del tamaño máximo de pantalla que utilizamos para la versión móvil, en este caso fue de 480px.

Ejemplo:

</td>

Ahora ingresaremos los 2 últimos artículos faltantes, y para eso ingresaremos el mismo contenedor que hemos estado utilizando.

<!– Inicio del contenedor–>

<tr>

<td>

<!– Inicio del contenido centrado –>

<tr>

<td>

<tr>

<tr>

<td>

</td>

</tr>

</table>

</td>

</tr>

</table>

</td>

<td>

</table>

</td>

<tr>

<b>Lorem ipsum dolor</b>

</p>

sit amet, consectetur adipiscing elit. Integer rutrum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer rutrum tempor dui, ac scelerisque turpis imperdiet ut. Mauris in cursus odio.

<a href=»#» style=»color:#b46645″>Seguir leyendo</a>

</p>

</td>

</tr>

</table>

</td>

</tr>

</table>

</td>

</tr>

<tr>

</td>

</tr>

<tr>

<tr>

<td>

</td>

</tr>

</table>

</td>

</tr>

</table>

</td>

<td>

</table>

</td>

<tr>

<b>Lorem ipsum dolor</b>

</p>

sit amet, consectetur adipiscing elit. Integer rutrum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer rutrum tempor dui, ac scelerisque turpis imperdiet ut. Mauris in cursus odio.

<a href=»#» style=»color:#b46645″>Seguir leyendo</a>

</p>

</td>

</tr>

</table>

</td>

</tr>

</table>

</td>

</tr>

</table>

</td>

</tr>

</table> <!– Fin del contenido centrado –>

</td>

</tr>

</table> <!– Fin del contenedor –>

Como pueden observar la imagen con el texto quedaron en diferentes columnas para que al visualizarlo en la versión móvil se adapte verticalmente una bajo de la otra

<tr>

<td>

</td>

</tr>

</table>

</td>

</tr>

</table>

Se darán cuenta que en este proceso sólo hemos repetido las clases y tablas utilizadas, por lo que sólo se ha tratado de iteraciones, lo cual nos favorece para cuando necesitemos modificar o innovar en la estructura.

Para finalizar con nuestro mailing responsive, ingresaremos algo de texto el cual sería el pie de páigna, y adivinen… Duplicaremos nuevamente nuestro contenedor para darle un color de fondo al 100% del ancho de la pantalla.

<!– Inicio del contenedor–>

<tr>

<td>

<!– Inicio del contenido centrado –>

<tr>

<td>

<tr>

<td>

<!– Inicio de la hilera –>

<tr>

tempor dui, ac scelerisque turpis imperdiet ut Mauris in cursus odio

<br>

Lorem ipsum dolor sit amet <a style=»color: #f8e0c9;» href=»#»>click aquí</a>

</p>

</td>

</tr>

</table>

</td>

</tr>

</table>

</td>

</tr>

</table> <!– Fin del contenido centrado –>

</td>

</tr>

</table> <!– Fin del contenedor –>

Este es un ejemplo de lo que podemos hacer para lograr una buena experiencia para el usuario, sin dejar atrás el apoyo para una mejor conversión. Este método nos obliga a tener un contenido claro y potente, el diseño ya facilita el acceso a la información.

Escrito por Jorge Guerrero para Fidelizador.com

www.tehacesver.com
https://twitter.com/jorgedsg
http://dribbble.com/jorgeguerrero
http://cl.linkedin.com/in/jorgeguerreroperez
www.vivianabotero.me

Marketing Fidelizador

Blog Fidelizador

Optimiza tu estrategia de Marketing