7 mitos del desarrollo del correo electrónico

El correo electrónico comenzó como un método de comunicación 1: 1 de solo texto en 1971, cuando fue concebido por Ray Tomlinson. A lo largo de las décadas, el correo electrónico ha evolucionado, alejándose de las versiones de solo texto de los primeros correos electrónicos a HTML. Los desarrolladores de correo electrónico han llevado el correo electrónico al futuro, utilizando técnicas creativas dentro de límites estrictos.

En ese tiempo, los desarrolladores de correo electrónico crearon todo tipo de "mejores prácticas" para ayudar a otros a comenzar con la codificación de correo electrónico, o para actuar como recordatorios para aquellos en las trincheras de lo que los desarrolladores de correo electrónico pueden y no pueden hacer.

Hoy estamos aquí para recordarles a los desarrolladores de correo electrónico que las mejores prácticas no deben considerarse estáticas. Ellos cambian. Lo que era mejor para los desarrolladores de correo electrónico a fines de la década de 1990 ya no suena cierto a mediados de la década de 2010.

A continuación, presentamos siete mitos sobre el desarrollo del correo electrónico que han existido durante años y por qué es hora de acabar con ellos:

• Mito n. ° 1: los correos electrónicos deben tener 600 píxeles de ancho.
• Mito n. ° 2: debe utilizar únicamente fuentes estándar del sistema.
• Mito n. ° 3: utilice únicamente el DOCTYPE de transición.
• Mito # 4: Deben usarse selectores de atributos.
• Mito n. ° 5: Todos los estilos en los correos electrónicos deben estar incluidos.
• Mito n. ° 6: no uses imágenes de fondo en los correos electrónicos.
• Mito n. ° 7: los correos electrónicos deben verse idénticos en todos los clientes de correo electrónico.

Mito n. ° 1: los correos electrónicos deben tener 600 píxeles de ancho.

Antes de que los teléfonos móviles y las tabletas se convirtieran en algo común y el correo electrónico fuera únicamente una aplicación de escritorio, las mejores prácticas dictaban que todos los correos electrónicos no deberían ser más anchos o estrechos que 600 píxeles. ¿Por qué exactamente 600 píxeles? El tamaño de la ventana gráfica de los clientes de correo electrónico más utilizados en su día (HoTMaiL, Yahoo y Outlook) era de alrededor de 500-550 píxeles. Establecer el ancho del correo electrónico para que no sea más ancho que 600 píxeles permitiría el menor desplazamiento horizontal posible en el correo electrónico.

Esa regla de los 600 píxeles se mantuvo. Aunque hoy en día hay más dispositivos para atender, todos con diferentes tamaños de pantalla, ¿por qué nos atenemos a la regla de los 600 píxeles?

Es una regla fácil de cumplir, especialmente si el flujo de trabajo de su correo electrónico incluye la creación de un diseño en Adobe Photoshop o Sketch; necesita un ancho físico para comenzar el diseño de su correo electrónico. Es cierto que un correo electrónico de 600 píxeles de ancho seguirá mostrándose muy bien entre los clientes de correo electrónico más populares, en los escritorios. Y al usar consultas de medios, los desarrolladores de correo electrónico pueden cambiar fácilmente el ancho del correo electrónico según el dispositivo que los suscriptores usen para abrir.

El ancho fluido resuelve el problema de la gran cantidad de dispositivos que los desarrolladores de correo electrónico necesitan admitir. Para que esto funcione, use el ancho máximo para evitar que los correos electrónicos se vuelvan demasiado anchos e ilegibles en ventanas gráficas más grandes, y declaraciones condicionales de MSO para que Outlook lo entienda (ya que no representa la propiedad CSS de ancho máximo).

Los correos electrónicos de Zalando tienen 450 píxeles de ancho, muy lejos del estándar de 600 píxeles que estamos acostumbrados a ver. Combinado con las grandes llamadas a la acción, parece que los correos electrónicos optimizados para dispositivos móviles de Zalando se dirigen más a la multitud de dispositivos móviles.

