una tablas tabla ejemplos div diseño datos con avanzado ajustar agregar html html-email

html - div - tablas en javascript ejemplos



Correo electrónico HTML: ¿tablas o divs? (4)

Como todo el mundo ha dicho, use tablas y tenga 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 ( Mailrox ) para la mayoría de mis compilaciones de correo electrónico recientemente y parece ser bastante bueno y generar correos electrónicos HTML perfectos, si está creando uno a partir de un diseño, incluso aunque está en beta.

También podría probar plantillas preconstruidas de Mailchimp o Campaign Monitor , pero parece que tiene un diseño para su correo electrónico, así que tal vez Mailrox sea lo mejor.

Si realmente quieres entrar en la creación de correos electrónicos, diría que olvidas la mayoría de lo que sabes sobre el diseño web moderno y los diseños de tablas maestras y utilizas los enlaces de PatrikAkerstrand.

Litmus también es ideal para probar tus 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.

¿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 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.

Cualquier idea muy apreciada, ¡gracias!

Como ya se mencionó, tus 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

Aparte de eso, también aprendí 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.

Cuando se trata de correo electrónico HTML, tenga en cuenta que todas las mejores prácticas del desarrollo web se agotan. Para que el aspecto sea consistente, debes:

  1. Usa diseños basados ​​en tablas
  2. Utilice el estilo de atributos de la vieja escuela para las tablas
  3. Utilice SOLO estilos en línea, y solo muy simple. <style> -tags son descartados por muchos clientes.
  4. Saltee 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.

Puede leer versiones más detalladas de los puntos anteriores aquí:

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.