Cara Menggunakan Kerangka Dasar untuk Email untuk Membuat Desain Email yang Responsif

Ada banyak alat pemasaran yang memungkinkan Anda membuat desain email responsif dengan mudah. Masalahnya, Anda mungkin lebih suka memiliki kontrol lebih besar atas tampilan email Anda, dan cara terbaik untuk melakukannya adalah mendesainnya dari awal. Menggunakan kerangka kerja seperti Foundation for Emails memberi Anda kompromi yang luar biasa. Anda tidak akan perlu merancang setiap komponen dari awal, tapi Anda mendapatkan kontrol penuh atas bagaimana, kapan, dan di mana untuk menggunakannya.

Pada artikel ini, pertama-tama kami akan menjelaskan apa itu kerangka kerja email dan bagaimana mereka dapat membantu Anda. Kemudian, kita akan beralih ke pembahasan Foundation for Emails, dan bagaimana Anda dapat menggunakannya untuk membuat kampanye email responsif kustom Anda sendiri. Ayo bekerja!

Apa Kerangka Email Itu (Dan Bagaimana Mereka Dapat Membantu Anda Membuat Email yang Lebih Baik)

Kerangka kerja masih mengharuskan Anda melakukan beberapa pengkodean, tetapi prosesnya sangat sederhana untuk email.

Secara umum, kerangka kerja adalah kompilasi praktik, file, dan kode yang dirancang untuk membantu pengembangan jenis produk tertentu. Anggap mereka sebagai blok pembangun kode yang dapat membantu Anda membuat proyek kompleks lebih cepat, dengan memungkinkan Anda untuk tidak menemukan kembali roda setiap saat.

Ada kerangka kerja untuk email juga, dan itulah yang akan kita bicarakan di artikel ini. Mari kita jelajahi beberapa manfaatnya:

• Elemen bawaan membantu Anda mendesain email lebih cepat. Saat ini, sebagian besar email menyertakan elemen di luar gambar dan teks, seperti tombol dan menu. Menyertakan elemen-elemen ini dapat memakan waktu, tetapi kerangka kerja memungkinkan Anda untuk menyisipkan dan menyesuaikannya secara instan.
• Responsif di luar kotak. Karena semakin banyak orang beralih ke perangkat seluler, Anda perlu memastikan email Anda ditampilkan dengan baik di layar mereka. Sebagian besar kerangka kerja modern responsif secara default, yang berarti Anda tidak perlu khawatir lagi.
• Template dapat membantu Anda memulai desain Anda. Banyak kerangka kerja email modern menyertakan berbagai templat untuk membantu Anda membuat kampanye dengan cepat.

Seperti yang Anda lihat, tema umum di sini adalah kerangka kerja memungkinkan Anda menghemat waktu. Ada banyak kasus di mana Anda ingin membuat kode proyek Anda dari awal, tetapi kerangka kerja yang memungkinkan Anda menyelesaikan sesuatu lebih cepat dengan kualitas yang lebih tinggi layak digunakan.

Pengantar Kerangka Dasar untuk Email

Sebelum melangkah lebih jauh, penting untuk dicatat bahwa ada dua kerangka kerja Foundation yang tersedia secara online – Foundation untuk Situs dan Foundation untuk Email – dan kami akan fokus pada yang terakhir di sepanjang artikel ini. Nilai jual utama adalah grid responsifnya. Jenis sistem ini tidak revolusioner, tetapi popularitas Foundation didasarkan pada kemudahan penggunaannya.

Mengambil kerangka kerja cukup mudah (bahkan jika Anda tidak memiliki pengalaman pengkodean), dan Anda dapat memilih antara dua versi – satu berdasarkan Cascading Stylesheets (CSS) dan yang lainnya pada Sass. Tentu, versi Sass memungkinkan Anda untuk menyimpan lebih banyak waktu dengan menghilangkan kebutuhan untuk mengulang stylings CSS, tetapi tidak memerlukan beberapa keakraban dengan Node.js.

Terakhir, Foundation for Email juga menyediakan banyak 'pola' seperti tombol dan menu untuk membuat pekerjaan Anda lebih sederhana. Untuk menghemat lebih banyak waktu, Anda bahkan dapat menggunakan templat alih-alih mendesain tata letak dari awal.

Fitur Utama:

• Menggunakan kisi responsif untuk membuat kampanye email modern.
• Menawarkan versi kerangka kerja CSS atau Sass.
• Memungkinkan Anda memanfaatkan pola untuk menambahkan elemen umum ke email Anda dengan cepat.
• Menggunakan tata letak untuk merampingkan proses pembuatan email lebih jauh.

