Etiqueta: DiseñoWeb

Categorías
Comunicación y estratégia Email Marketing

Diseño de Email 6 – Comentarios finales

¡Bienvenidos a la última parte de nuestra guía para crear newsletters 2016!
Anteriormente revisamos detalles acerca de la maquetación y estilos de tu newsletter, así como algunos consejos para que la programación en las imágenes y links de tu newsletter sea una base sólida para tu campaña.También revisamos brevemente los consejos para que tus comunicados causen el mismo impacto en una computadora de escritorio que en un dispositivo móvil, lo cual es muy útil en estos días donde la cantidad de dispositivos a los que llegaría tu newsletter es incontable y diversa en las tecnologías utilizadas.Ahora revisaremos los últimos consejos para realizar una campaña exitosa, pero recuerda que debes de conocer poco a poco a tus usuarios, sus gustos, sus horarios y sus reacciones para que obtengas la guía desde ellos mismos.

• Versión Web

Crea una versión en línea de tu newsletter para quienes no lo vean correctamente, esto le permitirá al usuario tener una segunda oportunidad de verlo, sin necesidad de hacer muchos clicks o ajustes a sus configuraciones.

• Atributos “alt” y “title”

Son muy útiles para cuando los usuarios reciben los newsletters y las imágenes no se muestran.

• Evita enviar una sola imagen

Al enviar una sola imagen dentro del cuerpo del correo, corremos el riesgo de parecer spam para los servidores de correo.
Otro riesgo es que el comunicado no tenga el impacto esperado, ya que si el usuario tiene bloqueadas las imágenes, lo más probable es que ignore tu mensaje. Es preferible utilizar una tabla donde insertes un poco de texto de introducción, o las ligas a tu sitio y redes sociales, además de la imagen.

• Crea un diseño sencillo y directo

No es necesario tener un micrositio lleno de botones, links y banners dentro de la bandeja de correo de tus contactos.
Recuerda que tu newsletter debe tener una intención clara y precisa, por lo que, entre menos distractores le des al usuario, obtendrás mejores resultados.

• Evita crear newsletters horizontales

Los usuarios seguramente terminarán sin leerlos. Estamos acostumbrados a leer de manera vertical, como en una hoja de un libro, por lo que si realizas este cambio, lo más probable es que los usuarios se confundan con la navegación y por lo tanto ignoren tu comunicado.

• Pon a la mano la opción de “darse de baja”

Debes dejar esta opción de manera clara, si bien no es necesario que llame la atención, tampoco debe de estar oculto a tus usuarios, recuerda que solo te interesa llegar a quien le interese tu información, además, el tener esta opción tan oculta, puede ser un motivo para que te marquen como spam.

• Pon a la mano la opción de “darse de baja”

Debes dejar esta opción de manera clara, si bien no es necesario que llame la atención, tampoco debe de estar oculto a tus usuarios, recuerda que solo te interesa llegar a quien le interese tu información, además, el tener esta opción tan oculta, puede ser un motivo para que te marquen como spam.

• Revisa la personalización del mensaje

Para tus usuarios, recibir un email que contenga su nombre o el nombre de su empresa, es más atractivo que un email genérico, recuerda que el trato personalizado hace la diferencia.

• Realiza las pruebas necesarias

Antes de enviar tu campaña a todos tus contactos, haz pruebas directamente en tu bandeja de correo, recuerda que un pequeño error puede cambiar la intención de tu campaña.

• Aprende de tus estadísticas

Descubre el comportamiento de tus usuarios analizando todos los datos que se arrojan de tu envío, conoce tu sección de reportes y estadísticas y te ayudará a definir parámetros para ir mejorando tus campañas con cada envío.

Aquí te dejamos el resumen de nuestra Guía para Newsletters 2016:

  1. Diagramación
  2. Estilos CSS
  3. Imágenes
  4. Los vínculos (links)
  5. Newsletters para móviles
Categorías
Comunicación y estratégia Email Marketing

Diseño de Email 5- Newsletters para móviles

Diseño de Email- Newsletters
Diseño de Email
Según el último estudio (2016) hecho por iab.Mexico, menciona que en 2015, 68 millones de mexicanos son internautas, (57% de la población) y el 68% de ese segmento utiliza un dispositivo móvil para conectarse a internet y lo hacen en un promedio de 6hrs al día, 24 minutos más que en 2014.
Por lo tanto es importante conocer las posibilidades que tenemos para que nuestros newsletters lleguen de manera óptima a usuarios tanto de dispositivos de escritorio, como móviles. Ya que los requerimientos de cada uno son distintos, por ejemplo, en un móvil tienes una conexión a internet más restringida, una pantalla más pequeña, un cursor (el dedo del usuario) más grande, entre otras cosas; mientras que en una computadora de escritorio tienes menos limitaciones tanto de espacio como de tamaño, imágenes y contenido.
Con esta guía aprenderás las bases para crear newsletters que puedan ser útiles y agradables para el usuario tanto en dispositivos de escritorio, como en dispositivos móviles y así asegurarte que reciban la información correcta, sin importar su dispositivo de acceso.

