Dasar-dasar

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-prinsip ini serta meningkatkan dengan pola modern dan fitur web, Anda dapat menciptakan pengalaman yang hebat dan cepat dengan desain yang benar-benar intrinsik. Desain yang didukung 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 dianjurkan untuk menciptakan pengalaman yang fleksibel, sehingga 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 tidak cukup; untuk maju juga memerlukan 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 digunakan untuk ponsel, dengan lebar 320 piksel, pengalaman sedang untuk tablet, dan memiliki lebar 1024 piksel, serta ukuran yang lebih besar dari desktop. Perangkat layar kecil memiliki kemampuan sentuh, sedangkan perangkat layar besar tidak. Pengguna ponsel terburu-buru dan terganggu, sehingga membutuhkan pengalaman "terang".

Tak satu pun dari 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 saat 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 dari area pandang seluler. Ini adalah hal baru di web: kita dapat mendukung mode mini, yaitu jendela yang sekecil 200x100 piksel CSS.

Saat membuat PWA saat ini, ada baiknya untuk memikirkan apa yang harus 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 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 Anda hanya pada tugas penting yang ingin diselesaikan pengguna, dan jangan menambahkan 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 pekerjaan Anda; itu semua tidak mungkin.

Alih-alih menganggap pengalaman web sebagai hal yang pasti, anggaplah pengalaman web 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, begitu juga 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 andal dengan payload yang lebih kecil ke browser yang lebih modern dan pengalaman fallback 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, 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 hebat bagi pengguna adalah wajib; hal itu akan menghasilkan lebih banyak konversi dalam segala kemungkinan.

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, serta seberapa interaktif situs Anda dan persepsi pengguna terhadap pengalaman tersebut.

Data Web Inti

Selama satu dekade terakhir, kami telah menangani 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:

Kumpulan metrik dari Data Web Inti yang menunjukkan 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 terlebih dahulu, desain intrinsik, dan kinerja web sebagai landasan untuk pengalaman luar biasa bagi semua pengguna Anda.

Resource