Harga: Gratis | Informasi Lebih Lanjut

Cara Menggunakan Foundation untuk Email untuk Membuat Desain Modern (Dalam 4 Langkah)

Seperti yang kami sebutkan, ada dua versi Foundation for Emails. Untuk bagian ini, kita akan menggunakan variasi CSS karena membutuhkan lebih sedikit pekerjaan untuk menyiapkannya. Selain itu, hasil akhirnya akan terlihat sama – yang berubah hanyalah cara Anda mencapainya.

Jika Anda ingin melihat versi Sass beraksi atau mempelajari lebih lanjut tentang cara menggunakannya, Anda dapat memulai dengan tutorial hebat ini.

Langkah #1: Unduh Foundation untuk File Email

Pertama-tama, buka halaman Foundation for Email Getting Started , dan klik tombol Unduh Starter Kit di bawah subjudul Versi CSS :

Setelah Anda mendapatkan file, unzip dan ekstrak isinya ke dalam folder baru. Pada tahap ini, folder Anda harus berisi file index.html dan dua subfolder – satu untuk CSS Anda dan satu lagi untuk template Anda.

Untuk saat ini, jalankan editor teks favorit Anda dan buka file index.html dengannya. Seharusnya cukup terbuka, tapi kami akan memperbaikinya sebentar lagi.

Langkah #2: Biasakan Diri Anda Dengan Sistem Grid

Foundation for Responsivitas Email didasarkan pada sistem grid yang fleksibel. Jika Anda menyusun email dari awal, Anda dapat membuat kisi sendiri untuk mengelompokkan bagian email Anda. Untuk melakukannya, kita akan menggunakan tiga komponen berbeda: container, rows, dan column.

Buka file index.html Yayasan Anda dalam editor teks Anda, dan gulir ke bawah ke bagian tubuh:

<body>
<!-- <style> -->
<table class="body" data-made-with-foundation>
<tr>
<td class="float-center" align="center" valign="top">
<center>
<!--  Your grid goes here  -->          
</center>
</td>
</tr>
</table>
</body>
</html>

Seperti yang Anda lihat, isi email Anda berisi tabel prasetel yang tidak akan kami sentuh. Sebagai gantinya, kita hanya akan menambahkan elemen grid kita sendiri ke bagian yang bertuliskan <!– Grid Anda ada di sini –> . Mari kita mulai dengan kode yang perlu Anda gunakan untuk wadah Anda:

<table class="container">
<tr>
<td></td>
</tr>
</table>

Sekarang, mari tambahkan baris di sana:

<table class="row"> <tr> <th></th> </tr> </table> 

Akhirnya, kita dapat membagi baris itu menjadi kolom:

<table class="row">
<tr>
<th class="small-12 large-6 first columns">
Column One
</th>
<th class="expander"></th>
</tr>
</table>

Perlu diingat bahwa setiap baris terdiri dari hingga 12 kolom. Kode di atas memberi tahu klien email Anda bahwa itu harus menampilkan konten Anda menggunakan 12 kolom penuh di layar kecil seperti perangkat seluler ( small-12 ), tetapi hanya membutuhkan enam di desktop ( besar-6 ).

Masalahnya, jika email Anda muncul di layar besar ada enam kolom kosong, jadi kita perlu menambahkan tabel kedua untuk memperbaikinya:

<table class="row">
<tr>
<th class="small-12 large-6 first columns">
Column One
</th>
<th class="small-12 large-6 last columns">
Column Two
</th>
<th class="expander"></th>
</tr>
</table>

Seperti yang Anda lihat, kedua kolom pada dasarnya sama. Namun, mereka memiliki dua kelas yang berbeda, kolom pertama dan kolom terakhir . Ini memberi tahu klien email Anda yang merupakan kolom pertama dan terakhir di baris Anda, dan kolom apa pun di antaranya tidak perlu menggunakannya.

Jika Anda sekarang membuka file index.html di browser, inilah yang akan Anda lihat:

Ini cukup telanjang, ya, tetapi mekanismenya harus jelas pada tahap ini. Setiap email dapat memiliki baris sebanyak yang Anda inginkan, dan Anda dapat memiliki hingga 12 kolom untuk setiap baris. Untuk saat ini, teruslah bermain-main dengan sistem kisi hingga Anda menemukan tata letak yang Anda sukai, dan gunakan penampung teks untuk membantu Anda mengidentifikasinya hingga Anda mulai menambahkan elemen.