Esta guía es para usuarios de nivel: intermedio y superior

• Aprende sobre los «media queries»

Los «media queries» son filtros en css que nos permiten crear o modificar estilos de objetos que estén dentro de nuestro HTML dependiendo del tamaño o resolución de la pantalla en la que se esté visualizando.
Es importante recalcar que estos «media queries» deben de estar dentro de las etiquetas de «<style>» en el «<head>» del HTML, por lo que, en las aplicaciones móviles de correo de algunos clientes como Gmail o Hotmail, aún no funciona completamente la programación con «media queries», ya que, como revisamos anteriormente, estos eliminan todo el código que está dentro de la etiqueta «<head>» de nuestro HTML.
A grandes rasgos, un «media queries» funciona de la siguiente manera::
<style type="text/css">
 @media only screen and (max-device-width: 450px) {
 /* Aquí se muestran los estilos CSS que se activarán en
 dispositivos con pantallas de máximo 450px */
 }
 /* Y aquí el CSS normal, pero recuerda que este CSS
 deberá incluirse también en los tags de style de cada objeto*/
 </style>
Por lo tanto, para que tu newsletter tenga estas posibilidades, tendrás que utilizar clases en tus objetos de HTML. Para conocer más sobre los «media queries», te recomendamos leer este enlace

• Crea links y botones «clickeables»

Recuerda que tu dedo es mucho más grande que el cursor de tu computadora de escritorio o laptop.
Por lo tanto, a través de los «media queries» dale a los links o CTA (call to action) un «padding» de al menos 15px, esto hará el espacio más grande y por lo tanto la experiencia será más amigable para el usuario.

• Considera los tamaños mínimos

Por ejemplo, un iPhone tiene la restricción de mostrar tipografías de mínimo 13px, por lo tanto si creas un texto con un tamaño inferior, en un iPhone se crecerá al mínimo, es decir 13px, corriendo el riesgo de afectar tu diseño.

• Las pantallas son diferentes

El diseño para dispositivos móviles tiene un espacio para mostrarse mucho más pequeño (esto es, la pantalla de una tablet o un smartphone, con sus variantes en tamaño y proporción), considera aproximadamente 320px de ancho mínimo.

• Oculta lo que esté de más

Recuerda que el usuario de un smartphone o dispositivo móvil tiene menos tiempo y hasta cierto punto menos atención en su dispositivo (puede ser que esté caminando, vaya en el tráfico o simplemente dando una «revisada rápida» a sus emails) por lo tanto hay cosas como imágenes o textos que puedes ocultar, para que el mensaje llegue a él de manera más clara y concisa.
Para esto, en tus «media queries» utiliza un «display:none;» en los objetos que desees ocultar (como renglones de una tabla o imágenes muy grandes).

• Dale opciones a los usuarios

Seguramente algunos usuarios con planes de datos limitados no querrán descargar las imágenes de tu comunicado, por lo tanto puedes ofrecer un poco de información de referencia en ellas utilizando los atributos «title» y «alt» dentro de las etiquetas de tus imágenes, como lo vimos en la guía para imágenes.

• Se más conciso en tu línea de asunto

Plantea correctamente tu línea de asunto, ya que en los teléfonos móviles solo se mostrarán máximo 5 palabras, considera incluir lo más importante en no más de 50 caracteres.

• Crea emails ligeros

Con planes de datos tan restrictivos, redes de internet para móviles de baja velocidad y los procesadores menos potentes que tienen los dispositivos móviles, no diseñes un newsletter que convierta en una tortura la espera.
Te recomendamos que tu newsletter no pese más de 80Kb sumando código e imágenes.

• Haz pruebas, muchas pruebas…

Nuestra recomendación más importante, prueba tus resultados, envía a tu propio móvil los diseños que hayas hecho con estas recomendaciones y verifica que todo aparezca de manera correcta y amigable. Existen varias herramientas que te pueden ayudar en este proceso, una de ellas es Litmus en la cual podrás visualizar tu boletín en diversos clientes de correo y diversas medidas de dispositivos.
Como puedes ver, convertir tu newsletter en una versión amigable con dispositivos móviles requiere un poco más de dedicación que uno normal, por lo que es importante valorar tus bases de datos a partir de tus estadísticas, revisando qué tipo de dispositivo es el más popular entre tus usuarios.
Aquí te dejamos algunos enlaces que te pueden interesar:
Categorías
Comunicación y estratégia Email Marketing

Diseño Email 4- Los vínculos

Diseño de Emails- Los vínculos
Diseño de Emails
Para continuar con nuestra serie de recomendaciones para tus newsletters, pasaremos a un punto muy importante en tus comunicados: los vínculos o enlaces.

Cuando creamos una campaña, el objetivo principal siempre es hacerle llegar a nuestros usuarios información, la cual puede estar dentro del mismo comunicado o algunas veces en otras herramientas de comunicación, como una landing page, nuestro blog, redes sociales, entre otros; así que para llevarlos a esa información, necesitamos incluir enlaces (o links) dentro de nuestro comunicado.A continuación te presentamos algunas recomendaciones para que utilices estos enlaces de manera correcta y puedas encausar a tus usuarios a la información que tienes preparada para ellos.

Al finalizar ésta guía crearás enlaces de manera más adecuada para tus usuarios y su uso correcto en newsletters.
Esta guía es para usuarios de nivel: básico e intermedio
Para crear un vínculo en HTML se utiliza la etiqueta «<a>» la cual indica al navegador que el elemento (texto o imagen) que está dentro de ella, contiene un vínculo a cierta URL, para conocer más sobre ésta etiqueta, visita aquí.

• Vínculos completos

Para evitar errores en los enlaces, es necesario que en el atributo «href» de tu etiqueta de enlace «<a>» escribas el vínculo completo al que quieres dirigir a tus usuarios, esto incluye lo conocido como «protocolo» el cual puede ser http, https, ftp, entre otros.
Por ejemplo:

Incorrecto:

<a href=”www.google.com”>enlace a google</a>Incorrecto

Correcto:

<a href=”http://www.google.com”>enlace a google</a>Correcto
Para conocer más sobre los protocolos de transferencia, te recomendamos leer este enlace

• Estilo y colores en los enlaces

Para que un texto tenga un hipervínculo y no se vea siempre azul, es necesario utilizar el «style» dentro de la etiqueta «<a>» por ejemplo al utilizar:

<a href=”http://www.google.com.mx” style=”color: #FF3366; text-decoraton:underline;»>enlace a google</a>
Obtendremos un enlace que dirá «enlace a google» pero que será rosa y estará subrayado. Para darle diseño y estilo a tus enlaces, te recomendamos leer la parte 2 de nuestra guía de diseño, que trata sobre Estilos CSS.

• Abrir enlaces en ventana nueva

En la etiqueta «<a>» es necesario incluir siempre el atributo «target» con la propiedad «_blank» esto le indicará al navegador que cuando el usuario de click en ese link, lo lleve a una ventana o pestaña nueva, mientras que el newsletter siga activo en la pestaña que estaba visitando. La mayoría de los clientes de correo ya lo hacen por default, pero si alguien está viendo la versión en línea, no queremos que deje tu newsletter por pasar a alguno de los links que éste contiene:

<a href=”http://www.google.com.mx” style=”color: #FF3366; text-decoraton:underline;» target=»_blank» >enlace a google</a>

• Utilizar el atributo «title»

También es recomendable que dentro de la etiqueta «<a>» utilices el atributo «title» que es utilizado para darle al usuario información adicional sobre a donde se dirige por medio de ese enlace, además, para los clientes de correo esto es una buena práctica ya que puede evitar que tu newsletter sea catalogado como spam.

Unas cuantas palabras que complementen la información del link, serán suficientes:

<a href=”http://www.google.com.mx” style=”color: #FF3366; text-decoraton:underline;» target=»_blank» title=»Este link se abrirá en una nueva ventana» >enlace a google</a>
Espera nuestra siguiente edición, donde hablaremos de los newsletters pensando para dispositivos móviles, seguiremos actualizándote en esta lista de buenas prácticas para ayudarte a crear campañas más efectivas.
Categorías
Comunicación y estratégia Email Marketing

Diseño de Email 3- Imágenes

Diseño de Email

Como en la mayoría de las aplicaciones publicitarias, que un newsletter sea atractivo puede depender mucho de las imágenes que acompañan al contenido.

Actualmente, por cuestiones de seguridad, muchos de los clientes de correo cuentan con múltiples restricciones para la correcta visualización de imágenes dentro de los emails, muchas veces el usuario tiene que permitir que se vean, o indicar que desea verlos, pero para usuarios de email menos familiarizados con la opción podrían pasarla por alto, por lo que hay que tratar de que, independientemente de la configuración del usuario, podamos hacerles llegar la información de manera adecuada, siguiendo los tips que te presentaremos a continuación.

Al finalizar ésta guía podrás optimizar la visualización de las imágenes en los diferentes servidores de correo y tener opciones para las diferentes restricciones que éstos tienen para las imágenes.Esta guía es para usuarios de nivel: básico e intermedio

• Animaciones

Para enviar imágenes animadas el único formato soportado por los servidores de correos es el «.gif», (aunque en Outlook desde la versión 2007 no se verá la animación, sino que se mostrará el primer frame de esta), ya que Outlook detiene los archivos con formato «.gif», por seguridad, así que al insertar una imagen animada en ese formato, trata de que el primer cuadro o frame de la animación tenga el contenido suficiente para que el usuario sepa de que se trata, por si alguno de tus usuarios utiliza Outlook.
Ejemplo de animación en newsletters

• Imágenes para Retina

La optimización de las imágenes para monitores high DPI o retina es algo relativamente nuevo, estos monitores tienen el doble de pixeles que su contraparte, por ello, para evitar que nuestras imágenes se vean borrosas en estos dispositivos necesitamos crear nuestras imágenes al doble de tamaño del que las necesitamos pero en el código de inserción de imagen indicar el tamaño correcto, ejem:

Para un boletín necesitamos un cabezal con el logo de 600x150px; pero para solucionar la cuestión del monitor Retina y evitar que se vea borroso, lo exportaremos a 1200x300px pero colocaremos las dimensiones necesarias en la etiqueta IMG:

<img alt="Logo" src="logo@2x.png" width="600" height="150" style="display: block; border: 0px;" border="0">
Esto puede hacer que tus imágenes y boletín en general incremente su peso, por lo que tienes 2 opciones para optimizar tus imágenes:
  1. Para la primera opción, necesitas crear tus imágenes cuatro veces el tamaño que las necesites, luego en Photoshop exporta para web y selecciona la calidad más baja al momento de guardar.
  2. La segunda manera es mantener tus imágenes al doble de tamaño del que las necesitas y usar alguna aplicación para darles compresión como JPEGMini, Tinypng, Compressor.

• Optimizar las imágenes

La recomendación siempre es que tus imágenes sean lo más ligeras posibles, entre menos kilobytes (Kb) mejor. Para esto, si utilizas Photoshop o Fireworks al optimizar una imagen selecciona máximo una calidad del 75% para imágenes de tamaño regular (de 600px * 600px por ejemplo) o hasta el 65% en imágenes muy grandes.

Cuando la imagen es algo muy importante para tu comunicado, podrías utilizar menos optimización, así su calidad mejorará, pero ten en cuenta que no es recomendable enviar imágenes con un peso superior a 250kb, si usas muchas imágenes en tu comunicado, el peso combinado de todas ellas no debe exceder los 300kb.

Si no utilizas Photoshop, puedes usar herramientas en linea como tinypng o webresizer para reducir el tamaño de tus imágenes.

• Atributos “alt” y “title”

Son muy útiles para cuando los usuarios reciben los newsletters y no muestran las imágenes a la primera, sino que es necesario descargarlas, pero si alguien no quiere/puede descargarlas, utilizando los atributos «alt» y «title» podremos darle una referencia de lo que se trata la imagen.
También puedes combinar los estilos CSS con el contenido del atributo «alt» de la imagen, creando un texto alternativo con un poco más de estilo, para lograrlo, únicamente añade el atributo «style» dentro de la etiqueta <img> con el formato que deseas.
new-netflix-mailing

• Etiquetas para poner imágenes de fondo

Muchas veces, para hacer más rico el contenido o añadir textura y profundidad, queremos utilizar un pattern o una imagen de fondo en alguna de las celdas, o en todo el comunicado, pero cuando hacemos las pruebas únicamente se ve en algunos servidores de correo, o por ejemplo un software instalado en nuestro equipo (Outlook o Mail en sus versiones más antiguas) no los muestra correctamente.
Ejemplo de imágenes de fondo en newslettersPara solucionarlo, en la etiqueta <td> o <table> que necesitamos que tenga el fondo vamos a utilizar el atributo de «background», donde insertaremos la imagen de fondo y, con el afán de prevenir, también utilizaremos la propiedad de css «background» dentro del atributo style que pondremos dentro de <td>, <table> o incluso aplica para ponerlo en el fondo general del archivo, en la etiqueta <body>. En ambas opciones pon lo que sea necesario para que se repita o no, quede fijo etc… con las propiedades css de posición, y siempre utiliza un color de fondo (para prevenir que no se vea blanco u otro color si el servidor de correo no está mostrando la imagen).

Ejemplo:

<td style=”background:url(http://www.dominio.com/fondo.jpg) top center repeat #f9fdfa;” background=” http://www.dominio.com/fondo.jpg” bgcolor=”#f9fdfa” valign=”top” width=”105“> Correcto

• Rutas absolutas de imágenes

Incorrecto:

<img src=”miimagen.jpg” width=”100” height=”100” style=”display:block;” /> Incorrecto

Correcto:

<img src=”http://www.dominio.com/ubicacion/miimagen.jpg” width=”100” height=”100” style=”display:block;” />Correcto

• Imágenes sin espacios en blanco

Para las imágenes, es muy importante siempre utilizar, dentro del atributo «style» , la propiedad «display» con el parámetro «block» . Ya que Gmail y Hotmail siempre añaden un margen alrededor de las imágenes, también es importante definir los márgenes y el padding en ceros. Así podremos utilizar imágenes una junto a otra y que no se vea una separación:

• Crear carpetas para las imágenes

Es importante crear carpetas para almacenar las imágenes de cada newsletter, a fin de no crear conflictos con los nombres de las imágenes, por ejemplo si subimos el newsletter A, que tiene una imagen que se llama «top.jpg» con cierto diseño, y después subimos el newsletter B, con una imagen del mismo nombre «top.jpg» pero con otro diseño y en la misma ubicación, la imagen del newsletter A, será reemplazada con la del último y se perderá.

• Newsletters hechos solo con imágenes

Para envíos de promoción o novedades, normalmente se utilizan newsletters basados casi en su totalidad en imágenes.
Las empresas que desarrollan campañas muy gráficas prefieren utilizar este tipo de envíos, el inconveniente es que cuando el usuario tiene desactivadas las imágenes, el newsletter se verá en secciones o cajas vacías, por lo que es muy importante añadir una liga al newsletter en línea.

Newsletter de imágenes

Sin embargo la proporción ideal es un 80% texto y un 20% imágenes, para tener un tamaño máximo recomendado de 80kb en tu boletín.

Una de las claves en Email Marketing, es no centrar el diseño de la pieza en las imágenes, ya que muchos agentes no permiten la visualización de ellas por default. A esto hay que sumarle que si estas son demasiado pesadas, tardarán más tiempo en descargarse y, ¿sabes qué? solo tienes 4 segundos para impactar a tu usuario antes de que abandone tu Email.

Seguiremos actualizándote en esta lista de buenas prácticas para que tus campañas sean cada vez más efectivas.

A continuación algunos links que seguramente te servirán para mejorar el uso de los estilos CSS de tus newsletters:

Categorías
Comunicación y estratégia Email Marketing

Diseño de Email 2-Estilos CSS

Diseño de email

Por medio de los CSS podemos lograr que nuestros comunicados tengan un diseño y estilos definidos de acuerdo a la imagen que queremos transmitir. Sin embargo, trabajar con estilos css en nuestros newsletters requiere una programación distinta a la de un sitio web.

Los clientes de correo, por seguridad interpretan los estilos de maneras distintas, o en algunas ocasiones, pueden llegar a omitirlo, dependiendo donde estén declarados nuestros estilos, como aprendimos en el Capítulo I de nuestra guía.
A continuación algunas recomendaciones para que enlistemos de manera correcta los estilos necesarios para que nuestro newsletter se visualice de manera adecuada con el diseño que hayamos creado para él, sin que le afecten las restricciones de los servidores de correo.

Al finalizar ésta guía podrás declarar de manera correcta los códigos de CSS para obtener un newsletter con estilos y diseños atractivos y que se muestren de manera correcta en cualquiera de los servidores de correo. Esta guía es para usuarios de nivel: básico e intermedio

• Usar CSS “inline”

Como lo vimos anteriormente, es muy importante no crear clases o insertar hojas de estilo creando links a las mismas.
Lo que se debe de hacer es utilizar el atributo «style» y enlistar dentro los estilos para dar formato a tu texto u objeto, debido a que los clientes de correo (sobretodo los principales, como Hotmail, Gmail y Yahoo) eliminan todo lo que exista entre la etiqueta <head> de html, de hecho Gmail elimina completamente los códigos entre etiquetas <style> de css que no sea inline, independientemente de donde se encuentre.
Si ya haz creado tu newsletter con los códigos definidos como clases, puedes utilizar una herramienta que te ayudará a «traducirlos» a código CSS inline: Inline Styler de Torchbox Apps.
Ejemplo CSS inline:

<p style="font-size: 13px; color= #333; ">texto aquí</p>

• Crear estilos CSS para cada objeto

Es importante que cada etiqueta u objeto tenga su propio CSS y evitar poner etiquetas encimadas o repetitivas, ya que algunos clientes de correo tomarán la primera etiqueta y otros la última.
Un buena práctica para programar más rápido sin tener que insertar CSS inline etiqueta por etiqueta es crear clases en el HEAD, estas servirán para previsualizar nuestro diseño, una vez que estemos seguros podemos usar herramientas para traducir esas clases en código inline para nuestra versión final, una de estas es inliner.cm.

Incorrecto:

<span style=”color: #333333;”>Texto general que va en gris</span> <span style=”color: #ff6600;”>contenido en naranja</span><span style=”color: #333333;”>continuación del texto en gris</span> Incorrecto

Correcto:

<span style=”color: #333333;”>Texto general que va en gris<span style=”color: #ff6600;”>contenido en naranja</span> continuación del texto en gris</span> Correcto

• Utilizar tipografías estándar

Tipografías Estándar

Las únicas tipografías que se verán correctamente en cualquier navegador o cliente de correo son las denominadas estándar.
Si se utiliza alguna otra, (por ejemplo, copiando desde Word un texto con formato o utilizando el @fontface de css) corremos el riesgo de que se nuestro newsletter se distorcione cuando se reciba en otra computadora donde no se tenga instalada esa tipografía, ya que el servidor de correo la reemplazará por defecto, por cualquier otra parecida, pero dentro de las estándar.

• Evitar el uso de headers <h1>, <h2>, etc., sin estilos.

A pesar de que los headers nos sirven para dar mayor o menor importancia, Gmail elimina los tamaños que tienen por defecto, por eso es importante que a pesar de utilizar un header le creemos sus propios estilos dentro del atributo «style», sobre todo en cuanto al tamaño de texto, por ejemplo:

<h2 style=”font-size: 18px; color: #ff0000;”>Header rojo de 18 pixeles</h2>

Los sitios donde tus usuarios revisan su correo electrónico seguramente deberá tener hojas de estilo definidas, por ejemplo Hotmail, Yahoo o Gmail, y generalmente establecen estilos para las etiquetas headers.
Por ejemplo si utilizas textos en <h1>, lo más probable es que Hotmail los muestre de color azul, porque su hoja de estilo así lo tiene establecido.

Así, forzaremos en Gmail a que el header sea de tamaño 18.

• Alineación de las celdas y textos

Si una celda tiene como alineación «center» y el texto del contenido no tiene el atributo «align» ni la propiedad de alineación en el atributo «style», se centrará completamente:

<td align="center" width="200" >
 <p>contenido<p>
 </td>
Si el texto tiene la alineación con la propiedad de alineación dentro del atributo «style», por ejemplo, a la derecha, la primera línea estará alineada al centro pero lo demás, a la derecha:
<td align="center" width="200" >
 <p style=”text-align: right;”>contenido<p>
 </td>
Para que el texto esté a la derecha completamente, sin importar la alineación que tenga la celda, es necesario que se utilicen ambos, en algunos servidores con que se utilice el atributo «align» (verde) es suficiente, pero para prevenir, también se recomienda que se utilice la propiedad «text-align» (naranja) de css inline:
<td align="center" width="200" >
   <p align=”right” style=”text-align: right;”>contenido<p>
 </td>

• Utilizar códigos de color en Hexadecimal (6 caracteres)

Algunas veces funciona poner “color: #333” para obtener, en este caso, el color #333333 (en hexadecimal), pero para los newsletters es mejor prevenir y colocar el código de color completo, por que si no es así algunos servidores de correo pueden interpretar el campo como vacío o inexistente y poner algún otro color por default.

• Utilizar la etiqueta <span>

Para insertar un párrafo de texto dentro de tu comunicado, es preferible utilizar la etiqueta <span> definiéndole sus estilos, que la etiqueta <p> ya que ésta última tiene márgenes establecidos por defecto, y puede crearnos espacios arriba o abajo del texto que no son necesarios.
Sin embargo la etiqueta <span> nos servirá para darle estilos a nuestro texto y definir márgenes únicamente cuando sea necesario, también ambas etiquetas se pueden combinar, por ejemplo:

<p style=”color: #333333;”>Éste es un párrafo de texto donde resaltaremos <span style=”color: #ff6600;”>algunas palabras en color naranja</span> y mantendremos márgenes con los siguientes o anteriores párrafos</p>

TIP

Gracias a ciertas herramientas, como caniuse.com, podrás saber qué propiedades del CSS son funcionales en diferentes versiones de navegador. En este sentido, también puedes utilizar Litmus para poder previsualizar tus piezas de Email en diferentes clientes de correo.

Seguiremos actualizándote en esta lista de buenas prácticas para que tus campañas sean cada vez más efectivas.
A continuación algunos links que seguramente te servirán para mejorar el uso de los estilos CSS de tus newsletters:
Categorías
Comunicación y estratégia Email Marketing

Diseño de Email 1- Diagramación

Diseño de Emails

La base para crear un comunicado que se vea correctamente en cualquier navegador o cliente de correo es sin duda una correcta programación del HTML del comunicado.

A continuación algunas recomendaciones para que el código de tu newsletter ayude a evitar que sea catalogado como SPAM y asegurarte que la información se comunique tal y como requieres, independientemente de las variables con las que te puedes encontrar a la hora del envío, como el navegador, el cliente de correo, entre otros.

Al finalizar ésta guía podrás aplicar distintas técnicas para obtener un boletín mejor diseñado desde su base, que es la maquetación. Esta guía es para usuarios de nivel: intermedio y superior

• Lenguajes de programación

La base para diseñar comunicados que se enviarán a través de email es utilizar html básico y css inline.
Si insertas por ejemplo código entre etiquetas <script> tu correo podrá ser altamente considerado como SPAM, lo mismo sucede con Flash (swf), por lo que te recomendamos no usarlos.

• Diagramar con tablas

Tablas anidadas

Desafortunadamente, nada de <div> en el código.

El HTML que utilices debe ser lo más sencillo posible evitando scripts, estilos, efectos, formularios, etc.Los programas de email(Outlook, Lotus, Thunderbird, Apple Mail, Gmail, Hotmail, Yahoo, etc…) renderizan de manera óptima las etiquetas <table>, a diferencia de las etiquetas <div> con propiedades de alineación, que generalmente se utilizan para programar un sitio web, por lo tanto debemos crear diseños y programación en base a tablas.
Cuando creas una estructura con tablas debes de asegurarte de definir anchos en cada una de las celdas donde lo requieras, así como el ancho general de tu tabla, además puedes obtener mejores resultados en cuanto a diseño al utilizar tablas anidadas, así el riesgo de que tu email se vea descuadrado o incorrecto en la mayoría de los programas de email, disminuirá considerablemente.
Un ejemplo básico de una estructura con tablas podría ser el siguiente:
<table>
 <tr>
 <td>Cabecera</td>
 </tr>
 <tr>
 <td>Texto con contenido (el cual puede ser otra tabla)</td>
 </tr>
 <tr>
 <td>Pie</td>
 </tr>
 </table>

• Estilos CSS inline

La utilización de estilos CSS te ayudarán a que tu comunicado se muestre de manera apropiada y además con un buen diseño. Para utilizarlos de manera correcta es muy importante no crear clases dentro del código o insertar hojas de estilo creando links a éstas.
Lo que se debe de hacer es utilizar el atributo “style” dentro de cada etiqueta de HTML y enlistar dentro los estilos para dar formato a tu texto u objeto, esto debido a que los servidores de correo (sobretodo los principales como Hotmail, Gmail y Yahoo) eliminan todo lo que exista entre la etiqueta <head> del html, de hecho Gmail elimina todo el código <style> de css que no sea inline, independientemente de donde se encuentre.
Ejemplo:
<p style="font-size: 13px; color= #333;>texto aquí</p>

Cabe mencionar que el uso del CSS está limitado, algunas propiedades como background-image, margin, float y padding no suelen funcionar correctamente por lo que debemos evitarlas.

TIPS

  1. Fijaremos el ancho en las celdas, no en las tablas.
  2. Siempre que se pueda, evitaremos jugar con márgenes y espacios interiores, sustituyéndolos por la anidación de tablas.
  3. A la hora de determinar el color, utilizar la propiedad de la tabla <td bgcolor=”#ff3322″> en vez de usar el CSS
  4. Evita espacios en blanco en las celdas
  5. La propiedad font para CSS funciona correctamente en la mayoría de los casos así que podrás utilizarla pero siempre usando los métodos completos y no los abreviados.
    Ej: p {font:bold 1em/1.2em georgia,times,serif;} /  p {font-weight: bold;font-size: 1em;line-height: 1.2em;font-family: georgia,times,serif;}


• Siempre utilizar la unidad pixel

En los  anchos de tablas, medidas de las imágenes, medidas de la tipografía, separación de renglones, etc. Para obligar a los servidores a renderizar del tamaño que queremos nuestros objetos.
Cuando deseas optimizar tu newsletter para que sea visto de manera correcta en móviles, deberás seguir otros estándares, que veremos en otra edición.

• No utilizar el cellpadding en <table>

MárgenesPara crear un margen interior en las celdas de una tabla es preferible utilizar el atributo «style» con la propiedad “padding”, ya que al utilizar bordes junto con el atributo cellpading, pueden crearse espacios de más, por lo tanto es importante que en <table> el atributo cellpadding esté en ceros:
     <table cellpadding="0">
Y que la propiedad padding esté dentro de style en la etiqueta de la celda:
     <td style="padding: 5px;">contenido</td>
 
Además esto te permitirá tener un mejor control de las medidas en cada celda de tu comunicado.

• No poner contenido importante en <head>

Como estilos o etiquetas, ya que en Gmail y Hotmail se elimina todo el contenido entre <head> y </head>, sin embargo, en la  versión en línea si es recomendable utilizarlo, por ejemplo, para que contenga el título de la página o palabras claves, por ello si vas a usar clases es necesario que dupliques el código CSS: debes insertarlo tanto en el <head> como en el <body>.

• No usar caracteres especiales en el nombre de las imágenes

Evitar el uso de ñ, espacios en blanco, acentos, :, ¨, etc…, incluso evitar los puntos en los nombres de archivo o carpetas, el único punto que debe haber es el que separa la extensión del nombre de archivo:

Por ejemplo:
Incorrecto: mi.foto del.menú.jpg Incorrecto
Correcto: mi_foto_del_menu.jpg Correcto

Los clientes de correo lo toman como un error y dividen las rutas a estos archivos, por lo tanto, no los encontrarán y no se mostrarán las imágenes en tu comunicado.

Recuerda agregar el atributo ALT en tus imágenes, si el programa de correo o webmail bloquea las imágenes (la mayoría lo hacen por defecto), se podrá leer una pequeña descripción de esa imagen.

• Tabla principal al 100%

Una buena práctica para centrar los newsletters y “expandir” el fondo del comunicado al 100% de la pantalla que lo contenga, es insertar una tabla principal que tenga como ancho el 100% y la propiedad de alineación en centrado, en el ejemplo a continuación, la tabla principal está en verde y el interior, o contenido, en rojo:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td align="center" width="100%" >contenido</td>
 </tr>
 <tr>
 <td align="center” width="100%”>
 <table width="600" border="0" cellspacing="0" cellpadding="0">  
 <tr>
 <td width="300" >contenido</td>
                 <td width="300" >contenido</td>
              </tr>
              <tr>
                  <td width="300" >contenido</td>
                  <td width="300" >contenido</td>
              </tr>
           </table>
       </td>
    </tr>
    <tr>
        <td align="center" width="100%" >contenido</td>
    </tr>
 </table>
Con ese código obtendrás algo como ésto:

Fondo al 100

Donde el fondo azul se mostrará al 100% independientemente del tamaño de pantalla, mientras que la información (la tabla verde) se mantendrá siempre al centro y con un tamaño fijo.

• Usar máximo 600px como ancho del diseño

Muchos de los clientes de correo no despliegan tu email a pantalla completa, sino a través de un panel de pre-visualización que posee un ancho de 600px aproximadamente.

También debes tener en cuenta que, las imágenes que poseen un ancho mayor tienen más probabilidades de ser consideradas Spam. Es importante que respetes esa medida, para que tus newsletters puedan ser visualizados correctamente.

• Definir anchos en tablas

Utilizar siempre el atributo “width” con una medida en pixeles, el alto no siempre es necesario ya que puede variar con el contenido.

Definir anchos Definir anchos

• Definir ancho y alto en imágenes

Nunca dejar vacíos los atributos “width” y “height” en una imagen, habrá algunos servidores de correos, los más antiguos, que no la muestren si se omiten (los toma como 0).

• Evita resultados inesperados con tus imágenes.

Cuando utilizas imágenes partidas o una imagen, al lado de otra, con una estructura de tabla, es necesario que cada imagen tenga el estilo “display:block”, clientes de correo como Gmail, generan automáticamente un espacio blanco, no deseado, entre las imágenes, desarmando el diseño de nuestro boletín.

•  En los TD (celdas de la tabla) utilizar tanto los atributos de la etiqueta, como estilos en CSS

Aunque se repita la declaración, será más seguro que se vea en distintos clientes de correo electrónico.

Seguiremos actualizándote en esta lista de buenas prácticas para que tus campañas sean cada vez más efectivas.

A continuación algunos links que seguramente te servirán para mejorar el diseño de tus newsletters: