Mostrando entradas con la etiqueta e-mailing. Mostrar todas las entradas
Mostrando entradas con la etiqueta e-mailing. Mostrar todas las entradas
martes, 13 de septiembre de 2011
Reglas de maquetación de e-mails HTML
E-mails bien maquetados en HTML,
con textos e imágenes es un tema básico para gran cantidad de proyectos, como
por ejemplo ‘campañas de e-mailing’. Un e-mail incorrectamente maquetado puede
convertir la campaña en un desastre.
La maquetación conlleva mucha
tarea de prueba y error, pero con este post intentaremos evitaros grandes pérdidas
de tiempo y poder conseguir una solución deseada para cada uno de vuestros
proyectos de e-mailings.
Una maquetación HTML para una web
no tendría porqué ser distinta para un e-mail, pero sí lo es. El problema
principal de los e-mails en HTML es que no se ven igual a través del gestor de
correo (hotmail, gmail, yahoo, mozilla thunderbird, outlook, ect...) que
directamente en un navegador. Tampoco se ven igual en todos los navegadores aun
utilizando el mismo gestor. La razón es que los gestores filtran el código y lo
reformatean para evitar amenazas de seguridad, spam y mejorar su usabilidad.
Con los e-mails HTML se crea un
submundo que no entiende de estándares web ni nada por el estilo. Nuevamente el
diseñador debe sacrificar su trabajo para conseguir un resultado aceptable en
el mayor número posible de gestores.
Estas son algunas de las normas básicas que aplico a la maquetación de e-mailings:
- Nada de scripts, enlaces a hojas de estilo, styles en <head>... nada de nada. El contenido del <head> lo eliminan la mayoría de gestores, especialmente los gestores on-line.
- Flash, javascript y similares no se muestran y además puede hace creer al gestor de correo que nuestro e-mail es una amenaza acabando en la bandeja de correo basura o con el contenido bloqueado.
- Los estilos CSS se pueden utilizar, pero siempre y cuando sean en linea, pero olvidaros de una maquetación con DIVs y similares. Lo mejor son las tablas.
- Los gestores de correo añaden por defecto margenes, colores, alineamientos, interlineados... y si queremos que se conserve la apariencia visual hay que definir todas estas propiedades.
- No utilizar imágenes de fondo, algunos gestores las eliminan.
- Para evitar que las composiciones con imágenes se rompan hay que definir alturas y anchuras de las celdas que los contienen y añadir dentro de las propiedades del IMG unstyle="display:block".
- Algunos gestores como Outlook 2007 aplican un interlineado por defecto que no podemos redefinir. Para evitar problemas haz composiciones que permitan un interlineado flexible.
- Las imágenes siempre deben subirse a un servidor y enlazarlas en absoluto.
Suscribirse a:
Entradas (Atom)
Blog Archive
Blogs Interesantes
-
-
-
-
-
-
Locking Down the WP REST APIHace 1 semana
-
-
-
Which Platform to Choose For Your Next Mobile Game?Hace 3 semanas
-
-
Artículo sobre beneficios del téHace 2 meses
-
Plantilla Blogger: LMS Education TlalliHace 2 meses
-
-
-
-
-
-
-
Data Engineering Zoomcamp – Semana 6Hace 3 años
-
reCAPTCHA Google en aplicación FlutterHace 3 años
-
-
-
VPN hibrida para empresas: Sus VentajasHace 4 años
-
Primeros pasos en Wordpress para novatosHace 4 años
-
Machine learning - bibliografíaHace 4 años
-
Crepe Paper Peaches and Dreams DahliaHace 4 años
-
-
Hapi.js + Vue.js avatarHace 6 años
-
-
-
-
CryptomonedasHace 8 años
-
-
¿Cómo pronunciar bien la R?Hace 9 años
-
-
-
Building an interactive map with RaphaelHace 10 años
-
Porsche 911 2016 launch controlHace 10 años
-
Configura tus páginas para compartir en FacebookHace 11 años
-
-
-
-
-
TU WEB O BLOG DESDE SÓLO 350€Hace 13 años
-
10 Ideas Claras sobre PhoneGapHace 13 años
-
-
-
Pandora is backHace 14 años
-
Fractal GravityHace 14 años
-
-
Los Frames en la WebHace 20 años
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Secti Tecnología, S.L. Con la tecnología de Blogger.