() translation by (you can also view the original English article)
Ada cukup sakit kepala untuk berurusan dengan ketika coding HTML email. Sehingga hampir tidak tampaknya adil jika kita juga perlu untuk tetap di atas baru klien email dan ukuran perangkat yang muncul setiap minggu. Dukungan kueri CSS dan media dapat bervariasi dari satu aplikasi ke aplikasi yang membuatnya tidak mungkin untuk menghindari rasa takut setiap kali Anda mendengar bahwa ada aplikasi email baru dan menarik yang belum Anda uji.
Tetapi bagaimana jika Anda dapat membuat template email yang responsif, bahkan di lingkungan dengan dukungan minim untuk CSS modern? Bagaimana jika, setiap kali Anda mendengar tentang beberapa aplikasi email baru yang semua orang coba, alih-alih gemetar ketakutan, Anda dapat merasa aman dan aman dengan pengetahuan bahwa email Anda mungkin terlihat baik-baik saja?
Metode yang saya dukung di bawah ini adalah tentang menciptakan pengalaman yang baik untuk klien email yang tidak memiliki dukungan permintaan media sama sekali.
Ini disebut metode hibrid cairan, terkadang disebut sebagai metode pengembangan email yang sepon. Bagian fluid mengacu pada fakta bahwa kita menggunakan banyak persentase. Bagian hibrida adalah karena kami juga menggunakan max-width untuk membatasi beberapa elemen kami pada layar yang lebih besar.
Enam Masalah Utama Kami Ingin Memecahkan
1. Aplikasi Gmail untuk Android dan iOS sangat merepotkan
Ini lebih populer daripada aplikasi email default di Android, tetapi Gmail tidak mendukung kueri media, yang biasanya kami andalkan untuk mengubah ukuran dan memformat email kami untuk layar kecil. Tutorial ini akan menunjukkan cara membuat email yang responsif, bahkan di aplikasi Gmail.
2. Aplikasi email baru dirilis setiap saat
Sulit untuk melacak semua aplikasi email baru yang terus muncul. Beberapa dari mereka benar-benar peduli tentang perenderan email dan memiliki dukungan CSS dan dukungan media yang bagus, tetapi beberapa dari mereka lebih fokus pada alur kerja email dan tidak mendukung kueri media sama sekali. Tutorial ini akan menunjukkan kepada Anda cara membuat email yang selalu responsif, tidak peduli tingkat dukungan CSS.
3. Jumlah kemungkinan ukuran layar perangkat hampir tidak terbatas
Kita tidak hanya memiliki desktop yang besar dan smartphone kecil, tetapi kita juga memiliki smartphone besar dan laptop kecil. Hanya karena seseorang mengakses Gmail mereka melalui laptop mereka tidak berarti layar mereka cukup besar untuk melihat email lebar 700px, dan orang yang menggunakan iPhone 6+ dapat menangani tata letak dua kolom, tetapi biasanya terjebak dengan satu kolom . Tutorial ini menunjukkan kepada Anda bagaimana membuat tata letak yang akan memformat ulang agar sesuai dengan ruang yang tersedia, bahkan di webmail.
4. Membuat email responsif dengan menumpuk <td> pada seluler tidak berfungsi dimana-mana
Klien email tertentu (di iOS dan bahkan beberapa aplikasi email asli pada versi Android sebelumnya) tidak menumpuk dua sel tabel pada baris yang sama; mereka hanya akan menumpuk dua tabel individual. Tutorial ini menggunakan metode yang sepenuhnya berbeda yang didukung sepenuhnya di semua aplikasi dan perangkat. Solusi yang biasa untuk masalah ini adalah menggunakan tabel dengan atribut align ="left" atau align ="right", tapi itu menghadirkan jebakan lain:
5. Saat menggunakan metode meja yang disejajarkan dalam pengembangan responsif, tabel Anda terhambat ke kiri atau kanan di aplikasi seluler yang tidak mendukung kueri media
Metode dalam tutorial ini menggunakan pendekatan berbeda yang memastikan bahwa semua kolom Anda ditumpuk di pusat pada seluler, bahkan di aplikasi Gmail. (Anda juga dapat dengan mudah mengaturnya untuk sejajar ke kiri atau kanan jika Anda suka.)
6. Bila Anda menggunakan metode tabel yang disejajarkan dengan pengembangan responsif, Anda kehilangan kemampuan untuk menjajarkan konten secara vertikal di kolom yang berdekatan
Tutorial ini juga akan menunjukkan kepada Anda bagaimana secara vertikal menyelaraskan dua kolom pada baris yang sama ke atas atau tengah, seolah-olah mereka semua sel tabel pada baris yang sama yang menggunakan atribut valign.
1. Memulai
Start with a blank file and save it as index.html, then copy and paste this code:
1 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
2 |
<html xmlns="http://www.w3.org/1999/xhtml"> |
3 |
<head>
|
4 |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
5 |
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> |
6 |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
7 |
<title></title>
|
8 |
<link rel="stylesheet" type="text/css" href="styles.css" /> |
9 |
<!--[if (gte mso 9)|(IE)]>
|
10 |
<style type="text/css">
|
11 |
table {border-collapse: collapse;}
|
12 |
</style>
|
13 |
<![endif]-->
|
14 |
</head>
|
15 |
<body>
|
16 |
<center class="wrapper"> |
17 |
<div class="webkit"> |
18 |
[content goes here] |
19 |
</div>
|
20 |
</center>
|
21 |
</body>
|
Mari kita cepat menjalankan semua elemen dalam kode di atas:
! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN" adalah DOCTYPE yang paling saya sukai — saya merasa itu menghasilkan kebiasaan paling sedikit.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8'/> memberi kita dukungan untuk semua karakter Unicode dalam dokumen kita.
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> dan <meta name="viewport" content="width=device-width, initial-scale=1.0"> digunakan di sini sehingga Windows Phone akan menampilkan versi seluler Anda dengan benar.
Kami akan menyertakan <title></title> meskipun yang terbaik adalah membiarkannya kosong. Tag judul diperlukan untuk XHTML yang valid, tetapi beberapa klien email Android asli akan menampilkan judul ini tepat sebelum preheader di pratinjau kotak masuk, yang biasanya tidak ideal.
Anda akan melihat bahwa saya menggunakan stylesheet eksternal untuk tutorial ini, tetapi pendekatan yang Anda lakukan terserah Anda. Untuk menyimak, Anda sekarang harus membuat dokumen baru yang disebut styles.css dan simpan di direktori yang sama dengan file HTML Anda. Kita akan menggaris bawahi CSS kita di bagian akhir.
Selanjutnya, antara <!--[if (gte mso 9) | (IE)]> dan <![endif]--> kita memiliki beberapa CSS bersyarat untuk Outlook untuk memaksanya membongkar batas pada semua tabel dan mencegah celah yang tidak diinginkan. Ekspresi kondisional ini menargetkan semua versi Microsoft Outlook (mso) lebih besar dari atau sama dengan versi 9 (yang semuanya karena versi 9 adalah yang paling awal: Outlook 2000) serta versi Outlook yang menggunakan Internet Explorer untuk merender (menjadi Outlook) 2000–2003).
Di bawah tubuh, pertama kita memiliki <center> Tag, Pusat isinya dan bertindak sebagai pembawa kita dari beberapa properti global CSS berguna (karena tag badan sering mendapat dilucuti di webmail klien). Kita juga memiliki <div class="webkit"> untuk versi sebelumnya dari klien mail bertenaga WebKit (pada dasarnya hanya Apple Mail 6 dan di bawah, dan Outlook 2011 dalam beberapa kasus). Versi sebelumnya ini hanya mendukung max-width pada elemen block-level dan cara termudah untuk memastikan tata letak kami ditampilkan pada ukuran yang benar adalah dengan membungkusnya di div ini, yang menyelamatkan kita harus mengatur lebar dalam permintaan media sesuai tutorial sebelumnya. (Terima kasih kepada zerocents untuk perbaikan ini.)
2. Gaya Awal
Selanjutnya, buat file CSS kosong yang disebut styles.css. Ke file yang baru Anda buat, tempel berikut ini:
1 |
/* Basics */
|
2 |
body { |
3 |
Margin: 0; |
4 |
padding: 0; |
5 |
min-width: 100%; |
6 |
background-color: #ffffff; |
7 |
}
|
8 |
table { |
9 |
border-spacing: 0; |
10 |
font-family: sans-serif; |
11 |
color: #333333; |
12 |
}
|
13 |
td { |
14 |
padding: 0; |
15 |
}
|
16 |
img { |
17 |
border: 0; |
18 |
}
|
19 |
.wrapper { |
20 |
width: 100%; |
21 |
table-layout: fixed; |
22 |
-webkit-text-size-adjust: 100%; |
23 |
-ms-text-size-adjust: 100%; |
24 |
}
|
25 |
.webkit { |
26 |
max-width: 600px; |
27 |
}
|
28 |
|
29 |
/* Windows Phone Viewport Fix */
|
30 |
@-ms-viewport { |
31 |
width: device-width; |
32 |
}
|
Di sini saya memusatkan margin dan padding pada sel tubuh, tabel dan tabel dan memusatkan batas apa pun yang akan muncul pada gambar yang ditautkan. Gaya kita untuk tabel dan tag td adalah untuk mengambil tempat dari cellpadding dan cellspacing atribut HTML. Itu sepenuhnya terserah Anda jika Anda lebih suka menggunakan atribut HTML sebagai gantinya; di masa lalu saya selalu didukung menggunakan atribut HTML, bukan properti CSS di mana mungkin, namun karena saya telah bekerja di lebih banyak proyek berskala besar saya telah menemukan bahwa itu dapat lebih mudah dikelola untuk menentukan ini di CSS, terutama jika Anda biasanya bekerja di platform yang secara otomatis menangani CSS inlining untuk Anda.
Saya biasanya menyertakan min-width 100% pada <body> tag untuk menghindari situasi di mana konten tidak mengambil lebar penuh dari viewport di seluler, dan itu selalu ide yang baik untuk mengatur warna latar belakang Anda, bahkan jika putih bersih, untuk menghindari gangguan warna latar belakang di Outlook atau Lotus Notes.
Kita juga memiliki gaya untuk .wrapper dengan beberapa properti untuk menghentikan perubahan ukuran teks dengan cara yang aneh pada Windows Phone dan iOS, serta table-layout: fixed untuk memastikan konten terpusat kami benar-benar akan berpusat di email Yahoo. Kita menetapkan max-width 600 piksel pada div .webkit kita untuk memuat semuanya di Apple Mail 6 (dan di bawah) dan Outlook 2011.
Akhirnya kita memiliki perbaikan viewport yang, bersama dengan dua tag meta kita di kepala, akan memastikan semuanya terlihat benar di Windows Phone.
3. Membuat Kontainer Luar Struktur
Kita akan mulai dengan salah satu blok bangunan utama untuk metode ini: tabel bersyarat untuk Outlook yang disembunyikan untuk semua klien lainnya. Kita memerlukan ini karena kita akan menggunakan properti max-width yang Outlook tidak mendukung. Oleh karena itu kita perlu membuat tabel khusus khusus Outlook dengan lebar piksel eksplisit untuk memuat semuanya di Outlook.
Jadi di file HTML kita, mari kita hapus [content goes here] placeholder dan tempelkan kode berikut. Saya cenderung menyimpan tag kode kondisional saya semua rata kiri pada tingkat indentasi yang sama agar terbaca, tetapi bagaimana Anda memformatnya terserah Anda.
1 |
<!--[if (gte mso 9)|(IE)]>
|
2 |
<table width="600" align="center">
|
3 |
<tr>
|
4 |
<td>
|
5 |
<![endif]-->
|
6 |
<table class="outer" align="center"> |
7 |
<tr>
|
8 |
<td>
|
9 |
[content goes here] |
10 |
</td>
|
11 |
</tr>
|
12 |
</table>
|
13 |
<!--[if (gte mso 9)|(IE)]>
|
14 |
</td>
|
15 |
</tr>
|
16 |
</table>
|
17 |
<![endif]-->
|
Catatan: tidak ada styling pada tag tabel kondisional saya. Saya akan menggunakan alat pemantau Kampanye Monitor, inliner.cm, yang juga menyisipkan gaya ke tabel bersyarat. Jika Anda akan menggunakan inliner yang berbeda maka mungkin tidak melakukan hal ini, jadi pastikan untuk menambahkan cellpadding = "0" cellspacing = "0" border = "0" ke tabel Outlook bersyarat Anda.
Di dalam tabel bersyarat kita, Anda akan melihat bahwa kita memiliki <table class="outer"> yang merupakan blok bangunan luar kunci kita untuk setiap klien kecuali Outlook.
Kita ingin tabel luar ini 100% lebar pada layar kecil tetapi pada layar yang lebih besar, kita hanya ingin lebar maksimumnya adalah 600 piksel. Karenanya, kita akan menetapkan lebarnya menjadi 100% dan memberinya lebar maksimal 600 piksel.
Tip praktis: Untuk penyangga cepat dan mudah di seluler, tanpa harus bermain-main dengan kueri atau kueri media, ubah width tabel Anda dari 100% menjadi 95%.
Jadi, mari rekatkan gaya ini ke dalam file styles.css kita:
1 |
.outer { |
2 |
Margin: 0 auto; |
3 |
width: 100%; |
4 |
max-width: 600px; |
5 |
}
|
Kita juga memiliki Margin: 0 otomatis; tetapkan di sini untuk memusatkan meja kita di Yahoo di Chrome. Meskipun penggunaan margin ini adalah demi kepentingan Yahoo, saya selalu memanfaatkan Margin sehingga Outlook.com tidak akan menghapusnya - sebuah retasan kecil yang rapi berkat komentar Wiktor pada posting blog ini.
Sekarang kita memiliki struktur luar kita, saatnya untuk mulai menambahkan beberapa konten.
4. Menambahkan Gambar Spanduk Lebar Penuh
Pertama, unduh file tutorial dan pindahkan direktori / gambar sehingga ada di folder yang sama dengan file index.html Anda.
Sekarang, tambahkan kelas full-width-image ke td di dalam tabel .outer kita dan kemudian kita akan mengganti [konten kita di sini] placeholder dengan tag gambar, sehingga seluruh tabel sekarang terlihat seperti ini:
1 |
<table class="outer" align="center"> |
2 |
<tr>
|
3 |
<td class="full-width-image"> |
4 |
<img src="images/header.jpg" alt="" /> |
5 |
</td>
|
6 |
</tr>
|
7 |
</table>
|
Anda akan memperhatikan saya tidak peduli menempatkan atribut width atau height pada gambar. Saya akan menangani ini semua dalam CSS yang akan kita tambahkan, yang terlihat seperti ini:
1 |
.full-width-image img { |
2 |
width: 100%; |
3 |
height: auto; |
4 |
}
|
Ini membawa kita ke titik yang sangat penting mengenai gambar ketika menggunakan metode ini.
Gambar harus selalu muncul pada ukuran piksel fisiknya
Metode ini adalah tentang menggunakan persentase untuk menjaga hal-hal yang baik dan lancar. Oleh karena itu, kita hampir selalu menginginkan lebar gambar kita untuk disetel menjadi 100% dari penampungnya. Jika kita ingin melakukan ini, kita harus memasukkan gambar kita pada ukuran piksel fisik yang benar. Ini karena Outlook 2007, 2010, dan 2013 tidak akan menskalakan gambar ke atas atau ke bawah dari dimensi fisiknya kecuali Anda menetapkan lebar piksel eksplisit pada gambar. Jika Anda menempatkan gambar lebar 1200px dalam sel sel 600px dan mengatur lebarnya ke 100%, Outlook akan menampilkan gambar itu pada lebar 1200px. Oleh karena itu jika Anda memiliki sel lebar 600px (di desktop), Anda harus menggunakan gambar lebar 600px.
Untuk gambar yang lebih kecil dari lebar layar yang didukung minimum Anda, Anda dapat menetapkan lebar piksel eksplisit pada ini (misalnya, 100px) dan menggunakan gambar resolusi tinggi, karena dalam aplikasi non-media-query lebarnya selalu akan menjadi 100px , yang cocok dengan rapi di dalam area pandang seluler apa pun. Namun, jika Anda memiliki kolom lebar 350px, Anda tidak dapat menetapkan gambar agar lebarnya 350 piksel, karena jika Anda melihat gambar itu di aplikasi Gmail pada area pandang lebar 320px, itu akan terlalu lebar.
Seringkali berguna untuk memastikan semua gambar memiliki lebar yang ditetapkan hingga 100%, meskipun ukurannya lebih sempit daripada area pandang seluler terkecil, karena memberi Anda lebih banyak fleksibilitas saat menambahkan peningkatan progresif dengan kueri media.
Aturan saya adalah bahwa setiap gambar harus selalu muncul pada ukuran fisik pixel kecuali sebuah ikon yang lebih kecil dari 100px yang luas.
Jadi dengan semua itu, kita telah menyelamatkan gambar bernama header.jpg yang berukuran persis 600px dan menempatkannya di direktori gambar kita. Ambil, atau simpan milik Anda, dan sekarang Anda dapat melihat pratinjau file HTML Anda dan melihat bagaimana gambar diubah secara cair berdasarkan ukuran viewport.
5. Menambahkan Tata Letak Kolom Tunggal
Tambahkan baris lain ke tabel .outer dengan markup ini:
1 |
<tr>
|
2 |
<td class="one-column"> |
3 |
<table width="100%"> |
4 |
<tr>
|
5 |
<td class="inner contents"> |
6 |
<p class="h1">Lorem ipsum dolor sit amet</p> |
7 |
<p>Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent laoreet malesuada cursus. Maecenas scelerisque congue eros eu posuere. Praesent in felis ut velit pretium lobortis rhoncus ut erat.</p> |
8 |
</td>
|
9 |
</tr>
|
10 |
</table>
|
11 |
</td>
|
12 |
</tr>
|
Dan tambah gaya ini di file CSS Anda:
1 |
.inner { |
2 |
padding: 10px; |
3 |
}
|
4 |
p { |
5 |
Margin: 0; |
6 |
}
|
7 |
a { |
8 |
color: #ee6a56; |
9 |
text-decoration: underline; |
10 |
}
|
11 |
.h1 { |
12 |
font-size: 21px; |
13 |
font-weight: bold; |
14 |
Margin-bottom: 18px; |
15 |
}
|
16 |
.h2 { |
17 |
font-size: 18px; |
18 |
font-weight: bold; |
19 |
Margin-bottom: 12px; |
20 |
}
|
21 |
|
22 |
/* One column layout */
|
23 |
.one-column .contents { |
24 |
text-align: left; |
25 |
}
|
26 |
.one-column p { |
27 |
font-size: 14px; |
28 |
Margin-bottom: 10px; |
29 |
}
|
Anda akan melihat bahwa saya telah menggunakan tag <p> dan satu set kelas untuk styling mereka Saya suka menggunakan paragraf untuk teks gaya, dan Anda benar-benar dapat mengelola mereka dengan mudah karena modal-M Margin hack yang saya sebutkan sebelumnya. Saya juga menggunakan <p class="h1"> dibandingkan <h1> karena Outlook.com memiliki beberapa h1, h2 dan h3 gaya yang selalu menimpa gaya Anda.
Jadi dalam CSS di atas kita telah menyiapkan 10px padding untuk kolom kita, kita telah mengatur ulang semua margin pada <p> mengatur beberapa gaya dasar untuk tautan dan kelas saya .h1 dan .h2, kemudian memastikan isi kolom kita rata kiri dengan paragraf bergaya.
Sekarang ke hal-hal menarik .. beberapa kolom!
6. Menambahkan Layout Dua-kolom *
*yang akan dipusatkan saat ditumpuk.
Pertama menambahkan baris baru ini ke meja .outer. Ini berisi sel dengan kelas .two-kolom dan, di dalamnya, tabel bersyarat untuk Outlook dengan dua kolom lebar 50%:
1 |
<tr>
|
2 |
<td class="two-column"> |
3 |
<!--[if (gte mso 9)|(IE)]>
|
4 |
<table width="100%">
|
5 |
<tr>
|
6 |
<td width="50%" valign="top">
|
7 |
<![endif]-->
|
8 |
[column to go here] |
9 |
<!--[if (gte mso 9)|(IE)]>
|
10 |
</td><td width="50%" valign="top">
|
11 |
<![endif]-->
|
12 |
[column to go here] |
13 |
<!--[if (gte mso 9)|(IE)]>
|
14 |
</td>
|
15 |
</tr>
|
16 |
</table>
|
17 |
<![endif]-->
|
18 |
</td>
|
19 |
</tr>
|
Kolom kondisional ini penting, karena tanpa itu, Outlook tidak akan membiarkan dua tabel mengambang kami duduk berdampingan dengan rapi. Karena Outlook tidak mendukung max-width, kolom ini membantu membatasi setiap kolom ke ukuran yang benar.
Sekarang ganti masing-masing [column to go here] placeholder dengan ini:
1 |
<div class="column"> |
2 |
<table width="100%"> |
3 |
<tr>
|
4 |
<td class="inner"> |
5 |
[content goes here] |
6 |
</td>
|
7 |
</tr>
|
8 |
</table>
|
9 |
</div>
|
Cara kita akan mendapatkan dua kolom untuk mengapung berdampingan di desktop, tetapi menumpuk di tengah pada ponsel, adalah dengan menggunakan kombinasi teks-align: center dan display: inline-block. Semua elemen inline dan inline-block mematuhi properti text-align. Oleh karena itu, jika kita membungkus tabel kita dalam div yang diatur ke blok-inline, kita dapat dengan mudah mengatur kesejajarannya ketika mereka menumpuk dengan mengatur properti text-align pada wadahnya. Anda dapat memilih dari kiri, tengah atau kanan perataan teks, dan div inline-blok Anda akan patuh. Anda memang dapat mengatur sendiri tampilan display: inline-block, tetapi hanya jika Anda tidak akan menumpuk tabel lagi di dalamnya. Hal-hal dapat mulai berperilaku ganjil jika Anda menempatkan tabel di dalam tabel blok-inline, jadi jika Anda perlu bersarang, selalu pastikan wadah inline-block adalah div.
Mari gaya sel kontainer kita .two-column dengan penyelarasan pilihan kita. Kita juga akan menambahkan font-size: 0 untuk menyingkirkan celah di antara kolom kita di dalam sel ini.
1 |
/*Two column layout*/
|
2 |
.two-column { |
3 |
text-align: center; |
4 |
font-size: 0; |
5 |
}
|
Sekarang kita akan menata div inline-blok kita yang berfungsi sebagai kolom kita:
1 |
.two-column .column { |
2 |
width: 100%; |
3 |
max-width: 300px; |
4 |
display: inline-block; |
5 |
vertical-align: top; |
6 |
}
|
Kita menggunakan lebar 100% hingga lebar maksimal 300 piksel sehingga kolom khusus ini akan menjadi 100% lebar pada area pandang yang lebih kecil dari lebar 300 piksel.
Anda dapat mengatur vertical-align Anda ke apa pun yang Anda suka: atas, tengah atau bawah. Menyetel vertical-align ke top berarti setiap kolom bertindak seolah-olah sel tabel menggunakan properti HTML valign="top", sementara menyetelnya ke middle seolah-olah memiliki valign="middle". Perhatikan bahwa Anda dapat memiliki banyak baris div ini dalam sel yang sama dan perataan vertikal akan selalu menentukan penyelarasan vertikal secara baris demi baris. Itu sangat bagus! Pastikan juga bahwa apa pun yang Anda pilih di sini sesuai dengan valign yang Anda tetapkan di tabel bersyarat Outlook karena Outlook tidak mendukung vertical-align. Jika Anda memiliki ketidaksesuaian dengan penyelarasan di Outlook, lupa untuk mengatur valign pada tabel bersyarat biasanya adalah pelakunya.
Selanjutnya, kita akan menambahkan tabel dengan dua baris ke setiap kolom. Hal ini agar ketika semua tumpukan di seluler, setiap gambar memiliki teks yang sesuai langsung di bawahnya.
Jadi, mari ganti dua [content goes here] placeholder dengan yang berikut:
1 |
<table class="contents"> |
2 |
<tr>
|
3 |
<td>
|
4 |
<img src="images/two-column-01.jpg" alt="" /> |
5 |
</td>
|
6 |
</tr>
|
7 |
<tr>
|
8 |
<td class="text"> |
9 |
Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. |
10 |
</td>
|
11 |
</tr>
|
12 |
</table>
|
Citra kita di sini adalah 280px lebar. Seperti yang dibahas di atas, itu telah disimpan pada dimensi piksel yang tepat agar sesuai dengan sel tempat kita menempatkannya. Setiap kolom memiliki lebar 300px dengan 10px padding di kedua sisinya, meninggalkan 280px untuk gambar kita.
Selanjutnya, kita akan menata kelas .contents dengan memberinya lebar 100%:
1 |
.contents { |
2 |
width: 100%; |
3 |
}
|
Lalu, tambahkan gaya kita di bawah tata letak dua kolom untuk menetapkan ukuran font dan perataan teks kita, pastikan gambar kita ditampilkan dengan lebar 100%, dan untuk memberi teks di bawah sedikit padding:
1 |
.two-column .contents { |
2 |
font-size: 14px; |
3 |
text-align: left; |
4 |
}
|
5 |
.two-column img { |
6 |
width: 100%; |
7 |
height: auto; |
8 |
}
|
9 |
.two-column .text { |
10 |
padding-top: 10px; |
11 |
}
|
Sekarang Anda harus memiliki tata letak dua kolom, yang menumpuk secara vertikal saat Anda mengubah ukuran browser Anda dan menyusut sebagaimana mestinya ketika Anda membuat viewport lebih sempit dari 300px.
7. Menambahkan Tata Letak Tiga Kolom
Sekali lagi kita akan membuat kolom side-by-side yang menumpuk pada ponsel dengan menggunakan kombinasi text-align: center dan display: inline-block.
Kita akan menggunakan text-align: center sehingga tumpukan kolom kita di tengah, tetapi Anda juga selalu dapat menggunakan penjajaran teks kiri atau kanan. Berikut ini contoh bagaimana elemen-elemen tengah dan berjajar kiri akan menumpuk:
text-align: center on container
text-align: left pada wadahJadi, kita akan mengulangi proses dua kolom dengan kolom tambahan. Tambahkan baris baru ini ke tabel .outer. (Biasanya saya lebih suka menggunakan lebar persentase untuk sel di tabel Outlook bersyarat saya, tetapi dalam kasus ini lebih mudah untuk mengatur lebar masing-masing hingga 200.)
1 |
<tr>
|
2 |
<td class="three-column"> |
3 |
<!--[if (gte mso 9)|(IE)]>
|
4 |
<table width="100%">
|
5 |
<tr>
|
6 |
<td width="200" valign="top">
|
7 |
<![endif]-->
|
8 |
[column to go here] |
9 |
<!--[if (gte mso 9)|(IE)]>
|
10 |
</td><td width="200" valign="top">
|
11 |
<![endif]-->
|
12 |
[column to go here] |
13 |
<!--[if (gte mso 9)|(IE)]>
|
14 |
</td><td width="200" valign="top">
|
15 |
<![endif]-->
|
16 |
[column to go here] |
17 |
<!--[if (gte mso 9)|(IE)]>
|
18 |
</td>
|
19 |
</tr>
|
20 |
</table>
|
21 |
<![endif]-->
|
22 |
</td>
|
23 |
</tr>
|
Sekarang tambahkan CSS berikut untuk memberikan beberapa tambahan padding untuk baris ini, serta mengatur semua properti yang kita gunakan dalam tata letak dua kolom untuk membuat kolom kita berperilaku bagaimana kita menginginkannya. Ini juga akan mengatur gaya kita untuk kolom div yang akan kita tambahkan, yang akan menjadi lebar 200px dalam kasus ini.
1 |
/*Three column layout*/
|
2 |
.three-column { |
3 |
text-align: center; |
4 |
font-size: 0; |
5 |
padding-top: 10px; |
6 |
padding-bottom: 10px; |
7 |
}
|
8 |
.three-column .column { |
9 |
width: 100%; |
10 |
max-width: 200px; |
11 |
display: inline-block; |
12 |
vertical-align: top; |
13 |
}
|
14 |
.three-column .contents { |
15 |
font-size: 14px; |
16 |
text-align: center; |
17 |
}
|
18 |
.three-column img { |
19 |
width: 100%; |
20 |
height: auto; |
21 |
}
|
22 |
.three-column .text { |
23 |
padding-top: 10px; |
24 |
}
|
Sekarang mari masukkan kolom kita dengan mengganti [column to go here] placeholder dengan satu tabel masing-masing:
1 |
<table class="column"> |
2 |
<tr>
|
3 |
<td class="inner"> |
4 |
<table class="contents"> |
5 |
<tr>
|
6 |
<td>
|
7 |
<img src="images/three-column-01.jpg" alt="" /> |
8 |
</td>
|
9 |
</tr>
|
10 |
<tr>
|
11 |
<td class="text"> |
12 |
Scelerisque congue eros eu posuere. Praesent in felis ut velit pretium lobortis rhoncus ut erat. |
13 |
</td>
|
14 |
</tr>
|
15 |
</table>
|
16 |
</td>
|
17 |
</tr>
|
18 |
</table>
|
Dan itu dia! Sekarang Anda harus memiliki tata letak tiga kolom, tempat kolom akan ditumpuk pada area pandang sempit.
Karena fakta bahwa tata letak ini memiliki jumlah kolom yang tidak merata, terkadang Anda dapat menemukan diri Anda dengan dua kolom ditampilkan di baris atas, dengan hanya satu kolom di bawahnya. Meskipun saya pikir Anda benar-benar dapat membuat tampilan ini bagus jika Anda mendesain untuk skenario ini, terkadang dapat terlihat sedikit tidak seimbang. Seringkali cara terbaik untuk mengatasi ini adalah dengan menggunakan perataan kiri, atau menggunakan beberapa baris dari tiga kolom sehingga ketika konten bertumpuk pada resolusi menengah masih ada genap jumlah kolom per baris.
Menambahkan tata letak tiga kolom dengan beberapa baris
Ketika Anda ingin menambahkan lebih banyak baris dalam tata letak multi-kolom Anda, Anda dapat menambahkan banyak elemen-elemen inline-block ke satu sel kontainer yang Anda inginkan. Dengan cara ini, ketika viewport menjadi terlalu sempit untuk memenuhi semua kolom, mereka hanya mengulang agar sesuai dengan ruang yang tersedia.
Meskipun Anda tidak perlu memisahkan baris div untuk sebagian besar klien, Anda perlu menambahkan <ts> tambahan ke tabel bersyarat untuk Outlook.
Mari kita coba ini dengan memulai baris baru di tabel .outer kita dengan kelas .tiga kolom. Di sini kita memiliki baris tiga kolom baru dengan tabel bersyarat di dalamnya. Anda akan melihat bahwa ada tiga kolom di tabel bersyarat kami dan kemudian kami mengakhiri baris tabel bersyarat dengan </tr> dan membuka <tr> baru, yang berisi sel lebar lain sebanyak 200px.
1 |
<tr>
|
2 |
<td class="three-column"> |
3 |
<!--[if (gte mso 9)|(IE)]>
|
4 |
<table width="100%">
|
5 |
<tr>
|
6 |
<td width="200" valign="top">
|
7 |
<![endif]-->
|
8 |
[column to go here] |
9 |
<!--[if (gte mso 9)|(IE)]>
|
10 |
</td><td width="200" valign="top">
|
11 |
<![endif]-->
|
12 |
[column to go here] |
13 |
<!--[if (gte mso 9)|(IE)]>
|
14 |
</td><td width="200" valign="top">
|
15 |
<![endif]-->
|
16 |
[column to go here] |
17 |
<!--[if (gte mso 9)|(IE)]>
|
18 |
</td>
|
19 |
</tr>
|
20 |
<tr>
|
21 |
<td width="200" valign="top">
|
22 |
<![endif]-->
|
23 |
[column to go here] |
24 |
<!--[if (gte mso 9)|(IE)]>
|
25 |
</td><td width="200" valign="top">
|
26 |
<![endif]-->
|
27 |
[column to go here] |
28 |
<!--[if (gte mso 9)|(IE)]>
|
29 |
</td><td width="200" valign="top">
|
30 |
<![endif]-->
|
31 |
[column to go here] |
32 |
<!--[if (gte mso 9)|(IE)]>
|
33 |
</td>
|
34 |
</tr>
|
35 |
</table>
|
36 |
<![endif]-->
|
37 |
</td>
|
38 |
</tr>
|
Selanjutnya kita akan menambahkan tabel seperti ini ke setiap sel kondisional, menggantikan [column to go here] placeholder:
1 |
<table class="column"> |
2 |
<tr>
|
3 |
<td class="inner contents"> |
4 |
<p class="h2">Heading</p> |
5 |
<p>Class eleifend aptent taciti sociosqu ad litora torquent conubia</p> |
6 |
<p><a href="#">Read more</a></p> |
7 |
</td>
|
8 |
</tr>
|
9 |
</table>
|
Sekarang jika Anda mengubah ukuran jendela Anda, Anda akan melihat lagi tumpukan kolom untuk mengisi ruang yang tersedia. Tiga kolom akan berkurang menjadi dua kolom dengan tiga baris, hingga akhirnya runtuh menjadi satu kolom dengan enam baris.
Menambahkan lebih banyak kolom
Kami tidak akan menambahkan tata letak multi-kolom lagi dalam tutorial ini, tetapi Anda bebas untuk memiliki banyak kolom dalam tata letak sesuai keinginan. Yang perlu Anda lakukan adalah memastikan bahwa konten Anda memblokir semua menambahkan hingga lebar wadah Anda, dan bahwa tabel bersyarat Anda untuk Outlook memiliki jumlah sel dan baris yang benar untuk menampungnya.
8. Menambahkan Layout ‘Sidebar’ dua kolom
Selanjutnya, kita akan membuat tata letak dua kolom dengan kolom lebar 500 piksel dan kemudian lebar sidebar 100px yang lebih sempit untuk ikon.
Pertama-tama kita akan menambahkan baris dan sel dengan kelas .left-sidebar dan di dalamnya kita akan membuka tabel bersyarat untuk Outlook yang memiliki satu baris dan dua kolom yang tidak rata:
1 |
<tr>
|
2 |
<td class="left-sidebar"> |
3 |
<!--[if (gte mso 9)|(IE)]>
|
4 |
<table width="100%">
|
5 |
<tr>
|
6 |
<td width="100">
|
7 |
<![endif]-->
|
8 |
[column to go here] |
9 |
<!--[if (gte mso 9)|(IE)]>
|
10 |
</td><td width="500">
|
11 |
<![endif]-->
|
12 |
[column to go here] |
13 |
<!--[if (gte mso 9)|(IE)]>
|
14 |
</td>
|
15 |
</tr>
|
16 |
</table>
|
17 |
<![endif]-->
|
18 |
</td>
|
19 |
</tr>
|
Kemudian di setiap kolom, dengan menggantikan [column to go here] placeholder, kita akan menambahkan tabel. Kali ini kita akan memanggil satu .column .left dan satu .column .right karena mereka memiliki lebar yang berbeda.
Catatan: di sini saya menggunakan beberapa kelas pada satu elemen. Beberapa alat inliner dan / atau ESP mungkin tidak mendukung untuk melakukan hal ini, jadi periksa dengan sistem atau platform Anda terlebih dahulu. Seperti disebutkan di atas, saya menggunakan inliner.cm untuk menyisipkan CSS saya, yang mendukung beberapa kelas.
Di kolom pertama, tambahkan tabel kiri yang berisi ikon kita:
1 |
<table class="column left"> |
2 |
<tr>
|
3 |
<td class="inner"> |
4 |
<img src="images/sidebar-01.jpg" width="80" height="80" alt="" /> |
5 |
</td>
|
6 |
</tr>
|
7 |
</table>
|
Karena gambar ini sangat kecil dan kita selalu ingin gambarnya berukuran sama, aman untuk memberi mereka lebar piksel.
Kemudian di kolom kedua, tambahkan tabel kanan dengan teks dan tautan:
1 |
<table class="column right"> |
2 |
<tr>
|
3 |
<td class="inner contents"> |
4 |
Praesent laoreet malesuada cursus. Maecenas scelerisque congue eros eu posuere. Praesent in felis ut velit pretium lobortis rhoncus ut erat. <a href="#">Read on</a> |
5 |
</td>
|
6 |
</tr>
|
7 |
</table>
|
Tabel ini super-sederhana dengan tidak ada bagian yang bersarang di dalamnya, jadi untuk menghemat markup, saya akan menetapkan tabel sendiri untuk display: inline-block daripada membungkusnya dalam div. Seperti yang dibahas di atas, ini hanya praktis ketika Anda tidak akan menumpuk lebih banyak elemen di dalamnya. Jika Anda akan melakukan banyak penumpukan, bungkus tabel ini dalam div, dan masukkan kelas .column .right pada itu.
Selanjutnya, mari beri gaya wadah dan siapkan kolom:
1 |
/* Left sidebar layout */
|
2 |
.left-sidebar { |
3 |
text-align: center; |
4 |
font-size: 0; |
5 |
}
|
6 |
.left-sidebar .column { |
7 |
width: 100%; |
8 |
display: inline-block; |
9 |
vertical-align: middle; |
10 |
}
|
11 |
.left-sidebar .left { |
12 |
max-width: 100px; |
13 |
}
|
14 |
.left-sidebar .right { |
15 |
max-width: 500px; |
16 |
}
|
Dan akhirnya mari kita menyiapkan beberapa gaya teks dan warna tautan:
1 |
.left-sidebar .contents { |
2 |
font-size: 14px; |
3 |
text-align: center; |
4 |
}
|
5 |
.left-sidebar a { |
6 |
color: #85ab70; |
7 |
}
|
Sekarang Anda harus memiliki tata letak sidebar kiri Anda dan ketika Anda mengubah ukuran browser Anda untuk membuatnya lebih kecil, ikon akan melompat di atas teks dan duduk di tengah.
9. Menambahkan Layout 'Sidebar' Terbalik
Sekarang kita ingin menduplikasi tata letak sidebar kita, dan kali ini kita ingin ikon berada di sisi kanan untuk menciptakan minat visual di desktop. Namun di seluler kita ingin konten ditumpuk dalam urutan yang sama persis seperti tata letak bilah sisi sebelumnya, sehingga ikon berada di atas teks.
Pertama, kita akan menyalin dan menempelkan seluruh baris dengan .left-sidebar kami sel, dan satu-satunya hal yang akan kita ubah adalah kelas sel kontainer dari .left-sidebar ke .right-sidebar:
1 |
<tr>
|
2 |
<td class="right-sidebar"> |
3 |
<!--[if (gte mso 9)|(IE)]>
|
4 |
<table width="100%">
|
5 |
<tr>
|
6 |
<td width="100">
|
7 |
<![endif]-->
|
8 |
<table class="column left"> |
9 |
<tr>
|
10 |
<td class="inner contents"> |
11 |
<img src="images/sidebar-02.jpg" width="80" height="80" alt="" /> |
12 |
</td>
|
13 |
</tr>
|
14 |
</table>
|
15 |
<!--[if (gte mso 9)|(IE)]>
|
16 |
</td><td width="500">
|
17 |
<![endif]-->
|
18 |
<table class="column right"> |
19 |
<tr>
|
20 |
<td class="inner contents"> |
21 |
Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra. <a href="#">Per inceptos</a> |
22 |
</td>
|
23 |
</tr>
|
24 |
</table>
|
25 |
<!--[if (gte mso 9)|(IE)]>
|
26 |
</td>
|
27 |
</tr>
|
28 |
</table>
|
29 |
<![endif]-->
|
30 |
</td>
|
31 |
</tr>
|
Tentu saja semuanya sama persis.
Apa yang akan kita lakukan adalah menggunakan dir="rtl" (yang berarti arah kanan-ke-kiri) untuk keuntungan kita. Properti ini untuk menunjukkan abjad yang menjalankan kanan-ke-kiri, seperti bahasa Arab. Namun dalam kasus kita, itu hanya akan memberi tahu setiap klien email untuk merender elemen kita dalam urutan yang berlawanan.
dir="rtl" disetel pada penampungnyaPertama, ke wadah (.right-sidebar), Anda perlu menambahkan dir="rtl". Ini memberitahukannya untuk membuat tabel mengambang kita di dalam dari kanan ke kiri. Jadi kita membuka tag sekarang harus terlihat seperti ini:
1 |
<td class="right-sidebar" dir="rtl"> |
Kemudian, dalam kode kondisional Outlook, kita juga perlu menambahkan dir="rtl" ke <table> karena kita memberitahukan karena kita memberitahukan tabel untuk membuat <td> dalam urutan yang berlawanan
Jadi komentar kondisional kami yang terbuka sekarang seharusnya terlihat seperti ini:
1 |
<!--[if (gte mso 9)|(IE)]>
|
2 |
<table width="100%" dir="rtl">
|
3 |
<tr>
|
4 |
<td width="100">
|
5 |
<![endif]-->
|
Dan akhirnya, kita perlu menambahkan dir = "ltr" ke .column-left kita dan kanan .column tabel, karena mereka memiliki konten di dalamnya, dan karena konten tersebut berbahasa Inggris, perlu dijalankan dari kiri ke kanan. Jika kita tidak menetapkan ini pada elemen ini, mereka akan mewarisi arah kanan-ke-kiri dari elemen induknya.
Kita .column-kiri Sekarang harus terlihat seperti ini:
1 |
<table class="column left" dir="ltr"> |
2 |
<tr>
|
3 |
<td class="inner contents"> |
4 |
<img src="images/sidebar-02.jpg" width="80" height="80" alt="" /> |
5 |
</td>
|
6 |
</tr>
|
7 |
</table>
|
Dan kita .column-right Sekarang harus terlihat seperti ini:
1 |
<table class="column right" dir="ltr"> |
2 |
<tr>
|
3 |
<td class="inner contents"> |
4 |
Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra. <a href="#">Per inceptos</a> |
5 |
</td>
|
6 |
</tr>
|
7 |
</table>
|
Jadi, untuk rekap, seluruh baris kita sekarang seharusnya terlihat seperti ini:
1 |
<tr>
|
2 |
<td class="right-sidebar" dir="rtl"> |
3 |
<!--[if (gte mso 9)|(IE)]>
|
4 |
<table width="100%" dir="rtl">
|
5 |
<tr>
|
6 |
<td width="100">
|
7 |
<![endif]-->
|
8 |
<table class="column left" dir="ltr"> |
9 |
<tr>
|
10 |
<td class="inner contents"> |
11 |
<img src="images/sidebar-02.jpg" width="80" height="80" alt="" /> |
12 |
</td>
|
13 |
</tr>
|
14 |
</table>
|
15 |
<!--[if (gte mso 9)|(IE)]>
|
16 |
</td><td width="500">
|
17 |
<![endif]-->
|
18 |
<table class="column right" dir="ltr"> |
19 |
<tr>
|
20 |
<td class="inner contents"> |
21 |
Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra. <a href="#">Per inceptos</a> |
22 |
</td>
|
23 |
</tr>
|
24 |
</table>
|
25 |
<!--[if (gte mso 9)|(IE)]>
|
26 |
</td>
|
27 |
</tr>
|
28 |
</table>
|
29 |
<![endif]-->
|
30 |
</td>
|
31 |
</tr>
|
Dan akhirnya, mari kita tambahkan styling kita, yang adalah semua persis sama seperti kita .left-sidebar, kecuali untuk warna tautan:
1 |
/* Right sidebar layout */
|
2 |
.right-sidebar { |
3 |
text-align: center; |
4 |
font-size: 0; |
5 |
}
|
6 |
.right-sidebar .column { |
7 |
width: 100%; |
8 |
display: inline-block; |
9 |
vertical-align: middle; |
10 |
}
|
11 |
.right-sidebar .left { |
12 |
max-width: 100px; |
13 |
}
|
14 |
.right-sidebar .right { |
15 |
max-width: 500px; |
16 |
}
|
17 |
.right-sidebar .contents { |
18 |
font-size: 14px; |
19 |
text-align: center; |
20 |
}
|
21 |
.right-sidebar a { |
22 |
color: #70bbd9; |
23 |
}
|
Sana kami pergi! Jadi sekarang kita memiliki dua sidebars pada sisi yang berlawanan, tetapi ketika semuanya tumpukan pada ponsel kedua sidebars muncul di atas teks.
10. Menambah Progressive Enhancement dengan Media Queries
Sekarang Anda memiliki template email lengkap yang responsif di mana pun tanpa satu permintaan media yang terlihat! Tapi tentu saja ada beberapa klien email yang memang mendukung query media, jadi sekarang kita bisa pergi tentang semakin meningkatkan template kita sudah sangat baik dengan beberapa tweak untuk membuat segalanya terlihat indah di klien seperti iOS Mail.
Pertama, kita akan membuat semua kolom kita muncul pada 100% lebar area pandang untuk apa pun hingga 400 piksel. Kita juga akan membatasi gambar tiga kolom kita hingga 50% lebar sehingga tidak melebar terlalu besar. Yang harus kita lakukan adalah me-reset max-lebar kolom ini karena, seperti yang Anda akan ingat, mereka semua sudah memiliki lebar 100% dan itu hanya max-width yang adalah membatasi mereka.
Jadi tambahkan ini ke file CSS Anda:
1 |
/*Media Queries*/
|
2 |
@media screen and (max-width: 400px) { |
3 |
.two-column .column, |
4 |
.three-column .column { |
5 |
max-width: 100% !important; |
6 |
}
|
7 |
.three-column img { |
8 |
max-width: 50% !important; |
9 |
}
|
10 |
}
|
Kemudian, antara 401px dan 600px lebar, kita akan menambahkan hal berikut untuk membuat tata letak dua dan tiga kolom muncul seperti pada desktop, tetapi menyusut agar pas.
1 |
@media screen and (min-width: 401px) and (max-width: 620px) { |
2 |
.three-column .column { |
3 |
max-width: 33% !important; |
4 |
}
|
5 |
.two-column .column { |
6 |
max-width: 50% !important; |
7 |
}
|
8 |
}
|
Ini adalah penyesuaian sewenang-wenang untuk menunjukkan apa yang mungkin — Anda dapat mengutak-atik dan bermain-main dengan ini sebanyak yang Anda inginkan untuk mencapai hasil yang Anda inginkan di seluruh rentang ukuran perangkat yang mendukung kueri media.
11. Memasukkan Kode Anda
Akhirnya, jika Anda perlu inline kode Anda,ambil isi dari style.css dan paste ke<head>dokumen Anda index.html antara <style type="text/css"></style> tag.</head> Lalu copy dan paste seluruh file ke dalam kotak di inliner.cm dan tunggu hasilnya. Setelah diproses, salin isi kotak keluar dan Anda siap untuk pergi!
Dan di sana Anda memilikinya!
Bagus! Kita sekarang memiliki email HTML responsif yang berfungsi penuh menggunakan kurang dari dua puluh baris pertanyaan media.
Beberapa catatan dan tips terakhir
- Saya telah menemukan dengan metode pengembangan email ini bahwa kesederhanaan dan keseragaman adalah kuncinya. Segala sesuatunya mulai tidak terkendali ketika Anda memiliki padding yang berbeda pada kolom yang berbeda. Untuk tutorial ini Anda akan melihat bahwa saya telah membuat padding seragam di 10px pada kelas
.inneryang berlaku setiap tata letak satu tunggal. Ini penting karena ketika semua tumpukan di seluler Anda ingin padding menjadi seragam.
- Kadang-kadang Anda mungkin perlu menghitung keluar untuk menetapkan apa lebar luar dari tata letak Anda, berdasarkan pada apa nilai padding seragam terbaik Anda, daripada memutuskan pada lebar luar dan kemudian bekerja ke dalam.
- Sebaiknya rancang di peramban dengan metode ini, karena seringkali dapat menjadi tantangan untuk retrofit desain tertentu untuk bekerja dengan pendekatan ini.
- Saat menggunakan metode ini, cukup aman untuk mulai mendesain email yang jauh lebih luas daripada biasanya karena Anda tahu tata letaknya akan diatur ulang agar sesuai dengan area pandang yang lebih kecil, bahkan di webmail. Satu-satunya titik yang mencuat adalah Outlook, yang masih membutuhkan tabel bersyarat tersebut sehingga semuanya akan terlihat benar, dan oleh karena itu pengguna Outlook selalu akan melihat seluruh email secara luas. Meskipun Anda masih harus memikul denominator terendah dalam pikiran ini, pasti ada ruang untuk bergerak melampaui batasan 550-600px biasa yang biasanya kami tempatkan di email.
- Dan akhirnya, selalu pastikan bahwa Anda memasukkan gambar pada ukuran piksel fisik mereka. Cara yang baik untuk memastikan bahwa Anda selalu melakukan ini adalah untuk mengode tata letak Anda terlebih dahulu, kemudian gunakan inspektur pada alat browser Anda untuk memeriksa seberapa besar ruang akhir sebenarnya. Anda kemudian dapat memastikan gambar Anda dibuat untuk dimensi-dimensi yang tepat. Ingatlah untuk memeriksa ini lagi di bagian akhir hanya untuk memastikan semuanya benar. Jika Anda tidak melakukan ini, Outlook akan menunjukkan kesalahan cara Anda karena akan menampilkan setiap gambar pada dimensi fisiknya.
Ikon
Terima kasih kembali ke Pierre Borodin untuk semua ikon yang digunakan dalam tutorial saya.
