Premisas que se deben seguir para crear un eMailing en HTML óptimo para todos los clientes mail.
Clientes de Correo que se han tenidos en cuenta
- Thunderbird
- Outlook
- Gmail
- Hotmail y Live
- Yahoo
Para los webmails también se han tenido en cuenta diferentes navegadores como Firefox 2 y Internet Explorer (v6 y v7).
De esta forma nos aseguramos que nuestro correo llegará correctamente a un mayor número de personas. Está claro que sobre todo sirve para poder hacer mailings más bonitos gráficamente.
Para crear nuestro mail tenemos que hacer 2 pasos:
Usar un editor HTML para crear el código del correo: lo mejor es usar un editor como tal. No usar Words ni procesadores de texto. Yo uso (aunque es de pago) el Dreamweaver.
Ir a tu cliente habitual (yo uso Thunderbird)
- Crear el mail (Redactar)
- Click en el cuerpo del mensaje.
- Menú Insert / HTML
- Pegar el código generado antes en el Dreamweaver.
Y en estos 2 pasos tan sencillos para crear el mail usando HTML, tenemos que tener en cuenta una serie de cosas importantes para que nos salga un perfecto correo en HTML y que independientemente de como lo vayan a leer, se vea perfectamente.
– Usar tablas. Está muy bien todo el tema de Layers (DIV) pero para los mails tenemos que volver a las tablas para maquetar.
– No usar las siguientes etiquetas: , , <script>, <applet>, <frame>, <head>, <html>, …</strong> y alguna menos importante. Esto es básicamente para los webmails que directamente suelen eliminar esa parte del código.</p>
<p style="border: 0px; margin-bottom: 24px; padding: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: Georgia, 'Bitstream Charter', serif; font-size: 16px; line-height: 24px; background: rgb(255, 255, 255);">
– <strong style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline; background: transparent;">Hay que poner las Imágenes online</strong>. Lo mejor es subir las imágenes a tu servidor, y desde el código llamarlas, hay que evitar incrustar imágenes.<br>Además hay que usar urls absolutas http://www.miweb.com/mailing/foto1.jpg</p>
<p style="border: 0px; margin-bottom: 24px; padding: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: Georgia, 'Bitstream Charter', serif; font-size: 16px; line-height: 24px; background: rgb(255, 255, 255);">
– <strong style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline; background: transparent;">Insertar en las imagenes el atributo galleryimg=”no”</strong> (ej. <img … galleryimg=”no” …>), con esto evitamos el toolbar encima de las imágenes. Se hace bastante pesado en Explorer ver cuando pasas con el ratón una información que te distrae del resto del mail.</p>
<p style="border: 0px; margin-bottom: 24px; padding: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: Georgia, 'Bitstream Charter', serif; font-size: 16px; line-height: 24px; background: rgb(255, 255, 255);">
– <strong style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline; background: transparent;">Usar urls cortas</strong>. Ya que vamos a insertar imágenes online con urls absolutas evita que la url sea larga. <span style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline; text-decoration: line-through; background: transparent;">www.tusitio.com/mailing/enero/08/imagenes/cabecera/foto1.jpg</span>. Hay algunos webmails que te acortan la url y ponen un %20 en medio.</p>
<p style="border: 0px; margin-bottom: 24px; padding: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: Georgia, 'Bitstream Charter', serif; font-size: 16px; line-height: 24px; background: rgb(255, 255, 255);">
– <strong style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline; background: transparent;">Evitar la carpeta “images”</strong>, las imágenes deberían estar en el mismo directorio que el propio mail.html</p>
<p style="border: 0px; margin-bottom: 24px; padding: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: Georgia, 'Bitstream Charter', serif; font-size: 16px; line-height: 24px; background: rgb(255, 255, 255);">
-<strong style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline; background: transparent;"> Intenta evitar nombres en las imágenes</strong> tipo <span style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline; text-decoration: line-through; background: transparent;">ellogodemiempresa.jpg</span> y poner números 1.jpg. Para que un antispam no nos filtre nuestro mail como spam.</p>
<p style="border: 0px; margin-bottom: 24px; padding: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: Georgia, 'Bitstream Charter', serif; font-size: 16px; line-height: 24px; background: rgb(255, 255, 255);">
– <strong style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline; background: transparent;">Usar estilos inline.</strong> No hay que definir una hoja de estilos externa, ni poner los estilos en el head. Los estilos van inline (ej. <span style=”color: #ffffff;”>mi mailing</span>).</p>
<p style="border: 0px; margin-bottom: 24px; padding: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: Georgia, 'Bitstream Charter', serif; font-size: 16px; line-height: 24px; background: rgb(255, 255, 255);">
– <strong style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline; background: transparent;">El bgcolor del Body debería ser blanco</strong> o mejor dicho, no tener bgcolor. Esto pasa porque algunos clientes (siempre webmail por ejemplo el gmail) pasan de ese atributo y ponen el color por defecto de ellos, el blanco.</p>
<p style="border: 0px; margin-bottom: 24px; padding: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: Georgia, 'Bitstream Charter', serif; font-size: 16px; line-height: 24px; background: rgb(255, 255, 255);">
Una opción para usar backgrounds de colores es utilizar<br><table width=”100%” height=”100%” bgcolor=”#000000″></p>
<p style="border: 0px; margin-bottom: 24px; padding: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: Georgia, 'Bitstream Charter', serif; font-size: 16px; line-height: 24px; background: rgb(255, 255, 255);">
– <strong style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline; background: transparent;">Usa alt en las imágenes</strong>, mientras carga el mail, o si hay problemas de conexión sabremos que va a salir o que debería salir en esa imagen.</p>
<p style="border: 0px; margin-bottom: 24px; padding: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: Georgia, 'Bitstream Charter', serif; font-size: 16px; line-height: 24px; background: rgb(255, 255, 255);">
– <strong style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline; background: transparent;">Usa titles en href y las img</strong>. Aunque no lo veo del todo necesario es una buena práctica para ver el tooltip en los enlaces.</p>
<p style="border: 0px; margin-bottom: 24px; padding: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: Georgia, 'Bitstream Charter', serif; font-size: 16px; line-height: 24px; background: rgb(255, 255, 255);">
– <strong style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline; background: transparent;">Si quieres clavar tu diseño tienes que evitar la etiqueta <p>
</p>
</strong> ya que dependiendo del cliente de correo te da unos margenes diferentes. Aquí Live directamente los elimina. <strong style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline; background: transparent;">Lo mejor es usar <br></strong> que siempre es un salto de linea.</p>
<p style="border: 0px; margin-bottom: 24px; padding: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: Georgia, 'Bitstream Charter', serif; font-size: 16px; line-height: 24px; background: rgb(255, 255, 255);">
– Ya que usamos tablas para que salga un buen diseño <strong style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline; background: transparent;">podemos recurrir a las imagenes 1×1 transparentes.</strong></p>
<p style="border: 0px; margin-bottom: 24px; padding: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: Georgia, 'Bitstream Charter', serif; font-size: 16px; line-height: 24px; background: rgb(255, 255, 255);">
– Los forms están muy bien, pero por tema de seguridad algunos clientes los elimina, por ejemplo hotmail. <strong style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline; background: transparent;">Así que mejor no usar forms.</strong></p>
<p style="border: 0px; margin-bottom: 24px; padding: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: Georgia, 'Bitstream Charter', serif; font-size: 16px; line-height: 24px; background: rgb(255, 255, 255);">
– Actualmente (año 2008) las pantallas más extendidas son las 1024px para que se vea bien en la mayoría de monitores <strong style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline; background: transparent;">el ancho del mailing debería ser 750px.</strong></p>
<p style="border: 0px; margin-bottom: 24px; padding: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: Georgia, 'Bitstream Charter', serif; font-size: 16px; line-height: 24px; background: rgb(255, 255, 255);">
– <strong style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline; background: transparent;">No usar javascript.</strong> Supongo que queda claro que muchos antivirus, y directamente los clientes evitan los javascripts por seguridad.</p>
<p style="border: 0px; margin-bottom: 24px; padding: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: Georgia, 'Bitstream Charter', serif; font-size: 16px; line-height: 24px; background: rgb(255, 255, 255);">
– <strong style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline; background: transparent;">Siempre poner en el pie un mail para poder quitarte de la subscripción del newsletter. </strong>mailto:unsubscribe@tusitio.com?subject=unsubscribe</p>
<p style="border: 0px; margin-bottom: 24px; padding: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: Georgia, 'Bitstream Charter', serif; font-size: 16px; line-height: 24px; background: rgb(255, 255, 255);">
– <strong style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline; background: transparent;">Además es bueno hacer una versión online: www.misitio.com/newsletter/</strong> y poner en el mail, si no ves correctamente este correo puedes visitar nuestra versión online.</p>
<p style="border: 0px; margin-bottom: 24px; padding: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: Georgia, 'Bitstream Charter', serif; font-size: 16px; line-height: 24px; background: rgb(255, 255, 255);">
– <strong style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline; background: transparent;">No usar palabras clásicas que serían detectadas rápidamente como spam.</strong>Algunos ejemplos serían: free, now!, promotion, benefit, customer, click here, … La repetición de estas palabras y algunas más puede aumentar el % de que sea detectado como spam.</p>
<p style="border: 0px; margin-bottom: 24px; padding: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: Georgia, 'Bitstream Charter', serif; font-size: 16px; line-height: 24px; background: rgb(255, 255, 255);">
Este guía la he escrito basándome en las premisas recogidas en: <a href="http://www.anandgraves.com/html-email-guide" target="_blank" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline; color: rgb(116, 51, 153); background: transparent;">HTML Email Guide – http://www.anandgraves.com/html-email-guide</a>, he intentado resumirlo y he eliminado información innecesaria dejándo lo más importante.</p>
<p style="border: 0px; margin-bottom: 24px; padding: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: Georgia, 'Bitstream Charter', serif; font-size: 16px; line-height: 24px; background: rgb(255, 255, 255);">
<em style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline; background: transparent;">Nota: Cualquier cosa que queráis comentar con vuestra experiencia será bienvenida y puedo ir actualizando la entrada según vayan apareciendo nuevas cosas.</em></p>
<p style="border: 0px; margin-bottom: 24px; padding: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: Georgia, 'Bitstream Charter', serif; font-size: 16px; line-height: 24px; background: rgb(255, 255, 255);">
<em style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline; background: transparent;"><br></em></p>
<p style="border: 0px; margin-bottom: 24px; padding: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: Georgia, 'Bitstream Charter', serif; font-size: 16px; line-height: 24px; background: rgb(255, 255, 255);">
<em style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline; background: transparent;">tomado de:</em></p>
<p style="border: 0px; margin-bottom: 24px; padding: 0px; vertical-align: baseline; background: rgb(255, 255, 255);">
<span style="border: 0px; border-image-source: initial; border-image-slice: initial; border-image-width: initial; border-image-outset: initial; border-image-repeat: initial; margin: 0px; padding: 0px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-color: transparent; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial; line-height: 24px;"><font color="#333333" face="Georgia, Bitstream Charter, serif"><i>http://www.webnostra.com/guia-para-crear-un-buen-emailing-en-html/</i></font></span></p>
Y en estos 2 pasos tan sencillos para crear el mail usando HTML, tenemos que tener en cuenta una serie de cosas importantes para que nos salga un perfecto correo en HTML y que independientemente de como lo vayan a leer, se vea perfectamente.
– Usar tablas. Está muy bien todo el tema de Layers (DIV) pero para los mails tenemos que volver a las tablas para maquetar.
– No usar las siguientes etiquetas: , , <script>, <applet>, <frame>, <head>, <html>, …</strong> y alguna menos importante. Esto es básicamente para los webmails que directamente suelen eliminar esa parte del código.</p>
<p style="border: 0px; margin-bottom: 24px; padding: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: Georgia, 'Bitstream Charter', serif; font-size: 16px; line-height: 24px; background: rgb(255, 255, 255);">
– <strong style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline; background: transparent;">Hay que poner las Imágenes online</strong>. Lo mejor es subir las imágenes a tu servidor, y desde el código llamarlas, hay que evitar incrustar imágenes.<br>Además hay que usar urls absolutas http://www.miweb.com/mailing/foto1.jpg</p>
<p style="border: 0px; margin-bottom: 24px; padding: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: Georgia, 'Bitstream Charter', serif; font-size: 16px; line-height: 24px; background: rgb(255, 255, 255);">
– <strong style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline; background: transparent;">Insertar en las imagenes el atributo galleryimg=”no”</strong> (ej. <img … galleryimg=”no” …>), con esto evitamos el toolbar encima de las imágenes. Se hace bastante pesado en Explorer ver cuando pasas con el ratón una información que te distrae del resto del mail.</p>
<p style="border: 0px; margin-bottom: 24px; padding: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: Georgia, 'Bitstream Charter', serif; font-size: 16px; line-height: 24px; background: rgb(255, 255, 255);">
– <strong style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline; background: transparent;">Usar urls cortas</strong>. Ya que vamos a insertar imágenes online con urls absolutas evita que la url sea larga. <span style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline; text-decoration: line-through; background: transparent;">www.tusitio.com/mailing/enero/08/imagenes/cabecera/foto1.jpg</span>. Hay algunos webmails que te acortan la url y ponen un %20 en medio.</p>
<p style="border: 0px; margin-bottom: 24px; padding: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: Georgia, 'Bitstream Charter', serif; font-size: 16px; line-height: 24px; background: rgb(255, 255, 255);">
– <strong style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline; background: transparent;">Evitar la carpeta “images”</strong>, las imágenes deberían estar en el mismo directorio que el propio mail.html</p>
<p style="border: 0px; margin-bottom: 24px; padding: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: Georgia, 'Bitstream Charter', serif; font-size: 16px; line-height: 24px; background: rgb(255, 255, 255);">
-<strong style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline; background: transparent;"> Intenta evitar nombres en las imágenes</strong> tipo <span style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline; text-decoration: line-through; background: transparent;">ellogodemiempresa.jpg</span> y poner números 1.jpg. Para que un antispam no nos filtre nuestro mail como spam.</p>
<p style="border: 0px; margin-bottom: 24px; padding: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: Georgia, 'Bitstream Charter', serif; font-size: 16px; line-height: 24px; background: rgb(255, 255, 255);">
– <strong style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline; background: transparent;">Usar estilos inline.</strong> No hay que definir una hoja de estilos externa, ni poner los estilos en el head. Los estilos van inline (ej. <span style=”color: #ffffff;”>mi mailing</span>).</p>
<p style="border: 0px; margin-bottom: 24px; padding: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: Georgia, 'Bitstream Charter', serif; font-size: 16px; line-height: 24px; background: rgb(255, 255, 255);">
– <strong style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline; background: transparent;">El bgcolor del Body debería ser blanco</strong> o mejor dicho, no tener bgcolor. Esto pasa porque algunos clientes (siempre webmail por ejemplo el gmail) pasan de ese atributo y ponen el color por defecto de ellos, el blanco.</p>
<p style="border: 0px; margin-bottom: 24px; padding: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: Georgia, 'Bitstream Charter', serif; font-size: 16px; line-height: 24px; background: rgb(255, 255, 255);">
Una opción para usar backgrounds de colores es utilizar<br><table width=”100%” height=”100%” bgcolor=”#000000″></p>
<p style="border: 0px; margin-bottom: 24px; padding: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: Georgia, 'Bitstream Charter', serif; font-size: 16px; line-height: 24px; background: rgb(255, 255, 255);">
– <strong style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline; background: transparent;">Usa alt en las imágenes</strong>, mientras carga el mail, o si hay problemas de conexión sabremos que va a salir o que debería salir en esa imagen.</p>
<p style="border: 0px; margin-bottom: 24px; padding: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: Georgia, 'Bitstream Charter', serif; font-size: 16px; line-height: 24px; background: rgb(255, 255, 255);">
– <strong style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline; background: transparent;">Usa titles en href y las img</strong>. Aunque no lo veo del todo necesario es una buena práctica para ver el tooltip en los enlaces.</p>
<p style="border: 0px; margin-bottom: 24px; padding: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: Georgia, 'Bitstream Charter', serif; font-size: 16px; line-height: 24px; background: rgb(255, 255, 255);">
– <strong style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline; background: transparent;">Si quieres clavar tu diseño tienes que evitar la etiqueta <p>
</p>
</strong> ya que dependiendo del cliente de correo te da unos margenes diferentes. Aquí Live directamente los elimina. <strong style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline; background: transparent;">Lo mejor es usar <br></strong> que siempre es un salto de linea.</p>
<p style="border: 0px; margin-bottom: 24px; padding: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: Georgia, 'Bitstream Charter', serif; font-size: 16px; line-height: 24px; background: rgb(255, 255, 255);">
– Ya que usamos tablas para que salga un buen diseño <strong style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline; background: transparent;">podemos recurrir a las imagenes 1×1 transparentes.</strong></p>
<p style="border: 0px; margin-bottom: 24px; padding: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: Georgia, 'Bitstream Charter', serif; font-size: 16px; line-height: 24px; background: rgb(255, 255, 255);">
– Los forms están muy bien, pero por tema de seguridad algunos clientes los elimina, por ejemplo hotmail. <strong style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline; background: transparent;">Así que mejor no usar forms.</strong></p>
<p style="border: 0px; margin-bottom: 24px; padding: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: Georgia, 'Bitstream Charter', serif; font-size: 16px; line-height: 24px; background: rgb(255, 255, 255);">
– Actualmente (año 2008) las pantallas más extendidas son las 1024px para que se vea bien en la mayoría de monitores <strong style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline; background: transparent;">el ancho del mailing debería ser 750px.</strong></p>
<p style="border: 0px; margin-bottom: 24px; padding: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: Georgia, 'Bitstream Charter', serif; font-size: 16px; line-height: 24px; background: rgb(255, 255, 255);">
– <strong style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline; background: transparent;">No usar javascript.</strong> Supongo que queda claro que muchos antivirus, y directamente los clientes evitan los javascripts por seguridad.</p>
<p style="border: 0px; margin-bottom: 24px; padding: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: Georgia, 'Bitstream Charter', serif; font-size: 16px; line-height: 24px; background: rgb(255, 255, 255);">
– <strong style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline; background: transparent;">Siempre poner en el pie un mail para poder quitarte de la subscripción del newsletter. </strong>mailto:unsubscribe@tusitio.com?subject=unsubscribe</p>
<p style="border: 0px; margin-bottom: 24px; padding: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: Georgia, 'Bitstream Charter', serif; font-size: 16px; line-height: 24px; background: rgb(255, 255, 255);">
– <strong style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline; background: transparent;">Además es bueno hacer una versión online: www.misitio.com/newsletter/</strong> y poner en el mail, si no ves correctamente este correo puedes visitar nuestra versión online.</p>
<p style="border: 0px; margin-bottom: 24px; padding: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: Georgia, 'Bitstream Charter', serif; font-size: 16px; line-height: 24px; background: rgb(255, 255, 255);">
– <strong style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline; background: transparent;">No usar palabras clásicas que serían detectadas rápidamente como spam.</strong>Algunos ejemplos serían: free, now!, promotion, benefit, customer, click here, … La repetición de estas palabras y algunas más puede aumentar el % de que sea detectado como spam.</p>
<p style="border: 0px; margin-bottom: 24px; padding: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: Georgia, 'Bitstream Charter', serif; font-size: 16px; line-height: 24px; background: rgb(255, 255, 255);">
Este guía la he escrito basándome en las premisas recogidas en: <a href="http://www.anandgraves.com/html-email-guide" target="_blank" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline; color: rgb(116, 51, 153); background: transparent;">HTML Email Guide – http://www.anandgraves.com/html-email-guide</a>, he intentado resumirlo y he eliminado información innecesaria dejándo lo más importante.</p>
<p style="border: 0px; margin-bottom: 24px; padding: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: Georgia, 'Bitstream Charter', serif; font-size: 16px; line-height: 24px; background: rgb(255, 255, 255);">
<em style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline; background: transparent;">Nota: Cualquier cosa que queráis comentar con vuestra experiencia será bienvenida y puedo ir actualizando la entrada según vayan apareciendo nuevas cosas.</em><br id="fmn:3"></p>
<p>
<strong style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;"></strong></p>
<div class="aizattos_related_posts" style="border: 0px; margin: 0px 0px 10px; padding: 15px 0px 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: Georgia, 'Bitstream Charter', serif; font-size: 16px; line-height: 24px; background: url(http://www.webnostra.com/bg-relatedposts.jpg) no-repeat rgb(255, 255, 255);">
<span class="aizattos_related_posts_header" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline; font-size: 1.2em; background: transparent;">Tomado de: http://www.webnostra.com/guia-para-crear-un-buen-emailing-en-html/</span></div>
<div class="aizattos_related_posts" style="border: 0px; margin: 0px 0px 10px; padding: 15px 0px 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: Georgia, 'Bitstream Charter', serif; font-size: 16px; line-height: 24px; background: url(http://www.webnostra.com/bg-relatedposts.jpg) no-repeat rgb(255, 255, 255);">
<span class="aizattos_related_posts_header" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline; font-size: 1.2em; background: transparent;"><br></span></div>
<div class="aizattos_related_posts" style="border: 0px; margin: 0px 0px 10px; padding: 15px 0px 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: Georgia, 'Bitstream Charter', serif; font-size: 16px; line-height: 24px; background: url(http://www.webnostra.com/bg-relatedposts.jpg) no-repeat rgb(255, 255, 255);">
<span class="aizattos_related_posts_header" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline; font-size: 1.2em; background: transparent;">Entradas relacionadas</span><ul style="border: 0px; margin: 0px 0px 24px; padding: 0px; vertical-align: baseline; list-style: square; background: transparent;">
<li style="border: 0px; margin: 0px 0px 0px 2px; padding: 0px; vertical-align: baseline; list-style-type: none; background: transparent;"><span class="aizattos_related_posts_title" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline; font-size: 11px; font-weight: bold; background: transparent;"><a href="http://www.webnostra.com/review-ubuntu-paso-1-instalacion/" rel="bookmark" title="Permanent Link: [Review Ubuntu] Paso 1 Instalación" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline; color: rgb(116, 51, 153); text-decoration: none; background: transparent;">[Review Ubuntu] Paso 1 Instalación</a></span></li>
<li style="border: 0px; margin: 0px 0px 0px 2px; padding: 0px; vertical-align: baseline; list-style-type: none; background: transparent;"><span class="aizattos_related_posts_title" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline; font-size: 11px; font-weight: bold; background: transparent;"><a href="http://www.webnostra.com/test-linux-pal-cuerpo/" rel="bookmark" title="Permanent Link: Test: Linux pal cuerpo" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline; color: rgb(116, 51, 153); text-decoration: none; background: transparent;">Test: Linux pal cuerpo</a></span></li>
<li style="border: 0px; margin: 0px 0px 0px 2px; padding: 0px; vertical-align: baseline; list-style-type: none; background: transparent;"><span class="aizattos_related_posts_title" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline; font-size: 11px; font-weight: bold; background: transparent;"><a href="http://www.webnostra.com/resumen-del-blogroll-o-enlaces-amigos-2007/" rel="bookmark" title="Permanent Link: Resumen del Blogroll o enlaces amigos 2007" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline; color: rgb(116, 51, 153); text-decoration: none; background: transparent;">Resumen del Blogroll o enlaces amigos 2007</a></span></li>
</ul>
</div>
</div>
No hay comentarios:
Publicar un comentario
Ingrese su comentario: