Cómo maquetar un correo electrónico HTML para los distintos clientes
A pesar de que las redes sociales están consideradas como la manera más directa de mantener las relaciones con los clientes, no podemos caer en el error de despreciar medios como el correo electrónico para mantener esa comunicación.
Si a la hora de maquetar una web tenemos problemas con la visualización en los distintos navegadores, al crear un correo electrónico la casuística de clientes aumenta en gran medida, y su capacidad para interpretar el HTML y las CSS se reduce en muchos casos, por lo que hay que ser especialmente cuidadoso con los recursos que utilizamos.
Consejos para la creación de un boletín de correo electrónico
Contenidos
- No incluyas demasiados gráficos o imágenes de mucho peso, porque dismunuye su entregabilidad
- Evita todo el diseño con imágenes o podrá ser etiquetado como SPAM
- Contenido claro y sencillo, la mayoría de la gente dedicará 1,4 segundos a leer tu correo
- Si es un boletín de subscripción, facilita siempre el enlace para poder darse de baja.
Maquetación
- Utilice tablas para crear la estructura: El tratamiento de float, margin, padding en Gmail o en Outlook 2007 no nos permitirá usar estos estos recursos para la maquetación
- Fije el ancho en las celdas, no en las tablas
- Para dar espacio utilice cellpadding
- Anide tablas siempre que pueda en vez de jugar con márgenes o espaciados interiores
- Utilice <td bgcolor=”#ff6600″> mejor que por CSS. Para las imágenes actúe igual, tenga en cuenta que algunos clientes de correo no soportatrán esta propiedad por lo que debe proporcionar un color de fondo coherente.
- Evite los espacios en blanco en sus celdas
- Algunas CSS son soportadas correctamente por la mayoría de los lectores de correo como font.
- No utilice métodos abreviados para declarar sus CSS
- NO:
p {font:bold 1em/1.2em georgia,times,serif;} - SI:
p {font-weight: bold;font-size: 1em;line-height: 1.2em;font-family: georgia,times,serif;}
- NO:
- Enlaces:
- Proporcione definiciones de colores inline y una etiqueta <span> redudante para garantizar la visualización del color deseado
-
<a href="http://somesite.com/" style="color:#ff00ff"><span style="color:#ff00ff">this is a link</span></a>
- Imágenes:
- No utilice formato PNG
- No se olvide del atributo ALT
- Incluya siempre la dimensión de la imagen
- No use float, utlice align
Más información
- The Email Marketing Experience
- Rock Solid HTML Emails
- Lista de CSS soportadas por los clientes de correo
10 normas de diseño web para conexiones con baja velocidad de transferencia
Aunque continuamente está mejorando el ancho de banda que tenemos en nuestras casas y en nuestras oficinas, sigue existiendo a nivel mundial una gran cantidad de usuarios que utilizan conexiones con poca velocidad de conexión.
Además el aumento de conexiones desde dispositivos móviles cuya velocidad de transferencia de datos a es baja vuelve a crear las necesidad de optimizar las web para este tipo de conexiones.
10 Consejos
- Páginas más pequeñas de 25Kb: Páginas que carguen en menos de 10s para conxiones de 20Kbps.
- Reduce el número de imágenes: Es posible diseñar bien sin muchas imágenes, usando CSS para el layout y rollover.
- Estructura bien la web: Proporciona navegación simple, no hagas a los usuarios cargar páginas innecesarias.
- Usa Estilos en Cascada: No uses tablas para el Layout.
- Minimiza las llamadas http: Cada imagen, cada archivo CSS o Jav script es una llamada http distinta. Muchas pueden provocar lentitud en la carga de la página.
- Permite la compresión: Comprimiendo las página en el servidor puedes reducir a la mitad las páginas.
- Páginas Cacheable: Permite a los navegadores mantener en cache los contenidos.
- No uses PDFs: Si los usas optimizalos tambien. Pueden optimizarse usando graficos vectoriales y minimizando el número de fuentes.
- Pon primero los items más útiles: Pon el menú de navegación en la cabecera de cada página y así será lo primero en cargarse. Haz tus páginas útiles antes de que termine la carga.
- Muestra el tamaño de los enlaces: No obligues a a descargar archivos grandes, enlazalos siempre, y si son mayores de 75kb muestra el tamaño.
Mas información: Web Design Guidelines for Low BandWidth
10 Crímenes de Usablidad que no deberías cometer
Hay prácticas que el usuario agradece, y otras que a fuerza de encontrarlas acaba exigiendo. Este listado de Line25 nos recuerda algunas prácticas que debemos tener siempre presentes.
Me he permitido reordenar la lista original por la gravedad del crimen (lo que puede molestar al usuario).
- Logo que no enlaza con la página de inicio de la web
- Subrayar algo que no es un enlace
- No diferenciar los enlaces visitados
- Crear contenidos largos y aburridos sin partirlos en apartados
- Decir a la gente “click aquí”
- No indicar el campo activo en un formulario
- Imágenes sin el atributo ALT
- Una imagen de fondo sin un color de fondo similar
- Justificar los textos
- Etiquetas <label> no asociadas a los campos <input> del formulario
Podeis encontrar más información en: 10 Usability Crimes You Really Shouldn’t Commit
24 Herramientas para realizar test de Usabilidad
Una lista muy completa de herramientas para realizar test de usabilidad.
- A Paper and Pencil
- Concept Feedback
- Chalkmark
- Clickheat
- ClickTale
- Clixpy
- Crazy Egg
- Ethnio
- Feng-GUI
- Five Second Test
- Feedback Army
- Loop11
- Mechanical Turk
- Morae
- Open Hallway
- Silverback
- Simple Mouse Tracking
- Usabilla
- UserFly
- UserTesting.com
- UserVue
- Google Analytics
- Google Website Optimizer
- Website Grader
via: Useful Usability
Usabilidad: No por ser más intuitivo y simple es mejor. ¿Y el aprendizaje?
Jorge Márquez en La variable del aprendizaje en la ejecución de test de usuario propone variables para intentar aislar la experiencia del usuario en la realización de un Test de Usuario midiendo los tiempos y sus diferencias
- Reordenando las tareas
- Realizando tareas siempre desde la Home
Reta a darle forma matemática a la curva de aprendizaje en una web.
Al hilo de esto…
¿Es más importante el tiempo que tardamos en aprender a realizar una tarea o el tiempo que podemos tardar en completarla?
Al diseñar una web intentamos que los usuarios consigan realizar siempre la tarea que se propone.
Para ello diseñamos la navegación, los procesos, la iconografía de la forma más intuitiva, y de forma que no se pierdan en el proceso, sacrificando en muchos casos la velocidad de los procesos.
Pero a veces nos olvidamos de la capacidad de aprendizaje que tiene el usuario. Un visitante que navega en nuestra web, por segunda o tercera vez para realizar una compra o utilizar un servicio, valorará un acceso que le permita en un solo paso seleccionar el producto que quiere elegir.
Las listas desplegables en los formularios, por ejemplo para categorías, que despliegan otras subcategorías y otras…. hasta llegar al producto, serán muy útiles si el usuario ya conoce el árbol y le evitará tener que ir navegando por sucesivas páginas.
Diseñando interfaces para aplicaciones de gestión, y observando a los usuarios, te das cuenta que para tareas repetitivas y cuyo aprendizaje es posible, los “botones mágicos” son muy apreciados. Botones, que sin saber cómo, graba en los pedidos, envía por correo a los clientes, avisa al jefe de departamento, suma en la cuenta de resultados etc… y todo sin dar ni un solo aviso, ni una sola explicación, y con una etiqueta tan explicativa como “Guardar”, es lo que el usuario mejor valora.
El uso de la teclas rápidas en programas como “Ctlr + C” y “Ctrl + V” no parecen muy intuitivas, sobre todo para la hispanohablantes, pero todos lo aprendemos y cuando un programa no funciona con ellas protestamos.