Langkah #3: Tambahkan Komponen ke Email Anda

Pondasi untuk paket Email dalam banyak komponen, dan yang paling umum digunakan adalah tombol, gambar latar belakang, dan subjudul. Mereka cukup sederhana, jadi mari kita bahas secara berurutan. Untuk menambahkan tombol, Anda harus menggunakan kode berikut dalam satu atau beberapa kolom Anda:

<table class="button tiny success">
<tr>
<td>
<table>
<tr>
<td><a href="#">The text of your button</a></td>
</tr>
</table>
</td>
</tr>
</table>

Kode ini menambahkan tombol kecil sederhana dengan latar belakang hijau ke email Anda. Elemen kunci di sini adalah kelas kecil dan kelas sukses . Yang pertama mengatur ukuran tombol Anda, dan yang kedua warnanya. Alih-alih menambahkan semua kelas yang tersedia di sini, kami akan menautkan Anda ke sumber resmi Foundation pada tombol di mana Anda dapat membaca dengan teliti di waktu luang Anda.

Sekarang mari kita beralih ke gambar latar belakang. Ini sedikit lebih rumit, karena Anda perlu menggunakan kelas pembungkus untuk membuatnya mengambil seluruh lebar baris Anda dan menetapkan latar belakang khusus untuk mereka menggunakan CSS:

<table class="wrapper" align="center">
<tr>
<td class="wrapper-inner">
Your content
</td>
</tr>
</table>

Last but not least, mari kita bicara tentang subpos. Ini adalah yang paling sederhana – yang perlu Anda lakukan adalah membungkus teks Anda di dalam tag yang diperlukan:

<h1>h1. This is a very large header.</h1>
<h2>h2. This is a large header.</h2>
<h3>h3. This is a medium header.</h3>

Semudah itu! Menggunakan tiga elemen ini sudah cukup untuk membuat beberapa email yang bagus. Rahasianya, tentu saja, adalah menatanya dengan CSS sesuka hati Anda, yang membawa kita ke langkah terakhir.

Langkah #4: Gaya Email Anda Menggunakan CSS

Beberapa klien email (seperti Microsoft Outlook) menghapus beberapa tag gaya dari file HTML Anda. Ini dilakukan agar email ditampilkan tanpa masalah, serta untuk menghapus potensi ancaman keamanan. Namun, hasilnya adalah email Anda akan terlihat sangat membosankan kecuali jika Anda menambahkan CSS langsung ke HTML Anda (atau sebaris ).

Dengan begitu, konten Anda dan gayanya akan dimuat sebagai satu file, dan keduanya akan berfungsi dengan baik di sebagian besar klien email modern. Berikut tampilan elemen HTML dengan CSS sebaris:

<table class="wrapper" align="center"><tbody><tr><td class="wrapper-inner" style="padding:20px">content</td></tr>

Ini bisa menjadi sedikit berantakan, jadi sebaiknya kerjakan file HTML dan CSS Anda secara terpisah, lalu gunakan alat seperti Foundation Inliner untuk menggabungkannya untuk Anda. Cukup rekatkan kode Anda, klik tombol, dan sisanya akan mengurus Anda.

Setelah Anda memiliki file HTML sebaris, Anda dapat melanjutkan dan mengujinya menggunakan alat pemasaran email, yang selalu merupakan ide bagus, sebelum mengirimkannya ke pelanggan Anda.

Kesimpulan

Ada banyak cara untuk membuat email yang fungsional dan responsif. Namun, menggunakan kerangka kerja seperti Foundation for Emails adalah pilihan yang bagus jika Anda mencari fleksibilitas. Ini memungkinkan Anda untuk mendesain email dari awal menggunakan komponen yang dibuat sebelumnya, atau mempercepat prosesnya dengan menggunakan template. Terlepas dari apa yang Anda pilih, itu akan mengurangi waktu Anda untuk membuat email secara drastis.

Untuk rekap, berikut adalah empat langkah yang Anda butuhkan untuk membuat email modern dengan Foundation for Emails:

1. Unduh file kerangka kerja.
2. Biasakan diri Anda dengan sistem grid.
3. Gunakan komponen untuk email Anda.
4. Gaya email Anda menggunakan CSS.

Apakah Anda memiliki pertanyaan tentang cara menggunakan kerangka Foundation for Emails? Tanyakan di bagian komentar di bawah!

Gambar thumbnail artikel oleh Faberr Ink / shutterstock.com.