Diseña como un profesional.
Tips de Diseño
Hay 2 áreas principales para enfocarse cuando uno
diseña emails y newsletters: la estructura y el contenido. Y hay
distintas reglas que hay que seguir en cada caso.
Estructura
Regla 1: Medida
Diseña
mensajes en HMTL con un ancho máximo de 600 pixeles, de tal manera que
puedan ser previsualizados en el panel de correos de tus clientes.
Limita el peso de un correo a 150Kb, incluyendo imágenes, para evitar largos tiempos de descarga.
Regla 2: Utiliza tablas para tu diseño
Los
programas más usados de Email, tal como Gmail y Outlook 2007, tienen un
pobre soporte para etiquetas de HTML, tales como float, margin y
padding, por lo que las tablas trabajan de mejor manera como la
estructura (framework) de cualquier correo.
Para obtener los mejores resultados, por favor ten en mente lo siguiente cuando armes el código de la estructura de tus tablas:
- Establece el ancho (width) en cada celda, no en la tabla.
- Usa una tabla contenedor para los fondos de colores del cuerpo.
- Evita espacios en blanco innecesarios en las celdas de la tabla.
Regla 3: Utiliza CSS alineados (cascade style sheet) y fuentes genéricas para el formato
Gmail es el principal culpable de esto.
Desde que Gmail elimino el CSS de el <head> y
el <body> de cualquier email, todos los CSS deben estar alineados.
La buena noticia es que es algo que puedes hacer de manera
prácticamente automática. Existen servicios como Premailer que
reemplazaran todos los CSS alineados con un solo click.
Si utilizas esta herramienta, puedes dejar este paso
al final de tu proceso de diseño, para que puedas utilizar todos los
beneficios que ofrece el CSS.
Regla 4: Los 300 pixeles más relevantes debén ir hasta arriba
Los
páneles de previsualización de muchos proveedores de email, requieren
que el contenido más relevante estén en los primeros 300 pixeles de tu
diseño.
Regla 5: No asumas que las imágenes serán vistas.
Muchos proveedores de servicio de email tienen un bloqueador de imágenes por default:
- Establece el alto y ancho de tus imágenes para ayudar a tu mensaje a
mantener el diseño adecuado, incluso si el despliegue de imágenes no
esta activo.
- Nunca utilices imágenes para contenido importante, tal como encabezados, ligas o llamadas a acción (calls-to-action).
- Utiliza texto alterno para todas las imágenes y siempre incluye el
alto y ancho, para que los espacios en blanco no desplacen tus imágenes y
alteren el diseño cuando las imágenes no se muestren.
- Prueba tu diseño en un panel de previsualización, pantalla completa,
y con imágenes habilitadas y deshabilitadas, y ajusta la estructura de
acuerdo a las mismas.
Regla 6: Siempre incluye una versión de texto plano
Ayuda con la entrega, y eso es bastante.
Si solo envías la versión en HTML, entonces por lo
menos utiliza texto e imágenes en el mensaje no solamente imágenes. De
esa manera, los receptores pueden leer el mensaje si las imágenes se
encuentran desactivadas.
Más tips para imágenes
- Diseña imágenes en formatos .gif o .jpg (nunca .png) e incluye
parámetros de ancho y alto, de tal manera que la medida se mantenga
correcta.
- Utiliza texto en ALT para todas tus imágenes, de tal forma que tus
lectores no tengan que activar las imágenes para ver de lo que se están
perdiendo.
- Siempre incluye las dimensiones de tu imagen.
- Para tus suscriptores de Gmail, es importante recordar que el texto
al inicio de tu mensaje se muestra en el buzón de entrada, justo después
del campo de asunto. Si el correo contiene una imagen al inicio,
desplegará un mensaje con el texto alt-tag en el buzón de entrada.
- Utilizar colores de fondo, tanto en el cuerpo, como en la tabla,
para asegurarte que el color se muestra en los distintos proveedores de
correos. Algunos van a quitar el color de fondo del cuerpo, pero los
mensajes se desplegarán correctamente, siempre y cuando el color también
se utilice en la tabla.
- Outlook 2007 no tiene soporte para imágenes de fondo. Si quieres
utilizar una imagen de fondo en tu diseño, siempre utiliza un color de
fondo en que pueda respaldarse el proveedor de correo. De esta manera
solucionas el problema de bloqueo de imágenes y del Outlook 2007 de
manera simultánea.
- Evita los mapas de imagen (image maps) ya que no están soportados por todos los proveedores de correos.
Tips de código HTML
- Revisa todo el código HTML y asegurate que es válido y que todas las etiquetas (tags) están cerradas.
- Evita CSS, ya que muchos proveedores de correo, lo eliminan o
sobreescriben. No utilices Java, JavaScript, Marcos (frames), Active X,
ASP, PHP o HTML dinámico, pues la mayoría no los soportan.
- No utilices elementos de formato de registro, ya que pueden ser
eliminados del mensaje, y no recolectarán ningún dato a través de un
proveedor de correos de cualquier forma.
- No incrustes Flash u otros elementos de riche media o videos en tu
mensaje. En lugar de esto, coloca ligas a páginas que contengan este
tipo de archivos.
- Utiliza etiquetas <p></p> en lugar de etiquetas <div></div>para propósitos de alineación.
- Las etiquetas <br><br> utilizalas para separar parrafos de texto.
- Se cuidadoso al utilizar etiquetas <body>, ya que pueden ser eliminadas o ignoradas.
- Elimina Meta tags del código, pues no son utilizados por los
proveedores de correo. Son código extraño para ellos y no necesario, por
lo que deben ser removidos.
- Revisa el código HTML y elimina el código que no debería de estar
ahí. Programas como Dreamweaver u otros editores de tipo WYSIWYG pueden
agregar código a tu HTML, que puede provocar problemas en la manera en
que se muestran.
- En caso de que aplique, verifica que las etiquetas de
personalización y el contenido dinámico contenga el código correcto. Si
no esta correcto, los receptores veran el mensaje incorrecto.
- Utiliza etiquetas de título en las ligas a las URL´s para tener una mejor lectura.
Video en el email
Sin soporte para JavaScript o etiquetas de objeto, el
video en un email se limita a archivos .gif animados. Sin embargo, la
etiqueta “video” del HTML5 puede cambiar esto muy pronto. HTML5 trabaja
correctamente en distintos proveedores de correo, tales como Apple Mail,
Entourage 2008, MobileMe y el iPhone. Si tu utilizas video, provee un
contenido de respaldo, tal como un archivo .gif animado, o una imagen
con liga a el video en un sitio hospedado.
|
síguenos en 