9 trucos para diseñar el boletín HTML perfecto

Un boletín electrónico es la manera perfecta de mantenerse en contacto con sus clientes o seguidores. A menudo, su empresa o sitio web tendrá numerosas actualizaciones de productos, o posiblemente próximos eventos que le gustaría compartir. Siempre es posible publicar nueva información en su blog o en las redes sociales, pero su audiencia solo puede llegar tan lejos para llegar a usted. En este caso, el correo electrónico ciertamente no es tecnología muerta, simplemente potencial sin explotar.

El proceso de creación y envío de un boletín es mucho más fácil de lo que uno puede pensar, pero diseñar una plantilla personalizada y crear su propio código: esto puede llevar un poco más de tiempo..

Hemos recopilado algunos consejos fantásticos para que pueda diseñar boletines HTML de alta calidad como nunca antes. Incluso si eres un novato en el tema, seguramente encontrarás información inestimable para iniciarte en el proceso de marketing por correo electrónico..

Objetivos de un boletín

Antes de entrar en los aspectos de diseño, debemos aclarar su propósito para crear un boletín informativo. Dependiendo del tipo de sitio web que ejecute, la información contenida en su boletín puede variar dramáticamente de otros, pero el propósito principal de un boletín es entregar actualizaciones convenientes directamente a la bandeja de entrada de su lector.

Es probable que los usuarios pesados de Internet revisen su correo electrónico más de dos veces al día. Incluso aquellos que están constantemente ocupados se tomarán el tiempo de revisar sus mensajes al menos una vez al día. Este es el momento perfecto para llamar la atención incluso sin requerir visitas a su sitio. Incluso si nadie está haciendo clic en sus enlaces, la información es todavía recibido, que es genial para construir una marca.

Considere algunos de los temas que necesita ofrecer en su diseño. ¿Está incluyendo enlaces para registrarse para su servicio; Posiblemente enlaces de blog, o los últimos artículos publicados en su sitio? El diseño de su boletín de noticias reflejará cómo desea que respondan sus lectores, pero en última instancia, está buscando aumentar el interés y transmitir algunos datos interesantes a las masas..

1. Utiliza tablas en tus diseños

Esto puede parecer un poco contradictorio con los estándares web modernos de hoy en día, pero los correos electrónicos aún son arcaicos en sus motores de renderización, por lo que debe construir hacia modelos más antiguos. Desafortunadamente las tablas son la forma más fácil para que todo funcione correctamente entre los diversos clientes de correo electrónico. Dependiendo de su conocimiento de cómo crear diseños basados en tablas, esto podría ser una buena noticia.!

También puede preguntarse por qué div y otros elementos de bloque no son una buena idea. La mayoría de los clientes de correo electrónico son construido para quitar cualquier CSS extraño contenido. Esto significa que no podrás usar mucho de nada excepto para CSS en línea (e incluso el soporte completo es de mala calidad). Clientes como Microsoft Outlook 2007 y Gmail de Google tienen un soporte muy pobre para elementos flotantes y posicionamiento directo.

La mejor solución sería Anidan múltiples mesas dentro de la otra. El relleno y los márgenes no se establecen en una escala particular entre muchos clientes de correo electrónico. Esta es una razón para seguir usando ancho = "valor" en todos los elementos de la celda de la tabla. Estos siempre mostrarán el mismo ancho sin importar qué cliente de correo electrónico estén usando sus lectores, por lo que es mucho más seguro y mas consistente para establecer el relleno y los márgenes utilizando celdas de la tabla vacía.

2. Posicionamiento de ancho fijo

Tiene algunas opciones al crear los borradores del diseño de su boletín, sin embargo, la mejor opción a seguir es para establecer anchos fijos para su tabla que contiene. Hay muchas resoluciones de monitores diferentes, no podrás complacer a todos. Si no tiene elementos particulares con anchos estáticos, siempre puede usar ancho = "100%" en su tabla que contiene. Esto permitirá que su contenido llene todo el ancho de todos los clientes de correo electrónico.

Sin embargo, para muchos este método es un poco demasiado relajado.. Boletines constructivos requerirá un ancho fijo en la mayoría de los casos, especialmente si va a utilizar banners e imágenes configurados en un tamaño particular. Recomiendo trabajar con 500 px - 600 px de ancho máximo del documento. El tamaño de pantalla horizontal del iPhone y algunos modelos de BlackBerry están limitados a 320px, por lo que incluso a 500px su plantilla de correo electrónico será reducido para adaptarse adecuadamente.

Teniendo en cuenta que muchos usuarios móviles optan por ver el correo electrónico sin HTML de todos modos, esto no debería ser un gran problema. Los usuarios de clientes de escritorio y correo web probablemente experimentarán una configuración similar independientemente del sistema operativo que utilicen. En caso de duda crear algunos diseños de plantillas y Elige la que más te guste!

3. Unidades de píxeles

A menos que esté usando elementos fluidos en su boletín de noticias, es probable que necesite dimensionar algunas cosas. Tratar de mantenerlo en píxeles (px) En lugar de en otro tipo de unidad. Los porcentajes pueden confundirse fácilmente con los muchos clientes de correo web y las ventanas de software. Con menos elementos de página, los diseños fluidos pueden salir ilesos, aunque con algunos errores.

Pero los píxeles son siempre una cosa segura. Trabajando dentro del límite de ancho máximo de 600px, realmente puede encajar una gran cantidad de contenido dentro. La exposición es más fácil si divide sus diseños en dos o tres columnas, y siempre escribe sus tamaños en píxeles. La única excepción puede ser tamaños de letra dónde ems puede apoyar mejor a sus lectores, pero em El tamaño se diferenciará de manera similar, los porcentajes también lo harían Para simplificar, apéguese a las alineaciones basadas en píxeles..

4. Las posibilidades con CSS

Puede parecer que el diseño del correo electrónico está destinado a destruir el uso de los estilos CSS. Aunque hay muchas características no compatibles, el CSS sigue siendo perfectamente aceptable en muchos casos. Campaign Monitor tiene una hermosa tabla de propiedades CSS compatibles listadas por cliente de correo electrónico. Todos apoyarán lo básico como Familia tipográfica y Estilo de fuente, para que puedas saltarte el etiqueta si lo deseas.

Tenga cuidado con sus estilos de fuente para no empujar los límites demasiado lejos. Si se siente incómodo con los estilos en línea, siempre es posible utilizar la etiqueta de fuente HTML aunque esté en desuso. Si usted es un diseñador de CSS, no necesita salir del sistema, pero cualquier código abreviado de CSS puede resultar en diseños con errores. Como ejemplo el fuente: 12px / 14px Arial, sans-serif; la taquigrafía puede ayudar a ahorrar mucho espacio, pero no se acepta completamente para el diseño de correo electrónico, incluso cuando se usa con estilos en línea.

Incluso tus opciones de color debe ser escrito a mano. Colores hexagonales como #ccc o # e3f debe ser escrito en su totalidad como #cccccc o # ee33ff, respectivamente. Si puede crear lo que necesita sin CSS, le recomendaría esa ruta, pero no se asuste por completo en los diseños de correo electrónico de CSS, ya que contrariamente a la creencia popular, en la mayoría de los casos es compatible..

5. Ancla enlaces mejores prácticas

Seguramente querrá incluir algunos enlaces en su boletín. Estos podrían ser enlaces salientes a otras páginas de la web, o tal vez enlaces a las páginas más populares de su sitio web. Además, la mayoría de los pies de página contendrán un enlace de cancelación de suscripción para que sus lectores desactiven el proceso de correo electrónico, pero ¿cómo debe manejar todos estos enlaces en su diseño??

Bueno, se debe tener en cuenta primero que los clientes de correo electrónico son muy meticulosos con sus diseños. Muchos optarán por sobrescribir sus estilos de enlace, incluso con CSS en línea. Un buen truco es incluye color en línea y una etiqueta de separación adicional dentro del elemento de anclaje. Si el color y el estilo de sus enlaces son importantes para el diseño general, querrá tomar precauciones adicionales. He añadido un pequeño ejemplo de código a continuación:

algún texto de enlace

Los efectos de desplazamiento son no es compatible con Outlook 2007/2010, Gmail, iOS o Android. Es posible que desee incluir el a: flotar Estilo para todos los clientes compatibles: Outlook 2000/2003, Hotmail, Apple Mail y Yahoo! correo, pero personalmente no veo mucho beneficio en la experiencia parcial del usuario, ya que los selectores de anclaje no son muy compatibles, recomiendo solo ofreciendo 2-3 colores de enlace para usar a lo largo de su diseño.

Como presunción, los usuarios también esperan que sus enlaces se abran en una nueva pestaña o ventana. Idealmente el target = "_ en blanco" El atributo debe ser suficiente para que todos los navegadores reconozcan esta funcionalidad, y la inclusión de este atributo en sus enlaces de anclaje no debe afectar negativamente al software de correo electrónico como Lotus Notes o Outlook.

6. Prueba en todos los clientes principales

Un estudio reciente de los clientes de correo electrónico más populares (realizado por Campaign Monitor) muestra diez de los clientes de correo electrónico más populares en el último año. Puede parecer un poco tedioso pero los diseñadores debe adquirir el hábito de consultar sus boletines informativos en todos los principales clientes de correo electrónico, al menos en algunos de los clientes más comunes, como Gmail, Hotmail o Yahoo! Correo.

Esto no incluye únicamente el correo web, sino también el software operativo tanto en Mac OS X como en Windows. También según su diagrama. correo de iOS y Androide ambos se han disparado a la lista de los 10 primeros en los últimos años. De hecho, iPhone, iPod Touch y iPad Mail se ubican entre los 2 más populares en Outlook. Desafortunadamente, no hay una manera de probarlos sin tener uno de los dispositivos, por lo que tendrá que conformarse con otras opciones.

Un error con el soporte móvil viene en muchos modelos de iPhone y Android. La prestación de correo electrónico móvil a menudo cambiar el tamaño del texto dentro de su plantilla. Es posible que esto no afecte mucho su diseño, pero puede ser molesto para algunos lectores. Usando el CSS -webkit-text-size-adjust: none;, será Asegurar un tamaño de texto predeterminado uniforme en todos los motores de análisis sin necesidad de probarlo.

Si conoce a algún amigo o compañero que use software alternativo, es posible que desee Pide su ayuda para probar el boletín.. Tu también puedes Envíales una copia del correo electrónico. para comprobar en su dispositivo o pedir prestado el dispositivo para eliminar activamente los errores de codificación. Afortunadamente, Outlook ofrece una versión de instalación de Mac, por lo que no necesitará rastrear a un usuario de Windows para esas optimizaciones, pero cuando se trata de Lotus Notes o Windows Mail, es posible que no tenga suerte..

La alternativa es pagar por una solución como Vista previa de mi correo electrónico, desafortunadamente no ofrecen cuentas de demostración gratuitas, pero su servicio es bien conocido por ofrecer excelentes vistas previas de su diseño. El correo electrónico en Ácido es un servicio similar que ofrece una cuenta gratuita pero no le permite realizar pruebas en todos los clientes, lo que no tiene sentido. Los servicios de representación en línea deberían ser útiles si necesita probar muchas plantillas de boletines a largo plazo sin el uso de computadoras alternativas, sin embargo, no son fundamentales, por lo que no te estreses si no puedes probarlos todos!

7. Siempre ofrezca vistas basadas en la web

Los lectores no siempre podrán (o estarán dispuestos) ver su correo electrónico de forma nativa. Ofreciendo otra versión en algún lugar de la web. Le dará una sensación de facilidad y compatibilidad. Este proceso no puede ser completamente automatizado a menos que esté buscando incluir un Texto sin formato versión.

De esta manera, lo harías eliminar todas las etiquetas HTML Desde el diseño del boletín. No podrías incluir enlaces o estilos para nada. Todo el contenido sería simplemente ser presentado como un archivo de texto plano para los lectores sin las capacidades de representación. Esta es ciertamente una buena alternativa, pero cuando ofrece una versión web completa del mismo boletín, quita el daño causado por cualquier error de renderizado. La mayoría de los lectores ejecutarán un navegador web actualizado que puede diseñar y crear su boletín de noticias en y hasta la perfección.

