Email Responsive

Como ya sabemos, un Email no posee un CSS externo, los Emails trabajan con estilos inline
( directamente estilos al código html ).

Para crear un Email responsive es tan sencillo como no introducir tamaños en pixeles(px), lo que hay que hacer es agregar un ancho como atributo y no como un estilo inline, la medida segura (para el ancho) es actualmente de 600 o menos, la altura realmente no importa mucho, aunque la parte más importante del mensaje debe estar en la primera parte, esto se debería hacer así porque en el momento de verlo en un dispositivo móvil se hace la vida más fácil.

Al momento de crear un Email responsive debemos tener en cuenta las imágenes, se puede hacer de varias formas:

• Insertar una imagen con un ancho máximo de 600px y agregar un estilo inline para darle un ancho del 100%, con esto lograremos que la imagen se ajuste al ancho del dispositivo en el cual se mire.
  

  <td>
      <img src="img/imagen.jpg" style="width:100%;" />
  </td>
  

  
  
• Crear nuestra imagen con un ancho de 320px y alinearlo al centro, con esto lograremos que la imagen nunca cambie de tamaño o que el Email pierda la proporción, ya que el ancho mínimo recomendable y más usual de un dispositivo móvil es de 320px.
  

  <td align="center" valign="middle">
      <a href="">
          <img src="img/imagen.jpg">
      </a>
  </td>
  

  
  
• Si lo que necesitamos es una imagen de fondo la agregaremos con un atributo de background, se añade un estilo inline dependiendo de lo que el diseño solicite.
  

  <table border="0" cellspacing="0" cellpadding="0" background="img/imagen.jpg" style="background-position:center; background-repeat:no-repeat;">

  
  

Por último, pero no menos importante para que el Email se muestre de una manera distinta de móvil a escritorio se pueden usar Media Queries, esto también de manera inline y se agrega en la parte del Head, con Media Query podemos poner el estilo que queramos.

<style type="text/css">
    h1 {
        font-size:100px;
        height:90px;
    }
    @media only screen and (max-width:599px) {
        h1 {
            padding-top: 20px;
            font-size:50px;
            height:44px;
        }
        ul {
            padding:0 10px;
        }
    }
</style>

Realizar Emails de esta forma nos garantiza el tener un buen diseño ya sea en escritorio y en dispositivos móviles.