Mientras tanto, los correos electrónicos de Email Weekly emplean la técnica fluida, con un ancho máximo de 960 píxeles. Utiliza consultas de medios para cambiar elegantemente el ancho del correo electrónico según el ancho del dispositivo.

Dependiendo de los clientes y dispositivos que usen sus suscriptores para abrir su correo electrónico, puede tener sentido establecer el ancho de su correo electrónico en un máximo que no sea de 600 píxeles.

¿Dónde están sus suscriptores abriendo sus correos electrónicos? Con Email Analytics puede averiguar en qué dispositivos y clientes de correos electrónicos están abriendo sus correos electrónicos. Más información →

Mito n. ° 2: debe utilizar únicamente fuentes estándar del sistema.

Las fuentes del sistema han sido durante mucho tiempo la opción segura para su uso en el correo electrónico. Bueno, han sido la única opción.

Por otro lado, los diseñadores web han estado experimentando con el uso de fuentes no estándar en la web desde principios de la década de 2000. En 2008, la regla CSS @ font-face finalmente tuvo el apoyo de los navegadores web para que los diseñadores web usaran fuentes no estándar en sus sitios web. En 2010, Google lanzó su propia biblioteca de fuentes web, gratuita para que la utilicen los diseñadores web.

No hubo tanta suerte para los diseñadores de correo electrónico debido a la falta de un método sólido para importar las fuentes web en un correo electrónico HTML. Sin mencionar la falta de licencias: cuando se crearon las fuentes web por primera vez, nadie pensó que se usarían en los correos electrónicos, por lo que la licencia de las fuentes web no cubría el uso del correo electrónico.

Aunque recomendamos fuentes del sistema estándar en sus correos electrónicos, eso no significa que no pueda emplear fuentes web como una técnica de mejora progresiva. Los repositorios de fuentes en línea están comenzando a incluir el uso del correo electrónico en sus licencias. Y Google Fonts, con sus 800 fuentes web de uso gratuito, se está convirtiendo en la biblioteca de referencia para los diseñadores de correo electrónico que desean utilizar fuentes web no estándar en sus correos electrónicos.

Existe compatibilidad con fuentes web en Google Android 4.4, Apple Mail para iPhone, iPad y Mac, y Outlook 2011 y 2016 en OS X. Puede que esto no parezca mucho, pero en septiembre de este año cuatro de los cinco principales clientes de correo electrónico , en participación de mercado, admite fuentes web: iPhone, iPad, Google Android y Apple Mail. ¡Eso es más del 50% de todos los correos electrónicos abiertos en septiembre! Por supuesto, debe consultar su propia base de suscriptores, pero este es un buen indicador de cuántas personas podrán ver las fuentes web en sus correos electrónicos.

¿Puedes ver las sutiles diferencias entre estos dos correos electrónicos? El de la izquierda usa fuentes web, mientras que el de la derecha tiene las fuentes web deshabilitadas. The Outnet ha elegido una excelente fuente alternativa que se parece mucho en apariencia a su fuente web, lo que muestra cómo puede usar fuentes web de manera consistente en su correo electrónico hoy.

Mito n. ° 3: utilice únicamente el DOCTYPE de transición.

El DOCTYPE de un documento HTML le dice al navegador cómo representar la página y se usa para validar el HTML del documento.

El DOCTYPE más utilizado en el correo electrónico es:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Los desarrolladores de correo electrónico han adquirido el buen hábito de tener un DOCTYPE, aunque algunos clientes de correo electrónico eliminarán el DOCTYPE por completo o lo reemplazarán por uno diferente. Gmail, Outlook.com y Yahoo! Mail se encuentra entre los clientes de correo electrónico que eliminan cualquier DOCTYPE presente en su correo electrónico y lo reemplazan con HTML5 DOCTYPE.

En la web, diferentes DOCTYPE cambian la forma en que se representan algunas propiedades CSS y elementos HTML. El DOCTYPE anterior permite la más amplia gama de elementos HTML, incluidos elementos obsoletos como <font>, que se han utilizado en el correo electrónico. En pruebas anteriores, se demostró que este DOCTYPE es el más confiable para el correo electrónico. FUE probado: tiempo pasado.

