2010-05-29 15 views
67

¿El HTML/CSS para un boletín html debe estar en formato de tabla, o puedo usar DIVs con la misma garantía de que se mostrará bien el correo electrónico cruzado? He descargado varias plantillas para ver cómo están hechas, sobre las cuales basar las mías, y todas parecen usar tablas.Correo electrónico HTML: ¿tablas o divs?

Cualquier idea muy apreciada, gracias!

+2

Esto es increíblemente completo: [http://mailchimp.com/resources/guides/email-marketing-field-guide](http://mailchimp.com/resources/guides/email-marketing-field-guide) –

+0

Muy útil. Incrustar CSS dentro de la etiqueta de cuerpo ¡Quien lo hubiera pensado! – aaandre

+0

La URL ha cambiado: http://mailchimp.com/resources/guides/email-marketing-field-guide/ – JasonB

Respuesta

129

Cuando se trata de correo electrónico HTML, tenga en cuenta que todas las mejores prácticas del desarrollo web se agotan. Para hacer que el aspecto coherente, debe: diseños basados ​​

  1. Utilice la tabla
  2. Use la vieja escuela de atributos de estilo para tablas
  3. Use Inline-estilos solamente, y sólo es muy sencilla tales. <style> -tags son descartados por muchos clientes.
  4. Omitir usando <html>, <head> y <body> - De todos modos serán descartados por la mayoría de los clientes.
  5. Si incrusta imágenes, intente asegurarse de que el correo electrónico se vea decente aunque las imágenes no estén cargadas. Muchos clientes requieren que el usuario marque el correo electrónico como "seguro" antes de mostrar imágenes.

Usted puede consultar las versiones más detalladas de los puntos anteriores aquí:

+3

Esto es muy cierto. Outlook 2007 es uno de los peores de todos (y la mayoría son bastante malos ...). – Max

+4

Y no hay imágenes de fondo (gracias mucho pronóstico 2010). –

+3

Estas reglas son oro puro cuando se trata de crear correos electrónicos HTML/CSS. Gracias. –

4

Muchos clientes de correo electrónico no pueden procesar css. Usaría tablas para formatear su correo y usar imágenes para cualquier otra cosa.

+1

No puede usar imágenes en correos electrónicos por defecto; los clientes de correo los bloquearán hasta que el usuario marque al remitente como seguro. Casi todos los clientes comunes admiten CSS en línea limitados. –

+0

Los clientes antiguos no, y muchos usuarios de negocios todavía los usan. Y no, no todos los clientes no muestran imágenes. Es solo un paso para obtener seguridad adicional, pero los clientes como el iPhone no tienen ninguna razón para bloquear imágenes. – fb55

+0

[Gmail ahora muestra imágenes] (http://gmailblog.blogspot.ch/2013/12/images-now-showing.html) :-) – rds

9

Al igual que todo el mundo aquí se ha dicho, tablas de destino y en línea todo su CSS ... pero existe un ecosistema de aplicaciones de correo electrónico para ayudarlo a crear correos electrónicos.

He estado usando Mailrox (https://www.mailrox.com/) recientemente para la mayoría de mis compilaciones de correo electrónico y parece ser bastante bueno y generar correos electrónicos HTML perfectos, si está compilando uno a partir de un diseño, aunque esté en versión beta.

También puede probar plantillas pre-construido a partir de Mailchimp o Campaign Monitor, pero suena como que tiene un diseño para su correo electrónico así que tal vez Mailrox sería lo mejor.

Si realmente quiere entrar en la creación de correos electrónicos, yo diría que se olvide de la mayoría 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. Le dan vistas previas de su correo electrónico en (casi) todos los clientes de correo electrónico.

Espero que esto ayude.

1

Como ya se ha mencionado, sus correos electrónicos HTML deben construirse usando tablas (y no divs). También puede agregar CSS, ambos utilizando una hoja de estilo 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 cuando lo haga, algunos clientes de correo electrónico pueden ignorar algunos atributos, por lo que su mejor opción es usar atributos HTML siempre que estén disponibles. "Debe hacer esto porque algunos clientes, como Gmail, ignorarán o eliminarán los contenidos de su etiqueta, o los ignorarán". Fuente: http://webdesign.tutsplus.com/articles/creating-a-simple-responsive-html-email--webdesign-12978

Dejando eso de lado, también he aprendido a través de prueba y error que incluso las imágenes deben recortarse al tamaño exacto que desea que se muestren en su correo electrónico. Outlook es terrible a la hora de elegir los atributos HTML para el ancho/alto de las imágenes, y he visto algunos correos desagradables estirados, solo porque estos atributos fueron ignorados y las imágenes se mostraron a tamaño completo.

Cuestiones relacionadas