HTML email: tablas o divs?
¿El HTML/CSS para un boletín de correo electrónico html debe estar en formato de tabla, o puedo usar DIVs con la misma seguridad de que se mostrará bien cross email-client? He descargado una serie de plantillas para ver cómo se hacen, sobre las que basar la mía, y todas parecen usar tablas.
Cualquier idea muy apreciada, gracias!
4 answers
Cuando se trata de HTML de correo electrónico, tenga en cuenta que todas las mejores prácticas de desarrollo web se van por la ventana. Para que el aspecto sea consistente, usted debe:
- Usar diseños basados en tablas
- Utilice el estilo de atributo de la vieja escuela para las tablas
- Use SOLO estilos en línea, y solo muy simples.
<style>-muchos clientes descartan las etiquetas. - Omitir el uso
<html>,<head>y<body>- Serán descartados por la mayoría de los clientes de todos modos. - Si incrustas imágenes, intenta asegurarte de que el correo electrónico se ve decente incluso si las imágenes no se cargan. Muchos clientes requieren que el usuario marque el correo electrónico como" seguro " antes de mostrar imágenes.
Puede leer versiones más detalladas de los puntos anteriores aquí:
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-05-29 14:52:28
Como todos aquí han dicho, use tablas y alinee todo su css... pero hay un ecosistema de aplicaciones de correo electrónico para ayudarlo a crear correos electrónicos.
He estado usando Mailrox (https://www.mailrox.com / ) para la mayoría de mis compilaciones de correo electrónico recientemente y parece ser bastante bueno y producir correos electrónicos HTML perfectos, si está construyendo uno a partir de un diseño, a pesar de que está en beta.
También puedes probar las plantillas preconfiguradas de Mailchimp o Campaign Monitor, pero parece que tiene un diseño para su correo electrónico, por lo que tal vez Mailrox sería lo mejor.
Si realmente desea entrar en la construcción de correos electrónicos, diría que olvide la mayor parte de lo que sabe sobre diseño web moderno y diseños de tablas maestras y use los enlaces de PatrikAkerstrand.
Litmus también es ideal para probar sus diseños codificados a mano. Te dan vistas previas de tu correo electrónico en (casi) todos los clientes de correo electrónico.
Espero que esto ayude.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-06-15 17:13:59
Muchos clientes de correo electrónico no pueden renderizar css. Usaría tablas para formatear tu correo y usaría imágenes para cualquier otra cosa.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-05-29 14:44:21
Como ya se ha mencionado, sus correos electrónicos HTML deben construirse utilizando tablas (y no divs). También puede agregar CSS, ambos usando una hoja de estilos externa, pero esto no será recogido por todos los clientes de correo electrónico, por lo que en realidad es más confiable agregar su css en línea. Incluso al hacerlo, algunos atributos pueden ser ignorados por ciertos clientes de correo electrónico, por lo que su mejor opción es seguir utilizando atributos HTML siempre que estén disponibles. "Debes hacer esto porque algunos clientes, como Gmail, lo harán ignora o elimina el contenido de tu etiqueta, o ignóralos."Fuente: http://webdesign.tutsplus.com/articles/creating-a-simple-responsive-html-email--webdesign-12978
Aparte de eso, también he aprendido a través de ensayo y error que incluso las imágenes deben recortarse al tamaño exacto que desea que se muestren en su correo electrónico. Outlook si terrible en la recogida de atributos HTML para el ancho / alto de las imágenes, y he visto algunos correos electrónicos extendidos desagradables, solo porque estos atributos fueron ignorados y las imágenes se mostraban a tamaño completo.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-05-24 13:46:14