Fungsionalitas Desain AMP: Apa Lagi yang Mungkin dengan Framework?

Meskipun telah mencapai tingkat kerumitan desain yang mengesankan, tetap saja, beberapa orang melihat AMP sebagai kerangka kerja yang terbatas. Dalam pembelaannya, gaya AMP dimulai dengan fokus membatasi halaman untuk meningkatkan kecepatan pemuatan. Dan, sementara kecepatan tetap menjadi tujuan utamanya, keterbatasan desain menjadi jauh lebih sedikit.

Desainer tidak lagi dibatasi untuk memublikasikan konten statis dengan AMP. Hari ini, ini adalah kerangka kerja serbaguna yang mendukung desain yang kuat. Jika Anda menulisnya sejak lama sebagai kerangka kerja yang kaku dan sederhana yang tidak sepadan dengan waktu Anda, kompilasi ini mungkin memaksa Anda untuk memikirkan kembali pendirian Anda.

9 kemampuan desain AMP yang mungkin belum Anda ketahui

(Untuk detail selengkapnya tentang kemungkinan dengan AMP, bergabunglah dengan kami di webinar mendatang saat kami membahas kesalahpahaman umum tentang AMP. Dapatkan semua pertanyaan AMP Anda dijawab oleh pakar yang mempelopori Proyek AMP.)

1. Membangun aplikasi web progresif (PWA)

Meskipun web seluler telah menempuh perjalanan panjang, perjalanannya masih panjang. Laporan menunjukkan bahwa, meskipun 1.000 situs web seluler teratas menjangkau 4x lebih banyak orang daripada 1.000 aplikasi seluler teratas, mereka melibatkan pengguna selama 20x lebih sedikit menit. Situs seluler menarik pengunjung, tetapi mereka tidak dapat memberikan kegunaan intuitif dari aplikasi asli. Di sinilah aplikasi web progresif masuk.

Aplikasi web progresif mencoba memecahkan masalah kegunaan dengan menawarkan pengalaman hibrida yang membawa pengguna ke situs seluler, dan meminta mereka untuk mengunduh ikon yang ada di layar beranda mereka seperti aplikasi asli. Saat dibuka, pengalaman dirancang untuk terlihat dan berperilaku seperti aplikasi seluler asli.

Dikombinasikan dengan AMP, PWA ini dapat ditendang dengan kecepatan tinggi. Berikut adalah beberapa cara Anda dapat menggunakannya bersama-sama:

AMP sebagai PWA

Jika aplikasi web progresif Anda tidak memerlukan penggunaan penuh bahasa pengkodean yang dibatasi oleh AMP, kerangka kerja dapat menyediakan semua yang Anda butuhkan untuk membuat PWA Anda sendiri. Faktanya, “AMP by Example” adalah contoh kerja kombinasi:

AMP di PWA

AMP dan PWA tidak semuanya atau tidak sama sekali. Bukannya Anda tidak dapat menggunakan tata letak AMP untuk beberapa PWA Anda, tetapi tidak semuanya. Jika Anda menemukan aplikasi web progresif Anda tidak dapat beroperasi di bawah batasan pengkodean CSS AMP, Anda dapat menggunakan bentuk kerangka kerja yang disebut "AMP Bayangan". Hal ini memungkinkan AMP untuk bersarang di bagian lain dari situs Anda, sehingga Anda dapat AMP apa yang Anda inginkan dan bukan apa yang tidak Anda inginkan.

AMP ke PWA

Bahkan jika menurut Anda PWA Anda tidak dapat beroperasi di bawah batasan AMP, Anda masih dapat menggunakan gaya AMP untuk menarik pengguna ke sana. Dengan peningkatan visibilitas AMP di mesin telusur, ini membuat penerbitan berita dan posting blog dengan kerangka kerja menjadi mudah. Ketika mereka mengklik ke halaman AMP Anda, pengunjung kemudian akan diminta untuk mengunduh PWA Anda.

2. Untuk membuat halaman checkout

Sementara AMP masih berupaya mengaktifkan variasi transaksi yang lebih luas, kini Anda dapat menerima pembayaran di halaman yang dirancang AMP. Dengan formulir sederhana, kumpulkan detail yang diperlukan untuk pembayaran seperti nama, alamat, detail kartu kredit, dan bahkan terima kode promosi:

Prioritas besar berikutnya untuk tim AMP adalah komponen pembayaran yang “lebih kuat” bagi pengguna. Dalam peta jalan produk mereka, mereka menulis:

AMP saat ini mendukung transaksi hanya dalam konteks terbatas seperti melalui amp-iframe dengan API Permintaan Pembayaran -- namun hal ini menghilangkan banyak kasus penggunaan penting. Aktivitas ini akan menerapkan komponen pembayaran yang lebih kuat di AMP, yang berpotensi mencakup integrasi dengan pemroses pembayaran pihak ketiga, widget, dompet, dll (ini harus didukung bagaimanapun caranya).

