Praktik-praktik terbaik AMP untuk Email

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-listuntuk 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 atribut controls 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, dan vmax) 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 dari amp-list, action-xhr dari amp-form, src untuk amp-img, atau atribut href dari sebuah tag <a> tidak dapat dimutasi dengan amp-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.