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:
Enviar comentarios (Atom)
Blog Archive
-
▼
2011
(58)
-
▼
septiembre
(44)
- Paga con un tweet
- Tu e-commerce con WordPresss y WooCommerce
- Compartiendo ‘círculos’ en Google+
- Mejorando el Soporte al Cliente
- Opción de compartir a las demás redes sociales en ...
- WordPress, un CMS de extraordinaria expansión
- Los cambios en Google Analytics [infografía]
- Adobe dará el salto a las tres dimensiones con Fla...
- Elementos a tener en cuenta para una portada web
- Google lanza la API de Google+
- Consejos para la utilización de viñetas en la Web
- Primeros pinitos con HTML5 y CSS3, a ver que nos r...
- Aplicando Borde a los textos con CSS3: Text-stroke
- Nuevo Selector CSS3: QWery
- 101 Consejos SEO
- 9 Interesantes estrategias a seguir para la implem...
- Estado del CSS3
- Todo FLASH con AS3.0
- plugins jQuery para mostrar datos y datagrids.
- Reglas de maquetación de e-mails HTML
- 10 Típicos errores MySQL en los desarrolladores PHP
- Create themes Wordpress sin programación - WoWPth ...
- Tutoriales Wordpress - Ideal para el comienzo y ex...
- ¿Cómo hacer una página de inicio de un sitio web e...
- Solución 'Wirifi' – El Wireframe de cualquier página
- Cómo proteger tu blog WordPress de hackers
- Insertar Flash y validar según los estándares W3C
- Sencillo Efecto fade/desvanecimiento en jQuery
- Addon de Firebug para guardar el código ... BackFi...
- Un único login para todas tu redes sociales – Solu...
- Adobe Flash para iPad, iPhone e iPod Touch en camino
- CÓMO AVERIGUAR NUESTRO POSICIONAMIENTO EN GOOGLE
- CÓMO CONOCER EL PAGERANK DE NUESTRAS WEBS
- TIPOS DE CONTENIDO QUE TODA EMPRESA DEBERÍA GENERAR
- Envio de Tweets a Facebook
- Diferencias SEO, móvil y tradicional.
- COMUNIDADES para Desarrolladores.... A Seguir!!
- + SOBRE CLOUD COMPUTING…. CloudMagin, COMO HERRAMI...
- SEO y 'sus' titulares atractivos
- Cloud Computing en España...
- Aspectos muy importantes antes plantearse abrir un...
- herramienta para realizar tests de carga en webs
- Bienvenida y como no!!! Presentación
- Nueva librería jQuery 1.6.3
-
▼
septiembre
(44)
Blogs Interesantes
-
-
-
-
Quién es John Ternus, el nuevo CEO de AppleHace 11 horas
-
John Ternus, nuevo CEO de AppleHace 11 horas
-
-
-
New Plugin: REST Pro ToolsHace 3 semanas
-
-
-
-
-
-
-
-
-
-
-
Data Engineering Zoomcamp – Semana 6Hace 3 años
-
reCAPTCHA Google en aplicación FlutterHace 3 años
-
-
-
VPN hibrida para empresas: Sus VentajasHace 3 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 8 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.
0 comentarios:
Publicar un comentario