Eles são lidos por milhões de pessoas em todo o mundo. Eles são adicionados ao spam, excluídos para sempre, mas sem eles a Internet moderna é impensável. Muitos desenvolvedores de front-end farão de tudo para colocar suas mãos em prática neles. Minha história é sobre e-mails, como eles mudaram ao longo de 20 anos e como o front-end moderno não fica deprimido, divulgando-os. Este é o primeiro artigo de uma série em que falarei sobre como tudo começou. Dentro de algumas semanas, falaremos sobre as ferramentas de desenvolvimento e teste do boletim.
Mais de 20 anos atrás, os e-mails eram mensagens de texto simples. Com o desenvolvimento da Internet e das tecnologias da Web, os e-mails se tornaram mais complexos, tanto em termos de design quanto em termos de implementação técnica. Agora eles se parecem com páginas completas do site ou páginas de destino.
Cliente de e-mail do WorldCast, 2000Cliente de email do Gmail 2018
Desenvolvemos cartas e sites usando os mesmos idiomas - HTML e CSS. O que acontece no código fonte das letras html não se parece com o que pode ser visto no ambiente de desenvolvimento de um front-end moderno. Você pode até pensar que está de volta à web da Idade Média. Quem inventou as cartas provavelmente já entendeu o que quero dizer. O resto eu vou dizer apenas uma palavra: tabelas html.
História: então e agora, ou por que tudo está tão ruim
Primeiro de tudo, vamos lembrar como tudo começou.
No final dos anos 90, as primeiras letras html apareceram. Simples, com o uso mínimo dos recursos do HTML 4.01 e CSS2 (o primeiro rascunho do CSS3 aparecerá em mais alguns anos). Em 1996-1997, os primeiros clientes de email baseados em navegador começaram a aparecer. A era dos clientes da Web gratuitos que oferecem suporte à marcação html começou.
Interface do Hotmail 1997
O mais popular deles foi o serviço HotMail e, um ano após o lançamento, a Microsoft o comprou. A propósito, a Microsoft não desempenhará o último papel em nossa história. Após a compra do Hotmail, a Microsoft está lançando seu próprio cliente de email para desktop, o Outlook. Muito rapidamente, ele ocupou firmemente seu nicho.
Desde a sua criação, as letras html foram criticadas mais de uma vez. As principais reclamações: são inseguras para os usuários, renderizam por um longo tempo, "consomem" a largura de banda do canal da Internet do usuário e parecem ofícios sinistros de web designers novatos. Isso era parcialmente verdade, mas todos esses problemas foram resolvidos com o tempo: a velocidade da conexão com a Internet aumentou, a análise do design dos emails foi fundamentalmente revisada, os problemas do lado dos desenvolvedores de clientes de email e, em particular, os problemas de segurança foram resolvidos. Progresso e bom senso vencidos.
Em junho de 1999, a Microsoft lançou o Outlook 2000, no qual começou a usar o mecanismo do Internet Explorer, Trident, para renderizar cartas.
Incrível, mas verdadeiroLembre-se de que a versão do IE instalada no sistema do usuário no momento da instalação do Outlook foi usada - mesmo se o usuário tivesse atualizado o navegador da versão 6 para a versão 7, o cliente de email ainda usaria o mecanismo do 6º IE originalmente instalado.
O novo mecanismo provou não ser o melhor para os desenvolvedores de sites e trouxe um grande número de bugs, o mais famoso dos quais permaneceu "fora de ordem" várias outras versões do cliente de email seguidas. O bloqueio automático de todas as imagens e a falta de texto alternativo, funcionalidade de formulários html inoperantes, visualizações de e-mail quebradas antes do envio são apenas a ponta do iceberg dos problemas do Outlook 2000/2002 / XP / 2003.
Bloquear automaticamente imagens no Outlook 2003
Em janeiro de 2007, uma nova versão do cliente de email da Microsoft foi lançada. Esta versão trouxe as alterações mais sérias na história do Outlook. Na nova versão do remetente da Microsoft, eles mudaram do mecanismo do Internet Explorer para o mecanismo de outro produto - o MS Word. Essa necessidade foi explicada principalmente por "cuidar dos usuários" e "aumentar a segurança do cliente de email". De fato, isso causou sérias perdas no suporte às propriedades CSS e criou muitos novos erros, complicando a vida dos criadores de listas de discussão e dos usuários comuns.
Houston, temos problemasErros do Outlook que apareceram após a mudança para o mecanismo do MS Word:
- falta de suporte à imagem de fundo em div e cell-table,
- falta de suporte no CSS float e position,
- falta de suporte para sombra de texto,
- estofamento fraco e suporte de margem,
- suporte fraco na largura e altura do CSS,
- problemas com a cor de fundo dos elementos aninhados.
Tabelas html grandes e terríveis
Devido à falta de capacidade de posicionar blocos e usar float, bem como devido a margem e preenchimento, os desenvolvedores da lista de email enfrentaram uma tarefa difícil: eles tiveram que fazer com que os emails fossem exibidos igualmente bem na geração anterior de clientes de email da Microsoft e na atual, nada sem quebrar ou esquecer outras malas diretas populares da época.
E uma solução foi encontrada: tabelas html. Parece simples, mas, na verdade, isso equivale a abandonar o uso de recursos e funcionalidades modernas do HTML 4 e CSS2 e retornar a abordagens desatualizadas (mesmo na época) para criar tipografia.
Email html típico dentro
A necessidade de usar tabelas html não era a única limitação: era necessário não esquecer os pré-processadores usados nas malas diretas. Nos clientes da Web, o html-letter, antes de ser renderizado, passa por um estágio em que o código é analisado do ponto de vista da segurança e da estabilidade - pré-processamento - como resultado de partes potencialmente perigosas, como código javascript, conteúdo incorporado e tudo dentro das tags de cabeça e estilo e outras coisas.
O tempo passou, a tecnologia não parou, as especificações de HTML e CSS estavam repletas de novos recursos, mas o Outlook e com ele 15% dos clientes de email do mundo (na época) também permaneceram no local. Somente com o lançamento do Outlook 2016 (permanecendo no mesmo mecanismo antediluviano do MS Word) a atitude da MS em relação a seus usuários, bem como em relação aos desenvolvedores do boletim, começou a mudar. A empresa Litmus , conhecida por seu serviço para testar correspondências em vários clientes de email, firmou uma parceria com a MS.
O Litmus começou a ajudar os desenvolvedores do Outlook a priorizarem os problemas e a acelerar sua resolução, e os usuários do serviço com a capacidade de verificar seus e-mails gratuitamente neste cliente de e-mail. Isso valeu a pena, mas não mudou a situação: no momento da redação, o mais novo cliente da MS era o recém- anunciado Outlook 2019. Interessante: adicionou suporte a svg e a fonte Times New Roman não é mais um substituto para as fontes da web. Mas ainda "sangra" o MS Word com todos os problemas resultantes.
Diferenças entre o layout e o layout do site
Atualmente, o Outlook fecha os três primeiros com ~ 10% dos usuários (em primeiro lugar - Apple Mail para celulares / desktop, em segundo lugar - Gmail para web / celulares), mas isso ainda é muito. Portanto, infelizmente, ainda não podemos nos afastar das mesas.
Felizmente, os recursos dos mecanismos do Outlook agora são bem conhecidos por nós. Isso nos deu várias ferramentas para facilitar a vida com letras: Comentários Condicionais e Linguagem de Marcação de Vetor.
Comentários condicionais
Muitos dos antigos que fizeram os dias do IE6-8 se lembram do que é.
"Comentários condicionais" é um mecanismo de extensão do mecanismo do IE que permite selecionar versões específicas do IE e aplicar as regras necessárias para eles. Se precisarmos adicionar alguns estilos apenas para o Outlook 2000 e superior, podemos escrever:
Além disso, usando Comentários condicionais, você pode forçar o mecanismo a renderizar certos blocos de marcação apenas para versões específicas do Outlook:
Versionamento- Outlook 2000 - versão 9
- Outlook 2002 - versão 10
- Outlook 2003 - versão 11
- Outlook 2007 - versão 12
- Outlook 2010 - versão 14
- Outlook 2013 - versão 15
- Outlook 2016 - versão 16
Freqüentemente, Comentários Condicionais são usados em conjunto com outro recurso do Outlook - VML.
Linguagem de marcação de vetor
Vector Markup Language (VML) é uma linguagem de marcação vetorial desenvolvida pela MS para descrever gráficos vetoriais em 1998. Mais tarde, tornou-se um dos idiomas que serviram de base para a conhecida linguagem SVG. Desde o lançamento do IE10, a VML foi preterida e não é mais suportada ou está em desenvolvimento.
Como estão relacionados os gráficos vetoriais, a linguagem de marcação não suportada e as letras html? É simples: a imagem de plano de fundo sem VML não é possível no Outlook 2007/2010/2013/2016. Mas aprender por causa de um novo idioma é completamente opcional: você pode usar ferramentas on - line prontas que farão tudo por você.
<body> <div style="background-color:#7bceeb;"> <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>
Infelizmente, isso não nega o fato de que, de tempos em tempos, você ainda precisa escolher o seu na VML, porque em algumas versões do Outlook você tem um layout de plano de fundo configurado.
Trazendo beleza
Boletins modernos têm um lugar para vários elementos interativos. Alguém, por exemplo, integra o feed do Twitter diretamente na carta. Vou falar sobre coisas mais práticas e úteis: formas e controles deslizantes.
Formulários
Os autores do emailmonks.com descreveram uma maneira de adicionar um formulário de trabalho ao email. O mecanismo é o seguinte: os dados do formulário são coletados pela função php como um atributo da URL; esse atributo é armazenado em um documento remoto ou tabela de dados; posteriormente, esse atributo é solicitado da fonte especificada e exibido na página.
O suporte para esses formulários é muito bom: no Apple Mail, no iOS Mail, no Outlook, no Gmail para iOS / Android e no cliente de email padrão do Android, eles funcionam de maneira imediata.
Sliders
Todo mundo sabe o que são sliders, e muitas pessoas sabem como fazê-los usando JS. No entanto, você pode criar o controle deslizante usando CSS / HTML puro e, mesmo assim, funcionar corretamente em clientes de email modernos (com exceção do Outlook para Windows - você precisará de um substituto para os controles deslizantes).
A mágica desse controle deslizante é de 20 linhas:
.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; }
Na verdade, não há nada de mágico aqui - são apenas seletores aninhados e blocos de deslocamento com imagens à sua altura ao alterar o estado verificado de um elemento que alterna slides.
Outro interativo
Como você pode ver, usando essa abordagem, é possível criar não apenas controles deslizantes, mas também outros elementos interativos, nos quais o usuário deve selecionar vários estados em sequência. Por exemplo, questionários.
Os detalhes da implementação desta opção podem ser encontrados aqui .
O que vem a seguir?
Muitas grandes empresas estão tentando acompanhar o progresso e levar a tecnologia moderna às letras. Há não muito tempo, o Google também decidiu ajudar a comunidade e corrigir a situação. Seu projeto de email em HTML do AMP terá o melhor que existe no Google AMP e nos dará a oportunidade de usar controles deslizantes, caixas de luz, formulários e até alguma lógica interna sem hacks ou lógica complexa. No entanto, enquanto o projeto está em um estágio inicial e todos esses encantos estão disponíveis apenas na Visualização do desenvolvedor do Gmail.
Tendo sonhado com um futuro brilhante, retornaremos do céu para a terra. Nos últimos 10 anos, as tabelas html se tornaram parte integrante das cartas. E, apesar de o interior do boletim não ter sofrido alterações em larga escala, o exterior se tornou muito mais interessante. Agora chegamos ao estágio de desenvolvimento de clientes de email, quando a experiência interativa em cartas se tornou a principal tendência. É verdade que inventar essas cartas se tornou mais difícil. No próximo artigo, falarei sobre as ferramentas de desenvolvimento e teste para correspondência.