Advertisement
  1. Web Design
  2. Email

Diga hola al HTML Email Boilerplate

Scroll to top
Read Time: 13 min

Spanish (Español) translation by Elías Nicolás (you can also view the original English article)

Averiguar el correo electrónico html pondrá a prueba la paciencia de cualquier ser humano. Un problema de formato aparentemente pequeño surgirá inevitablemente y usted piensa: "yo, soy un tipo de desarrollador web de clase mundial formado en el último y mejor html5 / css3 / lo que sea, puedo abordar esto con un montón de pulsaciones de teclas de sobra. "

Luego de varias horas / tazas de café / google, estará listo para quitarse el pelo y comenzar a contemplar lo que le haría a la persona o personas que crearon {complete el cliente de correo electrónico en blanco aquí}. Eso es más o menos por qué el HTML Email Boilerplate existe.

HTML Email Boilerplate es una plantilla de clases que está ausente de diseño o diseño, que lo ayudará a evitar algunos de los principales problemas de representación con los clientes de correo electrónico más comunes: Gmail, Outlook, Yahoo, etc. - HTML HTML Boilerplate

The boilerplate está aquí para proporcionarle algunos ejemplos y consejos útiles para mantener el diseño de su correo electrónico tan fiel a la forma como sea posible. Puede usar el texto estándar como punto de partida para crear su correo electrónico. O, los usuarios más avanzados pueden elegir fragmentos específicos según sus necesidades.

En este artículo, vamos a desglosar algunos de los aspectos clave de la plantilla y discutir cómo implementarla.

Pero antes de comenzar, revisemos algunos inquilinos básicos del correo electrónico html:

  1. Lo único que puedes hacer referencia externamente son las imágenes. No hay hojas de estilo externas, fuentes, video (html5 está empezando a cambiar esto), etc.
  2. Existe un soporte limitado para los elementos CSS en los clientes de correo electrónico (cliente de correo electrónico = Outlook, Gmail, Hotmail, Yahoo, etc.). Puede consultar una hoja de cálculo útil sobre qué cliente admite qué funciones aquí.
  3. Las tablas se utilizan más comúnmente para diseñar un correo electrónico html.
  4. Y de naturaleza casi diabólica, debe realizar pruebas en el cliente de correo electrónico, el navegador y el sistema operativo.

1: Configuración del DOCTYPE

Si bien muchos clientes de correo electrónico eliminan el tipo de documento o no lo permiten, no significa que no deseamos establecer uno para nuestros propios fines de prueba. En este caso, el doctype XHTML 1.0 Strict se usa principalmente porque dos clientes populares que eliminan su doctype, Gmail y Hotmail, lo usan como predeterminado.


2: Trabajar con imágenes

Hay algunos problemas que debe tener en cuenta al trabajar con imágenes en correo electrónico HTML:

  • Vincular imágenes a otra página puede ser complicado. Diferentes clientes establecerán bordes no deseados (y feos) alrededor de una imagen en la que se puede hacer clic.    
  • Algunos clientes de correo electrónico agregan espacio extra en la parte inferior de la imagen.
  • Debido a que muchos clientes de correo electrónico desactivan las imágenes de manera predeterminada, el formato / marco de su mensaje puede distorsionarse.

Para combatir estos problemas, el repetitivo establece unos valores predeterminados razonables en la cabecera del documento. Restablece los bordes alrededor de las imágenes vinculadas a cero. Establece una clase (image_fix) para usar cuando no quieres espacio debajo de tus imágenes. La placa de repetición también le da un ejemplo de cómo configurar sus imágenes, siempre configurando el ancho, la altura, las altas y los títulos; Lo que ayuda a mantener tu formato intacto y consistente.

El boilerplate ayuda a administrar algunos de los problemas que puede encontrar al usar imágenes en el correo electrónico html. Incluya estas declaraciones en línea para asegurarse de que su correo electrónico se procesará como lo desea.


3: Tablas, Tablas, y más Tablas

Probablemente sea seguro asumir que ha usado tablas antes. Quiero decir, las mesas han existido desde el comienzo del tiempo (de Internet). Y si bien no es el método más nuevo ni el mejor, las tablas son la herramienta de enmarcar más común para el correo electrónico HTML y un método probado y verdadero para espaciar con eficacia. Además, las tablas de anidamiento son una excelente manera de agrupar y separar el contenido para conquistar los diseños más complicados.

La placa de preparación le ofrece algunos puntos de partida para trabajar con tablas. La primera es una tabla más externa (#backgroundTable) que actúa como un contenedor de clases, extendiéndose hasta el ancho del espacio visible en un cliente de correo electrónico. Se necesita porque algunos clientes restringen arbitrariamente el área para renderizar, lo que puede dar como resultado un contenido extrañamente alineado.

La clase #backgroundTable ayuda a restablecer algunos formatos específicos del cliente de correo electrónico mientras configura el lienzo para que trabaje.

La segunda tabla (interior) está centrada y configurada a un ancho de píxel de (600 px), un buen ancho para usar para evitar que su correo electrónico se extienda más que el espacio real visible de un cliente de correo electrónico (piense en el panel de vista previa).

Además, como lo hace con las imágenes, el boilerplate establece algunos valores predeterminados para las tablas que ayudan a evitar problemas de formato. Los bordes, el relleno de celdas y el espacio de celdas se establecen en cero y el contenido se alinea verticalmente en la parte superior de la celda.

Nota: debido al soporte limitado para divs en clientes de correo electrónico, las Tablas son su mejor oportunidad y, a veces, la única para formatear y posicionar contenido.


4: Arreglos específicos del cliente

Gran parte de la razón por la que existe este hito, y otras similares, es para frustrar lo que parecen ser actos aleatorios de sabotaje a manos de Yahoo, Google, Microsoft y similares. Yahoo establece los márgenes de los párrafos en cero, mezclando el texto en un blob grande. Gmail no tiene en cuenta (realmente, elimina) cualquier estilo en la cabeza de su documento y atornilla con sus imágenes. Hotmail odia tus encabezados y Outlook ha sido durante mucho tiempo la ruina de la existencia de cualquier correo electrónico HTML.

Así que el repetitivo intenta neutralizar algunos de estos matices siempre que sea posible, y mitigar el efecto del resto.

Específicamente, para Yahoo, la plantilla establece el margen del párrafo en 1em en el encabezado del documento e instruye que se incorpore. (Más por venir "en línea" más tarde)

Cambia:

Yahoo Space IssueYahoo Space IssueYahoo Space Issue

A esto:

Yahoo Space IssueYahoo Space IssueYahoo Space Issue

Para Hotmail, boilerplate anula el estilo de encabezado verde de Hotmail, normaliza la altura de la línea y establece un ancho predeterminado.

Para Outlook, la plantilla establece "border-collapse: colapse" para deshacerse de algunos rellenos predeterminados.

Consejo: Al configurar #outlook a {padding:0;} en el encabezado de su documento, puede forzar a Outlook a ofrecer una opción de 'ver en el navegador'. Una característica interesante que sería impresionante si otros clientes ofrecieran. (H / T Fabio Carneiro y MailChimp para este excelente fragmento).


5: Móvil

Mobile es una de las áreas más interesantes de la creación de correo electrónico HTML. Si bien en su mayor parte estamos atrapados en el siglo XX desde una perspectiva de marcado, los nuevos teléfonos inteligentes nos han dado una idea de cómo podría ser la vida. Finalmente, tenemos la oportunidad de jugar con las tecnologías web "más nuevas". Podemos divertirnos en los campos del diseño responsivo, podemos consultar el contenido de nuestros corazones y seguramente podemos apuntar a diferentes plataformas. Bueno, tal vez me dejé llevar un poco, pero dado el estado del correo electrónico, el móvil se ve mejor cada día.

Teniendo en cuenta la representación móvil, el modelo proporciona un buen punto de partida para la orientación móvil. Ayuda a cambiar el tamaño de la fuente (o detenerla). Ayuda a optimizar su correo electrónico para dispositivos móviles configurando la ventana gráfica a la anchura del dispositivo. También le proporciona las consultas @media necesarias para apuntar al iPhone (3 + 4), tabletas (mediante resolución), teléfonos Android y una declaración condicional para Windows Mobile.

Recordatorio: no debe traer en línea ningún estilo declarado en las consultas @media.


6: Trabajar con el EBP: cuándo y cómo alinear los estilos   

Herramientas como el Premailer de Dialect hacen que el enrollamiento sea muy fácil. Una gran herramienta para que cualquier usuario de correo electrónico html tenga en su pecho, cinturón o protector de bolsillo.

Como se mencionó anteriormente, hay algunos clientes que eliminan los estilos incrustados en el encabezado. Necesitamos dar un paso más allá de tener los estilos incrustados en el encabezado y ponerlos en línea. Puede hacerlo manualmente, usar la herramienta integrada de los clientes de correo electrónico (herramientas populares como Campaign Monitor y Mailchimp las tienen integradas), o usar una herramienta independiente como Premailer. De cualquier manera, siga las instrucciones en la placa de calderas para averiguar qué traer en línea.

Para darle una idea de lo que estamos hablando, consulte la corrección del párrafo de Yahoo que se menciona más arriba en el artículo. Tiene que estar en línea para trabajar. Si no, sus declaraciones de margen serán ignoradas y sus párrafos se agruparán. Por otro lado, con otra solución en la placa de repetición, el marcado como table td {border-collapse: collapse;} que tiene como objetivo un problema de relleno en Outlook no necesita ser incorporado. Outlook respetará sus estilos incrustados (bueno, en su mayor parte :)).


Como ejemplo, pasarías de esto:

A esto:

Tenga en cuenta que cualquier estilo de estilo y justo después de las consultas de @media no debe incluirse. Recomendaría eliminar los estilos consultados hasta que esté satisfecho con su correo electrónico y luego volver a trabajar después de incluir sus otros estilos.


7: Algunas menciones de honor

Hay un par de temas que vale la pena mencionar, pero que no llegaron al boilerplate por una razón u otra.

  • Video HTML5: aunque realmente muy cerca, hay algunas fallas de soporte importantes en Hotmail que lo hicieron difícil de incluir. Actualmente se están probando algunas tácticas interesantes que pueden representar un video real en un correo electrónico en varios clientes y degradar con gracia a una imagen en la que se puede hacer clic. Sin embargo, Hotmail arroja un poco de llave en todo, ya que mostrará el video y permitirá la reproducción, pero sin ningún control visual. Hacer clic con el botón derecho funciona, pero parece un tramo pedirle a los lectores que hagan. También puedes configurar el video para reproducción automática, pero ¿podrías realmente vivir contigo mismo haciendo eso?   

    html5 video

  • Open Graph de Facebook: Probablemente un candidato para el próximo lanzamiento. Todavía estoy sopesando el efecto de tener esto en un correo electrónico y específicamente si no hay una versión de navegador del correo electrónico disponible, ¿debería estar ahí?

    Facebook Open Graph


8: El estado del correo electrónico

CSS3? Vamos a CSS2 primero.

Muchos correos electrónicos se lamentan de tener que codificar como si fuera 1999. Las tablas, no los divs, reinan. CSS3? Vamos a CSS2 primero. Los clientes de correo electrónico admiten etiquetas, declaraciones y especificaciones completas de forma aleatoria. Sin embargo, con la llegada de los dispositivos iOS y algunos movimientos en el espacio del cliente, los motores de renderizado como Webkit están apareciendo y hacen que la vida de los usuarios de correo electrónico sea un poco más fácil. Debido a este y otros factores, estamos viendo algunos de los diseños más complejos y hermosos de la historia. Definitivamente es un momento emocionante para los correos electrónicos.

Este movimiento tiene mucho que ver con dispositivos móviles, iOS en particular. A partir de junio de este año, el segundo cliente de correo electrónico más popular fue un dispositivo iOS. Eso significa que podemos usar casi cualquier cosa que un navegador webkit admita para construir nuestro correo electrónico, cosas como CSS3, HTML5, todas entran en juego (woohoo). Sin embargo, no se entusiasme demasiado, aún tiene que tener en cuenta que no se admite CSS3 ni HTML5 en muchos otros clientes de correo electrónico de escritorio / web (no woohoo).

Dicho esto, esta subida de la barra definitivamente ha hecho un espacio ya complicado más complicado. Mientras que algunos clientes de correo electrónico se están moviendo a los estándares basados ​​en la web, por ejemplo, Outlook en una Mac ahora usa el webkit al igual que su contraparte de Apple Mail, la mayoría de los clientes de correo electrónico de escritorio y basados ​​en la web se están moviendo hacia un soporte aceptable de html / css a un ritmo de tortuga. Así, mientras que el móvil nos ha mostrado algo de luz al final del túnel, también ha agregado otra columna a la matriz ya abarrotada de posibilidades de prueba.

Como mencioné anteriormente, este es definitivamente un momento emocionante para los usuarios de correo electrónico. Con tantas grandes compañías e individuos empujando el sobre por lo que es posible, es inevitable (al menos eso espero) que el impulso empuje las cosas en la dirección correcta, y por "cosas" me refiero a un mejor soporte html / css, un poco Estandarización, y menos dolores de cabeza.


Conclusión

El boilerplate está aquí para mostrar y resaltar algunos de los escollos del desarrollo para los clientes de correo electrónico y correo electrónico. Y aunque no es exactamente plug and play, con un poco de esfuerzo, proporcionará algunos ejemplos útiles y fragmentos que mantendrán su diseño de correo electrónico tan fiel a la forma como sea posible. Por lo menos, le ahorrará tiempo en Google y, lo que es más importante, le ahorrará algo de pelo.

Me encantaría saber de ti. Si tiene algo que le gustaría ver en la tabla de referencias, hágamelo saber aquí o @seanpowell.


Muchas gracias

Cuando se llega a esto, el HTML Email Boilerplate es simplemente una recopilación de consejos, fragmentos y las mejores prácticas que han llegado a mi escritorio, y sería lógico no mencionar algunas de las grandes investigaciones y la apertura de Ros Hodgekiss, Brian Theis y el equipo terminó en Campaign Monitor; y a Fabio Carneiro y Mailchimp por el gran trabajo que realizan (y el gran restablecimiento que usa el repetitivo). El repetitivo también se pone a prueba utilizando dos excelentes herramientas de prueba de correo electrónico, Litmus y Email on Acid. Sin ellas, esta habría sido una tarea imposible.


Recursos

Sólo unos pocos que uso regularmente ...

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
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.