Cómo maquetar un correo electrónico HTML para los distintos clientes
A pesar de que las redes sociales están consideradas como la manera más directa de mantener las relaciones con los clientes, no podemos caer en el error de despreciar medios como el correo electrónico para mantener esa comunicación.
Si a la hora de maquetar una web tenemos problemas con la visualización en los distintos navegadores, al crear un correo electrónico la casuística de clientes aumenta en gran medida, y su capacidad para interpretar el HTML y las CSS se reduce en muchos casos, por lo que hay que ser especialmente cuidadoso con los recursos que utilizamos.
Consejos para la creación de un boletín de correo electrónico
Contenidos
- No incluyas demasiados gráficos o imágenes de mucho peso, porque dismunuye su entregabilidad
- Evita todo el diseño con imágenes o podrá ser etiquetado como SPAM
- Contenido claro y sencillo, la mayoría de la gente dedicará 1,4 segundos a leer tu correo
- Si es un boletín de subscripción, facilita siempre el enlace para poder darse de baja.
Maquetación
- Utilice tablas para crear la estructura: El tratamiento de float, margin, padding en Gmail o en Outlook 2007 no nos permitirá usar estos estos recursos para la maquetación
- Fije el ancho en las celdas, no en las tablas
- Para dar espacio utilice cellpadding
- Anide tablas siempre que pueda en vez de jugar con márgenes o espaciados interiores
- Utilice <td bgcolor=”#ff6600″> mejor que por CSS. Para las imágenes actúe igual, tenga en cuenta que algunos clientes de correo no soportatrán esta propiedad por lo que debe proporcionar un color de fondo coherente.
- Evite los espacios en blanco en sus celdas
- Algunas CSS son soportadas correctamente por la mayoría de los lectores de correo como font.
- No utilice métodos abreviados para declarar sus CSS
- NO:
p {font:bold 1em/1.2em georgia,times,serif;} - SI:
p {font-weight: bold;font-size: 1em;line-height: 1.2em;font-family: georgia,times,serif;}
- NO:
- Enlaces:
- Proporcione definiciones de colores inline y una etiqueta <span> redudante para garantizar la visualización del color deseado
-
<a href="http://somesite.com/" style="color:#ff00ff"><span style="color:#ff00ff">this is a link</span></a>
- Imágenes:
- No utilice formato PNG
- No se olvide del atributo ALT
- Incluya siempre la dimensión de la imagen
- No use float, utlice align
Más información
- The Email Marketing Experience
- Rock Solid HTML Emails
- Lista de CSS soportadas por los clientes de correo
10 normas de diseño web para conexiones con baja velocidad de transferencia
Aunque continuamente está mejorando el ancho de banda que tenemos en nuestras casas y en nuestras oficinas, sigue existiendo a nivel mundial una gran cantidad de usuarios que utilizan conexiones con poca velocidad de conexión.
Además el aumento de conexiones desde dispositivos móviles cuya velocidad de transferencia de datos a es baja vuelve a crear las necesidad de optimizar las web para este tipo de conexiones.
10 Consejos
- Páginas más pequeñas de 25Kb: Páginas que carguen en menos de 10s para conxiones de 20Kbps.
- Reduce el número de imágenes: Es posible diseñar bien sin muchas imágenes, usando CSS para el layout y rollover.
- Estructura bien la web: Proporciona navegación simple, no hagas a los usuarios cargar páginas innecesarias.
- Usa Estilos en Cascada: No uses tablas para el Layout.
- Minimiza las llamadas http: Cada imagen, cada archivo CSS o Jav script es una llamada http distinta. Muchas pueden provocar lentitud en la carga de la página.
- Permite la compresión: Comprimiendo las página en el servidor puedes reducir a la mitad las páginas.
- Páginas Cacheable: Permite a los navegadores mantener en cache los contenidos.
- No uses PDFs: Si los usas optimizalos tambien. Pueden optimizarse usando graficos vectoriales y minimizando el número de fuentes.
- Pon primero los items más útiles: Pon el menú de navegación en la cabecera de cada página y así será lo primero en cargarse. Haz tus páginas útiles antes de que termine la carga.
- Muestra el tamaño de los enlaces: No obligues a a descargar archivos grandes, enlazalos siempre, y si son mayores de 75kb muestra el tamaño.
Mas información: Web Design Guidelines for Low BandWidth
