Morton 29 de abril de 2011 a las 07.11
   Imprimir artículo
elWebmaster.com

10 consejos para tener en cuenta a la hora de crear tu mail en HTML


mail-wideLos clientes de e-mail como Gmail y Hotmail no han hecho nada durante estos últimos años que pueda percibirse como un intento de agradar a los desarrolladores web de hoy en día. Cuando necesites crear un mail en HTML (quizás un envío masivo para publicitar tu sitio) sentirás que has vuelto a los años ’90. Aquí te damos algunos tips para aligerar ese doloroso proceso.

Fuente original del artículo: Flingbits
Traducción realizada por
elWebmaster.com

1 – Mantenlo simple

La mayoría de los clientes de e-mail de hoy en día buscan lindos diseños con texto estético, gráficos coloridos y todo eso. Sin embargo, a la hora de crear tu mail, debes apuntar a mantenerlo simple. Por supuesto, lo que cada cliente requiere será diferente, pero recuerda, a la hora de argumentar, que mientras más simple el diseño, más claro será para el usuario y más fácil para ti llevarlo a cabo.

2 – Utiliza tablas

Si bien los diseñadores web predicamos que las tablas son para datos, y no para diseños, aquí tenemos un caso en el que existe una insuficiencia de estándares entre clientes de e-mail que nos impiden lograr algo correctamente estructurado sin utilizarlas.

3 – Estilos inline

Gmail y Lotus Notes no permiten tags de style, lo cual es una pena. Por lo que deberás utilizar style=”…” en cada tag que quieras estilizar porque no puedes dejar afuera de tu mercado a Gmail. Trata de organizar tus atributos de estilo para respetar el mismo orden siempre, y que sea más sencillo trabajar con ellos luego.

4 – No uses CSS2 ni CSS3

No te molestes en utilizar otra cosa que no sea CSS avanzado (es decir, ni CSS2 ni CSS3), porque de otra manera solo encontrarás inconvenientes.

5 – No utilices tags estructurales

Tags como h1, h2 y p realmente no son necesarios en una tabla. Sólo te darán problemas, ya que algunos clientes no soportan ciertos tags, o le aplican estilos por defecto.

6 – Padding y margin… no valen la pena

Al igual que los tags estructurales, paddings y márgenes no valen la pena, ya que su poca compatibilidad entre clientes sólo te ocasionarán dolores de cabeza.

7 – Usa height y width en imágenes

Asegurate de usar los atributos height y width en las imágenes. Esto es genial para mantener tu layout intacto cuando las imágenes son deshabilitadas en el cliente de e-mail.

8 – No olvides el alt de las imágenes

¡No olvides esto! Muchos clientes de e-mail tienen las imágenes deshabilitadas por defecto, por lo que tus recipientes necesitan saber de qué se trata tu e-mail de una manera clara.

9 – No utilices backgrounds

Los fondos son uno de los mayores elementos, y a la vez no son bien soportados. De todas formas, casi todos los clientes soportan un color de fondo, pero si lo asignas a través de estilo inline.

10 – Prueba utilizar bordes

Algunos clientes de e-mails soportan bordes, por lo que sugerimos que lo pruebes en varios clientes y, luego, lo pongas en práctica. Sino, siempre puedes utilizar imágenes.

Fuente original del artículo: Flingbits
Traducción realizada por
elWebmaster.com


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (9)

  1. Kuroisuna dice:

    Buen tip, una pregunta…

    ¿Esto lo definimos en el archivo php que envia el correo?

  2. clemente peña morillo dice:

    Hola buenos dias este articulo es interesante, pues aqui esta bien definido el criterio en ese aspecto, soy poco escritor, pero si un fiel seguidor de su portal y otros mas, por que ustedes son claro, especifico y de facil entendimiento.
    Espero sigan siendo asi y le deseo muchos exitos.

  3. Edgar Seo dice:

    Uff son bastante los elementos a considerar, personalmente prefiero utilizar la tecnología de google doc.. que viene configurada en su totalidad..

    Saludos.

    Edgar..

  4. Carlos Chapilliquén dice:

    Muy buenos tips, y como dice, no todos los clientes aceptan algunos elementos… lo más simple es más efectivo, ya no leen mucho y si esta deshabilitada la vista de imágenes, nadie vera lo que quieres ofrecer o decir.

  5. clemente peña morillo dice:

    Hola buenos dias es importante tenerlos a ustedes, por que cada semana, siempre hay algo que aprender, no soy un esperto, pero siempre veo algo intersante en los boletines que semana, tras semana nos traen bien por ustedes, muchas gracias y sigan dando sin sinteres, y les aseguro que tendremos una comunidad mejor orientada y mejor formada.
    Muchas gracias y buenos dias.

  6. luis | carros en venta dice:

    Gracias por estos tips. No sabía como afectaban alguna vez intenté incluir una animación flash y ni siquiera funcionó.

  7. miller barbosa dice:

    como hago para crear un sitio web. hasta hoy abro este asistente y creo seguir haciendolo, gracias.

  8. Jesús R Cabrera S dice:

    Excelente información. Averigüé un poco más, y para tratar con hover en los enlaces, en CSS in-line, se hace algo como esto:

    Info

  9. Jesús R Cabrera S dice:

    bueno en mi comentario anterior, el blog interpretó el html así que dejo un link al código que quería mostrarles:

    http://pastebin.com/etqnHGRy

    Saludos.

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder