Get Social With Us
9 trucos para diseñar el perfecto Newsletter | Fiebre Creativa
21352
post-template-default,single,single-post,postid-21352,single-format-standard,ajax_fade,page_not_loaded,,select-theme-ver-2.2.1,wpb-js-composer js-comp-ver-5.6,vc_responsive
9 Trucos para crear el newsletter perfecto

9 trucos para diseñar el perfecto Newsletter

Un boletín de correo electrónico es una buena manera de estar en contacto con los clientes o seguidores. A menudo tu empresa o sitio web tendrá numerosas actualizaciones de productos, o posiblemente próximos eventos que te gustaría compartir. Siempre es posible publicar información nueva en tu blog o flujos de medios de comunicación social, pero esto llega a un tope. En este caso, correo electrónico no es tecnología obsoleta, y pasamos a convertirla en algo potencial.

Diseñando el newsletter perfecto

Hemos recopilado algunos consejos fantásticos para conseguir diseñar newsletters HTML de alta calidad. Incluso si eres un novato en el tema seguramente encontrará alguna información muy valiosa para empezar en el proceso de marketing de correo electrónico.

Objetivos de un boletín de noticias

Antes de entrar en los aspectos de diseño nos deberíamos aclarar su propósito para el cual queremos un newsletter. Dependiendo del tipo de empresa, web o servicio, la información contenida en nuestro boletín informativo varía considerablemente de otros incluso de los nuestros propios, pero el propósito principal de un boletín es entregar lo más ajustado al perfil del receptor.

Los usuarios habituales de Internet son propensos a revisar su correo más de dos veces al día. Incluso aquellos que están constantemente ocupados siempre sacan tiempo para echarle un ojo a su bandeja de entrada por lo menos una vez al día. Este es el momento perfecto para captar la atención incluso sin necesidad de visitas a tu web. Aunque nadie haga un solo click en nuestro boletín, la información es recibida igualmente, lo cual es genial para la construcción de una marca.

Veamos algunos de los temas que tendría que ofrecer en su diseño. Están incluyendo enlaces para inscribirse para el servicio; ¿posiblemente blog enlaces o más artículos recientemente publicados en su sitio? El diseño de tu boletín de noticias reflejará cómo desea a sus lectores a responder, pero en definitiva lo que busca revitalizar el interés y pasan alrededor de algunos datos interesantes de información.

1. utilizar las tablas en sus diseños

Esto puede parecer un poco contradictorio hacia los estándares web modernos de hoy (que bastante les cuesta avanzar), pero son todavía más arcaicas en sus motores de renderizado e-mails, así que tienes que construir tu newsletter basándote en modelos antiguos. Lamentablemente tablas son la forma más sencilla para que todo funcione correctamente entre los diferentes clientes de correo electrónico.

También nos preguntamos porqué qué utilizar DIVs y otros elementos HTML no es buena idea. La mayoría de los clientes de correo electrónico están diseñados para eliminar cualquier contenido CSS externo. Esto significa que usted no podremos utilizar mucho más allá de lo que propiamente tenga el email dentro de él. Clientes como Microsoft Outlook 2007 y Gmail de Google tienen muy poco soporte para la maquetación moderna en base a DIV y CSS.

La mejor solución sería anidar varias tablas dentro de otras. Los fondos y los márgenes no están establecidos a un tamaño en particular. Esta es una razón para seguir usando width=”value” en todos los elementos de celda de tabla. Estos siempre muestran la misma anchura, no importa que cliente de correo electrónico utilizan sus lectores, es mucho más seguro y más consistente para establecer el relleno y márgenes mediante celdas de una tabla vacía (un clásico de finales de los 90).

2. Ancho fijo de posicionamiento

