Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. HTML & CSS
Code

Introducción al Correo Electrónico HTML

by
Difficulty:IntermediateLength:LongLanguages:

Spanish (Español) translation by Jorge Montoya (you can also view the original English article)

Los correos electrónicos HTML son una excelente manera de mantener a los clientes actualizados con las últimas actualizaciones relacionadas con su negocio o producto, pero son un poco difíciles. El soporte CSS en clientes de correo electrónico es inconsistente. Como resultado, debemos recurrir a técnicas antiguas, como el uso de tablas y CSS en línea. Hoy, voy a guiarle a través del proceso de creación de correos electrónicos HTML sencillos.


Intro: Correo electrónico HTML

Como desarrollador web freelance, la codificación de correos electrónicos HTML es una de las tareas más difíciles con las que tengo que tratar. Afortunadamente, cuando uno de mis primeros clientes me pidió que diseñara y codificara su boletín de correo electrónico, él fue lo suficientemente paciente como para dejarme pasar por el largo y frustrante proceso de descubrirlo todo. Usted puede no ser ta afortunado, así que prepárese con este tutorial.

El problema: Clientes de Correo Electrónico

¿Cree usted que IE es un dolor en el trasero? Espere hasta que conozca Outlook 2007. Debido a las grandes diferencias en la representación HTML/CSS entre los clientes de correo electrónico, el uso de técnicas de codificación modernas resultará en un desastre bastante catastrófico en muchos clientes de correo electrónico populares. Los clientes de correo electrónico simplemente no procesan HTML de la misma manera que los navegadores -- ni siquiera de manera parecida muchos casos. Cosas como floats, imágenes de fondo e incluso márgenes ya no forman parte de su vocabulario. Entonces, ¿qué debe hacer un codificador amante del código estándar?

La solución: Codifique como si fuera 1997

Eso es correcto. Tablas. Cellpadding, cellspacing, colspan, todas esas cosas desagradables que pensó que había dejado atrás. Las tablas son la única manera de obtener diseños consistentes de correo electrónico, por lo que es el momento de (temporalmente) olvidarse de sus formas de amor CS y abrazar las desordenadas y no semánticas tablas.


Paso 1: El Diseño

Manténganlo Simple

Al diseñar un correo electrónico HTML, tenga en mente la simplicidad. El diseño que estamos utilizando hoy en día tiene múltiples disposiciones de columnas, sobre todo para propósitos de demostración, pero considere la posibilidad de adherirse a dos columnas a lo largo de la codificación de su propio boletín para ahorrarse un montón de dolores de cabeza.

Minimice el Uso de Imágenes

Recuerde no volverse demasiado lujoso con sus diseños ya que Outlook no admite imágenes de fondo. De hecho, dependiendo de las necesidades de su cliente, es posible que desee omitir el proceso de Photoshop completamente para obligarse a mantener el diseño práctico. Dicho esto, usaremos Photoshop aquí para que pueda tener una mejor idea de nuestro plan.

Puede utilizar imágenes de fondo por motivos decorativos, siempre y cuando el correo electrónico sea legible y tenga sentido sin ellas. Por ejemplo, vamos a añadir un poco de degradado a nuestro encabezado, pero no es gran cosa si no aparece.

Más Delgado es Mejor

Debido a que las ventanas de vista previa del cliente de correo electrónico son a menudo sólo una pequeña fracción del ancho de la pantalla, generalmente desea mantener su diseño en unos 600px. A nadie le gustan las barras de desplazamiento horizontales.

Sea Consistente

Recuerde que vamos a usar propiedades inflexibles como cellpadding y cellspacing para espaciar nuestros elementos. Es prudente tratar de mantener el espaciamiento entre los elementos de manera consistente.

Nuestro Diseño

Este diseño es similar a uno que utilicé para un boletín de noticias de un cliente el verano pasado, pero simplificado. No es hermoso, pero ese no es el punto aquí. Es simple y consistente, y tiene una serie de opciones de disposición para que pueda ver cómo difieren.

1

