Advertisement
  1. Web Design
  2. Email Design
Webdesign

Mewujudkan E-mel HTML yang Responsif Mudah

by
Length:LongLanguages:

Malay (Melayu) translation by Aisyah Arrafah (you can also view the original English article)

Dalam tutorial ini, saya akan menunjukkan kepada anda bagaimana untuk membuat e-mel HTML mudah responsif yang akan berfungsi di setiap pelanggan e-mel, termasuk semua pelanggan dan aplikasi mel telefon pintar yang baru. Ia menggunakan pertanyaan media yang minimum dan pendekatan lebar cecair untuk memastikan keserasian maksimum.

Pertanyaan Media: Hanya Separuh Penyelesaian

Terdapat masa ketika pertanyaan media cukup untuk mendapatkan e-mel responsif yang bekerja di aplikasi e-mel iOS dan Android, yang keduanya menyokong pertanyaan media.

Sejak itu, terdapat percambahan aplikasi mel yang dibuat untuk kedua-dua platform iOS dan Android, dengan pelbagai tahap sokongan untuk kaedah pembangunan e-mel responsif.

Yang paling ketara ialah kemas kini terkini untuk aplikasi Gmail untuk Android, yang dua kali lebih popular sebagai aplikasi mel lalai untuk pengguna Android (yang kini terdiri daripada 11% daripada jumlah terbuka). Ia tidak pernah menyokong pertanyaan media, dan masih tidak, walau bagaimanapun, ia kini mengimbangi e-mel anda dengan memampatkan saiz jadual luar untuk dimuatkan dalam kawasan yang boleh dilihat di skrin. Sukar untuk dikawal dan, apabila keseluruhan e-mel anda bergantung kepada pertanyaan media untuk dipaparkan dengan betul pada mudah alih, menghasilkan beberapa keputusan yang sangat tidak menyenangkan.

Mengapa Fluida Adalah Hitam Baru

Berita baiknya ialah anda boleh merancang dan membina e-mel yang akan kelihatan sangat baik dalam setiap aplikasi mel, termasuk yang tidak menyokong pertanyaan media. Anda boleh melakukan ini dengan menggunakan susun atur bendalir.

Walau bagaimanapun, terdapat beberapa kompromi reka bentuk yang perlu anda buat. Susun atur lajur yang sama indah yang menyusun satu lajur tidak berfungsi dengan baik menggunakan kaedah ini. Jika anda boleh belajar untuk hidup tanpa mereka, terdapat beberapa reka bentuk yang sangat berfungsi yang boleh berfungsi dengan sangat baik.

Inilah yang akan kami buat hari ini:

Final-Product-Both

Bermula

Ok, mari bermula dengan kanvas kosong kami.

Apa yang kita buat di sini adalah halaman asas kami dengan header, doctype dan jadual kontena dengan warna latar belakang yang digunakan (untuk kedua-dua badan dan meja pembalut besar, kerana gaya tag tubuh tidak disokong sepenuhnya). Untuk mendapatkan maklumat lanjut mengenai persediaan asas ini, lihat Buat Templat E-mel HTML dari Scratch.

Saya kemudian menambah jadual kandungan utama kami ke pusat dengan kelas 'kandungan'.

Beri perhatian

Nota: Anda akan melihat bahawa dalam tutorial ini saya akan meletakkan CSS di kepala dokumen kami. Saya biasanya meletakkan gaya di kepala apabila saya akan menggunakannya semula, dan mengekalkan gaya sekali sebaris.

Penting: Setiap kali anda menggunakan peraturan CSS di kepala dokumen anda, anda mesti menggunakan alat untuk membawanya semua sebaris pada akhir proses. Sekiranya anda menggunakan perkhidmatan seperti MailChimp atau Monitor Kempen, mereka akan secara automatik menawarkan untuk membawa gaya anda secara dalam talian untuk anda apabila anda mengimport reka bentuk anda. Anda mesti melakukan ini kerana sesetengah klien, seperti Gmail, akan mengabaikan atau melepaskan kandungan tag <style>  anda, atau mengabaikannya. Anda juga boleh menggunakan alat seperti Premailer untuk membawa CSS anda secara inline. Sekiranya anda menggunakan Premailer atau alat yang sama, ingatlah untuk mengeluarkan pertanyaan media sebelum memproses (kerana kami mahu mereka tetap utuh), kemudian masukkan semula pada akhirnya. MailChimp dan Monitor Kempen secara automatik menjaga ini untuk anda.

Menyembunyikan Gaya Bergerak Daripada Yahoo!

Anda akan melihat bahawa tag badan mempunyai atribut tambahan. Yahoo Mail suka menafsirkan pertanyaan media anda sebagai Injil, jadi untuk mengelakkan ini, anda perlu menggunakan pemilih atribut. Saya dapati cara paling mudah untuk melakukan ini (seperti yang dicadangkan oleh E-mel pada Acid) adalah dengan hanya menambah atribut sewenang-wenangnya kepada tag tubuh. Saya menggunakan 'yahoo' yang disyorkan tetapi boleh jadi apa sahaja yang anda suka:

Anda kemudian boleh menyasarkan kelas khusus dengan menggunakan pemilih atribut untuk tag tubuh anda dalam CSS.

Dua Trik untuk Menguasai Kaedah Bendalir

Seperti yang dapat anda lihat, jadual 'kandungan' kami ditetapkan untuk menjadi 100% luas sehingga ia akan menjadi cecair dan mengambil lebar penuh skrin telefon pintar dan tablet. Kami juga akan menetapkan lebar maksimum 600px untuk mengelakkan e-mel mengambil keseluruhan skrin pada peranti yang lebih besar.

Kini terdapat dua perkara yang agak rumit yang perlu kita hadapi untuk memastikan segala-galanya dipaparkan seperti yang dirancang di semua klien e-mel. Kedua-dua pembaikan ini adalah terima kasih kepada tutorial yang sangat baik Tina Ye mengenai kaedah ini yang boleh didapati di FogCreek Blog.

1. Mengatasi Kekurangan Sokongan Lebar Maksimum

Malangnya, lebar- maksimum tidak disokong oleh semua pelanggan e-mel. Untuk mendapatkan e-mel kami dipaparkan dengan betul di Outlook dan Lotus Notes 8 & 8.5, kita perlu membungkus setiap jadual dalam beberapa kod bersyarat yang mencipta jadual dengan lebar yang ditetapkan untuk memegang segalanya. Ia mensasarkan IE (iaitu enjin rendering yang digunakan oleh Lotus Notes) dan Microsoft Outlook.

Kami akan membungkus meja kami dalam beberapa kod bersyarat:

2. Betulkan untuk Mail Apple

Secara pelik, Apple Mail (biasanya klien e-mel yang sangat progresif) tidak menyokong sama ada nilai max-width. Ia tidak menyokong pertanyaan media, jadi kami boleh menambahnya yang menyatakannya untuk menetapkan lebar pada jadual kelas 'kandungan' kami, selagi port viewport boleh memaparkan keseluruhan 600px.

Mencipta Header

Sekarang kita akan menambah baris pertama jadual kami  — tajuk. Tambahkan yang berikut mengikut gaya ke baris yang telah kami buat:

Dan kemudian dalam CSS anda, tambah padding untuk header:

Menambah Row Responsif Pertama

Sekarang kita akan membuat barisan responsif yang pertama. Cara kami melakukan ini adalah untuk mencipta dua jadual yang 'terapung' bersebelahan dengan menggunakan 'align' property HTML.

Lajur Kiri

Gantikan kecil kami ''Hello!'' Salam dengan yang berikut:

Kami mencipta jadual 70px kami dan juga menambah padding yang akan bertindak sebagai saluran kami antara kedua-dua lajur. Padding di bahagian bawah akan menambah ruang pernafasan menegak apabila kedua-dua lajur menumpuk pada mudah alih.

Lajur Kanan

Kami akan membuat lajur yang betul dengan sekali lagi menyelaraskan jadual ke kiri. Jadual ini akan menjadi 445px lebar, yang akan meninggalkan kami 25px untuk ganti di sebelah kanan. Ini sangat penting kerana Outlook secara automatik akan menyusun jadual anda jika tidak sekurang-kurangnya 25px untuk ganti pada setiap baris yang diberikan.

Responsive-AlignedTables

Selagi anda membenarkan sekurang-kurangnya 25px bilik pernafasan, jadual anda akan berkelakuan seperti yang diharapkan.

Allow at least 25px of breathing room to stop Outlook from stacking your tables
Benarkan sekurang-kurangnya 25px ruang pernafasan untuk menghentikan Outlook daripada menyusun jadual anda

Berhenti! Petua Alternatif untuk Menipu Outlook

Untuk mengatasi masalah ini, anda juga boleh menggunakan kod bersyarat untuk menipu Outlook memikirkan bahawa anda telah menutup sel dan membuka yang baru. Selepas tag tutup jadual pertama anda, dan sebelum tag jadual pembuka untuk kedua anda, tambahkan sahaja:


Teruskan..

Pada meja sebelah kanan, kami akan menggunakan pendekatan yang sama yang kami gunakan di jadual kontena kami, yang melibatkan penciptaan kelas dan menambah kod pembungkus bersyarat juga. Kami mahu meja ini menjadi 100% luas di telefon bimbit, di mana ia akan muncul di bawah meja di sebelah kiri.

Di sini anda dapat melihat bahawa saya telah membuat kelas yang dipanggil 'col425' untuk jadual ini, ruang luas kami 425px. Saya telah membungkus meja dalam kod bersyarat yang akan melampirkannya dalam jadual lebar 425px. Kami kemudian menambah kelas kami kepada Query Media yang kami buat untuk Apple Mail juga.

Sekarang di dalam sel kita akan menambah tajuk gaya.

