Cómo crear una plantilla responsive para mailchimp y otras plataformas

bodegon Cómo crear una plantilla responsive para mailchimp y otras plataformasUn reciente estudio realizado por knotice.com indica un continuo crecimiento del porcentaje de apertura de mailings en dispositivos móviles. Siendo iPhone el dispositivo móvil con mayor porcentaje de apertura. Esto hace que nos planteemos muy seriamente el optimizar el layout de nuestros boletines/newsletter en los diferentes dispositivos.

En está guía daremos una serie de especificaciones para llevar a cabo un mailing que se adapte a la mayoría de nuestros dispositivos móviles, además de mantener la versión escritorio para luego poder integrarlos con mailchimp. En este link podéis ver que dispositivos soportan los emails responsive.

Antes de meternos en materia tendremos que diseñar dos layouts para el mismo emailing, uno para desktop y otro para versión mobile. Teniendo en cuanta que en la versión mobile tiene que poder leerse sin necesidad de hacer zoom.

En la pagina de litmus.com podéis ver mas información de cómo se debería afrontar el diseño mobile para tener una buena experiencia de usuario, pero en resumidas cuentas son 4 puntos a tener en cuenta:

  • Utilizar un layout de una sola columna y con un tamaño de fuente adecuada para incrementar la legibilidad.
  • Los links y botones tienen que ser fácilmente identificables y clickables.
  • Mas que nunca, se conciso en la información del mensaje, quizás tengas que ocultar algunos elementos respecto a la versión desktop.
  • Mantén la llamada a la acción en la zona superior del mail para que cuando éste se abra sea visible sin necesidad de scroll.

Código responsive

Para cambiar los estilos para la versión mobile necesitaremos utilizar media queries.

File: mailing-responsive-one.css
--------------------------------

/* Estilos generales */
#templateContainer{
  width: 600px;
}

@media only screen and (max-device-width: 600px) {
  /* Estilos específicos para mobile */
  table[id=templateContainer]{
	  width:100% !important;
  }

Esto quiere decir que los estilos que coloquemos dentro de la media query se representaran en los dispositivos que tengan una resolución menor de 600px, que será el ancho máximo de tu mailing cuando se muestra en desktop.

En este caso cambiaremos el ancho de “templateContainer”, que contiene el contenido del mailing, para que a partir de menos de 600px cambie su ancho de 600px para versión desktop, a la anchura adaptable de 100% para los diferentes dispositivos móviles.

Como has podido observar hemos utilizado un selector de atributos [ ], para evitar un fallo producido por yahoo! También hemos añadido !important para asegurarnos que prevalece por encima del otro estilo.

Deberemos configurar como debe interpretar el navegador nuestro mailing, para ello utilizaremos la etiqueta viewport dentro de la etiqueta <head>.

File: mailing-responsive-two.html
---------------------------------

<meta name="viewport" content="width=device-width" />

Como convertir 2 columnas en 1

Como hemos dicho el layout de nuestro mailing en mobile tiene que ser de una sola columna, pero no por ello vamos a condenar la versión escritorio. Este ejemplo trata de explicar como cambiar de 2 columnas en la versión desktop a una columna de la versión mobile.

desktop1 Cómo crear una plantilla responsive para mailchimp y otras plataformas

En el ejemplo de arriba tenemos una tabla de 600px de ancho con dos columnas de 290px, que a su vez, son también dos tablas diferentes y para que estén colocadas una al lado de otra, hemos puesto align=”left” a la tabla de la izquierda.

File: mailing-responsive-three.html
-----------------------------------

<table id="templateContainer" width="600" cellpadding="10" cellspacing="0" border="0">
  <tr>
    <td style="background:#C7C7C7">
      <table class="columns" width="290" cellspacing="0" border="0" cellpadding="20" align="left">
        <tr>
          <td style="background:#CEF798"><p><strong>Column 1</strong></p><p>…</td>
        </tr>
      </table>
      <table class="columns" width="290" cellspacing="0" border="0" cellpadding="20">
        <tr>
          <td style="background:#B6F798"><p><strong>Column 2</strong></p><p>Integer…td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Cuando la resolución sea mas pequeña de 600px las columnas no tendrán hueco para estar una al lado de la otra y entonces la segunda columna se pondrá debajo de la primera siendo este el resultado.

mobile1 Cómo crear una plantilla responsive para mailchimp y otras plataformas

Para que el mailing se adapte al ancho del dispositivo lo único que necesitaremos es poner el width:100% al ancho de la tabla contenedora y a las diferentes columnas con una línea en la media query.

File: mailing-responsive-three.css
----------------------------------

/* Estilos generales */
#templateContainer{
width: 600px;
}
@media only screen and (max-width: 600px){
  /* Estilos específicos para mobile */
  table[id=templateContainer], table[class=columns]{
    width:100% !important;
  }
}

Optimizar imágenes para la versión mobile

La limitación del tamaño de la pantalla en la versión mobile hace que nos replanteemos usar diferentes imágenes en una versión u otra, sobre todo si éstas imágenes contienen texto.

img responsive Cómo crear una plantilla responsive para mailchimp y otras plataformas

En este ejemplo podemos ver que si no cambiamos la imagen de cabecera nos resultara difícil leer el texto que queremos mostrar. Lo que hemos hecho es optimizar la imagen de cabecera como se puede ver en la imagen de la derecha.

El código sería:

File: gistfile1.css
-------------------

/* Estilos generales */
#templateContainer{
  width: 600px;
}
.desktop{
  display:block;
}
.mobile{
  display:none !important;
}
@media only screen and (max-width: 600px){
  /* Estilos específicos para mobile */
  table[id=templateContainer]{
    width:100% !important;
  }
  table[class=columns]{
    width:100% !important;
  }
  .desktop{
    display:none !important;
  }
  .mobile{
    display:block !important;
  }
}

File: mailing-responsive-five.html
----------------------------------

<table id="templateContainer" width="600" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td class="headercell">
      <img  class="desktop" src="cabecera.jpg" width="600" height="161" border="0" />
      <img  class="mobile" src="cabecera-mobile.jpg" width="100%" border="0" />
    </td>
  </tr>
</table>

Estamos utilizando para la misma cabecera dos imágenes diferentes, las cuales mostramos u ocultamos utilizando las clases .desktop y .mobile. La imagen optimizada para mobile la pondremos un width=100% para que se convierta en un contenido fluido y será como mínimo de 480px de ancho para que no se pixele demasiado en dispositivos grandes.

Cuidado con GMAIL, porque no hace caso a las media queries y en consecuencia el mailing no se hará responsive y además nos duplicará las imágenes que queremos optimizar.

Para que no se dupliquen las imagenes, he asignado !important a la clase .mobile para el display:none

Con estos consejos vuestro mailing se adaptará al tamaño de tu pantalla además de a los dispositivos móviles.

Esta vez el tamaño si que importa. (Anónimo)

Estos son algunos consejos para que tu mismo puedas gestionar tus campañas de email marketing con mailchimp. Si por el contrario prefieres un servicio profesional con el que llegar a tus clientes, ponte en contacto con nosotros y te prepararemos un presupuesto a medida de tus necesidades.

Me interesa

Tambien te puede interesar...