Bisakah Email Menjadi Responsif?


8

Suka atau benci, tidak dapat disangkal popularitas email HTML. Dan, seperti web sebelumnya, kotak masuknya sudah resmi seluler — dengan lebih dari 50 persen email dibuka di perangkat seluler.

Jadi bisakah email benar-benar responsif mengingat bagaimana Email HTML Suck?


Bukankah itu tergantung pada aplikasi email, sebagian besar formulir email web akan mendahului tujuan Anda karena membungkus HTML Anda
joojaa

Periksa DEVTIPS di youtube. Saya cukup yakin ada video tentang Email responsif.
Komental

Saya memang suka pertanyaan Anda tetapi saat ini apakah Anda keberatan mengeditnya agar sesuai dengan bidang "desain" karena ini mungkin akan lebih cocok pada SO dalam arti seseorang akan menjamin ini adalah pertanyaan terkait kode dan bukan desain pertanyaan terkait.
DᴀʀᴛʜVᴀᴅᴇʀ

Bukankah ini hanya masalah menggunakan% dalam tabel? Saya sudah membuat templat mailchimp hanya dengan% yang membuatnya sempurna untuk setiap perangkat ..
rwzdoorn

Jawaban:


3

Jadi dapatkah email benar-benar responsif

Jawaban sederhana untuk pertanyaan Anda .. YA

Email HTML jatuh agak di bawah aturan situs web yang sama tetapi biasanya mereka lebih sulit untuk ditangani dan masih mengandalkan gaya kode tanggal lama menggunakan <table>tag. Ada artikel hebat dari Tuts Desain Web yang saya harap ada saat saya mulai melakukan email HTML.

Sedikit tentang tutorial itu membahas bagaimana membuat email responsif dan satu catatan penting ketika membuat email HTML adalah CSS harus inline di akhir. Itu membahas bagaimana menargetkan CSS untuk Yahoo body[yahoo] .class {}dan mereka referensi artikel Tina Ye pada " Email HTML Responsif: Strategi Berbeda ".

Karena artikel Webdesign Tuts tidak merinci lebih banyak tentang artikel Tina, saya akan merekomendasikan Anda membacanya karena ia masuk ke metode desain pertama seluler dan menunjukkan cara mendesain untuk Lotus 8, Outlook 00-03, Outlook 2007+, dan Apple :

Lotus Notes 8 & Outlook 2000-2003

 <!--[if IE]>
  <table width="540" align="center" cellpadding="0" cellspacing="0" border="0">
    <tr>
      <td>
<![endif]-->
[EMAIL BODY HERE]
<!--[if IE]>
      </td>
    </tr>
  </table>
<![endif]-->

Outlook 2007+

<!--[if (gte mso 9)|(IE)]>
  <table width="540" align="center" cellpadding="0" cellspacing="0" border="0">
    <tr>
      <td>
<![endif]-->
[EMAIL BODY HERE]
<!--[if (gte mso 9)|(IE)]>
      </td>
    </tr>
  </table>
<![endif]-->

Apple Mail

@media only screen and (min-device-width: 541px) {
  .content {
    width: 540px !important;
  }
}

Jika Anda melakukan pencarian Google untuk template email responsif ada sebuah artikel yang disebut " 32 Template Email Responsif untuk Bisnis Kecil Anda " oleh Mashable.
Itu membahas template gratis dan berbayar untuk email Anda dan masuk ke Zurb yang saya sarankan jika Anda menggunakan Foundation untuk desain web.


1

Mereka yakin bisa! Berikut template yang dapat Anda gunakan untuk membuat email HTML responsif: http://zurb.com/ink/ . Membuat email HTML dari awal membutuhkan banyak pengetahuan tentang cara klien mengurai email. Template ini memastikan bahwa email Anda muncul dengan benar di semua klien email.

Yang perlu Anda lakukan adalah mengganti konten file dengan email Anda dan menjalankan file ini melalui skrip di aplikasi Anda yang menangani pengiriman email.


1
Harap berikan informasi lebih lanjut tentang tautan yang Anda berikan karena saat ini hanya tautan yang merupakan jawaban dan di masa mendatang jika situs akan turun, Anda mungkin menerima beberapa downvotes.
DᴀʀᴛʜVᴀᴅᴇʀ

1
Diedit jawabannya.
Nag

Sumber daya bagus, sangat menarik (dan didokumentasikan dengan baik!).
user56reinstatemonica8

1

Ya Anda bisa, tetapi kecuali Anda memiliki hasrat besar untuk ini, jangan repot-repot. Bayangkan coding untuk IE5 dan harus mengujinya. Mungkin lebih baik untuk membeli template untuk hal semacam ini daripada melakukan solusi Anda sendiri yang dipesan lebih dahulu.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.