HTML para crear una newsletter
En este artículo verás recomendaciones de HTML y CSS para que puedas hacer una newsletter compatible con los clientes de correo más populares: Gmail para navegador, Gmail para android, Yahoo para navegador, Outlook para navegador y algunas de las versiones de escritorio de Outlook y el cliente por defecto de IOS. En 2012 hice un tutorial similar y bueno esta es una extensión y una actualización de esos mismos conceptos
¿Qué tags de HTML son las mejores de una newsletter funcione?
El internet ha avanzado enormemente y puedes hacer cosas bastante locas en aplicaciones y en muchos browsers…aunque esta tecnología no está disponible para todos los clientes de correo…en especial Outlook, así es que la primera regla de ORO
1Haz pruebas, ábrete una cuenta outlook, otra de gmail y de yahoo y envía muchas pruebas de tu correo si quieres garantizar que se vea bien
He utilizado muchos softwares para hacer testeo (incluso Litmus que se vanagloria de ser super fiel) y ninguno te dará una visión 100% fiel, pasa lo mismo que cuando testeamos una web, igual algo funciona perfecto en chrome pero no funciona en safari o en chrome se ve de una manera y en internet explorer de otra…testeo es la clave del éxito
2Procura seguir usando estilos inline y tablas
Lo sé, suena anticuado y una mala práctica pero hasta la fecha sigue siendo la única manera de garantizar que tu newsletter se verá igual aunque la abras en las aplicaciones viejas de Outlook y la diversidad de lugares a donde irá a parar tu newsletter es difícil de predecir (cuentas raras de correo y clientes…hay miles).
3No dependas del css que pongas en la cabecera
Una extensión del punto anterior, solo confía 100% en los estilos que pones inline
4No dependas 100% de las imágenes cuando diseñes
El maravilloso mundo de los correos sigue muy protegido y en muchas ocasiones por seguridad tus imágenes no se abrirán a la primera, así es que de menos usa un texto alt, aunque mi recomendación es que tu newsletter transmita su mensaje aunque no cargue las imágenes.
<img src="img/imagen3.jpg" alt="perritos corriendo por el campo de manera poética"></a>
5No uses javascript
Los clientes de correo no te dejarán usarlo…al menos esta es una realidad hasta el día de hoy 18 de febrero de 2018 (si nos visitas desde el futuro, mira nuestro sufrimiento, puedes burlarte de nosotros en los comentarios).
6Usa los recursos que son nativos del internetz prehistórico y sé muy exigente con cómo lo escribes
Si quieres hacer un botón, usa un link, si vas a marcar un hexadecimal usa el código completo, si quieres marcar un padding, usa el marckup completo (padding-top, padding-left, etc.). Si vas a usar alguna propiedad que tenga más de una terminología usa ambas…como background y background-color
<a href="https://google.com" style="color:#ffffff;background-color:#333333;background:#333333;padding-top:5px;padding-bottom:5px;padding-right:20px;padding-left:20px;display:inline-block;">Ir a google</a>
7Se debe de ver bien en movil
Es indispensable que además de todo esto, tu newsletter se vea bien en dispositivos móviles, un porcentaje muy muy alto solo ven su correo en el teléfono. (vuelve al punto 1 y repite).
Te recomiendo que empieces tu diseño pensando primero en teléfonos, usa contenedores que se ajusten, tablas con width 100% y lo mismo va para las imágenes, esto permitirá que se adapten dinámicamente.
8Abre una cuenta de mailchimp y juega con el código de sus newsletters
Copia de los mejores…aunque ellos están empezando a centrar sus esfuerzos en clientes de correo más modernos pero te servirá para hacer pruebas y ver qué es lo que mejor te funciona a ti y más importante te permitirá tener métricas de cómo la gente usa tu newsletter, desde qué dispositivos y si lo abre o no.
9Llama a todos los assets desde https
Si tienes imágenes o links procura que sean https pues con esto garantizas que no los bloqueen los sistemas antispam ni ciertos clientes de correo como gmail
10Piensa muy muy bien tu subject… o todo este esfuerzo será en vano
Lo más importante pero lo menos obvio
Más artículos
En fins, recomiendo encarecidamente estos dos listados de generadores de templates:
Responsive email templates builders
Visual email builder apps (de css tricks)