Siempre hay algunas opciones en la maquetación de proyectos de diseño de newsletter, sin embargo, la mejor opción a seguir es establecer el ancho fijo para la tabla que contiene. Hay muchas resoluciones, desde monitores de diferentes tamaños, hasta móviles y tablets – y no vamos a ser capaces de ajustarnos a todos ellos a la vez. Si no tenemos elementos particularmente con contenido fijo, siempre se puede utilizar width=”100%” en tabla contenedora. Esto permitirá que el contenido interior se ajuste al ancho total de todos los clientes de correo electrónico.

Sin embargo, para muchos este método puede ser demasiado ancho. Puede haber personas que necesitarán de un ancho fijo en la mayoría de los casos o en tipos de newsletters más creativos, sobre todo si vas a ser el uso de logos o imágenes concretas que irán a un tamaño determinado. Recomiendo trabajar con 500px – 600px máxima anchura del documento. El tamaño horizontal de la pantalla del iPhone y algunos modelos de BlackBerry se limitan a 320px, por lo que incluso en 500px tu plantilla de correo electrónico se reducirá para que quepa correctamente.

Teniendo en cuenta que muchos usuarios de móviles eligen para ver el correo electrónico sin HTML, esto no debería ser un gran problema. Los usuarios de los clientes de escritorio y webmail probablemente experimentarán una configuración similar, independientemente del sistema operativo que utilicen.

3. Unidades en pixels

Puede parecer que el diseño de correo electrónico es para destruir el uso de estilos CSS. Aunque hay una gran cantidad de funciones no compatibles, CSS sigue siendo perfectamente aceptable en muchos casos. Existe Campaign Monitor tiene una genial tabla de propiedades CSS compatibles ordenados por cliente de email. Todo será utilizar de nuevo los conceptos básicos como font-family y font-style.Posibilidades con CSS

Siempre es posible utilizar la etiqueta de fuente HTML como antaño, aunque esté obsoleta. Si eres diseñador CSS, no tienes que dejar el sistema, pero cualquier codificación de CSS abreviada puede resultar en diseños fallida. Por ejemplo snippets como font: 12px/14px Arial,sans-serif; son rápidos de codificar y recursivos, pero no son completamente compatibles con diseños de correo electrónico, incluso cuando se utiliza con estilos dentro de la etiqueta.

Incluso los colores deben estar escrito a mano constantemente. Colores hexadecimales como #ccc o #e3f deben escribirse completos como #cccccc o #ee33ff, respectivamente. Sabemos que es un rollo, pero si queremos fiabilidad al 100%, es por donde debemos pasar.

4.- Mejores prácticas con enlaces

Seguramente queramos añadir algunos enlaces a nuestro newsletter. Siempre dirigidos a otras páginas web o a nuestros contenidos propios. A parte de tener en el footer los típicos desuscribir a nuestros usuarios, pero ¿cómo deben utilizar todos estos vínculos en nuestro diseño?.

También cabe señalar primero que clientes de correo electrónico son muy toca*** con los diseños. Muchos elegirán sobrescribir nuestros estilos de enlace por los suyos, incluso con CSS en el style. Un buen truco es incluir una etiqueta span adicional dentro del enlace para incluso el color. Si el color y el estilo de tus enlaces son importantes para el diseño en general, nos curaremos en salud y lo forzaremos igualmente. Aquí un pequeño snippet para ello:

<a style="color: #3147ca;" href="https://www.fiebrecreativa.com/"><span style="color: #3147ca;">creación de páginas web</span></a>

Normalmente siempre se abrirá todo en pestaña nueva, aún así el target=”_blank” debería ser suficiente para todos los navegadores.

6. Probarlo con los clientes más utilizados

Un estudio reciente de clientes de correo electrónico más populares 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 deberían entrar en el hábito de revisar sus nnewsletters en todos los clientes de correo electrónico más utilizados, tales como Gmail, Hotmail o Yahoo! Mail.

