Distribuir y conquistar: diseño ahora y ahora

Son leídos por millones de personas en todo el mundo. Se agregan al spam, se eliminan para siempre, pero sin ellos, Internet moderno es impensable. Muchos desarrolladores front-end harán cualquier cosa para poner sus manos en el trabajo sobre ellos. Mi historia trata sobre correos electrónicos, cómo han cambiado durante 20 años y cómo el front-end moderno no se deprime al escribirlos. Este es el primer artículo de una serie en el que hablaré sobre cómo comenzó todo. En un par de semanas hablaremos sobre las herramientas de desarrollo y prueba del boletín.

Hace más de 20 años, los correos electrónicos eran mensajes de texto sin formato. Con el desarrollo de Internet y las tecnologías web, los correos electrónicos se han vuelto más complejos tanto en términos de diseño como de implementación técnica. Ahora se ven como páginas completas del sitio o páginas de destino.

Cliente de correo electrónico de WorldCast, 2000

Cliente de correo electrónico de Gmail 2018

Desarrollamos cartas y sitios usando los mismos lenguajes: HTML y CSS. Lo que sucede en el código fuente de los correos electrónicos html es completamente diferente de lo que se puede ver en el entorno de desarrollo de un front-end moderno. Incluso podría pensar que está de vuelta en la web de la Edad Media. Los que inventaron las cartas probablemente ya entendieron lo que quiero decir. El resto solo diré una palabra: html-tables.

Historia: entonces y ahora, o por qué todo es tan malo

En primer lugar, recordemos cómo comenzó todo.
A finales de los 90, aparecieron las primeras letras html. Simple, con un uso mínimo de las capacidades de HTML 4.01 y CSS2 (el primer borrador de CSS3 aparecerá en unos años más). En 1996-1997, comenzaron a aparecer los primeros clientes de correo electrónico basados ​​en el navegador. La era de los clientes web gratuitos que admiten el marcado html ha comenzado.

Interfaz de Hotmail 1997

El más popular de ellos fue el servicio HotMail, y un año después del lanzamiento, Microsoft lo compró. Por cierto, Microsoft no jugará el último papel en nuestra historia. Tras la compra de Hotmail, Microsoft lanzará su propio cliente de correo electrónico de escritorio, Outlook. Con bastante rapidez, ocupó su nicho con fuerza.

Desde su inicio, las letras html han sido criticadas más de una vez. Las principales quejas: no son seguras para los usuarios, representan durante mucho tiempo, "comen" el ancho de banda del canal de Internet del usuario y se ven como misteriosas artesanías de diseñadores web novatos. Esto fue en parte cierto, pero todos estos problemas se resolvieron con el tiempo: la velocidad de la conexión a Internet aumentó, se revisó fundamentalmente el diseño de los correos electrónicos, se resolvieron los problemas del lado de los desarrolladores de clientes de correo electrónico y, en particular, los problemas de seguridad. El progreso y el sentido común ganaron.

En junio de 1999, Microsoft lanzó Outlook 2000, en el que comenzó a utilizar el motor de Internet Explorer, Trident, para representar letras.

El nuevo motor demostró no ser el mejor para los desarrolladores de sitios web y trajo consigo una gran cantidad de errores, el más famoso de los cuales permaneció "fuera de servicio" varias versiones más del cliente de correo electrónico en una fila. El bloqueo automático de todas las imágenes y la falta de texto alternativo, la funcionalidad de formularios html inoperantes, las vistas previas de correo electrónico rotas antes del envío son solo la punta del iceberg de los problemas de Outlook 2000/2002 / XP / 2003.

Bloqueo automático de imágenes en Outlook 2003

En enero de 2007, se lanzó una nueva versión del cliente de correo electrónico de Microsoft. Esta versión ha traído los cambios más serios en la historia de Outlook. En la nueva versión del programa de correo de Microsoft, cambiaron del motor de Internet Explorer al motor de su otro producto: MS Word. Esta necesidad se explica principalmente por "cuidar a los usuarios" y "aumentar la seguridad del cliente de correo electrónico". De hecho, esto causó serias pérdidas en el soporte de las propiedades CSS y creó muchos errores nuevos, complicando así la vida tanto de los tipos de letra de las listas de correo como de los usuarios comunes.

Tablas html geniales y terribles

