Dasar-dasar

Dasar yang kuat

Fondasi yang kuat adalah persyaratan dasar untuk membangun PWA yang hebat. Untuk menerapkan dasar-dasar ini, Anda perlu merancang dan mengodekan batasan web menggunakan beberapa prinsip:

  • Gunakan perangkat seluler sebagai batasan pemfokusan. Pastikan setiap tampilan desain Anda hanya berfokus pada konten dan interaksi penting.
  • Tekankan konten dan fungsi inti dalam proses desain.
  • Tingkatkan secara bertahap jika diperlukan. Mulailah dengan membuat konten dan fungsi inti komponen dengan alat yang paling mudah dan paling banyak tersedia. Buat mudah diakses. Kemudian, uji fitur lanjutan yang ingin Anda gunakan dan tingkatkan komponen Anda dengan fitur tersebut.
  • Tawarkan pengalaman pengguna yang cepat dan baik yang berfokus pada metrik performa web yang berpusat pada pengguna, dapatkan metrik pengguna sebenarnya, dan tingkatkan performa untuk semua pengguna Anda, apa pun koneksi jaringan, jenis input, CPU, atau daya GPU mereka.

Dengan mengikuti prinsip-prinsip ini dan meningkatkannya dengan pola dan fitur web modern, Anda dapat menciptakan pengalaman yang luar biasa dan cepat dengan desain yang benar-benar intrinsik. Desain yang didukung oleh batasan, bukan piksel, sehingga setiap pengguna dapat mengakses konten dan fungsi inti Anda dengan cara yang paling sesuai untuk konteks penjelajahan mereka.

Desain web responsif

Sejak artikel A List Apart tahun 2010 oleh Ethan Marcotte, Responsive Web Design, desainer dan developer telah didorong untuk menciptakan pengalaman yang fleksibel, membuat antarmuka pengguna yang berfungsi di berbagai spektrum ukuran layar dan perangkat.

Namun, seiring berjalannya waktu, ukuran tersebut menjadi 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 desain responsif, kita dapat mengembalikan squish ke situs yang fleksibel.

Desain web responsif memperkenalkan tiga elemen teknis:

  • Petak fleksibel
  • Media yang fleksibel
  • Kueri media

Ethan menyimpulkan bahwa persyaratan teknis ini tidak cukup; langkah selanjutnya juga memerlukan cara berpikir yang berbeda.

Mitos pengguna seluler

Pada awal-awal desain responsif, asumsi dibuat dengan tujuan mempermudah desain situs. Misalnya, pengalaman kecil ditujukan untuk ponsel, dan memiliki lebar 320 piksel, pengalaman sedang ditujukan untuk tablet, dan memiliki lebar 1024 piksel, dan yang lebih besar dari itu ditujukan untuk desktop. Perangkat layar kecil memiliki kemampuan sentuh, sedangkan perangkat layar besar tidak. Pengguna ponsel terburu-buru dan terganggu, sehingga memerlukan pengalaman yang "ringan".

Semuanya tidak benar; ini adalah mitos seluler yang dipertahankan oleh asumsi bahwa kebutuhan pengguna secara fundamental berbeda hanya berdasarkan ukuran layar atau jenis perangkat. Ini tidak perlu pemeriksaan.

Misalnya, PWA jaringan sosial yang sekarang dapat Anda instal di perangkat seluler dan desktop. Di desktop, banyak pengguna dapat mempertahankan jendela sempit dengan feed di satu sisi layar saat bekerja, dan mengasumsikan bahwa mereka menggunakan perangkat seluler karena lebar yang tersedia akan salah.

Dunia PWA yang berada di luar tab browser bahkan menambahkan tantangan baru ke dunia desain responsif, seperti mode mini dan bekerja dengan perangkat foldable.

Mode mini

Dengan PWA yang diinstal di perangkat desktop, jendela dapat menjadi sangat kecil; lebih kecil dari jendela browser, lebih kecil dari area pandang seluler. Ini adalah hal baru di web: kita dapat mendukung mode mini, jendela yang dapat berukuran sekecil 200x100 piksel CSS.

Saat membuat PWA saat ini, sebaiknya pikirkan hal yang akan ditawarkan dalam mode mini, berkat desain web yang responsif, seperti hanya tombol kontrol pada pemutar musik, informasi dasbor, atau tindakan cepat.

Di desktop, PWA dapat dirender dalam jendela yang lebih kecil dari jendela terkecil yang pernah Anda desain untuk browser. Mode 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 clamshell kecil.
  • Perangkat foldable yang dapat digunakan sebagai ponsel atau tablet.
  • Laptop yang dapat diubah menjadi tablet.
  • Tablet yang dapat bertindak sebagai laptop dengan keyboard dan trackpad.
  • Ponsel kemudian dapat dikonversi menjadi desktop dengan hub.

Meskipun tantangan ini ada untuk setiap situs, dengan Progressive Web App, Anda dapat mengontrol dan bertanggung jawab atas jendela saat aplikasi diinstal. Oleh karena itu, desain Anda harus bereaksi dan menawarkan pengalaman terbaik dalam setiap konteks.

Semuanya dulu

Namun, dari mana Anda harus memulai? Mobile-first, content-first, offline-first? Ketika mendesain untuk fleksibilitas web, manakah yang dimaksud? Jawabannya adalah ya, semuanya terlebih dahulu. Istilah mobile-first telah ditafsirkan dengan berbagai cara sejak Luke Wroblewski pertama kali merumuskannya pada tahun 2009: mulai dari mengemulasi pola UI dan UX khusus platform di web hingga mem-build aplikasi seluler sebelum mem-build aplikasi web hingga hanya menggunakan kueri media lebar minimum dan selesai. 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 yang paling penting dalam aplikasi. Tidak ada ruang pada layar berukuran 320 x 480 piksel untuk elemen yang tidak relevan dan tidak diperlukan. Anda harus memprioritaskan. Jadi, saat tim mendesain Mobile First, hasilnya adalah pengalaman yang berfokus pada tugas utama yang ingin diselesaikan pengguna tanpa perlu berputar-putar dan antarmuka yang berantakan yang memenuhi situs yang diakses dari desktop saat ini. Hal ini memberikan pengalaman pengguna yang baik dan baik untuk bisnis.

Luke Wroblewski

Fokuskan setiap tampilan situs Anda hanya pada tugas penting yang ingin diselesaikan pengguna di sana, dan jangan tambahkan lebih banyak hal ke ide hanya karena situs memiliki lebih banyak ruang layar.

Prinsip kedua diisyaratkan dalam Responsive Web Design: "gradien pengalaman yang berbeda". Pengalaman tunggal, identik, dan sempurna dengan piksel untuk setiap pengguna tidak seharusnya menjadi tujuan pekerjaan Anda; itu semua tapi mustahil.

Daripada menganggap pengalaman web Anda sebagai hal yang tetap, anggaplah sebagai serangkaian rekomendasi yang akan digunakan perangkat pengguna untuk membuat pengalaman terbaik bagi konteks mereka saat ini. Untuk melakukannya, perlu diterapkan progressive enhancement.

Peningkatan progresif

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 atas itu dengan penggantian yang tepat saat API tidak tersedia.

Bagaimana cara Anda menyempurnakannya? Deteksi fitur adalah pola saat Anda melakukan pengujian untuk dukungan dan bereaksi berdasarkan hasil pengujian tersebut. Ada beberapa alat dan praktik platform web bawaan untuk melakukannya.

Dengan @supports, periksa dukungan browser untuk fitur CSS, dan terapkan aturan berdasarkan hasilnya. Hal ini berlaku untuk properti dan nilai CSS; jika properti didukung dan nilai tidak didukung, properti akan gagal, begitu juga dengan properti yang tidak didukung. Kode JavaScript dapat mengaksesnya melalui CSSSupportsRule.

Sebagian besar fitur platform web baru dilampirkan ke objek yang ada, sehingga 'fitur' dalam deteksi gaya objek berfungsi dengan baik di JavaScript, seperti pencarian serupa lainnya, seperti memeriksa properti atau metode pada elemen.

Untuk mengirimkan JavaScript modern, Anda dapat menggunakan pola module/nomodule untuk menyediakan fitur yang lebih tangguh dengan payload yang lebih kecil ke browser yang lebih modern dan pengalaman penggantian ke browser lama. Hal ini memiliki bonus untuk menjamin dasar pengukuran baru fitur JavaScript, seperti promise, class, fungsi panah, dan const dan let tersedia untuk browser yang mendukung Modul ES.

Anda bahkan dapat menggabungkan beberapa bentuk deteksi fitur untuk membuat dasar pengukuran yang ditingkatkan. Game ini, yang dibuat oleh tim BBC News, disebut Cutting the Mustard dan memungkinkan kamu mengirimkan pengalaman inti kepada semua orang dan mulai meningkatkan pengalaman hanya setelah batang deteksi fitur tertentu tercapai.

