Suscríbete a mi blog y no te pierdas nada

Inicio > Blog > E-mailings: consejos de maquetación y tips específicos para gMail, Yahoo Mail, Outlook e iPhone

E-mailings: consejos de maquetación y tips específicos para gMail, Yahoo Mail, Outlook e iPhone

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (todavía no tiene votos)
Cargando…

¡Hace tiempo que le tenía ganas a este artículo!
Como muchos de los que váis a leer esto, he perdido la cuenta de los e-mailings que he maquetado desde quién sabe cuando y, cómo no, cada 2×3 me veo sorprendido por una nueva especificación o problemilla a nivel de maquetación. En esta artículo voy a intentar ponerle remedio a la mayoría de problemas que surgen en un e-mailing: los básicos y los no tan básicos.

Qué no hacer

– Utilizar tablas y no div, esto es de perogrullo.
– No utilizar CSS, poner los estilos inline
– No hacer un e-mailing más ancho de 600 píxeles
– No poner tablas dentro de otras tablas
– No utilizar imágenes de fondo y evitar los backgrounds de imagen que se repiten, dan problemas en muchos clientes de correo, en esencia: evitar background-image, background-position y background-repeat
– No incluir javascript, iframes, vídeos o Flash
– Que el conjunto del e-mail pese menos de 200kb
– No poner CSS en la etiqueta, la mayoría de clientes no se lo tragan
– Evita el uso de imágenes para comunicar cosas importantes, lo mejor es poner eso en texto
– Evita el uso de imágenes para los botones de acción, esto es MUY importante y crítico

Qué sí hacer

– Incluir el atributo ALT para la descripción de todas las imágenes
– Incluir el atributo TITLE para la descripción de todos los enlaces
– Declarar la anchura y altura de todas las imágenes con píxels (no %)
– El e-mail debe estar dentro de una tabla con width del 100%
– Utilizar colores de fondo, no imágenes
– Estilar los enlaces incluyendo el color tipo a style=”color: #000 !important;” href=”#”, es importante poner el !important para sobreescribir los que tenga el cliente de correo por defecto.
– Incluir el estilo “display:block” en todas las imágenes que lo permitan para evitar paddings automáticos
– Si incluyes una columna sin contenido, apuntálala con un GIF transparente

CSS Específicos maquetación: gMail

– siempre que puedas, especifíca la altura de los td para evitar saltos raros
– atributos CSS que no funcionan: background-image, background-repeat, background-position, bottom/right/left/top, cursor (pointer, por ejemplo), opacity, position, text-direction, visibility, z-index, list-style-image, list-style-position, border-spacing, table-layout.

CSS Específicos maquetación: Outlook 2000-2003

– atributos CSS que no funcionan: white-space, opacity, border-spacing.

CSS Específicos maquetación: Outlook 2007-2010

– atributos CSS que no funcionan: text-direction, vertical-align, height, width, background y padding dan problemas, pero no siempre, background-image, background-repeat, background-position, bottom/right/left/top, cursor (pointer, por ejemplo), opacity, overflow, position, visibility, list-style-image, list-style-position, list-style-type, border-spacing.

CSS Específicos maquetación: cliente de mail de iPhone

– atributos CSS que no funcionan: overflow, cursor.

CSS Específicos maquetación: Hotmail

– el punto que comentaba sobre el display:block para evitar paddings en las imágenes es crítico en Hotmail, ¡al loro!
– atributos CSS que no funcionan: background, background-image, background-repeat, background-position, opacity, bottom/right/left/top, position, z-index

CSS Específicos maquetación: Lotus Notes

– Por lo general, todo CSS es un drama en Lotus. Yo mandaría un mail de texto.

Publicado el 31.07.2012 en Otros: email marketing, RRSS...
1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (todavía no tiene votos)
Cargando…
Comentarios

3 comentarios para "E-mailings: consejos de maquetación y tips específicos para gMail, Yahoo Mail, Outlook e iPhone"

  • El 31.07.2012 , Jonathan ha comentado:

    Hola Jordi!

    Está genial, yo tengo otra duda, una vez lo tenemos maquetado con nuestras imágenes, como lo exportamos a mailchimp y que se queden nuestras imágenes?

    Tu que eres un master del chimpance danos algunos Tips 🙂

    • El 31.07.2012 , jordiob ha comentado:

      ¡Hola Jonathan! Pues debes subir las imágenes al servidor (en mqc.com/newsletters/tunewsletter/ por ejemplo) y enlazarlas desde el html del mail tal que así:

      De este modo, cuando hagas copiar/pegar en MailChimp (o en el soft que estés usando), las imágenes se verán porque el HTML irá a buscarlas a una ruta absoluta.

      El mejor tip que existe para MailChimp es el de testar A/B, lo que pasa es que hay que pagar, ya no lo tienen como versión gratuita, además de sincronizar tu cuenta con Analytics, Facebook y Twitter para poder trackear las veces que se comparte en muros, RTs y demás tu e-mail. También está guai la opción que tiene para hacer el match entre el mail y el ecommerce, de forma que se pueda trackear si el pedido viene del e-mail, aunque eso también puede hacerse con un código de descuento único para el mail o con un link hecho desde el URL builder de google http://support.google.com/googleanalytics/bin/answer.py?hl=en&answer=55578

      La clave para los e-mailings es la BDD y la creatividad, a parte de no enrollarse mucho y disparar concreto y rápido. Con eso, triunfamos fijo 😉

  • El 17.01.2014 , Cristina ha comentado:

    Muy útil la información

Deja tu comentario

Acepto expresamente la política de privacidad de jordiob.com