Mereka dibaca oleh jutaan orang di seluruh dunia. Mereka ditambahkan ke spam, dihapus selamanya, tetapi tanpa mereka Internet modern tidak terpikirkan. Banyak pengembang front-end akan melakukan apa saja untuk mengerjakannya. Kisah saya adalah tentang email, bagaimana mereka telah berubah selama 20 tahun dan bagaimana front-end modern tidak tertekan, membuat mereka keluar. Ini adalah artikel pertama dalam seri di mana saya akan berbicara tentang bagaimana semuanya dimulai. Dalam beberapa minggu kami akan berbicara tentang pengembangan dan alat pengujian buletin.
Lebih dari 20 tahun yang lalu, email adalah pesan teks biasa. Dengan perkembangan teknologi internet dan web, email menjadi lebih kompleks baik dalam hal desain dan dalam hal implementasi teknis. Sekarang mereka tampak seperti halaman situs penuh atau halaman arahan.
Klien Email WorldCast, 2000Klien Email Gmail 2018
Kami mengembangkan surat dan situs menggunakan bahasa yang sama - HTML dan CSS. Apa yang terjadi dalam kode sumber email html sama sekali berbeda dari apa yang dapat Anda lihat di lingkungan pengembangan front-end modern. Anda bahkan mungkin berpikir bahwa Anda kembali ke jaringan Abad Pertengahan. Mereka yang membuat surat mungkin sudah mengerti apa yang saya maksud. Selebihnya saya hanya akan mengatakan satu kata: html-tables.
Sejarah: dulu dan sekarang, atau mengapa semuanya begitu buruk
Pertama-tama, mari kita ingat bagaimana semuanya dimulai.
Pada akhir 90-an, huruf html pertama muncul. Sederhana, dengan penggunaan minimal kemampuan HTML 4.01 dan CSS2 (konsep pertama CSS3 akan muncul dalam beberapa tahun lagi). Pada 1996-1997, klien email berbasis browser pertama mulai muncul. Era klien web gratis yang mendukung markup html telah dimulai.
Antarmuka Hotmail 1997
Yang paling populer di antara mereka adalah layanan HotMail, dan setahun setelah peluncuran, Microsoft membelinya. Omong-omong, Microsoft tidak akan memainkan peran terakhir dalam sejarah kami. Mengikuti pembelian Hotmail, Microsoft merilis klien email desktop sendiri, Outlook. Cukup cepat, dia dengan erat menempati ceruknya.
Sejak awal, huruf html telah dikritik lebih dari satu kali. Keluhan utama: mereka tidak aman untuk pengguna, membuat untuk waktu yang lama, "memakan" bandwidth saluran Internet pengguna dan terlihat seperti kerajinan menakutkan dari desainer web pemula. Ini sebagian benar, tetapi semua masalah ini diselesaikan dari waktu ke waktu: kecepatan koneksi internet meningkat, tampilan desain email direvisi secara mendasar, masalah di sisi pengembang klien email, dan khususnya, masalah keamanan, diselesaikan. Kemajuan dan akal sehat menang.
Pada Juni 1999, Microsoft merilis Outlook 2000, di mana ia mulai menggunakan mesin Internet Explorer, Trident, untuk membuat huruf.
Luar biasa tapi benarPerlu diingat bahwa versi IE yang diinstal pada sistem pengguna pada saat menginstal Outlook digunakan - bahkan jika pengguna telah memperbarui browser dari versi 6 ke versi 7, klien email masih akan menggunakan mesin dari IE 6 yang awalnya diinstal.
Mesin baru terbukti tidak terbaik untuk pengembang situs web dan membawa sejumlah besar bug, yang paling terkenal tetap "rusak" beberapa versi lebih banyak dari klien email berturut-turut. Pemblokiran otomatis semua gambar dan kurangnya alt-teks, fungsionalitas html-bentuk tidak berfungsi, pratinjau email yang rusak sebelum mengirim hanyalah puncak gunung es masalah Outlook 2000/2002 / XP / 2003.
Gambar kunci otomatis di Outlook 2003
Pada Januari 2007, versi baru dari klien email dari Microsoft dirilis. Versi ini telah membawa perubahan paling serius dalam sejarah Outlook. Dalam versi baru dari Microsoft mailer, mereka beralih dari mesin Internet Explorer ke mesin produk mereka yang lain - MS Word. Kebutuhan ini terutama dijelaskan oleh "merawat pengguna" dan "meningkatkan keamanan klien email". Bahkan, ini menyebabkan kerugian serius dalam dukungan properti CSS dan menciptakan banyak bug baru, sehingga mempersulit kehidupan kedua jenis huruf milis dan pengguna biasa.
Houston, kita punya masalahOutlook bug yang muncul setelah beralih ke mesin MS Word:
- kurangnya dukungan gambar latar belakang di div dan table-cell,
- kurangnya dukungan dalam float dan posisi CSS,
- kurangnya dukungan untuk bayangan teks,
- dukungan padding dan margin lemah,
- dukungan lemah dalam lebar dan tinggi CSS,
- masalah dengan warna latar belakang elemen bersarang.
Tabel html besar dan mengerikan
Karena kurangnya kemampuan untuk memposisikan blok dan menggunakan float, serta karena margin dan padding, para pengembang milis menghadapi tugas yang sulit: mereka harus membuat tampilan email sama baiknya baik dalam generasi sebelumnya dari klien email dari Microsoft dan pada saat ini, tidak ada tanpa melanggar atau melupakan mailer populer lainnya pada waktu itu.
Dan solusinya ditemukan: tabel html. Kedengarannya sederhana, tetapi sebenarnya ini setara dengan meninggalkan penggunaan kemampuan modern dan fitur HTML 4 dan CSS2 dan kembali ke pendekatan yang sudah ketinggalan zaman (bahkan pada saat itu) untuk menciptakan penyusunan huruf.
Email html khas di dalam
Kebutuhan untuk menggunakan html-tables bukan satu-satunya batasan: perlu untuk tidak melupakan preprosesor yang digunakan dalam mailer. Di klien web, huruf html, sebelum diterjemahkan, melewati tahap di mana kode dianalisis dari sudut pandang keamanan dan stabilitas - preprocessing - sebagai akibatnya bagian yang berpotensi berbahaya, seperti kode javascript, konten yang disematkan, serta segala sesuatu di dalam tag kepala dan gaya dan beberapa hal lainnya.
Waktu berlalu, teknologi tidak berhenti, spesifikasi HTML dan CSS ditumbuhi banyak fitur baru, tetapi Outlook, dan dengan itu 15% dari klien email dunia (pada waktu itu), juga tetap di tempat. Hanya dengan rilis Outlook 2016 (yang masih menggunakan mesin kuno MS Word yang sama), sikap MS terhadap penggunanya, serta terhadap pengembang buletin, mulai berubah. Perusahaan Litmus , yang dikenal karena layanannya untuk menguji surat di berbagai klien email, telah menjalin kemitraan dengan MS.
Litmus mulai membantu pengembang Outlook dengan memprioritaskan masalah dan mempercepat resolusi mereka, dan pengguna layanan dengan kemampuan untuk memeriksa email mereka secara gratis di klien email ini. Ini terbayar, tetapi tidak mengubah situasinya: pada saat penulisan, klien terbaru dari MS adalah Outlook 2019 yang baru-baru ini diumumkan. Menarik: menambahkan dukungan svg, dan font Times New Roman tidak lagi menjadi cadangan untuk font web. Tapi itu masih "berdarah" MS Word dengan semua masalah berikutnya.
Perbedaan antara tata letak dan tata letak situs
Saat ini, Outlook menutup tiga teratas dengan ~ 10% pengguna (di tempat pertama - Apple Mail untuk desktop / ponsel, di kedua - Gmail untuk web / ponsel), tetapi ini masih banyak. Karenanya, sayangnya, kami belum dapat keluar dari tabel.
Untungnya, fitur-fitur mesin Outlook sekarang dikenal oleh kami. Ini memberi kami beberapa alat untuk membuat hidup lebih mudah dengan surat: Komentar Bersyarat dan Bahasa Markup Vektor.
Komentar Bersyarat
Banyak orang tua yang membuat hari-hari IE6-8 mengingat apa itu.
"Komentar bersyarat" adalah mekanisme ekstensi mesin IE yang memungkinkan Anda memilih versi spesifik IE dan menerapkan aturan yang kami butuhkan untuknya. Jika kita perlu menambahkan beberapa gaya hanya untuk Outlook 2000 dan di atasnya, kita dapat menulis:
Selain itu, menggunakan Komentar Bersyarat, Anda dapat memaksa mesin untuk membuat blok markup tertentu hanya untuk versi Outlook tertentu:
Versi- Outlook 2000 - versi 9
- Outlook 2002 - versi 10
- Outlook 2003 - versi 11
- Outlook 2007 - versi 12
- Outlook 2010 - versi 14
- Outlook 2013 - versi 15
- Outlook 2016 - versi 16
Seringkali, Komentar Bersyarat digunakan bersama dengan fitur Outlook lain - VML.
Bahasa Markup Vektor
Vector Markup Language (VML) adalah bahasa markup vektor yang dikembangkan oleh MS untuk menggambarkan grafik vektor pada tahun 1998. Kemudian menjadi salah satu bahasa yang menjadi dasar untuk bahasa SVG yang terkenal. Sejak rilis IE10, VML telah usang dan tidak lagi didukung atau sedang dikembangkan.
Bagaimana grafik vektor, bahasa markup yang tidak didukung, dan huruf html terkait? Sederhana: gambar latar tanpa VML tidak dimungkinkan di Outlook 2007/2010/2013/2016. Tetapi untuk belajar demi bahasa baru semacam itu sepenuhnya opsional: Anda dapat menggunakan alat daring yang siap pakai yang akan melakukan segalanya untuk Anda.
<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>
Sayangnya, ini tidak meniadakan fakta bahwa dari waktu ke waktu Anda masih harus memilih sendiri di VML karena pada fakta bahwa di beberapa versi Outlook Anda telah mengatur tata letak latar belakang.
Membawa kecantikan
Nawala modern memiliki tempat untuk berbagai elemen interaktif. Seseorang, misalnya, mengintegrasikan umpan Twitter langsung ke surat itu. Saya akan berbicara tentang hal-hal yang lebih praktis dan berguna: formulir dan bilah geser.
Bentuk
Penulis emailmonks.com menjelaskan satu cara untuk menambahkan formulir kerja ke email. Mekanismenya adalah sebagai berikut: formulir data dikumpulkan oleh fungsi php sebagai atribut URL; atribut ini kemudian disimpan dalam dokumen atau tabel data jarak jauh; kemudian atribut ini diminta dari sumber yang ditentukan dan ditampilkan pada halaman.
Dukungan untuk formulir semacam itu cukup baik: di Apple Mail, iOS Mail, Outlook, Gmail untuk iOS / Android dan di klien email Android default, mereka bekerja di luar kotak.
Bilah geser
Semua orang tahu apa itu slider, dan banyak orang tahu cara membuatnya menggunakan JS. Namun, Anda dapat membuat bilah geser menggunakan CSS / HTML murni, dan meskipun itu berfungsi dengan benar di klien email modern (dengan pengecualian Outlook untuk Windows - Anda akan memerlukan cadangan untuk bilah geser).
Keajaiban slider ini adalah 20 baris:
.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; }
Sebenarnya, tidak ada yang ajaib di sini - hanya penyeleksi bersarang dan menggeser blok dengan gambar setinggi mereka ketika mengubah keadaan diperiksa dari elemen yang beralih slide.
Interaktif lainnya
Seperti yang Anda lihat, menggunakan pendekatan ini, Anda dapat membuat tidak hanya slider, tetapi juga elemen interaktif lainnya di mana pengguna diminta untuk memilih beberapa status secara berurutan. Misalnya, kuesioner.
Rincian penerapan opsi ini dapat ditemukan di sini .
Apa selanjutnya
Banyak perusahaan besar berusaha mengejar kemajuan dan membawa teknologi modern. Belum lama ini, Google juga memutuskan untuk membantu komunitas dan memperbaiki situasi. Proyek Email AMP HTML mereka akan mengambil semua yang terbaik yang ada di Google AMP , dan akan memberi kita kesempatan untuk menggunakan slider, kotak cahaya, formulir, dan bahkan beberapa logika internal tanpa peretasan atau logika kompleks. Namun, sementara proyek ini pada tahap awal dan semua pesona ini hanya tersedia di Pratinjau Pengembang Gmail.
Setelah bermimpi tentang masa depan yang cerah, kita akan kembali dari surga ke bumi. Selama 10 tahun terakhir, tabel html telah menjadi bagian integral dari huruf. Dan terlepas dari kenyataan bahwa bagian dalam buletin belum mengalami perubahan skala besar, bagian luarnya menjadi jauh lebih menarik. Sekarang kita telah mencapai tahap pengembangan klien email, ketika pengalaman interaktif dalam surat menjadi tren utama. Benar, mengarang surat seperti itu menjadi lebih sulit. Pada artikel selanjutnya saya akan berbicara tentang pengembangan dan alat pengujian untuk pengiriman surat.