Bagaimana Kami Melakukannya: Membangun Tuts Baru + Template Email

Indonesian (Bahasa Indonesia) translation by Wasmia Mia (you can also view the original English article)

Akhir-akhir ini, tuts + email (buletin, intisari, dll.) mengalami perombakan total, termasuk desain baru dan platform baru. Studi kasus ini akan menjelaskan bagaimana saya membangunnya di HTML dan CSS, berdasarkan desain dari bagian pertama dalam seri ini.

Memulai

Ketika saatnya tiba untuk mulai membuat tuts baru yang mengkilap + template email, saya cukup beruntung untuk terbiasa dengan desainnya. Selama tahap perancangan, Ian telah memnyimpukan saya pada keputusan utama dan mengajukan banyak pertanyaan untuk memastikan kami menghindari gotchas email klasik. Proses ini merupakan fondasi yang sangat baik bagi saya dan saya siap terjun langsung saat disainnya selesai.

Ian mengirimi saya desain, gambaran layout, panduan layout grid, dan panduan gaya dengan semua ukuran dan warna font yang diperlukan. Saya sudah siap untuk memulai.

Membuat Rencana Serangan

Langkah pertama saya selalu membuat sketsa. Tujuannya adalah untuk mengidentifikasi semua modul yang berbeda, mengabaikan perbedaan kosmetik kecil. Proses ini memberi saya seperangkat modul kunci untuk diciptakan sehingga saya dapat bekerja satu demi satu untuk membangun struktur utama.

Setelah mengidentifikasi ini, dalam banyak kasus, saya akan membangun semuanya menjadi satu halaman sebelum memisahkannya pada tahap selanjutnya, namun layoutnya cukup aneh untuk ditinjau dalam keadaan seperti itu. Sebagai gantinya, saya mengembangkan setiap layout sesuai desain sehingga bisa ditinjau dan disetujui dengan lebih mudah.

Mengacu pada ringkasan sketsa modul saya, saya dapat mengingat ketika sebuah modul perlu digunakan kembali di beberapa template, dan membuatnya sesuai dengan itu. Kemudian saya akan mengatur kelas di tubuh masing-masing varian, seperti var-admin dan var-digest, yang memungkinkan saya membuat gaya yang spesifik untuk setiap layout tertentu.

Mulai kode

Saya mulai dengan menyiapkan beberapa variabel LESS untuk elemen yang saya tahu akan saya gunakan berulang-ulang, seperti warna dan ukuran.

Panduan untuk sebagian besar gaya tipografi

Beberapa variabel saya (dalam sintaks LESS) ditunjukkan di bawah ini.

// Variables
@bg-body: #f2f2f2;
@palette-text: #58595a;
@palette-navy: #212a34;
@palette-design: #c94e4b;
@palette-code: #4cc1be;
@palette-web: #49b293;
@palette-photography: #8360a8;
@palette-game: #72BF40;
@palette-computer: #5d7dba;
@palette-business: #f38844;
@palette-3d: #f95858;
@palette-music: #56a4ca;
@palette-footer: #5a6e7a;
@palette-address: #999999;

@divider-color: #EAEAEA;
@link-color: #136fd2;
@alt-color: @palette-text;

@width: 640px;
@outer-gutter: 53px; 
@content-width: @width - (@outer-gutter * 2);
@grid-unit: 16px;

.rounded(@radius: 1px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
}

Saya selalu menambahkan warna saya dengan palet untuk menjaganya tetap bersama. Hal ini membuat saya lebih mudah memilih warna dari dropdown saran yang muncul di Sublim Text:

Menyiapkan Webfonts

Langkah penting berikutnya adalah menyiapkan webfont yang digunakan dalam desain. Jenis hurufnya adalah Roboto yang tersedia dari Google Fonts, jadi saya menambahkan tag ini ke <head> template:

1	<link href='https://fonts.googleapis.com/css?family=Roboto:300,300italic,400,400italic,500,500italic,700,700italic' rel='stylesheet' type='text/css' />

Ia dihasilkan oleh Google Font dan link ke CSS mereka untuk empat bobot Roboto yang berbeda yang kita gunakan.

Saya menerapkan font ke body tag dan tabel pembungkus utama saya untuk klien yang mengabaikan body tag atau strip formatnya.

1	body,
2	.wrapper {
3	font-family: 'Roboto', sans-serif;
4	}

Kemudian, untuk mencegah Outlook 2007-2016 di Windows menampilkan Times New Roman - seperti yang cenderung dilakukan saat berhadapan dengan font-face yang tidak diketahui - saya menyiapkan beberapa kode hanya Outlook bersyarat di <head> template:

<!--[if mso]>
<style type="text/css">
 table, div {font-family: sans-serif !important;}
</style>
<![endif]-->

Ia memastikan setiap kejadian webfont ditimpa di Outlook dengan sans-serif. Saya menerapkannya pada tabel dan divs, hanya dua elemen yang digunakan untuk memuat konten dalam template. Tidaklah perlu pergi ke tingkat yang lebih rendah dari ini, karena semua tag lainnya akan menerimanya di Outlook.

Membuat Layout Terlihat Baik

Selanjutnya menuju pengkodean struktural. Saya mulai dengan modul pertama yang telah saya sketsa: masthead. Salah satu tantangan di sini adalah logo, karena untuk beberapa template tampilannya sedikit berbeda pada ponsel:

Untuk mencapainya, di ponsel, saya menyembunyikan logo utama dan teks di bagian atas. Saya juga menyembunyikan logo itu, dan menambahkan daun mungil itu sebagai gambar latar ke masthead.

.logo img {
  display: none !important;
}
.logo {
  background-image: url(images/leaf@2x.png);
  height: 17px;
  background-position: center center;
  background-size: 15px 17px;
  background-repeat: no-repeat;
}

Elemen Pergeseran

Bagian berikutnya yang saya tangani adalah artikel "hero" di email Digest; Bagian rumit pertama di sini adalah label-labelnya. Dalam desain, mereka muncul di samping teks judul di desktop, namun di atas teks di ponsel. Untuk mencapai hal ini dalam kode, kita dapat menggunakan beberapa properti tampilan untuk membuat mereka bergeser.

Pertama, saya membuat tag judul dengan konten terbelah menjadi dua bentang, satu untuk teks dan satu untuk label.

1	<h2><span class="text">Using Curves in Adobe Photoshop</span> <span class="label">FEATURED COURSE</span></h2>

Styling-wise, span .text mewarisi styling h2, dan kemudian bentang .label ditata secara terpisah agar lebih kecil dan memberinya latar belakang berwarna:

.label {
  display: inline-block;
  margin-left: 5px;
  padding: 3px 8px;
  vertical-align: 4px;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  color: #ffffff;
  font-size: 8px;
  line-height: 10px;
  font-style: normal;
  letter-spacing: 0.1em;
}

Kemudian, dengan menggunakan kueri media, kami menukar elemen di sekitar viewports yang lebih kecil:

@media screen and (max-width: 700px) {
  h2 {
    display: table !important;
  }
  h2 .text {
    display: table-footer-group !important;
  }
  h2 .label {
    margin-bottom: 12px !important;
  }
}

H2 adalah wadah kami, dan kami menetapkannya untuk ditampilkan sebagai tabel sehingga kami dapat menunjukkan rentang .text untuk bertindak seperti kelompok footer tabel itu dan beralih ke bagian paling bawah layout. Bentang .label kemudian ditampilkan di bagian atas, dan kami menambahkan margin di bawahnya untuk memberi ruang kosong.

Tidak mengherankan, Outlook on Windows (2007-2016) tidak ingin menampilkan label dengan benar, karena ia tidak mematuhi border-radius, juga tidak seperti menambahkan padding ke elemen inline. Hasilnya benar-benar tidak baik, jadi saya menyiapkan beberapa gaya alternatif untuk Outlook yang saya gunakan dalam kode kondisional pada template:

<!--[if mso]>
<style type="text/css">
 /* Outlook fix for featured course labels */
 .label {background-color: #ffffff !important; vertical-align: 2px !important; color: #c94e4b !important;}
</style>
<![endif]-->

Ini berarti bahwa di Outlook, mereka akan muncul sebagai teks berwarna sederhana:

Gambar latar

Template promosi memiliki fitur yang sangat khas: pahlawan tepi-ke-tepi dengan gambar latar belakang.

Kredit kepada Marco Goran Romano untuk gambar cemerlang yang digunakan sebagai placeholder

Gambar latar belakang di email tidak didukung di manapun. Dua klien email utama yang mengajukan masalah itu adalah Outlook 2007-2016 (Windows) dan Gmail.

Outlook sama sekali tidak menampilkan latar belakang reguler, memerlukan beberapa bahasa khusus Vector Markup untuk membuat mereka bekerja. (Stig di latar belakang Campaign Monitor .cm adalah alat hebat untuk menghasilkan kode ini). Bagaimanapun, permasalahan dengan itu, adalah bahwa anda berakhir dengan dua blok kode: satu di HTML dan satu di VML. Ini berisiko ketika anda tahu bahwa orang lain harus dapat dengan mudah memperbarui gambar latar belakang: jika seseorang mencoba melakukan ini tanpa membaca petunjuk dengan benar, kemungkinan besar akan salah.

Gmail menampilkan gambar latar belakang, namun ia tidak mematuhi properti latar belakang atau latar belakang, yang dapat membuat styling mereka menajdi cukup sulit.

Kami melihat jumlah pelanggan dan dapat melakukan panggilan di Outlook: tidak masalah jika pengguna Outlook melihat warna fallback yang solid dan bukan gambarnya.

Bagi pengguna Gmail, kami perlu menyiapkan beberapa panduan seputar gambar yang dapat diterima saat template digunakan. Latar belakangnya harus bisa menjadi latar belakang berulang yang mulus, atau disiapkan agar selalu terlihat bagus 100%, disematkan di pojok kiri atas.

Menariknya, Gmail memang mendukung properti posisi latar belakang vertikal di sisi kiri: kiri atas, kiri bawah dan kiri tengah. Sayangnya anda tidak bisa memposisikan secara horisontal, yang biasanya apa yang ingin anda lakukan dengan menjadikannya tampilan tengah-tengah

Di beberapa blok iklan, kami mampu memiliki gambar latar belakang di Gmail, karena disematkan ke kiri bawah. Blok ini juga dikembalikan ke warna latar belakang yang solid di Outlook.

Menjelajahi Margin Negatif

Saya bermain-main dengan dua cara untuk membuat margin atas negatif pada masthead bekerja, di mana kotak putih konten muncul disalut di masthead itu sendiri.

Dalam pengembangan web, anda akan menambahkan margin-top negatif ke kotak konten, membersihkan tangan dan melanjutkan hari anda.

Bagaimanapun, ini tidak mungkin dilakukan dalam pengembangan email. Margin negatif hanya didukung oleh beberapa klien email, meninggalkan banyak masalah umum di dirt (seperti Gmail, Yahoo dan Outlook.com).

Itu tetap menjadi pilihan pertama kami: gunakan margin atas negatif sebagai perangkat tambahan progresif, yang akan ditampilkan dengan margin 0 di semua klien yang tidak didukung (terlihat di bawah kiri). Kelemahannya adalah cukup banyak klien yang melihat versi tanpa margin ini dan layoutnya pasti kehilangan sesuatu tanpa itu.

Alternatif lainnya adalah memalsukan margin negatif dengan membuat tabel putih kosong dengan tinggi dan lebar yang benar. Kelemahan dari pendekatan ini adalah aplikasi Gmail sering menunjukkan hairlines kecil saat menskalakan konten di seluler tempat di mana konten lebih ringan di latar belakang gelap atau sebaliknya. Ia sebenarnya bukan garis atau batas sebenarnya, hanya masalah kecil yang tidak dapat diperbaiki dengan kode. Kami memutuskan untuk mengikuti skenario ini, karena hal ini bermanfaat bagi sebagian besar pembaca, dan hairlines pada umumnya tidak terlihat. Kami juga memutuskan untuk mengawasi masalah ini dan mengunjunginya kembali jika kami tidak puas dengan hasilnya. (Sayangnya, template ini tidak dapat dibangun menggunakan metode fluida-hibrida karena MailChimp dan Campaign Monitor akan menimbulkan masalah besar jika melakukannya.)

Tumpang tindih, dengan garis kecil Gmail di antara bagian

Mempersiapkan Platform yang Berbeda

saya tahu saya akan menyerahkan template ke Ian untuk integrasi dengan beberapa Email pengirim Platform: MailChimp dan Campaign Monitor. Karena kode saya harus bekerja dengan baik dengan kedua bahasa template, saya mengikuti beberapa tip untuk membuat proses ini selembut mungkin.

Catatan Editor: sejak tahap perancangan dan pengembanga, kami benar-benar beralih dari MailChimp, daripada hanya menggunakan Campaign Monitor. Konon, tips berikut ini sangat berguna!

Gaya di Tingkat Setinggi Mungkin

Misalnya dengan styling teks, saya menerapkan semuanya ke <table>, bukan salah satu dari anak-anaknya, sehingga jika sel atau paragraf dikonversi ke daerah yang dapat diedit, tidak ada risiko kehilangan gaya apapun di manapun. Isi tabel mengikuti gaya teks mereka berasal dari orang tua di semua klien email. Satu-satunya pengecualian adalah surat AOL, yang sering gagal mengikuti properti warna kecuali jika anda menempatkannya di sel individu

Gunakan Paragraf Untuk Teks

Campaign Monitor templates memerlukan elemen multiline untuk diartikan saat anda menginginkan blok teks yang dapat diedit yang memungkinkan pemecahan garis, tebal / miring / garis bawah, teks pilihan tertaut, dan sebagainya. Ia juga secara otomatis membungkus semua teks di dalam multiline dengan tag a p, yang benar-benar dapat merusak layout anda jika anda tidak mengizinkan paragraf. Bila anda menggunakan jeda baris di Campaign Monitor, anda akan mengakhiri paragraf saat ini dan memulainya dengan yang baru. MailChimp tidak melakukan nya, dan saat anda membuat jeda baris, cukup tambahkan tag <br/>. Tapi tidak ada masalah dengan paragraf dan ia akan mengikuti gaya paragraf yang telah anda siapkan, jadi aman menggunakannya untuk kepentingan Campaign Monitor, tanpa efek samping buruk di MailChimp.

Buat Varian yang Dipilih Pengguna

Salah satu template perlu membuat satu set judul berwarna berbeda bagi setiap topik yang dapat dipilih saat membuat buletin di MailChimp. Saya menyiapkan serangkaian gaya heading yang bisa dipilih dari menu drop-down MailChimp, yang menggunakan sintaks yang benar untuk menentukan their @style blocks :

/**
* @style topic-design
*/
.topic-design {
  color: #c94e4b;
}
.topic-design a {
  color: #c94e4b;
}
/**
* @style topic-code
*/
.topic-code {
  color: #4cc1be;
}
.topic-code a {
  color: #4cc1be;
}
/**
* @style topic-web
*/
.topic-web {
  color: #49b293;
}
.topic-web a {
  color: #49b293;
}
/**
* @style topic-photography
*/
.topic-photography {
  color: #8360a8;
}
.topic-photography a {
  color: #8360a8;
}
/**
* @style topic-game
*/
.topic-game {
  color: #72BF40;
}
.topic-game a {
  color: #72BF40;
}
/**
* @style topic-computer
*/
.topic-computer {
  color: #5d7dba;
}
.topic-computer a {
  color: #5d7dba;
}
/**
* @style topic-business
*/
.topic-business {
  color: #f38844;
}
.topic-business a {
  color: #f38844;
}
/**
* @style topic-3d
*/
.topic-3d {
  color: #f95858;
}
.topic-3d a {
  color: #f95858;
}
/**
* @style topic-music
*/
.topic-music {
  color: #56a4ca;
}
.topic-music a {
  color: #56a4ca;
}

Tapi ... saya memberikan ini pada Ian yang menemukan bahwa itu tidak bekerja sama sekali; Tak satu pun dari gaya judul ini muncul di dropdown saat dia mengedit teksnya. Dia bekerja dengan itu dan menemukan bahwa MailChimp tidak benar-benar menunjukkan pilihan sebagai gaya judul yang dapat dipilih kecuali mereka memiliki beberapa jenis properti terkait font seperti font-family atau font-weight.

Ia juga tidak bekerja karena saya melengkapinya secara terpisah, dan kode template MailChimp khusus untuk area yang dapat diedit atau gaya kustom harus muncul di <head> template anda; Itu tidak bisa menjadi file eksternal. Jadi, kami menambahkan deklarasi font-weight: bold pada gaya heading kami, menampilkan CSS di head dan menyelesaikan semuanya.

Final Testing dan Wrapping Up

Setelah semua layout kami dilihat dan disetujui, masalah diurutkan dan kompromi diputuskan, sekarang saatnya untuk menyelesaikan pengujian dan mempersiapkan semua file untuk penyebaran.

Saya mulai mengerjakan banyak tes akhir yang melelahkan di Litmus dan Email pada Acid. Saya menggunakan Trello untuk melacak persyaratan, tugas dan bug untuk setiap proyek yang sedang saya kerjakan. Saya bekerja melalui daftar bug dan tugas sampai tidak ada yang tersisa dan file-file itu siap untuk digunakan.

Harus mencintai Trello untuk manajemen tugas

Menyiapkan Kit Template

Tim Envato ingin bisa masuk ke dalam kode untuk mencampur dan mencocokkan layout yang berbeda, jadi saya perlu memberikan komentar HTML dan CSS yang jelas, serta memastikan bahwa mentransfer modul antara template tidak akan menyebabkan malapetaka besar.

Saya mengatur setiap template dengan kelas badannya sendiri:

1	<body class="var-admin">
2	<body class="var-digest">
3	<body class="var-newsletter">
4	<body class="var-promotional">

Dan kemudian, mengatur kelas yang bisa ditambahkan guna dapat beralih dengan mudah antara latar belakang putih dan abu-abu:

1	<body class="var-admin grey-background">

Saya juga memisahkan gaya layout spesifik (mobile dan desktop) ke dalam stylesheet individu untuk menghemat ukuran file:

1	<link rel="stylesheet" type="text/css" href="css/var-admin.css" />
2	<link rel="stylesheet" type="text/css" href="css/var-digest.css" />
3	<link rel="stylesheet" type="text/css" href="css/var-newsletter.css" />
4	<link rel="stylesheet" type="text/css" href="css/var-promotional.css" />

Saya memberi instruksi untuk menambahkan tautan ke setiap stylesheet tempat di mana elemen dari layout itu digunakan. Misalnya, jika modul Digest sedang di porting ke template Newsletter, link Digest CSS harus ditambahkan ke head template Newsletter sebelum menyalinnya di atas modul HTML.

Untuk elemen umum, seperti bilah iklan dan blok iklan, saya memastikan bahwa styling benar-benar terlepas dari layout, sehingga bisa dipindahkan dengan bebas.

Saya menyertakan semua petunjuk ini dalam file README, dan memasangnya kembali dengan semua HTML dan gambar yang akan dikirim.

Pengiriman

Dan kemudian kami selesai! Saya mengirim semuanya ke Ian yang melakukan sisa pengintegrasian. Merasa sedikit kecewa untuk menyerahkan file template tanpa kemampuan untuk menguji secara obsesif dan melakukan test ulang selama integrasi, tapi saya percaya pada Ian, tentu saja!

Begitu pekerjaannya selesai dan tiba saatnya untuk mulai mengirim, Ian mengirim salinan percobaan ke akun Litmus dan Email pada Acid, sehingga saya bisa melihat pratinjau rendering dan memberi bendera pada masalah apapun. Beberapa gambar latar belakang turun dari sini dan ke sana, yang kami perbaiki sebelum template akhirnya siap dikirim.

Di bagian berikutnya dan terakhir dari rangkaian ini, kami akan mengambil kerangka statis kami ke tingkat berikutnya, yang menunjukkan bagaimana kami mengintegrasikannya ke dalam Campaign Monitor!

Tautan yang berhubungan

Jika anda membutuhkan lebih banyak inspirasi email HTML, salah satu template email responsif kami mungkin sesuai dengan kebutuhan Anda.
Membuat Email Responsif Masa Depan- Tanpa Kueri Media