Debido a la falta de la capacidad de colocar bloques y usar flotante, así como debido al margen y el relleno, los desarrolladores de la lista de correo enfrentaron una tarea difícil: tuvieron que hacer que los correos electrónicos se mostraran igualmente bien tanto en la generación anterior de clientes de correo electrónico de Microsoft como en la actual, nada sin romper u olvidarse de otros anuncios publicitarios populares de esa época.

Y se encontró una solución: tablas html. Suena simple, pero en realidad esto es equivalente a abandonar el uso de las capacidades y características modernas de HTML 4 y CSS2 y volver a enfoques obsoletos (incluso en ese momento) para crear la composición tipográfica.

Correo electrónico html típico dentro

La necesidad de usar tablas html no era la única limitación: era necesario no olvidarse de los preprocesadores que se usaban en los anuncios publicitarios. En los clientes web, la letra html, antes de ser procesada, pasa por una etapa en la que el código se analiza desde el punto de vista de la seguridad y la estabilidad, el preprocesamiento, como resultado de las partes potencialmente peligrosas, como el código javascript, el contenido incrustado, así como todo dentro de la cabeza y etiquetas de estilo y algunas otras cosas.

Pasó el tiempo, la tecnología no se detuvo, las especificaciones HTML y CSS estaban cubiertas de nuevas características, pero Outlook, y con él el 15% de los clientes de correo electrónico del mundo (en ese momento), también se mantuvo en su lugar. Solo con el lanzamiento de Outlook 2016 (que permanece en el mismo motor antediluviano de MS Word) comenzó a cambiar la actitud de MS hacia sus usuarios, así como hacia los desarrolladores de la lista de correo. La compañía Litmus , conocida por su servicio para probar correos en varios clientes de correo electrónico, se ha asociado con MS.

Litmus comenzó a ayudar a los desarrolladores de Outlook a priorizar problemas y acelerar su resolución, y a los usuarios del servicio, con la capacidad de revisar sus correos electrónicos de forma gratuita en este cliente de correo electrónico. Esto valió la pena, pero no cambió la situación: al momento de escribir, el cliente más nuevo de MS era el Outlook 2019 recientemente anunciado. Interesante: agregó soporte de svg, y la fuente Times New Roman ya no es una alternativa para las fuentes web. Pero todavía "sangra" MS Word con todos los problemas que se derivan.

Diferencias entre diseño y diseño del sitio

Hoy en día, Outlook cierra los tres primeros con ~ 10% de los usuarios (en primer lugar, Apple Mail para computadoras de escritorio / teléfonos móviles, en segundo lugar, Gmail para web / teléfonos móviles), pero esto todavía es mucho. Por lo tanto, desafortunadamente, todavía no podemos alejarnos de las mesas.

Afortunadamente, ahora conocemos las características de los motores de Outlook. Esto nos dio varias herramientas para hacer la vida más fácil con las letras: comentarios condicionales y lenguaje de marcado de vectores.

Comentarios condicionales

Muchos de los viejos fabricantes que hicieron los días de IE6-8 recuerdan de qué se trata.
Los "comentarios condicionales" son un mecanismo de extensión del motor de IE que le permite seleccionar versiones específicas de IE y aplicar las reglas que necesitamos para ellos. Si necesitamos agregar algunos estilos solo para Outlook 2000 y superior, podemos escribir:

<!-- [if gte mso 9]> <style type="text/css"> /*     Outlook */ </style> <![endif]--> 

Además, al usar Comentarios condicionales, puede forzar al motor a representar ciertos bloques de marcado solo para versiones específicas de Outlook:

 <!--[if (gte mso 9)|(IE)]> <table width="640" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td valign="top"> <![endif]--> 

A menudo, los Comentarios condicionales se usan junto con otra característica de Outlook: VML.

Lenguaje de marcado de vectores

Vector Markup Language (VML) es un lenguaje de marcado de vectores desarrollado por MS para describir gráficos vectoriales en 1998. Más tarde se convirtió en uno de los idiomas que sirvió de base para el conocido lenguaje SVG. Desde el lanzamiento de IE10, VML ha quedado en desuso y ya no es compatible o está en desarrollo.

