NewsletterSoft es la primera plataforma española y una de las primeras a nivel global que implementa la tecnología amp para emails en su solución de email marketing.

Cómo funciona AMP para emails

La tecnología AMP (Accelerated Mobile Pages) fue desarrollada por Google para poder entregar de forma más rápida las páginas web en entornos móviles. Una mayor velocidad de carga redunda en una mejor experiencia para el usuario.

Google ha extendido la tecnología al entorno del email. Puede parecer una tontería, pero estamos ante uno de los cambios más significativos que ha experimentado el email marketing en los últimos 20 años.

No hace tanto tiempo que los clientes de correo soportan HTML, desde este avance no ha habido ningún cambio significativo en la forma en que los usuarios interactúan con el email.

Es cierto que la aparición de los “Smart phones” añadió un nuevo canal, pero la interacción de los usuarios no cambió. Al recibir una campaña de email marketing, lee el contenido y si les interesa pulsan un enlace que los lleva a una página Web saliendo del email.

Que aporta AMP para emails

El AMP para email aporta interacción a las campañas de email marketing. Con esta nueva tecnología el usuario puede navegar dentro del propio email y realizar acción como comprar un producto, reservar una cita, ver un catálogo de productos amplio…

AMP dota de interacción a los newsletters conviertiéndolos en una extensión de la Web.

Limitaciones de la tecnología AMP para emails

La utilización de AMP en el email por el momento esta limitada al entorno de Gmail y en breve se desplegará en otros ISP como Yahoo, Outlook.

Los clientes de correo que no soporten AMP podrán mostrar la versión de texto o HTML del newsletter. La utilización de un “fall-back” es una buena práctica ya que nos asegura que nuestro mensaje llegará a los usuarios. Da igual que cliente de correo tengan. La contrapartida es que complica el trabajo de maquetación de los newsletters. Si queremos utilizar AMP deberemos crear  2 versiones, una con AMP y otra en HTML.

Otro problema que plantea la utilización de la tecnología AMP es que cambia la forma de medir el éxito de las campañas de email marketing. Al permitir que el usuario navegue entre los contenidos sin necesidad de ir a nuestra Web ni hacer click nos obliga a replantear la fórmula en que medimos el éxito de nuestras campañas.

La tercera limitación, es que, aunque AMP es Open Source, las librerías que utiliza para mostrar los contenidos de forma dinámica están alojadas en Google. Dando más protagonismo a una plataforma que tiene el “control” de internet.

Para evitar fallos de seguridad para poder enviar newsletters con AMP hay que disponer de los registros SPF, DKIM y DMARC correctamente configurados. Este es la fórmula en que los mails pueden asociarse a un remitente.

No olvidemos que estamos permitiendo que los usuarios interactúen con contenidos y realicen acciones como reservar servicios, comprar productos, completar formularios…

AMP para email tan solo dispone de un grupo reducido de las funcionalidades para funcionalidades de AMP para Web. Aunque esto no impide que podamos dotar de gran interactividad a nuestros newsletters.

Cómo maquetar un email AMP

Para poder maquetar un newsletter en AMP deberemos utilizar un conjunto de etiquetas y librerías definidas en https://amp.dev/documentation/components/

A nivel del correo deberemos añadir un nuevo header que contenga las etiquetas AMP. Es importante destacar que siempre que utilicemos AMP debemos implementar un fall-back para aquellos clientes de correo que no lo utilicen.

Newslettersoft es una solución de email marketing pionera en la implementación de AMP y permite enviar este tipo de campañas. Nuestro equipo de maquetación de newsletters puede crear cualquier tipo de contenido para hacer tu email más interactivo.

Para empresas de retail recomendamos la utilización de catálogos interactivos. Aunque las funcionalidades pueden ir más allá como completar transacciones directamente desde el correo

Ejemplos de AMP para emails que sean interactivos

Uno de los ejemplo paradigmáticos de la utilización de AMP en newsletters es Pinterest. La utilización de email interactivos en sus comunicados ha aumentado varios órdenes de magnitud la apertura de sus newsletters.