Saya telah menambah beberapa kelas untuk setiap sel untuk gaya, serta beberapa gaya yang akan saya gunakan untuk jenis teks yang lain di kemudian hari:

Tajuk kami kini selesai, dan anda dapat melihat di bawah bagaimana kedua-dua lajur akan disusun pada mudah alih. (Untuk pratonton ini semasa anda bekerja, anda perlu memberi komen sementara pertanyaan media lebar min-peranti, kerana ia menguatkan lebar tetap pada desktop).

01-header

Mewujudkan Barisan Teks Lajur Tunggal

Untuk membuat baris teks lajur tunggal, kami hanya menambah baris baru ke '.content' kami jadual. Kami akan menambah kelas 'innerpadding' kepada barisan ini dengan beberapa nilai padanan yang dapat diguna semula. Kami juga akan menambah kelas 'borderbottom' untuk memohon sempadan ke setiap baris.

CSS kami untuk bahagian ini:

Mencipta Perkara Lajur Double

Kini kami akan membuat barisan responsif sama seperti header kami, tetapi dengan dimensi yang sedikit berbeza supaya kami boleh mempunyai imej yang lebih besar.

Kami telah menambah butang di sini dengan 'buttonwrapper' kelas. Ia mengandungi sel empuk dengan set warna latar belakang, dan kemudian pautan teks di dalamnya. Saya lebih suka menggunakan kaedah ini kerana ia membolehkan anda mempunyai butang lebar cecair yang sangat berguna apabila membuat template yang boleh digunakan, di mana lebar setiap butang akan berbeza setiap kali ia digunakan. Sekiranya anda mempunyai lebar tetap untuk butang anda, anda mungkin lebih suka menggunakan Generator Button Bulletproof di Pemantauan Kempen.

Gaya kami untuk butang:

Selain lebar set kami untuk kelas baru 'col380', kami akan menambahkan saiz kami ke senarai gaya kami untuk menjaga Apple Mail. Ia kini kelihatan seperti ini:

Email-TwoCol

Mewujudkan Imej Tiang Tunggal

Ini adalah barisan yang sangat mudah; kami hanya akan menetapkan imej menjadi 100% lebar e-mel dan pastikan ketinggiannya ditetapkan secara automatik menggunakan CSS.

Dalam CSS kami:

Mewujudkan Barisan Teks Terbatas Akhir

Akhirnya kami akan menambah satu baris teks tanpa sempadan di bahagian bawah:

Mencipta Footer

Untuk mencipta footer, kami akan menambah barisan baru dengan meja di dalamnya. Salah satu baris akan mengandungi jadual lain untuk ikon media sosial kami.

Kami akan menambah gaya yang diperlukan untuk footer kami kepada CSS:

Mengoptimumkan Butang untuk Mudah Alih

Di telefon bimbit, sangat ideal jika butang keseluruhan adalah pautan, bukan hanya teks, kerana lebih sukar untuk menyasarkan pautan teks kecil dengan jari anda. Kerana itu tidak mungkin untuk melakukan kerja ini pada semua klien desktop (padding tidak disokong sepenuhnya pada <a> tag), itu sesuatu yang saya tambah ke versi mudah alih menggunakan pertanyaan media.

Kami perlu melepaskan warna dari <td> yang sedang digunakan pada masa ini, kemudian aplikasikannya kembali ke <a> label dengan banyak padding.

Saya akan menggunakan kedua lebar-lebar dan max-peranti-lebar dalam pertanyaan media ini dalam usaha untuk mengelakkan pepijat di Outlook.com pada IE9.

Sekarang apabila anda mengetuk mana-mana butang pada butang berwarna di telefon bimbit, ia adalah pautan!

Tambahan Tambahan Dengan Pertanyaan Media

Sekiranya anda mahu, kini anda boleh mula membuat penambahbaikan pada susun atur anda dengan menggunakan nama kelas ke elemen yang anda ingin kawal, dan kemudian membuat peraturan baru di dalam pertanyaan media yang kami buat di atas.

Sebagai contoh, kami akan menukar pautan berhenti langganan kami ke dalam butang, dengan menambah kelas ke pautan:

dan menambah CSS berikut kepada pertanyaan media:

Email-Footer-MQs

Anda juga boleh menyasarkan kelas .innerpadding, header dan .footer untuk mengurangkan jumlah padding pada klien yang menyokong pertanyaan media.


Uji dan Pergi!

Akhir sekali, seperti biasa, pastikan anda mengesahkan (menggunakan pengesah W3C—anda hanya perlu mendapat satu ralat untuk atribut 'yahoo' proprietari pada tag badan) dan menguji dengan baik menggunakan peranti langsung dan perkhidmatan pratonton web seperti Litmus atau E-mel pada Acid.

Nikmati mewujudkan e-mel responsif yang kelihatan hebat di setiap pelanggan e-mel!

Untuk mengambil apa yang telah anda pelajari ke peringkat seterusnya, periksa tutorial seterusnya:

Advertisement
Advertisement
Advertisement
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.