¿Cómo se relacionan los gráficos vectoriales, el lenguaje de marcado no compatible y las letras html? Es simple: la imagen de fondo sin VML no es posible en Outlook 2007/2010/2013/2016. Pero aprender por un lenguaje tan nuevo es completamente opcional: puede usar herramientas en línea ya preparadas que harán todo por usted.

 <body> <div style="background-color:#7bceeb;"> <!--[if gte mso 9]> <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t"> <v:fill type="tile" src="https://i.imgur.com/YJOX1PC.png" color="#7bceeb"/> </v:background> <![endif]--> <table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0"> <tr> <td valign="top" align="left" background="https://i.imgur.com/YJOX1PC.png"> </td> </tr> </table> </div> </body> 

Lamentablemente, esto no niega el hecho de que de vez en cuando todavía tienes que elegir el tuyo en VML debido al hecho de que en algunas versiones de Outlook tienes configurado un diseño de fondo.

Trayendo belleza

Los boletines modernos tienen un lugar para varios elementos interactivos. Alguien, por ejemplo, integra el feed de Twitter directamente en la carta. Hablaré sobre cosas más prácticas y útiles: formularios y controles deslizantes.

Formas

Los autores de emailmonks.com describieron una forma de agregar un formulario de trabajo al correo electrónico. El mecanismo es el siguiente: la función php recopila los datos del formulario como un atributo URL; este atributo se almacena en un documento remoto o tabla de datos; más tarde, este atributo se solicita a la fuente especificada y se muestra en la página.

El soporte para tales formularios es bastante bueno: en Apple Mail, iOS Mail, Outlook, Gmail para iOS / Android y en el cliente de correo electrónico Android predeterminado, funcionan de manera inmediata.

Deslizadores

Todos saben qué son los controles deslizantes, y muchas personas saben cómo hacer que usen JS. Sin embargo, puede hacer el control deslizante utilizando CSS / HTML puro, y aun así funciona correctamente en clientes de correo electrónico modernos (con la excepción de Outlook para Windows, necesitará un respaldo para los controles deslizantes).

La magia de este control deslizante es de 20 líneas:

 .slide1 { top: 10px; left: 321px;} .slide1-content {left: 0px;} .slide1:hover { background-color: #37B330;} #slide-1:checked ~ .slide1 {background-color: #37B330 !important;} #slide-1:checked + span + table .swoosh { left: 0px !important; } .slide2 { top: 66px; left: 321px; } .slide2-content { left: 600px; } .slide2:hover { background-color: #37B330;} #slide-2:checked ~ .slide2 {background-color: #37B330 !important;} #slide-2:checked + span + table .swoosh { left: -600px !important; } .slide3 { top: 122px; left: 321px; } .slide3-content { left: 1200px; } .slide3:hover { background-color: #37B330;} #slide-3:checked ~ .slide3 {background-color: #37B330 !important;} #slide-3:checked + span + table .swoosh { left: -1200px !important; } 

De hecho, no hay nada mágico aquí: solo son selectores anidados y bloques de desplazamiento con imágenes a su altura cuando se cambia el estado verificado de un elemento que cambia las diapositivas.

Otro interactivo

Como puede ver, con este enfoque, puede hacer no solo controles deslizantes, sino también otros elementos interactivos, donde el usuario debe seleccionar varios estados en secuencia. Por ejemplo, cuestionarios.

Los detalles de la implementación de esta opción se pueden encontrar aquí .

Que sigue

Muchas grandes empresas están tratando de ponerse al día con el progreso y llevar la tecnología moderna a la letra. No hace mucho tiempo, Google también decidió ayudar a la comunidad y rectificar la situación. Su proyecto de correo electrónico HTML de AMP tomará todo lo mejor que está en Google AMP , y nos dará la oportunidad de usar controles deslizantes, cajas de luz, formularios e incluso algo de lógica interna sin ningún truco o lógica compleja. Sin embargo, mientras el proyecto se encuentra en una etapa temprana y todos estos encantos están disponibles solo en la Vista previa para desarrolladores de Gmail.

Habiendo soñado con un futuro brillante, volveremos del cielo a la tierra. En los últimos 10 años, las tablas html se han convertido en una parte integral de las letras. Y a pesar de que el interior del boletín no ha sufrido cambios a gran escala, el exterior se ha vuelto mucho más interesante. Ahora hemos alcanzado la etapa de desarrollo de clientes de correo electrónico, cuando la experiencia interactiva en cartas se ha convertido en la tendencia principal. Es cierto que inventar esas letras se ha vuelto más difícil. En el próximo artículo hablaré sobre las herramientas de desarrollo y prueba para el envío de correos.