Menghindari deteksi perangkat

Anda harus langsung menguji dukungan fitur, bukan membuat asumsi dukungan berdasarkan string Agen Pengguna.

String agen pengguna tidak pernah benar-benar andal. Mereka mengandalkan pengetahuan yang nyaris sempurna tentang setiap kombinasi browser, sistem operasi, dan perangkat yang ada untuk "menebak dengan benar". Meskipun demikian, browser seluler rentan terhadap spoofing pengguna. Misalnya, pengalihan situs desktop di browser seluler sering kali sesederhana spoofing string agen pengguna desktop.

Selain itu, browser sedang berupaya membekukan string Agen Pengguna, dengan string agen pengguna untuk deteksi fitur yang secara khusus disebut sebagai alasan penghentian, sehingga membuatnya lebih tidak dapat diandalkan daripada sebelumnya untuk 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 beserta harganya selama beberapa waktu, mungkin dengan link untuk memuat ulang situs.

Kemudian, hal tersebut dapat ditingkatkan dengan JavaScript dan permintaan pengambilan untuk memperbarui nilai tabel pada timer atau ditingkatkan dengan soket untuk memberikan update berbasis push secara real-time. Hal ini dapat ditingkatkan lagi untuk membuat grafik hasil, mungkin dengan CSS, mungkin dengan SVG, mungkin dengan Kanvas. Namun, intinya dimulai dengan konten.

Desain intrinsik

  • Perangkat seluler sebagai batasan fokus untuk pengalaman pengguna.
  • Menekankan konten dan fungsi inti dalam proses desain.
  • Peningkatan secara progresif dengan fungsi lanjutan jika tersedia.

Prinsip-prinsip ini digabungkan untuk memberi kita sesuatu yang baru: desain intrinsik. Dalam presentasinya Mendesain Tata Letak Intrinsik, Jen Simmons membahas penggunaan alat CSS modern, seperti Petak, Flexbox, tata letak alur, dan mode penulisan, untuk mendesain dan mem-build antarmuka pengguna. Dengan alat ini, ia mengatakan:

Anda dapat benar-benar membuat tata letak menjadi inheren dengan konten yang kita miliki dan desain yang ingin kita buat.

Jen Simmons

CSS baru ini memungkinkan desainer mendapatkan kembali beberapa kontrol 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 besar konten tersebut, ukuran teks, dan ruang yang tersedia, sekaligus. {i>Wireframe<i} memungkinkan Anda untuk menyadari desain Anda saat berinteraksi dengan konten tanpa perlu mengontrol penempatan setiap {i>pixel<i}.

Tata letak intrinsik menghadirkan percakapan tentang kontrol di web secara menyeluruh, sehingga memberikan definisi. Kontrol di web bukan berarti menentukan perangkat atau ukuran layar atau warna atau font atau tata letak atau kemampuan untuk setiap pengunjung ke situs Anda. 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 bagi PWA kami adalah Performa Web. Pengalaman yang baik bagi pengguna adalah hal yang wajib; hal ini akan menghasilkan lebih banyak konversi dengan segala cara.

Performa web melibatkan beberapa langkah:

  • Pahami metrik utama yang berfokus pada pengguna yang tersedia.
  • Tetapkan sasaran untuk setiap metrik.
  • Mengukur PWA kami.
  • Tingkatkan metrik dengan menerapkan teknik dan praktik terbaik secara statis dalam kode atau server.
  • Ukur lagi.
  • Meningkatkan 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 Inti

Selama satu dekade terakhir, kami telah menggunakan berbagai metrik untuk mengukur kesuksesan performa web. Saat ini, kumpulan metrik yang direkomendasikan yang dikenal sebagai Data Web Inti berfokus pada tiga area utama yang memengaruhi performa dan pengalaman pengguna:

Serangkaian metrik dari Core Web Vitals yang menampilkan hasil performa situs.

Dengan Data Web Inti, Anda dapat melihat sekilas seberapa baik atau buruk PWA Anda terkait performa dan pengalaman pengguna.

Dasar-dasar PWA

Penting bahwa PWA Anda memiliki dasar yang kuat dalam desain responsif, seluler dan semuanya yang pertama, desain intrinsik, dan performa web sebagai dasar untuk memberikan pengalaman yang luar biasa bagi semua pengguna Anda.

Resource