Otro ejemplo interesante es el de Doodle, ya que permite confirmar citas directamente sobre el email sin necesidad de iniciar sesión en el Web. Puede parecer una nimiedad, pero el porcentaje de citas cerradas ha aumentado de forma significativa desde que utilizar amp en sus emails.

Cómo enviar un email interactivo con AMP

La forma más sencilla de enviar una campaña de email marketing con AMP es ser cliente de nuestra herramienta de email marketing Newslettersoft. En el apartado HTML colocarás el newsletters habitual. Este puede ser creado con el editor “Drag&Drop” o añadiendo directamente el HTML.

Para la versión AMP del email por el momento nuestro equipo de maquetadores de newsletters crea el contenido manualmente. Este se pega en el campo AMP.

Al enviar la campaña de email, se envían las 2 versiones simultáneamente, de forma que si el cliente de correo no soporta AMP muestra la versión HTML.

The post AMP para emails. El email se vuelve interactivo appeared first on NewsletterSoft.

Cuando estamos diseñando una campaña de email marketing, sobretodo hoy en día que en la mayoría de los casos todos sabemos que la lectura de las campañas puede ser en cualquier dispositivo, tenemos que analizar muy bien dónde vamos a colocar la versión web de la campaña para que sea útil.

En el post de cómo maquetar una campaña  estubimos viendo todos los elementos esenciales de una campaña de email marketing, aquí sólo vamos a analizar el enlace a la versión web de una campaña de email marketing.

Este enlace nos puede ser útil para muchas cosas:

1.- Ver el email en un explorador de internet cuando hay dificultades de visualizarlo en el gestor de correos.

2.- Mantener una versión de nuestras campañas siempre activa y poder reutilizar este enlace para mantener un historico, esto se usa mucho en el caso de los Newsletters periódicos.  Se pueden colocar las versiones web de los Newsletters antiguos en un apartado de la web interno o externo para que los lectores puedan leer los contenidos o incluso para ayudar a los indecisos a suscribirse a nuestro newsletter gracias a la visualización de contenido real.

Muchos profesionales no le dan demasiada importancia a esta función que tienen la mayoría de herramientas de gestión de campañas de email marketing, pero si nos ponemos en el lugar del usuario podemos darnos cuenta que nuestro usuario y su entorno reunen las características que veremos a continuación.

Características del usuario y el entorno en el que se encuentra en el momento de visualizar nuestras campañas de email marketing:

1.- Todos sabemos que el usuario digital es cada vez más impaciente, por lo tanto, le tenemos que dar todas las facilidades para que visualice nuestra campaña de email marketing.

2.- El usuario puede estar viendo nuestra campaña desde cualquier dispositivo, ordenador, tablet, móvil, etc…

3.- El usuario ya no visualiza los email en un sólo espacio, puede estar mirando un email en casa, en el trabajo, durante los trayectos, etc. por lo tanto son multiples espacios y múltiples visualizaciones en muchos casos.

4.- En los sistemas informáticos de los usuarios, sobretodo en entornos corporativos pueden haber filtros que no dejen cargar las imagenes o que se requiera de una acción por parte del usuario para cargar dichas imagenes y este no sepa cómo hacerlo.

5.- Al estar el usuario visualizando la campaña de email marketing en entornos diferentes tendrá un nivel de conexión a internet diferente, mejor o peor según el caso.

6.- Grado de atención del usuario y «paciencia» será diferente en función del entorno, lo que esté haciendo y el nivel de conexión.

Analizado el usuario y el entorno, qué podemos hacer para ayudar al usuario a leer siempre nuestro contenido sin dificultad?

Un elemento creado expresamente para esta finalidad, garantizar que se pueda leer bien un email, es la versión web de la campaña de email marketing o newsletter.

El segundo paso es decidir dónde colocamos este enlace para que sea visible y accesible en caso de que el usuario necesite clicar.

A continuación os pongo 2 ejemplos de localización de 2 campañas de email marketing de marcas de prestigio y podemos entrar en debate.

El primer caso es una campaña de la marca Calvin Klein y el enlace de la versión web está colocada al principio con un texto claro y el enlace accessible con la frase «Si tienes problemas para ver las imagenes, haz clic aquí».

