Maquetación de emails
Desde el momento en el que metemos código HTML en un email, surge la dificultad de conseguir que se vea igual en Hotmail, Gmail, Yahoo, Outlook y demás clientes de correo. Desde NETTUTS han publicado una buena recopilación de consejos a seguir a la hora de maquetar de emails, con intención de minimizar los problemas que surgen habitualmente:
• Usa tablas: olvídate de usar divs porque dan más quebraderos de cabeza que otra cosa.
• Usa estilos inline: imprescindible hacerlo así porque la mayoría de clientes de correo eliminan los estilo por clases.
• Usa el atributo ALT en todas las imágenes: es muy habitual que el cliente de correo por defecto no enseñe las imágenes y entonces es recomendable enseñar el texto del ALT.
• No definas width y height para las imágenes: si se definen tamaños para las imágenes pero luego estas no se muestran, el resultado puede no ser bueno.
• Que el email esté dentro de una tabla con width del 100%: los clientes de correo solo tienen en cuenta el código dentro de la etiqueta body y no el código de la etiqueta body en sí misma. A tener en cuenta si por ejemplo se requiere un color de fondo.
• Ancho máximo de 600px: debido a que hay mucha gente que no abre el email y se queda con la preview.
• Da estilo a los enlaces: para machacar el estilo que tenga definido el cliente por defecto para todos los enlaces.
• Intenta no meter tablas dentro de otras tablas: para evitar problemas, mejor una tabla detrás de otra que una dentro de la otra.
• No uses imágenes de fondo: el texto encima de imágenes de fondo se ven mal en varios clientes.
• Los bordes no funcionan: como alternativa, se puede usar columnas de 1px.
• Bug con las imágenes en Hotmail: el cliente de Microsoft añade un extraño padding a todas, que se soluciona con un display:block.
• Codifica todos los caracteres: usar HTML entities en lugar de los caracteres especiales, asegura que el texto se verá bien en todos los clientes.
• No incluyas Javascript: si lo haces, lo más problable es que el email no pase el filtro de peligrosidad del cliente de correo.
• Ofrece al usuario una salida: un enlace para darse de baja del envío resulta imprencindible, hoy en día creo que por ley en España.
• Ofrece al usuario una alternativa: ofrecer un link hacia una visualización vía web del email resulta recomendable.
• Usa un GIF transparente: algunos navegadores no asimilan bien columnas sin contenido, por lo que si necesitas alguna, puedes usar una imagen transparente del tamaño que haga falta.
Antes de hacer envío hay que testearlo bien, por lo que resulta imprescindible tener cuentas en los principales servicios de correo como Hotmail, Yahoo y Gmail, así como varios navegadores disponibles, las versiones 6, 7 y 8 de Internet Explorer, Firefox, Safari y Google Chrome al menos.
Fuente: http://www.josebaumbelina.com/
• Usa tablas: olvídate de usar divs porque dan más quebraderos de cabeza que otra cosa.
• Usa estilos inline: imprescindible hacerlo así porque la mayoría de clientes de correo eliminan los estilo por clases.
• Usa el atributo ALT en todas las imágenes: es muy habitual que el cliente de correo por defecto no enseñe las imágenes y entonces es recomendable enseñar el texto del ALT.
• No definas width y height para las imágenes: si se definen tamaños para las imágenes pero luego estas no se muestran, el resultado puede no ser bueno.
• Que el email esté dentro de una tabla con width del 100%: los clientes de correo solo tienen en cuenta el código dentro de la etiqueta body y no el código de la etiqueta body en sí misma. A tener en cuenta si por ejemplo se requiere un color de fondo.
• Ancho máximo de 600px: debido a que hay mucha gente que no abre el email y se queda con la preview.
• Da estilo a los enlaces: para machacar el estilo que tenga definido el cliente por defecto para todos los enlaces.
• Intenta no meter tablas dentro de otras tablas: para evitar problemas, mejor una tabla detrás de otra que una dentro de la otra.
• No uses imágenes de fondo: el texto encima de imágenes de fondo se ven mal en varios clientes.
• Los bordes no funcionan: como alternativa, se puede usar columnas de 1px.
• Bug con las imágenes en Hotmail: el cliente de Microsoft añade un extraño padding a todas, que se soluciona con un display:block.
• Codifica todos los caracteres: usar HTML entities en lugar de los caracteres especiales, asegura que el texto se verá bien en todos los clientes.
• No incluyas Javascript: si lo haces, lo más problable es que el email no pase el filtro de peligrosidad del cliente de correo.
• Ofrece al usuario una salida: un enlace para darse de baja del envío resulta imprencindible, hoy en día creo que por ley en España.
• Ofrece al usuario una alternativa: ofrecer un link hacia una visualización vía web del email resulta recomendable.
• Usa un GIF transparente: algunos navegadores no asimilan bien columnas sin contenido, por lo que si necesitas alguna, puedes usar una imagen transparente del tamaño que haga falta.
Antes de hacer envío hay que testearlo bien, por lo que resulta imprescindible tener cuentas en los principales servicios de correo como Hotmail, Yahoo y Gmail, así como varios navegadores disponibles, las versiones 6, 7 y 8 de Internet Explorer, Firefox, Safari y Google Chrome al menos.
Fuente: http://www.josebaumbelina.com/