Paso 2: Planificando Nuestro Código

En mi experiencia, el código del correo electrónico HTML se vuelve muy complicado, muy rápidamente. Es importante tener un plan de ataque. Así que aquí está el plan (volveremos a esto, no se preocupes si no lo sigue).

Primero, partimos con una gran tabla de 100% ancho con un fondo gris, esta es nuestra tabla de "envoltura".

A continuación, tenga en cuenta que hay tres tablas más dentro de la tabla de contenedor: una en la parte superior para el vínculo "ver en el navegador", una en el centro para el contenido principal y otra en la parte inferior para el enlace "cancelar la suscripción".

2a

Finalmente, dentro de la tabla principal, cada sección horizontal de contenido estará dentro de una fila de tabla y una celda de tabla. Estas celdas de tabla, a su vez, contendrán otra tabla para alojar cada sección de contenido:

2b

Cellpadding y Cellspacing

En lugar de usar las propiedades margin y padding de CSS, vamos a usar los atributos HTML de cellpadding y cellspacing. Piense en cellpadding como si fuera lo mismo que padding en CSS - espacio dentro de un elemento, alrededor del contenido. Cellspacing es el espacio entre las celdas de datos en una tabla.

Nuestra tabla #main va a tener 15px de cellspacing, por lo que tendremos 15px de espacio en blanco alrededor de toda la sección de contenido principal y 15px entre cada grupo horizontal. Cellpadding y cellspacing sólo se aplican a la tabla padre, no a los hijos. Si no queremos ningún cellpadding o cellspacing, necesitamos especificarlo para cada tabla.


Paso 3: Codificándolo

Ahora podemos iniciar el proceso de codificación de nuestro boletín, sección por sección. Contrariamente a las buenas prácticas, vamos a estar haciendo algo de estilo junto con la estructura. Vamos a empezar con el diseño, incluyendo todo el espaciado y relleno, y los colores de fondo, después de eso, vamos a hacer la tipografía y otras cuestiones de CSS.

Configuración

La configuración de un correo electrónico es realmente simple: sólo la etiquetas html, head y body están involucradas. Vamos a agregar la tabla de envoltura y las tres tablas principales que discutimos anteriormente.

En lo que se refiere a los doctypes, existen algunos enfoques diferentes, como se detalla en este artículo. En nuestro caso, he decidido no usar uno, porque no necesitamos ninguna de las cosas que obtendríamos al declarar un doctype. Se quitará en la mayoría de los casos de todos modos.

En general, es mejor asignar anchos a las celdas individuales de la tabla que tabla en sí.

Observe que las dos tablas de mensajes tienen valores de cellpadding de 20px. Esto espaciará esos párrafos del contenido principal. La tabla principal tiene 15px de cellspacing. Esto es para establecer un ritmo vertical consistente. Dado que cada sección está dentro de su propia celda de tabla, habrá 15px entre todos ellas.

Observe también que las tablas están todas configuradas con align="center" y que hemos definido explícitamente sus anchos. En correos electrónicos HTML, generalmente es mejor no definir anchos para las tablas de envoltura. Es preferible definir anchos para cada celda, pero en este caso romperemos esta regla porque tenemos que preocuparnos de cellpacing/cellpadding.

Tablas de Mensajes

Estas son super simples: sólo párrafos dentro de las celdas alineadas en el centro.

El mensaje inferior es exactamente el mismo.

Encabezado

El encabezado es bastante simple, es sólo una columna, con tres filas. Puesto que tenemos ese agradable fondo azul, vamos a necesitar un poco de relleno alrededor de cada celda para conseguir que el texto se separe de los bordes.

Recuerde establecer el ancho de cada celda, que en este caso es 570px (600px-15px de cellspacing a cada lado). También hemos establecido la propiedad align para la fecha en right. En este momento, no añadiremos la imagen de fondo, lo haremos más adelante. Mientras tanto, use un azul más claro. En este momento, no añadiremos la imagen de fondo, lo haremos más adelante. Mientras tanto, simplemente utilice un azul más claro.

Observe que estamos usando bgcolor en lugar de style="background:". Esto se debe a que los valores html están mejor soportados en los clientes de correo que las propiedades CSS.

3a

Eso es lo que tenemos hasta ahora, se ve bastante mal, pero la disposición es justo lo que queríamos.

Sección de Contenido - 2-Columnas

Nuestra primera sección de contenido es una imagen alineada a la izquierda con dos títulos al lado. En lugar de utilizar floats CSS como normalmente lo haríamos, vamos a hacer una tabla con tres celdas:

  • una para la imagen,
  • una para el espacio entre la imagen y los titulares,
  • y finalmente una para los titulares.
3b

Para la imagen con el borde, vamos a anidar otra tabla dentro de la celda y establecer el cellpadding a 5px y darle un color de fondo gris. Cellpadding agrega a la anchura del elemento, por lo que necesitamos reducir el ancho definido de la celda en 10px.

Tenga en cuenta:

  • Hemos añadido una fila de tabla vacía y una celda encima del contenido. Debido a que tenemos 15px de cellspacing, podemos usar una celda vacía para agregar 15px de espaciado entre elementos. En mis pruebas, esto funciona bien sin contenido, pero siempre se puede añadir un espacio duro para estar seguros.
  • Estamos estableciendo la propiedad v-align  a top. Esto es importante, ya que alinea cada celda con la parte superior de la fila. El valor predeterminado es medio, lo que conduce a algunos resultados extraños.
  • Estamos usando imágenes falsas de dummyimage.com porque todas las imágenes en los correos electrónicos HTML deben ser alojadas (más sobre eso más adelante) y es mucho más fácil de usar imágenes generadas. Eche un vistazo al sitio, se explica cómo especificar la imagen que desea con la URL.

Sección de Contenido - 1-Columna

Esta es una sección muy simple: sólo una tabla de una columna con un párrafo dentro. No olvide establecer el ancho de la celda y configurar la tabla para alinear el centro.

Divisores

Para añadir espacio vertical (más que el 15px de cellspacing que tenemos tenemos) tenemos que usar una imagen separadora. ¡Así como en los años 90! Podríamos utilizar un gif un espaciador y subirlo, pero por el momento es más rápido usar sólo otra imagen falsa. Lo dejaré gris para que usted pueda verlo, pero más tarde podemos ponerlo en blanco sobre blanco.

Lo que nos da algo como esto:

3c

Sección de Contenido - 3-Columnas

Para una sección de 3 columnas, usamos cinco celdas de tabla, una para cada columna y otra entre las columnas para separarlas.

3d

Bastante directo, utilice el mismo método para el borde como lo hicimos en la sección de 2 columnas. ¡No olvide el v-align!

Las tres columnas de texto son exactamente el mismo proceso.

Añada otro divisor en la parte inferior, y ya estamos casi listos:

3e

El Resto...

Todo lo demás es simplemente repetir lo que ya hemos hecho: una sección de 2-columnas y una sección de 1-columna con divisores entre ellas.

Y la disposición principal ya está completa:

3f

Una Palabra sobre Imágenes

A diferencia de las páginas web normales, usted no puede poner todas las imágenes en una carpeta y a continuación, utilizar rutas relativas para vincular hacia ellas. ¡Todos los enlaces deben ser absolutos! Cuando estoy desarrollando un correo electrónico, por lo general alojo imágenes en un subdominio o en Amazon S3. Cuando estoy listo para enviar el correo electrónico para un cliente, muevo todas las imágenes a un subdominio de su sitio web.

¡Todos los enlaces a imágenes deben ser absolutos!


Paso 4: Dando Estilo al Correo Electrónico

No podemos usar una hoja de estilo externa, y no podemos incrustar el CSS en la cabecera del correo electrónico, ya que algunos clientes eliminarán la etiqueta de cabecera completa o ignorarán las etiquetas de estilo. Vamos a tener que usar estilos en línea, lo cual es una molestia enorme. Afortunadamente, hay servicios útiles disponibles que tomarán el CSS incrustado y lo ejecutarán en línea. Yo uso un sitio web llamado Premailer, donde se puede pegar el código directamente y produce lo mismo con CSS en línea.

Vamos a hacer CSS incrustado para este tutorial, y luego vamos a hacerlo en línea con premailer.

¡Premailer toma el CSS incrustado y lo hace en línea!

Restablecimiento Básico

No vamos a hacer un restablecimiento duro con el selector * como lo haría para una página web. El uso de los valores por defecto realmente dará resultados más consistentes. Los únicos elementos cuyo relleno/márgenes que necesitaremos restablecer son aquellos que tendrán espacio alrededor de ellos (con cellpadding/cellspacing) como nuestros encabezados o nuestros párrafos.

También notará un margen alrededor de la tabla de envoltura, que es simplemente estilo predeterminado del elemento body.

Tipografía

Nada muy especial sobre la tipografía de un correo electrónico ya que es prácticamente lo mismo que sería para una página web. No utilice declaraciones abreviadas (como font:) porque no obtendrá resultados consistentes.

Y mire: ¡está mucho mejor ahora!

3g

Imágenes de Fondo

Las imágenes de fondo funcionan casi igual que en una página web, ¡excepto que a veces no funcionan! Asegúrese de tener un color de fondo secundario, que se asigna a la celda como bgcolor, para clientes que no admiten fondos CSS.

Otros Varios Estilos

Necesitamos diseñar cada enlace o heredarán el color predeterminado que tiene el cliente de correo electrónico, y también vamos agregar ese borde alrededor de la tabla principal. También vamos a añadir display:block a todas nuestras imágenes, esto soluciona un error en Outlook y Hotmail.

Asegúrese de agregar "display: block" a todas las imágenes para evitar un extraño error de margen en Hotmail.

3h

Y hemos terminado con la parte fácil. ¡Ahora a probar!


Paso 5: Pruebas

El proceso de prueba es la parte más importante y más desagradable de crear correos electrónicos HTML. Cuando trabajo en un correo electrónico, pruebo con frecuencia, en cada etapa, para poder identificar exactamente lo que sale mal. Hay un montón de clientes para probar y un montón de maneras de probarlos, vamos a repasar todo.

Clientes de Correo Electrónico

Éstos son los clientes que usted debería probar, por lo menos:


Cómo Hacer Pruebas

Necesitaremos encontrar una forma de enviar correos electrónicos HTML primero. Es probable que su cliente esté provisto con un servicio como Mailchimp o Campaign Monitor, lo que le permitirá probar y enviar campañas por correo electrónico.

Usted puede pensar que estoy complicando esto innecesariamente, porque algunos clientes de correo electrónico le permiten pegar código HTML. Sin embargo, esto puede dar lugar a resultados diferentes que cuando se utiliza una aplicación de campaña de correo electrónico. Prueba con una aplicación para estar en el lado seguro.


Probando con Mailchimp

Mi método preferido consiste en usar Mailchimp para probar y enviar campañas de prueba. Mailchimp es gratuito para hasta 500 destinatarios, por lo que no tiene que pagar para hacer pruebas. Tiene una interfaz simple y fácil de usar. He aquí una guía rápida paso a paso:

  • Regístrese para una cuenta Mailchimp gratuita y agregue una lista de destinatarios de sus cuentas de correo electrónico de prueba: Hotmail, Yahoo !, y Gmail, y acceda a su nueva cuenta.
  • Elija crear una campaña y seleccione regular ol' campaign de la página principal de la cuenta. Llene la información básica sobre la campaña, realmente sólo necesita un nombre para fines de prueba.
  • En la página de diseño, seleccione Importar -> Pegar en código y asegúrese de seleccionar Inliner CSS Automático
  • Si no está utilizando Mailchimp, asegúrese de usar Premailer para obtener su CSS en línea
  • Continúe hasta llegar a la página de confirmación y seleccione enviar prueba. Usted puede enviar algunas pruebas de aquí, pero después de eso, es necesario que realmente envíe los correos electrónicos a su lista.