Visualización de Campaña de email marketing de Calvin Klein

El segundo caso es una campaña de email marketing de la marca G-Star, que coloca el enlace de la versión web al final del comunicado con una letra un poco pequeña y con la frase «ver en el navegador»

Visualuzación de campaña de email marketing de G-Star

¿Cómo lo véis? Cuál creéis que es la mejor opción para colocar el enlace de la versión web y cuál sería el texto más entendible y accesible.

Lo que más nos interesa es que la información sea localizable, visible, inteligible y que sea fácil de clicar en el espacio sin que induzca a errores o a clicar en otros puntos del comunicado. Tal y como hemos explicado antes el usuario puede acceder al contenido desde cualquier dispositivo por lo tanto cualquier tamaño de pantalla y puede usar el ratón, el teclado o su dedo para «hacer Clic» a la información. Por lo tanto la forma en que coloquemos la información es cada dia más importante.

Vamos a ver cuáles serian los temas a debatir alrededor del enlace de la versión web de las campañas de email marketing tomando como base los ejemplos que os acabo de incluir de las marcas Calvin Klein y G- Star y partiendo de vuestra experiencia podemos analizar los puntos siguientes para ver cuáles son los elementos más importantes y cuál es la mejor forma de emplazarlos.

a) Ubicación dentro de una campaña de email marketing: al principio o al final? o podríamos plantearnos de incluirlo al principio y al final si el contenido de la campaña es muy largo?

b) Tamaño de la letra, cuál es el tamaño adecuado para que sea visible desde cualquier dispositivo?

c) Contenido del texto, cuál es el contenido, texto de la frase, idoneo para que el usuario entienda que es la versión web de la campaña de email marketing?

d) Color de la frase, si os habéis fijado hay muchas marcas que usan un gris claro para esta frase en sus campañas de email marketing cómo lo véis?

Me gustaría que aprovecharáis la sección de comentarios para opinar en base a vuestra experiencia, ¿Cuál creéis que es la forma más idónea de colocar este enlace?

The post Dónde colocar la versión web de una campaña de email marketing appeared first on NewsletterSoft.

The post Cómo utilizar Tipografías en newsletters appeared first on NewsletterSoft.

Si no quieres tenerte que preocupar de todos los temas relacionados con la maquetación siempre puedes contratar nuestros servicios de maquetación de newsletters

Cómo maquetar una newsletter – Formato

• Se muestran correctamente los colores y fuentes? Comprueba su tamaño, alineación, interlineado…
• Hay algún salto de línea extraño en el contenido? Revisa con cuidado las menciones  a la marca o los nombres de los productos.
• Utiliza alguna herramienta de testeo automático como Litmus o EmailonAcid y realiza comprobaciones manuales en los principales clientes como Hotmail, outlook.com, Outlook, Gmail, Yahoo, Apple email y Live.com
• Mira que no haya elementos con alineación por defecto
• Asegúrate que has definido un atributo «with» en cada etiqueta <td>.

Cómo maquetar una newsletter – Contenido

• Los nombres, fechas, lugares, números y teléfonos son correctos?
• Hay algún tipo de contradicción en el contenido de tu newsletter.
• Son correctos los símbolos, logos y nombres de las marcas utilizados?
• Utilizas un enlace de «baja» en tus comunicados. Debes posicionarlo en un lugar visible en la zona superior e inferior de tu campaña de email marketing.
• Has incluido el enlace a la versión web al maquetar tu newsletter?
• Has incluido la opción de enviar a un amigo en tu newsletter?

Cómo maquetar una newsletter – Imágenes

• Todas las imágenes al maqueatr tu newsletter se muestran correctamente? Revisa su alineación, tamaño, ten en cuenta la proporción entre altura y anchura al maquetar la newsletter.
• Todas las imágenes utilizan la etiqueta «alt» incluido el logo.
• Asegúrate que los bordes alrededor de la imagen esta fijados a «none»
• Asegúrate que las imágenes de fondo se muestran correctamente en los distintos clientes de correo. Utiliza un «fall back color» (color de fondo alternativo) en caso de que no se muestren y que el contenido no pierda su sentido.

Cómo maquetar una newsletter – Enlaces

• Al maquetar tu newsletter asegúrate que todos los enlaces se abren en una nueva ventana y se dirigen a  la página correcta.
• Todos los enlaces tienen el color correcto. Asegúrate que el color permanece una vez seleccionado.
• El logo tanto en la cabecera como en el pie del newsletter debe tener un enlace
• Recuerda que al maquetar tu newsletter debes insertar # en aquellos enlace que no contengan un valor en el atributo «href».

Si sigues los todos estos consejos, conseguirás maquetar tu newsletter para que sea compatible con todos los clientes de correo y tus usuarios tenga una experiencia lo más parecida indistintamente del cliente de email que utilicen. Verás como tus campañas funcionan mejor y convierten más.

En NewsletterSoft, sabemos que maquetar una newsletter no es fácil y por eso dispones de un servicio profesional de maquetación de newsletters

En menos de 8 horas podemos tener tu newsletter correctamente maquetado y listo para ser enviado desde cualquier herramienta de email marketing, con la tranquilidad de un buen trabajo.

The post Cómo maquetar una newsletter appeared first on NewsletterSoft.

Ofrecemos este servicio por un motivo muy simple, las campañas enviadas en formato HTML tienen una mejor tasa de aperturas. Si el HTML de tus campañas y es compatible con terminales móviles, lo que se conoce como plantillas responsive, la tasa de aperturas aun es mayor.

Maquetar newsletters en HTML de forma correcta, no es complicado pero requiere un cierta experiencia para asegurar la compatibilidad con los distintos clientes de correo y terminales.

Otro punto a tener en cuenta es que dependiendo de cómo sea el diseño de los newsletters la compatibilidad con algunos terminales móviles va a ser “complicada” por este motivo os presentamos un conjunto de puntos que debéis tener en cuenta en el momento de diseñar vuestros newsletters para asegurar una máxima compatibilidad.

Tamaño del newsletter:

• Se recomienda que el tamaño de tus newsletters oscile entre 500-650px para la versión de escritorio y los 320-500px para la versión móvil.
• Para cada newsletter debéis crear 2 archivos PSD. Uno de 600px para la versión de sobremesa y otra de 320px para la versión móvil. Nosotros convertiremos estos 2 ficheros en un único HTML para vuestras campañas.

Estructura:

• Añadir en la parte superior un enlace para darse de baja, acceso a la versión Web, ofrecer información del remitente y del tipo de mensaje.
• Utilizar siempre un texto de “pre-header”. Es el texto que muestran en algunos clientes de correo al finalizar el asunto de los mails. Sirve para ofrecer información sobre el contenido del newsletter. Este texto puede ocultarse al abrir el newsletter.
• Diseña teniendo en mente la “Johnson Box”
• Los diseños en vertical son más flexibles que la maquetación horizontal y permiten mostrar más contenido.
• Evitar utilizar estructuras de contenidos en varias columnas. Al reposicionar los elementos para versiones de dispositivos con pantallas pequeñas aumenta la complejidad en la codificación del contenido hecho que dificulta su posterior mantenimiento sobretodo utilizando editores gráficos WYSIWYG.
• Definir zonas del newsletter con llamadas  a la acción que sean fácilmente identificables por los usuarios.

Utilización de imágenes

• Recuerda que las imágenes pueden ser bloqueadas por algunos clientes de correo. Asegúrate proporcionar un texto alternativo u otros elementos de diseño que se muestren al ser bloqueadas.
• Mantén las proporciones, piensa como deben verse las imágenes en la versión móvil (se deben escalar, cortar, o directamente debe mostrase u ocultarse la imagen).
• Utiliza imágenes optimizadas, las conexiones lentas pueden hacer que la descarga del contenido sea lenta.
• Si tu newsletter se basa en una única imagen. Recórtala y utiliza elementos aternativos para cuando la imagen este bloqueada. Nuestra recomendación es que almenos una parte del mensaje sea texto.

Cosas a evitar

