Pembaca seperti Anda membantu mendukung MUO. Saat Anda melakukan pembelian menggunakan tautan di situs kami, kami dapat memperoleh komisi afiliasi. Baca selengkapnya.

Peningkatan progresif adalah teknik yang membantu memastikan perangkat lunak Anda kuat dan dapat diakses. Dengan mengikutinya, Anda dapat memastikan sebanyak mungkin orang dapat menggunakan situs web atau aplikasi Anda.

Mulailah dengan versi minimal dari desain web Anda, dan pastikan itu berfungsi seperlunya. Kemudian, lapisi fungsionalitas dan gaya ekstra, sehingga browser yang lebih mumpuni bisa mendapatkan keuntungan.

Bagaimana Cara Kerja Peningkatan Progresif?

Karena sifatnya yang sangat terdistribusi, web selalu diperlukan untuk mendukung sejumlah besar perangkat. Dari komputer dasar tahun 1970-an hingga desktop, tablet, dan televisi modern yang mumpuni, situs web telah berkembang pesat.

Inti dari semuanya adalah HTML. Karena ini adalah bahasa "pemaaf", browser akan menampilkan HTML sebaik yang mereka pahami. Biasanya, mereka akan mengabaikan apa pun yang tidak mereka dukung.

instagram viewer

Ini bisa berguna dari sudut pandang pengembang, tetapi bisa menimbulkan masalah bagi pembaca. Jika situs Anda menampilkan halaman kosong saat JavaScript tidak dapat dijalankan, pengguna tidak punya banyak pilihan selain mengabaikannya. Penyempurnaan progresif mendorong Anda untuk mengirimkan konten inti kepada semua orang yang dapat mengaksesnya, lalu menyempurnakan konten tersebut menggunakan teknologi yang sesuai, seperti CSS dan JavaScript.

Pendekatan Progresif untuk Styling

CSS adalah bahasa lembar gaya web yang dapat Anda gunakan untuk menyesuaikan warna, font, layout, dan banyak aspek visual lainnya dari laman Anda. Anda dapat menggunakannya untuk meningkatkan tampilan default konten Anda, tetapi itu tidak berarti Anda tidak boleh menyusun konten Anda dengan benar sejak awal.

Ambil bilah menu, misalnya; Anda mungkin menyusunnya seperti ini:

<nav>
<a href="/register">daftar</A>
<a href="/login">Gabung</A>
<a href="/about">tentang kami</A>
<a href="/contact">kontak</A>
</nav>

Untuk menampilkan menu horizontal, dengan setiap tautan tampak seperti tombol, Anda dapat menatanya menggunakan CSS ini:

navigasikan {
dekorasi teks: tidak ada;
tampilan: blok-sebaris;
lapisan: 0.5em 1em;
batas: padat 1px;
border-radius: 8px;
margin-kanan: 1em;
}

Ketika browser sepenuhnya merender ini, seharusnya terlihat seperti berikut:

Namun, jika CSS tidak tersedia, menu akan ditampilkan seperti ini:

Perhatikan bagaimana ini tidak terlihat seperti menu dan tidak mudah digunakan karena tautan digabungkan menjadi satu.

Anda dapat menggunakan struktur alternatif untuk membuat desain lebih kokoh:

<nav>
<ul>
<li><a href="/register">daftar</A></li>
<li><a href="/login">Gabung</A></li>
<li><a href="/about">tentang kami</A></li>
<li><a href="/contact">kontak</A></li>
</ul>
</nav>

Karena markup ini menggunakan elemen daftar yang tidak diurutkan, markup ini jauh lebih bermanfaat tanpa adanya CSS:

Perhatikan betapa mudahnya memindai dan memahami tautan ini dengan cepat, bahkan dengan gaya default browser. Pendekatan ini mengharuskan Anda menambahkan sedikit lebih banyak CSS, untuk mengganti gaya daftar default:

navli { menampilkan: Di barisan; }

Meskipun struktur dan gaya akhir lebih rumit, dan sebagian besar pengguna akan mengaktifkan CSS, pendekatan ini lebih kuat. Ini akan lebih ramah bagi pengguna pembaca layar dan browser berbasis terminal.

Memperkenalkan Fungsi Secara Progresif

Peningkatan progresif paling penting dalam hal fungsi situs atau aplikasi. Prinsipnya menyatakan bahwa, apa pun yang terjadi, situs web Anda harus berfungsi sebaik mungkin.

Dalam praktiknya, ini biasanya berlaku untuk JavaScript. Jika Anda memperkenalkan perilaku sisi klien, itu harus melapisi fungsionalitas di atas situs atau aplikasi yang sudah berfungsi tanpanya.

Kasus yang sangat umum adalah penanganan acara. Bayangkan sebuah halaman yang memuat konten tambahan sesuai permintaan. Ini bisa berupa pengguliran tak terbatas manual, penyematan komentar, atau yang serupa.

<tubuh>
<!--... -->
<klik tombol ="Muat lebih banyak();">
Memuat Lagi
</button>
<!--... -->
</body>

Tombolnya onclick atribut berisi kode JavaScript yang akan dijalankan ketika seseorang mengklik tombol. Namun, jika JavaScript tidak tersedia, tombol ini tidak akan melakukan apa pun. Seorang pengguna akan dibiarkan mengklik tombol ini tanpa umpan balik dan tidak tahu apa yang salah. Pendekatan yang jauh lebih baik menggunakan peningkatan progresif:

<tubuh>
<!--... -->
<sebuah id="p2" href="/page/2">Halaman 2</A>

<naskah>
fungsiMuat lebih banyak() { menghibur.catatan("!"); }

/* Ganti tautan dengan tombol */
var tautan = dokumen.getElementById("p2");
var tombol = dokumen.createElement("tombol");
button.innerText = "Muat lebih banyak";
button.addEventListener("klik", Muat lebih banyak);
dokumen.tubuh.insertBefore(tombol, tautan);
tautan.parentNode.hapusAnak(tautan);
</script>
</body>

Kode ini mengubah link dasar menjadi sebuah tombol dengan event handler. Dengan memperkenalkan ketergantungan pada JavaScript menggunakan JavaScript itu sendiri, Anda dapat yakin itu akan berhasil. Dan ada perilaku default fungsional yang berfungsi, dalam bentuk tautan standar ke /page/2.

Apakah Peningkatan Progresif Benar-benar Diperlukan?

Semua orang menggunakan browser dengan CSS dan JavaScript, jadi mengapa repot melayani situasi yang tidak muncul? Nah, ada beberapa alasan Anda harus mengadopsi praktik peningkatan progresif yang baik.

  1. Pertama, tidak semua orang yang mengunjungi situs web Anda menggunakan browser. Beberapa pengunjung akan menjadi bot, seperti pengindeks mesin telusur, dan ini mungkin tidak memahami CSS atau JavaScript sama sekali.
  2. Kedua, tidak setiap orang yang mengunjungi situs Anda akan menggunakan browser dengan CSS dan JavaScript. Beberapa pengunjung mungkin menggunakan browser berbasis terminal, yang menampilkan teks biasa dengan pemformatan minimal. Orang lain mungkin menggunakan pembaca layar.
  3. Ketiga, bahkan jika browser mendukung CSS dan JavaScript, ada yang salah. Tautan yang rusak atau koneksi jaringan yang buruk dapat menyebabkan hilangnya file .css atau .js. Bug di JavaScript dapat menyebabkan kode lain tidak berjalan sama sekali.
  4. Terakhir, beberapa pengunjung mungkin secara aktif memutuskan untuk menonaktifkan CSS atau JavaScript. Mereka mungkin melakukannya karena masalah privasi atau karena koneksi mereka lambat atau berbayar.

Pola Pikir Progresif Menghasilkan Keajaiban

Yang terpenting, peningkatan progresif mendorong Anda untuk mengadopsi pendekatan yang mengutamakan konten. Konten adalah raja, jadi teks dan gambar Anda harus selalu tersedia, untuk semua orang, bagaimanapun mereka mengakses situs Anda.

Dengan memberikan semua pembaca pengalaman terbaik, kemudian menjadikannya lebih baik bagi mereka yang dapat memperoleh manfaat, Anda dapat memperoleh yang terbaik dari semua dunia. Peningkatan progresif hanyalah salah satu komponen kunci dari praktik aksesibilitas dan kegunaan yang baik.