Fondasi yang kokoh
Fondasi yang kuat adalah persyaratan dasar untuk membangun PWA yang hebat. Untuk menerapkan fondasi ini, Anda perlu mendesain dan membuat kode untuk batasan web menggunakan beberapa prinsip:
- Gunakan perangkat seluler sebagai batasan fokus. Pastikan setiap tampilan desain Anda hanya berfokus pada konten dan interaksi penting.
- Tekankan konten dan fungsionalitas inti dalam proses desain.
- Lakukan peningkatan secara progresif jika diperlukan. Mulailah dengan membangun fungsi dan konten inti komponen dengan alat paling mudah yang paling banyak tersedia. Buat agar mudah diakses. Kemudian, uji fitur lanjutan yang ingin Anda gunakan dan tingkatkan komponen dengan fitur tersebut.
- Tawarkan pengalaman pengguna yang cepat dan baik dengan fokus pada metrik performa web yang berpusat pada pengguna, dapatkan metrik pengguna nyata, dan dorong performa untuk semua pengguna Anda, terlepas dari koneksi jaringan, jenis input, CPU, atau daya GPU mereka.
Dengan mengikuti prinsip ini dan meningkatkan dengan pola modern dan fitur web, Anda dapat menciptakan pengalaman hebat dan cepat dengan desain yang benar-benar intrinsik. Desain yang diberdayakan oleh batasan, bukan piksel, memungkinkan setiap pengguna mengakses konten dan fungsi inti dengan cara yang paling sesuai dengan konteks penjelajahan mereka.
Desain web yang responsif
Sejak artikel A List Apart oleh Ethan Marcotte pada tahun 2010, Desain Web Responsif, desainer dan developer telah didorong untuk menciptakan pengalaman yang fleksibel, membuat antarmuka pengguna yang berfungsi di berbagai ukuran layar dan perangkat.
Namun, di suatu waktu, ukuran tersebut dipersingkat menjadi ukuran seluler, tablet, dan desktop, dengan lebar yang sangat dipengaruhi oleh ukuran layar iOS. Dengan CSS modern dan fokus baru pada tujuan awal dari desain responsif, kita dapat mengembalikan squish ke dalam situs yang squishy.
Desain web responsif memperkenalkan tiga bahan teknis:
- Petak yang dapat disesuaikan
- Media fleksibel
- Kueri media
Ethan menyimpulkan bahwa persyaratan teknis ini belum cukup; untuk maju, juga dibutuhkan cara berpikir yang berbeda.
Mitos pengguna seluler
Pada hari-hari awal asumsi desain responsif dibuat dengan nama membuat situs lebih mudah dirancang. Misalnya, pengalaman kecil untuk ponsel, lebar 320 piksel, pengalaman sedang untuk tablet, dan lebar 1024 piksel, serta ukuran yang lebih besar untuk desktop. Perangkat layar kecil memiliki kemampuan sentuh, sedangkan perangkat layar besar tidak. Pengguna ponsel terburu-buru dan terganggu, sehingga membutuhkan pengalaman "terang".
Tidak satu pun dari semua ini yang benar; itu adalah mitos seluler yang dibuat oleh asumsi bahwa kebutuhan pengguna pada dasarnya berbeda hanya berdasarkan ukuran layar atau jenis perangkat. Hal ini tidak bisa menjadi alasan untuk pemeriksaan.
Misalnya, PWA jaringan sosial yang saat ini dapat Anda instal di perangkat seluler dan desktop. Di desktop, banyak pengguna dapat mempertahankan jendela sempit dengan feed berada di satu sisi layar sambil bekerja, dan menganggap mereka menggunakan perangkat seluler karena lebar yang tersedia akan salah.
Dunia PWA yang di luar tab browser bahkan menambahkan tantangan baru ke dunia desain yang responsif, seperti mode mini dan bekerja dengan perangkat foldable.
Mode mini
Dengan PWA yang diinstal di perangkat desktop, jendela bisa menjadi sangat kecil; lebih kecil dari jendela browser, lebih kecil daripada area pandang seluler. Ini adalah hal baru di web: kita dapat mendukung mode mini, yaitu jendela yang sekecil 200x100 piksel CSS.
Saat membuat PWA sekarang, ada baiknya untuk memikirkan apa yang bisa ditawarkan dalam mode mini, berkat desain web yang responsif, seperti tombol kontrol pada pemutar musik, informasi dasbor, atau tindakan cepat.
Di desktop, PWA dapat dirender dalam jendela yang lebih kecil daripada jendela terkecil yang pernah Anda desain untuk browser. Kode ini menambahkan titik henti sementara baru untuk desain web responsif Anda: mode mini.
Perangkat foldable dan hybrid
Perangkat foldable dan hybrid juga umum digunakan saat ini:
- Ponsel konvensional kecil.
- Perangkat foldable yang dapat digunakan sebagai ponsel atau tablet.
- Laptop yang dapat diubah menjadi tablet.
- Tablet yang dapat berfungsi sebagai laptop dengan keyboard dan trackpad.
- Ponsel kemudian dapat dikonversi ke {i>desktop<i} dengan sebuah hub.
Meskipun tantangan ada untuk setiap situs, dengan Progressive Web App Anda memegang kendali dan bertanggung jawab atas jendela saat aplikasi diinstal. Oleh karena itu, desain Anda harus bereaksi dan menawarkan pengalaman terbaik di setiap konteks.
Semuanya utama
Tapi mulai dari mana? Utama seluler, konten dulu, offline dulu? Saat mendesain untuk fleksibilitas web, manakah yang termasuk dalam desain? Nah, jawabannya adalah ya, semuanya terlebih dahulu. Istilah mobile-first telah ditafsirkan dalam banyak cara sejak Luke Wroblewski pertama kali menciptakannya pada tahun 2009: mulai dari mengemulasi UI dan pola UX khusus platform di web, hingga membuat aplikasi seluler sebelum membangun aplikasi web, hingga hanya menggunakan kueri media dengan lebar minimum dan menyebutnya sehari. Namun, tujuan aslinya adalah: perangkat seluler memaksa Anda untuk fokus. Seperti yang dikatakan Luke:
Perangkat seluler mengharuskan tim pengembangan software untuk berfokus hanya pada data dan tindakan paling penting dalam aplikasi. Tidak ada ruang pada layar 320 x 480 piksel untuk elemen yang tidak relevan dan tidak perlu. Anda harus membuat prioritas. Jadi, ketika sebuah tim mendesain Mobile First, hasilnya adalah pengalaman yang berfokus pada tugas-tugas utama yang ingin diselesaikan pengguna tanpa penyimpangan dan puing-puing antarmuka yang mengotori {i>website<i} yang diakses melalui desktop saat ini. Ini adalah pengalaman pengguna yang baik dan bagus untuk bisnis.
Luke Wroblewski
Fokuskan setiap tampilan situs web hanya pada tugas penting yang ingin dicapai pengguna, dan jangan tambahkan lebih banyak hal ke ide hanya karena layar memiliki lebih banyak ruang.
Prinsip kedua dijelaskan dalam Desain Web yang Responsif: "gradien pengalaman yang berbeda". Pengalaman tunggal, identik, dan sempurna untuk setiap pengguna bukanlah tujuan dari pekerjaan Anda; itu semua tidak mungkin.
Alih-alih menganggap pengalaman web sebagai hal yang pasti, anggaplah pengalaman web ini sebagai serangkaian rekomendasi yang akan digunakan perangkat pengguna untuk membangun pengalaman terbaik untuk konteks saat ini. Untuk melakukannya, {i>progressive enhancement<i} perlu diikuti.
{i>Progressive enhancement <i}
Peningkatan Progresif adalah pola yang memungkinkan kita menulis kode yang berjalan di mana saja, mulai dari HTML, CSS, dan JavaScript standar, serta menambahkan lapisan kemampuan di atasnya dengan penggantian yang tepat saat API tidak tersedia.
Bagaimana cara Anda meningkatkannya? Deteksi fitur adalah pola di mana Anda melakukan pengujian untuk dukungan dan bereaksi berdasarkan hasil pengujian tersebut. Ada beberapa alat dan praktik platform web bawaan untuk melakukan hal ini.
Dengan menggunakan @supports, periksa dukungan browser fitur CSS, dan terapkan aturan berdasarkan hasilnya.
Ini berlaku untuk properti dan nilai CSS; jika sebuah properti didukung dan nilainya tidak didukung, properti tersebut akan gagal, begitu juga properti yang tidak didukung. Kode JavaScript dapat mengaksesnya melalui CSSSupportsRule
Sebagian besar fitur platform web baru dilampirkan pada objek yang ada, sehingga 'fitur' dalam deteksi gaya objek berfungsi dengan baik di JavaScript, seperti halnya pencarian serupa lainnya, seperti memeriksa properti atau metode pada elemen.
Untuk mengirimkan JavaScript modern, Anda dapat menggunakan pola modul/nomodule untuk menyediakan fitur yang lebih andal dengan payload yang lebih kecil ke browser yang lebih modern dan pengalaman penggantian ke browser lama. Ini memiliki bonus berupa jaminan dasar baru untuk fitur JavaScript, seperti promise, class, fungsi panah, serta const dan let tersedia untuk browser yang mendukung Modul ES.
Anda bahkan dapat menggabungkan beberapa bentuk deteksi fitur untuk membuat dasar pengukuran yang ditingkatkan. Dibuat oleh tim BBC News, game ini disebut Cutting the Mustard dan memungkinkan Anda mengirimkan pengalaman inti kepada semua orang dan mulai meningkatkan pengalaman hanya setelah mencapai batas deteksi fitur tertentu.
Menghindari deteksi perangkat
Anda harus menguji langsung dukungan fitur, bukan membuat asumsi dukungan berdasarkan string Agen Pengguna.
String agen pengguna tidak pernah benar-benar dapat diandalkan. Mereka mengandalkan pengetahuan yang hampir sempurna tentang setiap browser, sistem operasi, dan kombinasi perangkat yang ada untuk "tebak dengan benar". Meskipun demikian, pengalihan ini rentan terhadap spoofing pengguna, misalnya, pengalihan situs desktop di browser seluler sering kali semudah melakukan spoofing string agen pengguna desktop.
Selain itu, browser sedang berupaya membekukan string Agen Penggunanya, dengan string agen pengguna untuk deteksi fitur yang secara khusus disebutkan sebagai alasan penghentian penggunaan, sehingga menjadikannya lebih tidak dapat diandalkan daripada sebelumnya dalam mengidentifikasi pengguna dan perangkat.
Mengutamakan konten
Prinsip lain dalam mendesain untuk web adalah: mulailah dengan konten Anda terlebih dahulu. Misalnya, ticker saham real-time dengan grafik harga saham, pada intinya, adalah tabel saham dengan harga selama beberapa waktu, mungkin disertai link untuk memuat ulang situs.
Itu kemudian bisa ditingkatkan dengan JavaScript dan permintaan pengambilan untuk memperbarui nilai tabel pada timer atau ditingkatkan dengan soket untuk memberikan pembaruan berbasis push real-time. Anda dapat meningkatkan lagi untuk membuat grafik hasil, mungkin dengan CSS, mungkin dengan SVG, atau mungkin dengan Canvas. Namun, intinya dimulai dengan konten.
Desain intrinsik
- Seluler sebagai batasan fokus untuk pengalaman pengguna.
- Menekankan konten dan fungsi inti dalam proses desain.
- Melakukan peningkatan secara progresif dengan fungsionalitas lanjutan jika tersedia.
Prinsip-prinsip ini digabungkan untuk memberi kita sesuatu yang baru: desain intrinsik. Dalam seminarnya Designing Intrinsic Layout, Jen Simmons membahas penggunaan alat CSS modern, seperti Grid, Flexbox, flow layout, dan mode penulisan, untuk mendesain dan membangun antarmuka pengguna. Dengan alat ini, dia berkata:
Anda bisa benar-benar membuat tata letak menjadi intrinsik dengan konten yang kita miliki dan desain yang ingin kita lakukan.
Jen Simmons
CSS baru ini memungkinkan desainer untuk mendapatkan kembali kendali atas tata letak tetapi melakukannya dengan cara yang selaras dengan prinsip desain web terbaru. Daripada membuat formulir tetap berdasarkan ukuran layar tetap, Anda menentukan aturan berbasis konten yang digunakan untuk membuat tata letak dengan memanfaatkan properti intrinsik konten tersebut, seperti seberapa kecil atau besarnya, ukuran teks, dan ruang yang tersedia, sekaligus. Fungsi ini memungkinkan Anda untuk mewujudkan desain saat berinteraksi dengan konten Anda tanpa perlu mengontrol setiap penempatan piksel.
Tata letak intrinsik menghadirkan percakapan tentang kontrol di web dalam lingkaran penuh, yang memberinya definisi. Kontrol di web tidak ada hubungannya dengan menentukan perangkat atau ukuran layar atau warna atau font atau tata letak atau kemampuan untuk setiap pengunjung situs. Kontrol di web adalah tentang menulis aturan yang akan digunakan browser untuk menyusun pengalaman Anda, membangunnya secara unik untuk setiap pengguna di Progressive Web App Anda.
Performa web
Fondasi terakhir namun tidak kalah penting untuk PWA kita adalah Kinerja Web. Pengalaman luar biasa bagi pengguna adalah wajib; hal itu akan menghasilkan lebih banyak konversi dalam segala cara.
Performa web mencakup beberapa langkah:
- Pahami metrik utama yang berfokus pada pengguna yang tersedia.
- Tetapkan sasaran untuk setiap metrik.
- Mengukur PWA kita.
- Tingkatkan metrik kami dengan menerapkan teknik dan praktik terbaik secara statis di kode atau server kami.
- Ukur lagi.
- Tingkatkan pengalaman bagi setiap pengguna, secara langsung, berdasarkan konteks pengguna.
Metrik performa web saat ini mengukur seberapa cepat konten Anda muncul di layar, tetapi juga seberapa interaktif situs Anda dan bagaimana pengguna merasakan pengalaman tersebut.
Data Web
Selama satu dekade terakhir, kami telah menangani berbagai metrik untuk mengukur kesuksesan performa web. Saat ini, kumpulan metrik yang direkomendasikan dikelompokkan dalam project Data Web project. Data Web memfokuskan metrik pada tiga area utama yang memengaruhi performa dan persepsi web:
- Memuat
- Interaktif
- Stabilitas Visual
Dengan Data Web Inti, Anda dapat melihat sekilas, seberapa baik atau buruk PWA Anda dalam performa web dan pengalaman pengguna.
Dasar-dasar PWA
Penting bahwa PWA Anda memiliki dasar yang kuat dalam desain responsif, seluler dan semuanya terlebih dahulu, desain intrinsik, dan kinerja web sebagai landasan untuk pengalaman luar biasa bagi semua pengguna Anda.