Tips maquetación de email

Maquetacion_Email.md

Tips para maquetación de email

SOURCE:

• http://www.slideshare.net/brianleegraves/coding-for-responsive-email?ref=http://www.digitalresponse.es/blog/responsive-email-design-consejos-para-la-maquetacion-htmlcss/
• http://www.digitalresponse.es/blog/responsive-email-design-como-maquetar-un-email-movil/
• http://blog.fromdoppler.com/todo-lo-que-debes-saber-para-maquetar-una-campana-de-email-responsive/
• http://www.slideshare.net/DopplerEmailMarketing/doppler-academy-cmo-maquetar-una-campaa-de-email-en-html?ref=http://blog.fromdoppler.com/todo-lo-que-debes-saber-para-maquetar-una-campana-de-email-responsive/

HTML

Usamos en el header:

<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Estilos

Estructuración

Uso de tablas

<table cellpadding="0" cellspacing="0">
  <tr>
    <td class="col" width="300">
      // Columna 1
    </td>
    <td class="col" width="300">
      // Columna 2
    </td>
  </tr>
</table>

Uso de estilos inline

<table cellpadding="0" cellspacing="0" style="width: 100%; min-width: 600px;">

El diseño responsive se hace mediante media queries

No todos los dispositivos y clientes de correo electrónico aceptan media queries. Gmail por ejemplo, no acepta. Se calcula que solo el 47% funciona (IOS (Iphone/Ipad), Android 4.x. Native Client, Android Outlook.com app y Windows Phone 7.5). Por ello debemos definir los estilos inline, y solo dejar el media query entre <style>.

Dentro debemos usar td[class="item"] en vez de td.item y !important para sobreescribir medidas definidas por HTML.

Tipos de medidas

/* Móviles */
@media only screen (max-width: 480px){}

/* Tableta */
@media only screen (min-width: 480px) and (max-width: 800px){}

/* Desktop */
@media only screen (min-width: 800px) and (max-width: 1200px){}

/* Desktop de alta resolución */
@media only screen (min-width: 1200px){}

<style type="text/css" media="screen">
  @media only screen and (max-width: 480px) {
    td[class="col"]{ display: block; width: 100% !important; }
  }
</style>

Podemos usar para definir el orden de las columnas:

td[class="mainCol"] {display: table-header-group; }
td[class="mainCol"] {display: table-footer-group; }

Optimización de imágenes

Muchos navegadores no permiten visualizar las imágenes por defecto. Hay que:

• Optimizar el peso
• Utilizar formatos PNG o JPG
• Evitar tamaños mayores a 600px

También usar display: block en cada <img>

Prueba de páginas

• Navegadores
• Dispositivos móviles
• Programas automatizados: litmus o ReturnPath