Emails HTML responsivos para todos los clientes de correo

Publicado por & archivado en Aplicaciones, CSS, Diseño Web, Dispositivos móviles, General, Maquetación, Tipografía.

responsive

Maquetar una newsletter o un mailing responsivo puede ser una tarea muy sencilla o muy ardua dependiendo si tenemos en cuenta o no unas normas básicas para que se vea correctamente en todos los clientes de email ya que no podemos seguir las mismas directrices que para los navegadores desktop, y menos para los de smartphones y APP’s.

Algunas normas básicas para conseguir la máxima compatibilidad de nuestro mailing son:

1. Maquetación del layout:
– para definir la estructura deberemos hacer una mezcla entre @media-queries minimal y ‘Fluid’: @media queries no vale siempre para redimensionar y recolocar los elementos según la resolución, ya que algunos de los más importantes clientes de mail no las admiten, como Gmail, por tanto construiremos una estructura fluida usando 100% y max-width. Pero max-width a su vez no es entendido ni por Outlook ni Apple mail, con lo cual usaremos una medida fija con un condicional para el motor de renderizado de IE y Microsoft Outlook y @media-queries para Apple mail.

– maquetación Mobile First: construir la estructura base pensando primero en las limitaciones y exigencias de la resolución más pequeña nos facilitará bastante las cosas. Y siempre cuidando el diseño y los elementos a mostrar en esta resolución (colocación lo más lineal vertical posible de los elementos para que fluyan hacia abajo y no de lado a lado, tamaño de las tipografías, links convertidos en botones, etc). A parte, es interesante pensar que todas las posibilidades que ofrecen las APP respecto a lo navegadores desktop que nos permiten crear un mail interactivo mucho más atractivo.

2. Estilos
– poner los estilos en línea y siempre en su forma larga: Gmail por ejemplo no lee la etiqueta <style> al inicio del documento.
– vigilar con Outlook 2007/10/13: suele ponernos muchas limitaciones y trabas ya que hay muchas etiquetas no admitidas.

3. Uso de tipografías
Ahora mismo lo más normal es tener un site con un diseño que incluye usar una tipografía que no sea de sistema, para darle más personalidad, y lo lógico es que al enviar un mail relacionado con el site queramos que siga la misma pauta gráfica. Desafortunadamente, según que tipografía usada no la podremos aplicar en los mails ya que las limitaciones básicas son:
– @font-face: solo funciona para iOS Mail y Apple Mail, ni aun usando la regla Bulletproof.
– Google web fonts @import: solo funciona para iOS Mail, Apple Mail, Thunderbird i Android (default)

Estos son algunos de los puntos más destacados, pero para más información, algunos de los más populares generadores de newsletters, como Campaign Monitor o Mailchimp nos ofrecen las mejores guías de maquetación y de compatibilidades css y demás que admiten los más importantes clientes de correo:
http://www.campaignmonitor.com/css/
http://templates.mailchimp.com/

Otras referencias interesantes:
http://webdesign.tutsplus.com/es/articles/creating-a-simple-responsive-html-email–webdesign-12978
http://blog.fogcreek.com/responsive-html-emails-a-different-strategy/

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Utilizamos cookies de terceros para recoger información sobre sus visitas y su uso de nuestra web. En caso de continuar navegando por esta web entenderemos que acepta el uso de estos dispositivos. Más información: Política de Cookies .

ACEPTAR
Aviso de cookies
Artimedia