Como muchos otros diseñadores web, yo me esfuerzo en codificar páginas web hermosas pero flexibles que se vean virtualmente idénticas en cada navegador web. Desafortunadamente, diseñar boletines de email te envía de vuelta diez años atrás. Etiquetas depreciadas, tablas, estilos inline, ¡oh, cielos! En este artículo, voy a listar seis métodos que mejorarán inmediatamente tus layouts de email.

Boletines de Email.

Como nuevo contratado en el servicio de marketing por email de AWeber, mi asignación fue crear un par de docenas de nuevas plantillas para los boletines de email en HTML de nuestros clientes. Para el diseñador web que gusta del código limpio, un email en HTML es un recuerdo de un pasado afligido. Después de semanas de trabajo e incontables dolores de cabeza, entregué el material. También aprendí mucho acerca de diseñar para email.

Para ayudarte a evitar muchos de los dolores de cabeza que tuve durante la fase de prueba, aquí hay algunas cosas que puedes hacer para crear emails en HTML que se vean geniales.

¡Crea Múltiples Cuentas de Email Para Probar!

Si sólo vas a tomar un consejo de este artículo, por favor que sea éste. Como diseñadores, pasamos mucho tiempo creando la experiencia de usuario perfecta en la web y probando esa experiencia en múltiples plataformas. Sin embargo, cuando se trata de email, demasiados de nosotros fallamos en entregar la misma atención al detalle.

Parecido a hacer pruebas para la web, crear un layout de email que se vea igual en cada cliente de email puede ser una pesadilla absoluta.
Para asegurarse de que tus suscriptores recibirán tu mensaje en la forma en que se propuso – ¡prueba en todo lo que puedas!

Esto incluye pero no se limita a:

- Yahoo
- Gmail
- AOL
- Windows Live Hotmail
- Outlook 2007
- Outlook 2003
- Lotus Notes
- Thunderbird
- Entourage
- Mac Mail

¡Pero espera – hay más!

Algunos de estos clientes de email tienen versiones múltiples, cada una de las cuales hará el render del CSS y HTML de forma diferente.

Esto es parte de un HTML siendo rendereado por la versión antigua de Yahoo.

Aquí está exactamente el mismo email siendo rendereado por la nueva versión de Yahoo.

Diferencias sutiles, debo admitir. Pero suficientes de esas diferencias sutiles resultan en un diseño descuidado. Y si eso no es suficiente… el navegador de internet del usuario también puede jugar un papel en cómo se renderea tu diseño.

Ahora, antes de que arrojes tu computador por la ventana con frustración… los siguientes pasos te pueden ayudar a descartar la mayoría de los problemas en las pruebas.

Diseña Tus Emails Para Que Degraden Con Gracia

Me sorprende ver a algunos de los anunciantes más grandes rompiendo reglas de usabilidad básicas acerca de los email en HTML.

Aquí hay algunos lineamientos para tener en cuenta:

• Nunca confíes en las imágenes para comunicar información importante… especialmente una de gran tamaño. Una gran mayoría de los clientes de email tienen las imágenes desactivadas por defecto. A menos que el usuario tenga cierta iniciativa… le habrás enviado un lindo mensaje en blanco.
• Nunca confíes en las imágenes de fondo para hacer legible el texto. Asegúrate de que tu texto tiene suficiente contraste con o sin las imágenes activadas. Outlook 2007, por ejemplo, no mostrará las imágenes de fondo en las celdas de las tablas incluso si las imágenes están activadas.
• Entrega un enlace para las personas que tienen problemas viendo tu mensaje. Ok, esto no es absolutamente necesario – pero es una buena idea darle a tus suscriptores la opción de ver tu mensaje en su navegador web (especialmente si es un diseño particularmente pesado en HTML).
• Usa etiquetas ALT en las imágenes importantes. ¡No puedo enfatizar esto lo suficiente! Con las imágenes deshabilitadas por defecto, las etiquetas ALT descriptivas son tu última mejor oportunidad de convencer al usuario para que active las imágenes.
• Cuando uses etiquetas ALT, reduce el desorden. Completa las etiquetas ALT que importan y deja las otras en blanco (Nota: ¡No he dicho que las excluyas!)

Este es el encabezado de un email que recibí de Discovery Health:

Tomé esta screenshot desde mi cuenta de Gmail – antes de activar las imágenes. ¿Ves cómo el texto ALT “bullet” y “spacer” se interponen?

Agregar etiquetas ALT a elementos que sólo sirven para propósitos de diseño desordena el diseño y distrae de tu mensaje.

¡Usa Tablas Para Estructurar Tu Layout

¿Ah? ¿Pasé todo este tiempo aprendiendo CSS y ahora tengo que volver a las tablas? Cuando se trata de diseño para email, las tablas son lo mejor como si fuera el año 2003 – son lo más cercano que tenemos a los estándares.

Unas pocas cosas que tener en cuenta:

• Asegúrate de configurar todos los atributos de tabla disponibles donde sea posible. Eso incluye el cellpadding, cellspacing, borde, valign, ancho y alto.
• Las tablas anidadas son tus amigas. Asegúrate de usar la sangría apropiada para un código limpio y fácil de leer.
• Usa el atributo de fondo en una celda de tabla para configurar imágenes de fondo. Esta es la manera más fácil de sobrepasar los fondos que no se vean en Gmail.

Nota: Tus imágenes de fondo se comportarán como si estuvieran en mosaico… así que planifícate de acuerdo a eso.

• Toma en cuenta que las imágenes de fondo aplicadas a tablas o divs no están soportadas por Outlook 2007. De hecho, la única manera de usar una imagen de fondo en Outlook 2007 es aplicándola el cuerpo del email, lo cual por supuesto no está soportado por otros clientes de email como Gmail, Yahoo, o Windows Live Hotmail. Fantástico, ¿verdad?

Yo tampoco lo pensé así.

¡Usa Estilos Inline Cuando Codifiques Tu CSS

Algunos clientes email populares ignoran el código dentro de tus etiquetas de encabezado. Gmail y Hotmail son culpables particulares que se vienen a la mente.

Con tu layout configurado en formato tabla, es hora de aplicar estilos a tu texto e imágenes. Aquí hay algunas pistas y trucos para asegurar que tu mensaje se vea casi idéntico en cada navegador:

• Usa etiquetas de saltos de línea como reemplazo al padding vertical. Para alterar la cantidad de espacio que consumen, intenta rodearlas con tags de span y configura un tamaño de fuente mayor o menor.
• Usa estilos inline repetitivamente y a menudo. Aplicar una etiqueta de fuente a una tabla madre no significa necesariamente que será traspasada a todas sus hijas. Asegúrate de configurar estilos inline en todos tus elementos HTML.
• Aplica estilos inline detallados a los enlaces. Especialmente para los usuarios de Gmail – debes configurar estilos específicos para cada enlace. De otra forma, heredarán la fuente por defecto, tamaño y color configurada en cada navegador del usuario.
• Rodea tus imágenes con tags de span y configura los atributos de las fuentes para estilizar tu texto ALT de acuerdo a ellas. Esto te permite estilizar tu texto ALT, haciéndolo más legible cuando las imágenes están desactivadas.

¡Usa el Formateo de la Bandeja de Entrada de Gmail Para Tu Provecho

¿Sabías que la línea de asunto de cada email enviado a una cuenta de Gmail está seguido por los primeros fragmentos de código de texto dentro de ese email en particular?

¡Por qué no usar eso en tu provecho!

Arriba hay una imagen de mi bandeja de entrada de Gmail.

Ambos boletines tienen el mismo contenido de encabezado.

Sólo una diferencia – El Boletín 1 saca provecho del formateo de la bandeja de entrada de Gmail.

Aquí está cómo lo hice:

Inserta una imagen de 1px por 1px como el primer elemento en tu email. Rodea la imagen con etiquetas de span configurando el color de la fuente con el mismo color del fondo. Cualquier texto que pongas en las etiquetas de ALT para tu imagen de 1px por 1px ahora reemplazará ese fragmento de código de google en la bandeja de entrada del usuario.

¡Es tan simple como eso! Esta sutil diferencia destacará tu mensaje del resto de los emails en la bandeja de entrada del usuario.

¡Entonces, ¿Ahora Qué?

He hecho mi mejor esfuerzo para compartir algunas cosas que hago cuando creo emails en HTML. ¡Es tu turno! ¿Cómo lo haces para diseñar, codificar y probar tus campañas de email?

Cualquier recomendación, pista o truco que quieras agregar será muy apreciada por la comunidad de tus compañeros diseñadores.

(Fuente: artículo de nettuts.com escrito por Bob Ricca y traducido por Sara Salazar para nerv. )