Close Menu Navigation
Categorías abiertas del menú Crear newsletters compatibles con Gmail / Hotmail
- 21 febrero, 2012 -
- Diseño, Redes sociales -
- 2 Comentarios
Últimamente me he visto obligado a tener que buscarme la vida para enviar newsletters. Puedes ser muy bueno diseñando en HTML y CSS: que si DIVs, que si SPANs, que si CSS limpio y ordenado… que si cumpliendo todas las especificaciones (separar estilos de contenido)… bla bla bla. Pues bien, todo lo dicho no sirve para nada a la hora de enviar mails con cierto formato.
- Te dejo con unos consejos iniciales super super básicos:
- Lo primero que debes saber es que todos los estilos debes incrustarlos en el código HTML.
- Además, las imágenes deberás tenerlas alojadas en un servidor externo y referenciarlas correctamente.
- Lo mejor es maquetar con tablas. SÍ, has oído bien, MAQUETAR CON TABLAS.
- Chequea el mail en diversos clientes. Los más populares son Hotmail, Gmail, Yahoo y Outlook. Si no las tienes, crea cuentas para ver que lo que vas a enviar se ve correctamente.
Pues bien, supongamos que tu newsletter está ya “correctamente” maquetado en tablas (para ello puedes utilizar software como Photoshop -exportando correctamente- o similares) y lo envías creyendo que se visualiza correctamente en clientes como GMAIL. Sin embargo, el resultado puede ser algo así:
Cómo puedes ver, por muchos border=”0″, cellspacing, cellpadding… que pongas siempre se generarán unos espacios indeseados que pueden llevarte de cabeza en este tipo de clientes. Para que sirve de información, Outlook no suele dar tantos problemas. Lo que debes hacer es lo siguiente:
- Asegúrate de eliminar las etiquetas HTML y HEAD
- No puedes utilizar background-image; reemplázalo por colores de fondo (background-colour)
- No utilices DIVs (nunca!). Para la maquetación utiliza tablas.
- Incrusta los estilos en las propias etiquetas:
<td style="color:red"></td> <p style="margin-left:23px">Texto de ejemplo</p>
- Todos los elementos TD deben tener especificado un ancho y un alto:
<td height="200" width="100"></td>
- Para todas las celdas que incluyan dentro de ellas imágenes deberás aplicar el siguiente código. Esta instrucción es la madre del cordero:
<td style=" inline-height:0px">
- Si aún así siguien mostrándose espacios entre celdas, aplica el siguiente código a las imágenes:
<img src="img.jpg" style="float:left; display:block">
- Si quieres centrar todo el newsletter en el centro de la pantalla esto te será útil:
<table width="100%" cellpadding="10" cellspacing="0" bgcolor='#FEFAE7' > <tr> <td valign="top" align="center"> <!-- newsletter --> </td> </tr> </table>
- Para cambiar el color de fondo:
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0" bgcolor='#212121'>
Y el resultado final:
Posts Relacionados: 3 plugins SEO para WP que deberías conocer | 30 sitios donde descargar imágenes gratuitas | Formas de perder el tiempo posicionando webs | Qué hacer si Google te ha penalizado en su ‘last update’ | Menú de subnavegación (CSS+JQuery) | NounProject: Gran colección de iconos vectoriales | Reveal: Ventanas modales con jQuery | Contactable: Formularios accesibles con jQuery | jQuery: 10 snippets útiles que deberías conocer | Formulario en varios pasos usando jQuery |
Muchas gracias loco!! me salvaste la cabeza… hace tiempo le buscaba la vuelta a gmail… y con estas instrucciones me salvaste la guita
[...] separar estilos de presentación, cumplir estándares W3C, etc. En otro post te comentaba algunos tips para maquetar emails en HTML totalmente compatibles con los diferentes clientes de correo (Gmai…. Pues bien, hoy voy más allá y te presento directamente plantillas para que utilizes [...]