Esto fue antes de que HTML5 se convirtiera en el estándar que es ahora:

 <!DOCTYPE html>

El DOCTYPE de HTML5 permite el uso de elementos HTML5 más nuevos, por ejemplo, <video>, que se pueden utilizar en el correo electrónico. Si bien es posible que no todos los clientes puedan representar los nuevos elementos o propiedades, no hay razón para no adelantar su correo electrónico al futuro actualizando su DOCTYPE. Aún puede usar código obsoleto con un DOCTYPE HTML5, pero el código ya no será válido cuando se verifique a través de un servicio de validación. Si bien no hay impacto en su correo electrónico en términos de capacidad de entrega o rendimiento si su código es válido o no, puede ser una buena idea verificar su marcado HTML en busca de etiquetas HTML abiertas, lo que puede afectar la forma en que se procesa su correo electrónico.

Mito # 4: Deben usarse selectores de atributos.

Yahoo! Mail ha sido un cliente de correo electrónico un poco más amable de desarrollar que, por ejemplo, Outlook. Apoyó el estilo en la cabeza desde que tenemos memoria. Una peculiaridad de Yahoo! Mail ofreció que mostraba cualquier declaración CSS en una consulta de medios junto con cualquier CSS fuera de las consultas de medios. La solución simple para esto fue escribir la declaración CSS como un selector de atributos:

 *[class=”foo”] {color:#000000; font-family: sans-serif;}

Escribir CSS en la cabeza de los correos electrónicos como este se convirtió en el estándar ya que otros clientes de correo electrónico, que también leen el estilo en la cabeza, no tenían problemas para leer selectores de atributos simples, como el ejemplo anterior.

A principios de 2015, Yahoo! Mail lanzó una actualización que le permitió leer el estilo como lo haría cualquier cliente de correo electrónico "normal":

 .foo {color:#000000; font-family: sans-serif;}

Sin embargo, debido a que los selectores de atributos habían estado tan arraigados en el desarrollo del correo electrónico, no era sorprendente verlos todavía dando vueltas en el código del correo electrónico. Los desarrolladores de correo electrónico simplemente estaban acostumbrados a usarlos y, a menudo, las plantillas de correo electrónico no se actualizaban.

Anteriormente inofensivos, los selectores de atributos ahora pueden dañar un poco su correo electrónico, si los tiene en su código. Si el estilo de su correo electrónico no parece funcionar en Gmail, verifique si todavía está usando selectores de atributos en su estilo. Gmail no admite selectores de atributos, pero ahora (¡finalmente!) Admite el estilo en el <head>.

Con los selectores de atributos ya no son necesarios para Yahoo! Mail y la falta de soporte de Gmail para ellos, no es necesario utilizar selectores de atributos en el CSS en sus correos electrónicos.

Mito n. ° 5: Todos los estilos en los correos electrónicos deben estar incluidos.

Las tablas para el diseño y los estilos de inserción han sido la base del desarrollo del correo electrónico desde ... siempre. Definen la diferencia entre correo electrónico y desarrollo web. La inserción de estilos es ahora tan común para los desarrolladores de correo electrónico, que se ha vuelto un poco confuso sobre por qué los estilos tenían que estar integrados en primer lugar.

Sorprendentemente, algunos sitios afirman que la razón por la que se necesitan estilos en línea es Outlook y Gmail. Lo que está simplemente mal. [Tuitea esto]

Outlook nunca ha tenido problemas con el estilo en la cabecera del correo electrónico. Por otro lado, Gmail lo hizo. Gmail ha sido literalmente la razón más importante (con una participación de mercado del 16% en septiembre de 2016) por la que los desarrolladores de correo electrónico integran su CSS.

A fines de septiembre, Gmail comenzó a apoyar el estilo en la cabeza. Entonces, ¿necesitamos alinear todos los estilos más?

Si sus suscriptores usan principalmente Gmail, iOS o incluso Outlook, podemos decir con confianza que ahora es el momento de mover sus estilos a la cabeza. Sin embargo, si la mayoría de sus suscriptores utilizan clientes de correo electrónico poco conocidos o clientes de correo electrónico internacionales (Yandex, Libero, Terra) que se basan en estilos en línea, es posible que deba continuar usándolos. Como siempre, recomendamos probar su correo electrónico cada vez que realice cambios importantes en él.

Mito n. ° 6: No uses imágenes de fondo en los correos electrónicos.

Las imágenes de fondo han sido notoriamente difíciles de conseguir en el correo electrónico. Los desarrolladores de correo electrónico utilizan un código VML complicado para representar en muchas versiones de Outlook, y también ha habido una falta de compatibilidad con imágenes de fondo en otros clientes de correo electrónico.

Aquí está la cuestión: las imágenes de fondo pueden funcionar y funcionan en el correo electrónico, pero así es como se incorporan al diseño de su correo electrónico. Con un soporte limitado, no debe usar imágenes de fondo como un elemento clave en el diseño de su correo electrónico, porque eso hace o rompe la experiencia de su suscriptor. Pero puede usarlos en su correo electrónico de manera similar a como usaría las fuentes web, como una mejora progresiva.

Una de las principales razones para no usar imágenes de fondo en el correo electrónico fue la falta de compatibilidad de Gmail con las propiedades de CSS background-size y background-position. Estas propiedades de CSS son importantes para las pantallas de alta densidad de píxeles y el correo electrónico híbrido / fluido / receptivo, donde se necesita una cierta cantidad de control sobre el tamaño y la ubicación de las imágenes de fondo. Ambos ahora son compatibles con Gmail e Inbox by Gmail, por lo que hay menos razones para no probar el uso de imágenes de fondo en el correo electrónico.

Kristian Robinson, desarrollador principal de correo electrónico en TWO marketing digital y orador de la Conferencia de diseño de correo electrónico 2016, profundiza en las imágenes de fondo del correo electrónico, si se siente inspirado para abordarlas.

Mito n. ° 7: los correos electrónicos deben verse idénticos en todos los clientes de correo electrónico.

Todos los clientes de correo electrónico tienen formas ligeramente diferentes de renderizar correos electrónicos HTML. En lugar de aceptar esto, los desarrolladores de correo electrónico han intentado abrirse camino a correos electrónicos idénticos en una multitud de clientes de correo electrónico. Una tarea muy honorable de emprender, pero puede resultar en un código HTML inflado y pirateado que puede ser una pesadilla para administrar y mantener actualizado.

Puede que no sea el desarrollador de correo electrónico que busca la perfección del correo electrónico, sino el cliente u otras partes interesadas. Sin embargo, es responsabilidad del desarrollador de correo electrónico educar a quienes lo rodean para que comprendan las trampas del desarrollo del correo electrónico: por qué los clientes de correo electrónico se representan de manera diferente y por qué no importa si algo es 1 píxel más alto en un cliente de correo electrónico en comparación con otro.

"El momento en que los correos electrónicos tenían que tener píxeles perfectos ha quedado atrás". @ericlepetitsf #LitmusLive

- Chad S. White (@chadswhite) 16 de agosto de 2016

Este mito es especialmente dañino cuando se intenta emplear nuevas técnicas en el correo electrónico, que pueden no representar en el 100% de los clientes de correo electrónico, por ejemplo, fuentes web e imágenes de fondo. Ambas son formas fantásticas de mejorar su correo electrónico. ¿Y dónde estaríamos como industria si no intentáramos adoptar y experimentar con nuevas técnicas en nuestros correos electrónicos?

El hecho de que se haya hecho algo de una manera particular durante años no significa que no haya una mejor manera de hacerlo. Ahora es el momento de cuestionar las reglas y las mejores prácticas con las que la industria del marketing por correo electrónico ha estado trabajando durante décadas.

Codifique correos electrónicos más rápido y más fácil con Builder

Acelere su flujo de trabajo de desarrollo de correo electrónico con Builder, el único editor de código creado específicamente para correo electrónico. ¡Y es gratis!

Empiece a usar Builder →