3. Untuk membangun bagian komentar

Jika dilakukan dengan benar, bagian komentar dapat menjadi sumber diskusi yang produktif, ide konten, dan bahkan arahan. Dan sekarang, dengan AMP, desainer dapat membuat bagian komentar tempat pengguna dapat terlibat dalam diskusi tersebut, dan bahkan memerlukan login, yang memungkinkan pengguna untuk berdiskusi dengan cara yang lebih pribadi:

4. Cerita AMP

Jika Anda pernah melihat Snapchat, Instagram, atau cerita Facebook, cerita AMP akan terlihat sangat akrab. Menurut Rudy Galfi, Manajer Produk untuk AMP di Google, cerita menawarkan kepada penerbit "format yang berfokus pada seluler untuk menyampaikan berita dan informasi sebagai cerita tap-through yang kaya visual:"

Menurut Galfi, penerbit seperti CNN, Conde Nast, Hearst, Mashable, Meredith, Mic, Vox Media, dan The Washington Post telah terlibat dalam pengembangan awal format. Sekarang, ini tersedia untuk semua pengguna, dan sejauh dapat ditemukan, Anda dapat menemukan cerita AMP di Google Gambar, Discover, Search, dan News.

Berikut ini contoh tampilan yang mungkin terlihat:

5. Dapatkan visibilitas tambahan di Bing

Dalam posting blog baru-baru ini, Fabrice Canel, Manajer Program Utama di Bing, mengumumkan fitur baru untuk mesin pencari perusahaan:

Pada tahun 2016, Bing bergabung dengan upaya sumber terbuka Accelerated Mobile Pages (singkatnya AMP) untuk membantu Anda "menemukan" dan "melakukan" pencarian lebih cepat, di mana pun Anda berada dan di perangkat apa pun saat Anda mencari informasi. Hari ini, kami dengan senang hati mengumumkan rilis Bing AMP viewer dan Bing AMP Cache yang memungkinkan halaman web berkemampuan AMP bekerja langsung dari hasil pencarian seluler Bing yang memungkinkan Bing memberikan pengalaman seluler yang lebih cepat kepada pengguna Bing.

Penampil ini terlihat mirip dengan Google — korsel yang menampilkan gambar dengan petir untuk menunjukkan konten yang mendukung AMP:

Sekarang, selain lalu lintas mesin pencari dari Google, pengguna AMP dapat mengharapkan real estat prioritas di halaman hasil mesin pencari Bing.

6. Buat efek terikat gulir

Sering kali, efek scroll-bound menghalangi pengalaman pengguna. Mereka menarik, tetapi tidak seperti yang Anda inginkan. Mereka mengalihkan perhatian dari konten utama halaman dan dapat menambah banyak bobot halaman tergantung pada implementasi efeknya.

Namun, terkadang, konten sasaran halaman (yang Anda benar-benar ingin pengunjung Anda konsumsi) adalah citra yang Anda tambahkan efeknya. Ambil portofolio online freelancer, misalnya, atau situs web agen pengembangan web. Dalam hal ini, efek menunjukkan kemampuan desainer.

Namun, jika desain itu tidak diterapkan dengan baik, itu dapat menambah bobot halaman, yang membuatnya lebih lambat untuk memuat dan kecil kemungkinannya prospek bertahan. Untuk mengatasi masalah itu, Anda dapat menggabungkan amp-position-observer dengan amp-animation untuk membuat sejumlah efek yang menarik namun cepat dimuat:

Animasi terikat-gulir

Animasi scroll-bound dapat menghidupkan gambar saat pengguna menggulir halaman Anda. Ambil fidget spinner yang dibuat dengan AMP ini, misalnya, yang berputar saat pengguna men-scroll.

Transisi pudar & geser

Dengan transisi fade dan slide, Anda dapat menggabungkan efek timebound dan scrollbound untuk transisi yang sensitif terhadap waktu. Misalnya, Anda dapat membuat efek di mana teks meluncur ke gambar saat gambar itu berada dalam tampilan penuh pengguna. Dan dengan efek fade, Anda dapat memudarkan gambar itu saat pengguna mendekatinya, dan memudarkannya saat pengguna menggulir. Lihat aksinya di sini.

Korsel

Efek transisi juga dapat digunakan dengan carousel AMP:

Pada contoh di atas, gambar sungai sebagian tersembunyi. Namun, dengan menambahkan efek scrollbound, itu akan bergeser ke kiri dalam tampilan penuh ketika pengguna menggulir ke sana, menunjukkan bahwa itu dapat digulir secara horizontal.

Jendela paralaks

Dengan mendefinisikan break window yang lebih kecil dari gambar, Anda dapat membuat efek paralaks:

Jendela ini lebih kecil dari gambar, dan saat pengguna menggulir, jendela bergerak ke bawah, memperlihatkan sisa gajah dalam gambar.

