Poniendo en práctica un poco de Responsive Email Design

En la nota anterior les dije que les iba a mostrar un ejemplo de Responsive Email Design y como lo prometido es deuda, acá les traigo un ejemplo bastante simple que hice para mis amigos de Zyncrovet. Vamos a adaptar el contenido, apilar columnas y modificar estilos en el texto, y lo que vamos a obtener es esto:

Sin detenerme mucho en la estructura (abc del email mkt acá) tenemos una tabla contenedora al 100% y una tabla de contenido de 1000px.

Lo que hice particularmente con este email fue darle dos condiciones con los media-querys. (¿qué son los media-queries?)

La primera es para cuando la resolución es menor a 600px y la segunda para cuando la resolución es menor a 320px:

<style type="text/css">
@media only screen and (max-device-width : 600px) {
table[class="contenedor"] {
  width: 100% !important;}
table[class="contenido"] {
  width: 90% !important;}
img[class="imagen"] {
  width: 100% !important;
  height: auto !important;}
td[class="texto"]{
  text-align:center !important;}
}

@media only screen and (max-device-width : 320px) {
table[class="contenedor"] {
  width: 100% !important;}
table[class="contenido"] {
  width: 90% !important;}
img[class="imagen"] {
  width: 100% !important;
  height: auto !important;}
td[class="texto"]{
  text-align:center !important;}
table[class="header"]{
  width:100% !important;}
}
</style>

Cómo pueden ver, las clases tienen nombres muy obvios para identificar fácilmente de que elemento hablamos y también cada clase esta limitada a una etiqueta, ya sea table, img, td.
En el primer media-query tenemos la clase contenedor, que es para aquellas tablas que necesiten adaptarse al 100% de la pantalla o al 100% de su contenedor, y la clase contenido, con width: 90%, para aquellas tablas que queramos que queden con un margen y no queden pegadas a los bordes. La clase imagen es para adaptar al 100% del contenedor las imágenes. La clase texto alinea al centro los textos. Las aplicamos al código de esta forma:

<table class="contenido" align="center" width="540" border="0" cellspacing="0" cellpadding="0">
  <tr>
      <td class="texto" style="font-family:Arial, Helvetica, sans-serif; font-size:22px; text-align:left; line-height:24px; color:#5e5e63;"><strong>Zyncro Vet  versión Trial</strong></td>
  </tr>

<img src="http://placehold.it/540x250" width="540" height="250" alt="Aplicación Online" class="imagen" style="display:block;" border="0">

En el segundo media-query se repiten todos los estilos del primero y tenemos una clase más llamada "header", esta clase la creamos para que se apile el logo de la empresa y el logo de Facebook sólo cuando la resolución es menor a 320px,
Esto mismo de apilar lo utilizamos con las notas en "Turnera online" e "Historia clínica digital" (ver diseño). ¿Cómo lo hacemos? Es tan fácil como crear dos tablas en vez de una tabla con dos columnas.
Veámoslo:

Dos tablas de 254px en este caso. Una alineada a la izquierda, otra a la derecha. Es importante que consideremos dejar 25px como mínimo entre estas tablas ya que si no en Outlook 2007/2010 no se va a ver correctamente. La otra opción es agregar una celda con código condicional entre ambas tablas, pero en este caso ya que tenía el espacio preferí aprovecharlo para no complicar mucho el código ya que es un template.
A ambas tablas les agregue la clase "contenedor" adaptándolas al 100% de su tabla contenedora. Al hacer esto obligamos a que la tabla de la derecha se desplace hacia abajo para ocupar el 100% y le da lugar a la tabla de la izquierda para adaptarse al 100%.
Esto mismo de las tablas lo utilice tanto en el header, como en el footer, logrando que todo se apile formando una única columna.
Al crear esta variación de nuestro email transformándolo en un email de columna única fácilitamos la lectura en dispositivos móviles debido a que logramos una navegación vertical.

En este link les dejo la pieza para que puedan probarla ustedes mismos.
Aplíquenlo y cuéntenme como les fue en los comentarios, y si te quedó alguna duda, también podés preguntarme! :)

¡No te olvides de seguir el blog en las redes sociales!
Twitter: @haceloresponsiv
Facebook: Hacelo Responsive Che
Y todo se repostea en Medium.

También pueden seguirme a mi!
Twitter: @marieseen
Linkedin: Marie Seen