Probando con Litmus

Litmus es una aplicación web que prueba correos electrónicos HTML en todo tipo de versiones de todo tipo de clientes de correo electrónico. El servicio completo cuesta dinero, pero si no puedes convencer a tu cliente para que pague, la versión gratuita te permite probar en Gmail antiguo y Outlook 2003, lo cual sigue siendo útil.


Resultados - Los Buenos

Algunas de nuestras pruebas resultaron bastante bien:

4a

Apple Mail

4b

Thunderbird


Resultados - Los Algo Malos

Algunos estaban un poco apagados, pero más o menos lo mismo:

4c

Gmail (safari)

4d

Outloook 2007

4e

Outlook 2003

4f

Yahoo! Mail


Resultados - Los Feos

También tuvimos un par de fallos.

4g

Hotmail (VERDE ???)

4h

Gmail antiguo (explorador)

Limpiando el desorden

A pesar de todo, esta es una prueba muy exitosa, porque he probado muchos de los elementos de Outlook y Gmail mientras avanzaba. Los problemas que tenemos con Gmail y Hotmail antiguos están relacionados con las hojas de estilo predeterminadas que usan los clientes. La marca especial y única de locos de Microsoft nos ha dado una hoja de estilo por defecto que reemplaza todos los encabezados con un estilo de texto verde con la designación !important. A veces estoy bastante segura de que quieren volverme loca.

4i

Para solucionar esto, necesitamos agregar la declaración !important a todos nuestros estilos de color de encabezado como este:

Para Gmail antiguo, tenemos un problema similar en el encabezado: Gmail está agregando margen adicional a la parte inferior de las etiquetas de encabezado. Sólo necesitamos anular margin-bottom específicamente.

Y hemos corregido Hotmail:

4j

Así que lo tenemos, un correo electrónico HTML funcional, consistente (aunque un poco sencillo). Es un dolor, sí, pero una vez que un sistema va a ir mucho más rápido. Trate de mantener su código bien comentado y organizado para que pueda volver a utilizar partes de él más tarde.

Si usted puede convencer a su para registrarse en algo como Litmus, su vida será mucho más fácil. También puede probar gran cantidad de clientes de correo a través de las versiones de pago de Mailchimp y Campaign Monitor.


Solución de Problemas

Sin duda encontrará problemas que no he cubierto aquí, pero tengo algunos consejos generales para la limpieza:

  • Revise sus cálculos: No recuerdo cuántas veces he estropeado un diseño por no agregar los anchos de las celdas de la tabla con precisión. Recuerde tener en cuenta el cellpadding: se agrega al ancho de sus células.
  • Compruebe las hojas de estilo predeterminadas: utilice algo como Firebug o Webkit Inspector para comprobar si un cliente de navegador está reemplazando sus estilos. Si esto sucede, la adición de una declaración !important debería resolver el problema.
  • Revise con Otras Personas: siempre hay una muy buena posibilidad de que alguien haya experimentado su problema antes. Si Google no ayuda, trate de navegar por consejos y trucos en los blogs de los servicios populares de campañas de correo electrónico, algunas personas hacen correos electrónicos para ganarse la vida y ¡ellos saben acerca de su materia!
  • Desármelo en partes: Si no puede encontrar dónde se equivocó, vuelva al principio y revise su correo electrónico parte por parte hasta encontrar lo que lo rompe.

El Resultado

Aquí está el código final para su referencia:

Así es como se ve nuestro resultado final si usamos imágenes reales:

4k

Nada realmente especial, pero debería ayudarle a comenzar a diseñar sus propios correos electrónicos HTML. Hay, por supuesto, otras maneras de hacer todo lo que he hecho, pero con correo HTML todo lo que realmente importa es que funcione. No existe realmente un concepto de estándares web o mejores prácticas aquí.


Recursos

¡Espero que haya aprendido un poco hoy! Sé que mi primer proyecto de correo electrónico HTML es uno de los más educativos en los que he trabajado. ¡Sólo me parece justo compartir lo que aprendí!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.