7. Perkuat email Anda

Anda tahu tentang mempercepat halaman web, tapi bagaimana dengan email? AMP untuk email terlihat membawa kecepatan dan kegunaan halaman AMP yang sama ke Gmail. Memungkinkan pengembang mengirim email sebagai dokumen AMP, potensi AMP untuk email adalah kemampuannya untuk menciptakan pengalaman yang kaya bagi pengguna.

Aakash Sahney, Manajer Produk di Gmail dan Obrolan, mengatakan AMP baru untuk spesifikasi email akan menjadi “cara yang ampuh bagi pengembang untuk menciptakan pengalaman email yang lebih menarik, interaktif, dan dapat ditindaklanjuti.” Dengan itu, pengguna dapat menyelesaikan tugas melalui Gmail, seperti RSVP ke suatu acara, membuat janji temu, atau mengisi kuesioner, untuk beberapa nama.

Pinterest, Booking.com, dan Doodle adalah yang pertama menguji AMP untuk spesifikasi email:

Spesifikasi AMP untuk email tersedia saat ini, tetapi hanya dengan akses pratinjau pengembang melalui pendaftaran di sini.

8. Untuk dengan mudah membuat halaman arahan pasca-klik berkecepatan tinggi

Dalam hal meningkatkan tingkat konversi, mengoptimalkan halaman arahan pasca-klik harus menjadi prioritas. Namun, membuat halaman arahan pasca-klik untuk setiap promosi, AMP atau tidak, dapat dengan cepat menghabiskan sumber daya tim. Itu sebabnya kami membuat fungsionalitas AMP di pembuat Instapage:

Sekarang Anda dapat membuat halaman arahan pasca-klik AMP dengan kecepatan kilat yang dimuat dengan kecepatan kilat. Cukup seret dan lepas elemen, klik untuk mengedit, dan simpan elemen apa pun untuk ditambahkan ke halaman berikutnya.

Saat Anda membangun, Anda akan diberi tahu jika Anda mendekati batas berat halaman AMP sebesar 75kb. Saat Anda mencapai 80% dari batas, indikator peringatan ini muncul di dekat bagian bawah layar:

Jika tidak, Anda dapat memublikasikannya ke WordPress atau domain kustom Anda sendiri:

9. Untuk mengoptimalkan halaman arahan pasca-klik Anda

Membuat halaman arahan pasca-klik AMP yang bagus adalah satu hal, tetapi meningkatkannya adalah sesuatu yang sama sekali berbeda. Dalam hal menemukan cara untuk meningkatkan tingkat konversi halaman arahan pasca-klik AMP Anda, tempat yang bagus untuk memulai adalah dengan pengujian A/B.

Pengujian A/B melibatkan pengujian halaman asli, yang disebut kontrol, terhadap halaman alternatif, yang disebut variasi. Dalam istilah yang sangat mendasar, pemenang setelah lalu lintas yang sama didorong ke masing-masing halaman adalah halaman yang lebih baik (untuk penjelasan lebih rinci, lihat panduan pengujian A/B Instapage).
Tampaknya mudah secara teori, tetapi tentu saja tidak. Dibutuhkan pengetahuan tentang desain pengujian, ancaman validitas, perangkat lunak, dan banyak lagi. Dan yang paling sulit adalah bahwa setiap pengujian yang Anda jalankan, Anda harus membuat setidaknya satu halaman yang benar-benar baru.

Untungnya, Instapage memungkinkan Anda untuk menduplikasi halaman arahan pasca-klik AMP Anda dengan satu klik:

Cukup pilih "Buat Tes A/B," lalu "Variasi Baru," dan Anda akan menduplikasi halaman Anda dan mengedit dari sana, atau benar-benar memulai dari awal dan mengimpor blok teks, blok gambar, widget, dan lainnya yang tersimpan menggunakan "Instablocks" fitur. Kemudian, jalankan pengujian Anda, dan terapkan desain pemenang.

Dapatkan lebih banyak di webinar Google AMP

Adopsi AMP hanya tumbuh. Sekarang, lebih dari 31 juta domain telah membuat lebih dari 5 miliar halaman AMP. Dan menurut studi antarbenua oleh WPengine, 99% pengguna melihat manfaat menggunakan AMP untuk organisasi mereka.

AMP bukan lagi kerangka kerja sederhana yang dibatasi. Saat ini, ia mampu membangun seluruh situs web yang dimuat secara instan. Dan, dengan rencana di cakrawala untuk membuat sistem pembayaran yang lebih kuat, efek tambahan, dan Integrasi Google Play, itu hanya menjadi lebih kuat.

Pikirkan Anda tahu AMP? Pelajari lebih lanjut tentang mitos kerangka kerja dengan Instapage dan pembuatnya, Google, di webinar eksklusif kami. Kemudian, dapatkan demo AMP kustom di sini dan lihat betapa mudahnya membuat halaman AMP secepat kilat.