Esto no incluye exclusivamente webmails, sino también operativo software como Mac OS X y Windows. También según su diagrama correo de iOS y Android se dispararonentre los 10 mejores en los últimos años. De hecho iPhone y iPad son los más populares junto con Outlook. Desafortunadamente no hay una manera de probar estas sin ser dueño de uno de los dispositivos, así que hay que buscar otras soluciones.

Muchos fallos, vienen a través de soporte móvil en modelos como Android y iPhone. El procesamiento del correo electrónico móvil será a menudo redimensionado. Esto no puede afectar a su diseño mucho, pero puede ser molesto para algunos lectores.

Si conoces amigos o colegas que usan software alternativo, diles que te echen un cable para probarlo. Puedes enviar una copia del correo electrónico para comprobar su dispositivo o pedir prestado el dispositivo para activamente eliminar errores de codificación.

7. Ofrecer siempre versión web

Los clientes de correo electrónico, pueden no leer nuestro correo electrónico nativamente. Con lo que es conveniente dar alternativa para poder ver ese newsletter en algún sitio en la Web que ofrezca una sensación de facilidad y compatibilidad.

Siempre es una buena alternativa en caso de que nuestro boletín esté en texto plano, para así asegurarnos que cualquier cliente de email nos reconoce y lee perfectamente

¿Cómo configurar luego la página de destino (landing page) es totalmente tu decisión. Se dedicarán entradas anteras al mundillo del aterrizaje de un newsletter por parte del usuario a nuestra web.

8. Añadir contenido a las imágenes

Las imágenes son otra razón para ofrecer a los lectores una solución basada en web. Por defecto, los clientes de email están listos para visualizar y cargar imágenes fuera del cliente. No obstante es completamente confiable si tu dominio está guardado a una lista segura, todas las imágenes se mostrarán por defecto, pero el usuario tiene que aceptar esta configuración así que ciertamente no es una garantía.

Una vez que llegues a exportar gráficos allí son algunos consejos para construir imágenes específicamente para el correo electrónico. Usted querrá siempre definir los atributos de anchura y la altura en sus etiquetas IMG. Sin estas especificaciones en orden, algunos clientes distorsionan el contenido de la imagen. Una etiqueta alt también será útil, para que los visitantes sepan lo que el contenido de la imagen contiene antes de que está cargada.

Como se mencionó anteriormente, es difícil conseguir posicionar las imágenes en tu e-mail. ¡Evita el uso del atributo float a toda costa! El atributo align=”left” de la imagen podrá fallar con lo que me remito a las anteriores instancias de hacer todo a base de tablas incluso con los anchos marcados (y aún así fallarán muchas veces en móviles).

En cuanto a alojamiento de imágenes, es recomendable que todos los archivos estén en tu propio servidor eeb. Esta es la mejor opción en lugar de utilizar otro host de imágenes, o bien por subir los archivos a un servicio de boletín electrónico. Además es conveniente separar el contenido de los newsletter aparte del resto de tus imágenes en una estructura de carpetas tipo /img/email o /img/email/2015.

9. Evitar la carpeta de Spam

Esto puede ser fácil de decir, porque la realidad es que los clientes de email no les suelen gustar los newsletter. Hay miles de millones de correos electrónicos circulando por la red diariamente y la mayoría contienen spam o contenido malicioso, teniendo así estas medidas de seguridad incorporadas en la bandeja de entrada es claramente para incrementar la seguridad.

Sin embargo cuando se trata de marketing en Internet, molesta ver todo nuestro trabajo que acaban en la basura del spam. Para reducir las posibilidades de que esto ocurra nuestro diseño debe ser cuanto más simple mejor. No utilizar imágenes molestas o cargar nuestro newsletter con cientos de palabras clave.

También intenta mantener su contenido simple y breve, sobre la temática. No hace falta meter todo el contenido completo de todos nuestros artículos o páginas. Con poner una frase o dos con un enlace que vaya a nuestra web de Internet con el contenido extensivo llega.