• Aunque cada vez más clientes de correo soportan el vídeo intenta no reproducirlo directamente en tus correos y si lo haces proporciona algún mecanismo de falla back.
• La utilización de JavaScript, Flash y formularios en los correo no se recomienda ya que su contenido puede ser bloqueado.
• Utilización del texto y tipografías
• El texto de tus newsletters debe ser corto, directo y organizado en frases o párrafos. Separa los contenidos textuales de tus campañas con elementos gráficos, así conseguirás agrupar mejor tus mensajes.
• Puedes utilizar encabezados o negrita para remarcar determinados contenidos de tu newsletter.
• El tamaño de letra mínimo deberá ser de 14 pixels para asegurar su usabilidad en los terminales móviles (al realizar una versión de 320px de tu diseño de campañas verás el sentido de este punto).
• Recuerda que puedes utilizar tipografías que no sean de sistema para dar un toque “chic” a tus newsletters, pero recuerda que debes proporcionar un mecanismo de fall-back para aquellos clientes de correo o dispositivos que solo utilicen fuentes de sistema. Las tipografías de sistema son: Arial, Arial Black, Arial Narrow, Comic Sans, Courier New, Georgia, Impact, Tahoma, Times New Roman, y Verdana.

Versión móvil

• Recuerda que las pantallas de los terminales móviles oscilan entro los 320-550px en función de la orientación de lecturas del dispositivo (horizontal o vertical). Se recomienda utilizar 320px al ser el formato más restrictivo.
• Recuerda que el layout de una campaña móvil debería ser de una columna.
• El tamaño mínimo de un botón debería ser de 44x44pixels sino es complicado poderlo seleccionar en una pantalla táctil de un móvil.
• Recuerda que hay gente que navega con el pulgar, en este caso la zona activa de la parte inferior izquierda de su pantalla. Optimiza tu diseño para esta zona.
• Recuerda que para hacer compatible un newsletter con terminales móviles requiere el uso de mediaqueries. Estas ocultan parte del diseño y solo lo muestran en determinadas resoluciones de pantalla. Tenerlo en cuenta ya que si editamos una plantilla en un editor WYSIWYG puede que no podamos modificar este contenido desde el interfaz gráfico (la solución es que las “mediaqueries” solo reposicionen el contenido y no lo sustituyan).
• Aumenta el interlineado en la versión móvil para facilitar la lectura.

Pueden parecer muchas cosas a tener en cuenta pero una vez que hayas diseñado unos cuantos newsletters verás que son de sentido común y no te será difícil tenerlas presente.

Si quieres que te ayudemos en la maquetación de tus newsletters, completa el formulario y  envíanos:
–    2 ficheros PSD uno para la versión de escritorio y otro de 320px para la versión móvil
–    El fichero PSD debe contener el texto alternativo para las imágenes (puede ponerlo como una capa oculta debajo del elemento. El color de la capa debería ser verde).
–    El fichero PSD debe contener los enlaces de los distintos elementos  de tu newsletter. (puede ponerlo como una capa oculta debajo del elemento. El color de la capa debería ser azul)

En pocos días te entregaremos tu newsletter maquetado en HTML para que lo puedas utilizar en NewsletterSoft, en el gestor de plantillas EDIT o en cualquier herramienta de email marketing así como un aprueba de compatibilidad con los principales clientes de correo. También disponemos de un servicio de diseño integral donde diseñamos y codificamos el newsletters que necesitas ;-).

Si este artículo te ha gustado puede que te interesen:

• Por que utilizar un editor de newsletters para tus campañas de email marketing
• Nuevo editor drag&drop para tus campañas de email marketing

The post Conversión de un diseño PSD en un newsletter HTML appeared first on NewsletterSoft.

Y como no es lo mismo decirlo que explicarlo, aquí van unos apuntes que os ayudarán en la difíciltarea de esta acción que aúna imagen de marca, promoción y experiencia de usuario.

Opt-In previo como garantía de éxito

Debemos asegurarnos que todos y cada uno de los registros que componen nuestra base de datos hayan dado su OK fehaciente para la recepción de comunicaciones por parte de nuestra empresa, es lo que se conoce como «opt-in«. De lo contrario, lo más probable es que:
a) tengamos una gran tasa de abandono en nuestros envíos.
b) lleguemos inexorablemente a la carpeta de spam.

Personalización del asunto y remitente

“Newsletter nº 103” o “Noticias de actualidad” tienen muy pocas probabilidades de atraer la atención de tus usuarios. En cambio, puedes utilizar el mejor titular de las noticias que componen tu comunicación. Si vas a realizar una promoción, focalízate en la recompensa y no en el proceso para alcanzarla. Además, un remitente humano (aunque se trate de un avatar), te asegura una mayor tasa de apertura sea tu mercado nacional o internacional. (Consejo: un nombre femenino suele funcionar mejor, cosas de Internet)

Plantillas personalizadas y con diseño reconocible.

Aunque en Newslettersoft tenemos un doctorado en el tema, para los propósitos de este post, vale la pena destacar cuatro puntos esenciales:

1. El diseño debe respetar tu imagen y manual de comunicación. No solo en el aspecto cromático y estructural, sino en el tono de la comunicación y la manera de dirigirte al usuario.
2. Debe ser responsive para poder ser visualizado óptimamente en cualquier gestor de correo y dispositivo.
3. Debe guardar una coherencia entre los envíos anteriores, de modo que la primera imagen se torne cada vez más “familiar” para el usuario, mejorando así la experiencia de usuario.
4. Por supuesto y por último, la plantilla debe ser atractiva visualmente y cumplir unos mínimos de accesibilidad y usabilidad que veremos en post venideros.

Optimización de tiempos de carga.

Si la personalización y el diseño es importante, más aún lo es que todo ello llegue al usuario en un tiempo “asumible” por él. En un móvil, una apertura de email nunca puede superar los 3 segundos. ¿Te parece poco? Abre tu cuenta de correo y cronométrate.
En este sentido, es esencial simplificar la estructura interna (html) de tu comunicación y, sobre todo, las imágenes que lo componen.

Noticias y enlaces relevantes para el usuario.

Dejando de lado los aspectos más técnicos en el proceso de creación de una newsletter, nos adentramos ahora en cuatro puntos referentes al contenido.
La información que nuestros usuarios y usuarios van a recibir es esencial para seguir construyendo una relación de confianza para ellos y de imagen/autoridad para ti. Todo impacto es una oportunidad para afianzar esta relación y para satisfacer las expectativas de nuestros registros, no menosprecies este hecho.
¿Vas a ofrecer noticias de actualidad? Selecciona detenidamente los enlaces y estudia su calidad. ¿Vas a promocionar un producto o servicio? Asegúrate de que esta oferta se adapta a las necesidades de tu cliente. ¿Ofreces un contenido? Revisa la landing page y comprueba que tanto el descargable como el formulario de descarga funcionan a la perfección.

Evita textos exhaustivos y títulos poco descriptivos.

El tiempo de tus contactos es tan valioso como el tuyo. No sobrecargues tus newsletter con demasiado texto y utiliza textos directos y concisos. Como ya vimos en nuestro post sobre cómo preparar un test A/B en email marketing, la estrategia K.I.S.S. (keep it simple, stupid) suele ser la másinteligente.

Botones de compartir al final de la newsletter.

Una buena forma de conseguir nuevos suscriptores impactando a los anteriores es ofrecer botones de “compartir” en todas nuestras comunicaciones y landing page. Otras opciones pueden ser botones de recomendación o de referir a amigos para conseguir algo a cambio, por ejemplo, un descuento en tu próxima compra. Si te interesa este tema te recomendamos el enlace Compartir tu newsletter en las redes sociales

Permitir opt-out de desuscripción.

Si el primer punto hacía referencia a la importancia del opt-in, la última no podía ser otra que la de facilitar el opt-out, es decir, la desuscripción rápida y sin letra pequeña a todo aquél que lo desee. Esto nos asegura una menor tasa de caída en nuestro boletín y también, una vez más, generar confianza y transparencia.

Todas éstas son buenas prácticas sobre la creación de una newsletter que debes tener en cuenta. Al final, lo que debes tener en cuenta es el objetivo principal de tu comunicación y las razones que te mueven a querer impactar a un ya suficientemente impacto registro.
Los objetivos más comunes de tus comunicaciones de newsletter deben girar en torno a tres pilares principales:

• Informar a tus clientes/socios/seguidores sobre la actualidad de la empresa
• Fidelizar y mantener cualificado e informado a tus contactos
• Generar tráfico a tu sitio web, promocionando tus productos y ofreciendo ventajas y condiciones especiales a tus suscriptores, premiando de este modo su fidelidad.

Si deseas conocer más a fondo el proceso de creación de un newsletter, solicita acceso a nuestra demo para la creación de newsletters

Otros artículos relacionados:

• Nuevo editor drag&drop
• Reglas básicas para crear una campaña de email marketing exitosa

The post El proceso de creación de una newsletter appeared first on NewsletterSoft.

Se presentarán muchas de las novedades en HTML5, CSS3 y desarrollos de Front End que iremos viendo los próximos meses. No es casual que dentro de esta conferencia se traten temas de mobile email marketing, ya que este año la necesidad de maquetar nuestras campañas de email marketing para que sean compatibles con los terminales móviles a través de diseños responsive ha pasado de una recomendación a una necesidad.

Para todos aquellos de vosotros que es interese este tema os dejo un listado de artículos que seguro os van a gustar. Y para aquellos de vosotros que no seais maquetadores, tranquilos siempre nos quedarán las plantillas prediseñadas  o un editor drag&drop 😉

HTML y CSS para tus newsletters: Responsive Email Design

Plantillas para newsletters

Guía de compatibilidad de tus plantillas para móviles

The post Conferencia Fluent en San Francisco appeared first on NewsletterSoft.

La importancia de un buen email responsive.

El email se ha convertido en algo que nos sigue a todas partes: cuando hacemos la compra, mientras comemos, mientras tomamos algo con nuestros amigos… y esto es así porque el móvil nos acompaña también en todas estas partes y mientras tengamos notificaciones vamos a comprobar el móvil. En anteriores artículos hemos visto diferentes temas relacionados con la importancia de que nuestros mailings sean responsive: consejos para nuestras plantillas de newsletters para móvil, cómo mejorar la usabilidad de nuestras campañas de email marketing y sobre todo qué alcance a nivel de compatibilidad con los diferentes dispositivos móvil tiene la opción de maquetar el html nuestros newsletters responsive e inclusive, utilizar los estilos css3 para mejorar los diseños de nuestras plantillas para newsletters.

En este artículo en newslettersoft, queremos ver cuál es la diferencia REAL entre tener una plantilla para newsletter responsive o no responsive. ¿Y cómo lo hemos hecho? Incluyendo una visualización de dos plantillas, una responsive y una no para que veáis en qué dispositivos se encuentra la diferencia real y cómo a nivel de usuario, es mejor cuando la lectura del contenido ocupa el 100% de la pantalla.

 

¿CÓMO VEMOS UN NEWSLETTER RESPONSIVE EN DIFRENTES DISPOSITIVOS?

• APPLE MAIL
• ANDROID 2.3
• ANDROID 4.0
• iPhone 5s
• ipad
• Windows Phone 7

 

¿CÓMO VEMOS UN NEWSLETTER NO RESPONSIVE EN DIFRENTES DISPOSITIVOS?

Como vimos en la Guía de compatibilidad de tus plantillas para móvil, hay algunos clientes de correo como el mail de iphone, que harán el autoescalado de la plantilla de newsletter para móvil, para que automáticamente se adapte al 100% de la pantalla. PERO fijaos que la cantidad de información que hay en la plantilla para newsletter responsive dentro de la pantalla no es tan condensada como la que encontramos en la plantilla no responsive. Ofrecer una óptima distribución de la información de nuestras plantillas de newsletter para móvil en función de el tamaño de la pantalla (y por lo tanto de la cantidad de elementos que pueden caber en ella), será clave para ofrecer al suscritor, una visión jerarquizada de la importancia de la información que queremos que le llegue.

• ANDROID 2.3
• APPLE MAIL
• Android 4.0
• ipad
• iPhone 5S

 

Dispositivos móviles

close

Plantilla responsive compatible con dispositivos móvil

close

Plantilla responsive compatible con dispositivos móvil

close

Plantilla compatible con iPhone y lista para compartir en facebook y twitter

close

Plantilla responsive compatible con dispositivos móvil

close

Plantilla responsive compatible con dispositivos móvil

close

Plantilla compatible con iPhone y lista para compartir en facebook y twitter

close

Plantilla responsive compatible con dispositivos móvil

close

Plantilla responsive compatible con dispositivos móvil

close

Plantilla compatible con iPhone y lista para compartir en facebook y twitter

close

Plantilla responsive compatible con dispositivos móvil

close

Plantilla responsive compatible con dispositivos móvil

¿Qué pasa si nuestro correo no es responsive?

The post La importancia de las plantillas de newsletter para móvil appeared first on NewsletterSoft.

Si quieres externalizar la maquetación de tus newsletters, visita la sección  Servicios maquetación de newsletters.

Aunque los divs (<div></div>) sean muy útiles y cómodos cuando maquetamos nuestros sitios web, en el mundo del email marketing no es así, ya que corremos el riesgo de que algunos clientes de correo no soporten esta opción. La mejor opción para que la maquetación de newsletters sea compatible con todos los clientes de correo es hacer uso de las tablas anidadas.

Gmail, Outlook 2007 y Lotus Notes entre otros, tienen problemas con los elementos flotantes y no podemos fiarnos de los márgenes y paddings utilizados. Para asegurarnos de que la estructura de nuestro email no se va a desmoronar en estos clientes, debemos estructurar las tablas correctamente y ayudarnos del css para completar la estructuración. Ya sabéis lo que se dice: ¡Si no puedes con él, únete a él!

Estructura y diseño de tablas de un newsletter.

 Si tus campañas de email marketing se desmaquetan o desestructuran cuando los abres en algunas versiones de Outlook, Lotus Notes o Gmail (entre otros), puede que se deba a alguno de los siguientes motivos:

• Utilizad tablas anidadas para crear la combinación deseada de filas <tr> y columnas <td> para la disposición del email.
• Algunos clientes de correo no contemplan el color de fondo del <body>, por lo tanto es muy importante que creemos una tabla contenedora y definamos allí el color de fondo.
• No utilizar tags como “float” o “clear”.
• Aseguraos siempre de que el ancho de la tabla (o de una fila) es igual a la suma de las columnas <td> contenidas en la tabla. Outlook 2007, IE6 y Safari no perdonan diferencias entre el ancho total de la tabla y la suma de los anchos de sus filas. Por eso se recomienda definir los anchos en cada una de las celdas y tener la calculadora al lado. En el siguiente caso no sería necesario definir el ancho de la fila, pues la suma de las columnas es 300.

• Los espacios en blanco importan, aunque sea entre un tag de apertura o en unes comillas dobles. Aseguraos que no hay espacios en blanco dentro del código.
• Hay dos formas de añadir algunos estilos a las tablas. Por ejemplo si queremos darle un color de fondo a una tabla podemos indicarlo de las siguientes formas:

<table bgcolor=”#aaaaaa”> </table> 
o 
<table style=”background-color:#aaaaaa;”> </table>

En este caso la primera opción sería utilizando un atributo de la tabla y el segunto un estilo. Si alguna vez tenéis problemas con los colores de fondo, asguraos que estéis utilizando el correcto (algunos clientes no aceptan los atributos) y si no, siempre podéis utilizar ambos.

Espero que este artículo os haya resuelto algún quebradero de cabeza o si no, que os lo evite en un futuro. Para los que el HTML os suene a chino y necesiteis un servicio profesional de maquetación de newsletters os recomiendo que visiteis la sección maquetación de newsletters.

Si queréis ampliar vuestros conocimientos en la maquetación de vuestras campañas de email marketing, boletines informativos y/o newsletters, aquí tenéis otros artículos que os pueden ser de ayuda:

1. Utilizar las herramientas adecuadas

2. Maquetar con tablas anidadas

3. CSS en línea y atributos de tablas

4. Formato de links y optimización de imágenes

5. Responsive Email Design

6. Media Queries

The post HTML y CSS para tus newsletters: Maquetar con tablas anidadas appeared first on NewsletterSoft.