Praktik-praktik terbaik AMP untuk Email
Important: this documentation is not applicable to your currently selected format ads!
AMP memungkinkan jenis-jenis baru yang menarik untuk konten yang lebih menghanyutkan dan menyenangkan di email! Saat mendesain email, ingatlah untuk mengikuti praktik-praktik terbaik untuk memastikan email tersebut efektif, dapat diandalkan di seluruh platform, dan bekerja sesuai harapan pengguna Anda.
Kecepatan
Saat menggunakan amp-list
untuk secara dinamis menjemput konten, sertakan placeholder (sediaan tempat) untuk menjaga integritas struktur komponen. Placeholder tersebut harus semirip mungkin tata letaknya dengan dokumen setelah dikembalikan ke data yang diminta. Ini memastikan ukuran pesan tidak berubah atau memutasi tata letak secara drastis.
Kegunaan dan aksesibilitas
- Saat menggunakan
amp-carousel
, pastikan bahwa atributcontrols
sudah ditetapkan. Ini memungkinkan pengguna perangkat layar sentuh, seperti ponsel cerdas, untuk bernavigasi di korsel (carousel). - Saat menggunakan
amp-form
, ingatlah bahwa tidak semua jenis input didukung di iOS. Kunjungi Nilai-Nilai Input yang Didukung di Referensi HTML Safari untuk mendapatkan informasi selengkapnya. - Tidak semua nilai-nilai atribut
autocomplete
didukung di semua aplikasi dan browser yang berbeda. Anggap bahwa pengisian otomatis tidak tersedia bagi pengguna Anda dan jaga agar formulir singkat.
Pengaturan gaya
- Pastikan bahwa email Anda hanya menggunakan CSS yang Didukung AMP untuk Email
- Hindari menggunakan unit viewport (
vw
,vh
,vmin
, danvmax
) di mana pun di CSS dan HTML Anda. Karena email AMP merender di dalam sebuah iframe, viewport email tidak sesuai dengan viewport browser. - Browser berbeda mempunyai pengaturan gaya CSS default yang berbeda. Gunakan perpustakaan CSS yang menormalkan gaya jika diperlukan. Untuk mendapatkan informasi selengkapnya tentang gaya default atau standar, normalisasi gaya, dan daftar perpustakaan yang tersedia, kunjungi Reboot, Reset, dan Alasan.
- Berhati-hatilah dengan margin yang berlebihan di CSS: ini mungkin tidak dapat dirender karena pembatasan tata letak AMP.
Perangkat seluler
Pastikan pesan Anda tampil bagus di semua ukuran layar dengan menggunakan kueri media CSS untuk mengidentifikasi perangkat. Pesan-pesan harus diuji pada perangkat seluler untuk memastikan bahwa tata letak sudah benar dan komponen berfungsi sesuai perkiraan.
Gotcha Lainnya
Saat mengerjakan AMP untuk Email, ingatlah kiat dan trik berikut ini:
- Playground AMP untuk Email tidak mewakili XHR, namun beberapa penyedia email melakukannya.
- Bagian MIME AMP harus muncul sebelum bagian MIME HTML di email Anda untuk memastikan kompatibilitas maksimal di semua klien email.
- Atribut
src
dariamp-list
,action-xhr
dariamp-form
,src
untukamp-img
, atau atribut href dari sebuah tag<a>
tidak dapat dimutasi denganamp-bind
. - Pesan-pesan Anda harus menyertakan versi HTML statis di dalam peristiwa di mana pengguna dibawa ke versi HTML pesan, atau jika pengguna itu meneruskan pesan tersebut.