Cómo configurar la página es enteramente tu elección. Algunos sitios web dedique una publicación completa al blog para duplicar el contenido del correo electrónico, tal vez con algo Información Adicional. Otros lo harán crear una página separada del sitio web principal sin ningún enlace directo en la navegación. Este método puede ser beneficioso, ya que los lectores no se distraerán con la plantilla del sitio web principal o el contenido de la barra lateral..

8. Agregar contenido de imagen

Las imágenes son otra razón para ofrecer a sus lectores una solución basada en web. Por defecto, los clientes de correo electrónico. están configurados para eliminar imágenes del contenido. Si su dirección se agrega a una lista segura, todas las imágenes se mostrarán de forma predeterminada, pero el usuario tiene que aceptar esta configuración así que ciertamente no es una garantía. Sólo Asegúrate de que las imágenes no sean necesarias como parte del contenido principal., pero incluido como un complemento extra para la estética de la página.

Una vez que llegue a la exportación de gráficos, hay algunos consejos para crear imágenes específicamente para correo electrónico. Querrás siempre establece los atributos de ancho y alto en tu img etiquetas. Sin estas especificaciones en orden., Algunos clientes distorsionarán el contenido de la imagen.. Un alt La etiqueta también será útil, por lo que los visitantes sabrán qué contiene el contenido de la imagen antes de que se cargue.

Como se mencionó anteriormente, posicionar las imágenes en su correo electrónico puede ser complicado. Evite el uso de flotadores ¡cueste lo que cueste! La imagen align = "left" atributo funcionará mucho mejor, o alternativamente mapear celdas de la tabla exacta para ajustar sus imágenes en la parte superior, izquierda o derecha de su boletín informativo. No podrá obtener una combinación perfecta con tantos clientes (especialmente clientes móviles), pero optimiza tus imágenes y mantener el tamaño de los archivos pequeños para obtener mejores resultados.

En cuanto al almacenamiento de imágenes, se recomienda que guarda todos los archivos en tu propio servidor web. Esta es la mejor opción en lugar de usar otro host de imágenes o cargar los archivos en un servicio de boletines en línea. Además deberías separe el contenido de sus boletines de noticias del resto de sus imágenes en una estructura de carpetas al igual que / img / email o / img / email / 2011.

9. Evita la carpeta de spam!

Esto puede ser difícil de escuchar, pero No todos los clientes de correo electrónico son amigables con los boletines.. Cada día se envían miles de millones de correos electrónicos y la mayoría contiene correo no deseado o contenido malicioso, por lo que tener estas medidas de seguridad incorporadas en la Bandeja de entrada es claramente una precaución..

Sin embargo, cuando se trata de marketing en Internet, puede desanimarse fácilmente para ver cómo su último boletín termina con la basura. Para reducir las posibilidades de que esto suceda, deberías limpia tu diseño para la simplicidad. No hagas imágenes molestas o infla su texto de título con cientos de palabras clave.

Tambien intenta mantenga su contenido breve y sobre el tema. No es necesario que incluya contenido completo para todos sus artículos o páginas. Intente agregar una o dos oraciones con un enlace alternativo a su sitio web en lugar de una lista larga. los cuanto más breve sea el aspecto de su correo electrónico, mayor será la probabilidad de que pase la inspección de spam.

Newsletter Design Gallery

¿Qué tan divertido sería un artículo de boletín electrónico sin algunos ejemplos fantásticos? Hay toneladas de diseños y plantillas de boletines de correo electrónico para revisar en Google. La galería de correo electrónico HTML es una fuente muy popular de inspiración..

A continuación, he incluido capturas de pantalla de los muchos boletines en la galería de Campaign Monitor. Esperamos que estos diseños geniales puedan proporcionarte algunas ideas geniales para tus propios diseños..

Diviértete diseñando tus boletines ideales!

Alerta para los negocios