Praktik Terbaik untuk Peningkatan Progresif dalam Desain Web

Kerajinan membangun situs web sangat kompleks dengan banyak bagian yang berubah dengan cepat. Tujuan komunitas desain web adalah untuk mengurangi kerumitan, dan mengurangi potensi kesalahan pada setiap tahap proses penciptaan.

Peningkatan progresif adalah ide dalam desain web yang bertujuan mengurangi kesalahan dan memberikan pengalaman pengguna yang konsisten di seluruh papan. Konsep ini memiliki halaman Wikipedia sendiri yang menjelaskannya sebagai metode konten yang sepenuhnya dapat diakses, render fitur yang disempurnakan hanya jika didukung oleh browser.

Sangat mudah untuk memahami peningkatan progresif, tetapi tidak mudah untuk menerapkannya langsung ke pekerjaan desain Anda. Saya ingin membahas beberapa praktik terbaik untuk peningkatan progresif dalam proyek dunia nyata untuk membantu desainer berpikir lebih berkelanjutan tentang alur kerja mereka.

1. Memahami Peningkatan Progresif

Teori peningkatan progresif merekomendasikan untuk mulai dengan situs web sederhana yang berfungsi di semua browser, membuatnya dapat diakses untuk setiap pengunjung. Kemudian tambahkan fitur bila memungkinkan.

Ini adalah kebalikan dari degradasi anggun yang mencakup semua fitur secara default, kemudian menurun ketika sesuatu tidak berfungsi.

Peningkatan progresif lebih baik untuk pengalaman pengguna secara keseluruhan, karena pada intinya itu hanya memuat elemen yang diperlukan. Setiap browser web dapat mendukung teks (dan biasanya gambar). Tanpa CSS apa pun informasi ini akan terlihat hambar dan tidak berasa, tetapi akan dapat diakses.

Ini Daftar terpisah artikel berpendapat bahwa peningkatan progresif adalah konten-pertama dengan gaya dan komponen dinamis ditambahkan kemudian. Konten dalam HTML semantik harus dikirimkan sebelum hal lain.

CSS dan JavaScript canggih yang kami gunakan saat ini didukung secara luas, tetapi jika kami ingin mengikuti prinsip peningkatan progresif, mereka harus dianggap kemewahan.

Berikut adalah ikhtisar umum dari fitur utama peningkatan progresif, yang harus Anda perhitungkan:

Markup semantik untuk semua konten
Pengguna preferensi browser perlu dihormati
Konten dan fungsionalitas dasar seharusnya tersedia untuk semua pengguna
JavaScript tidak mengganggu hanya dimuat dalam lingkungan yang dapat mendukungnya

Batasan teknologi dalam pengembangan front-end terutama ditentukan oleh kompatibilitas browser. Peningkatan progresif membuat Anda kembali ke dasar berpikir tentang bagaimana halaman web sederhana tanpa tulang mungkin terlihat seperti. Dari sana, kamu bisa rencana untuk fitur yang lebih canggih, seperti properti CSS3.

Tetapi bagaimana dengan browser yang tidak mendukung CSS3 modern? Di sinilah situs seperti Can I Use ikut bermain. Anda harus memutuskan fitur mana yang layak diterapkan, dan membuat penilaian berdasarkan pada target audiens situs web Anda.

2. subsisten dalam stylesheet

Sebagian besar browser saat ini mendukung semua properti dasar yang Anda butuhkan. Tapi CSS3 lanjutan masih menjadi masalah bagi pengguna lama, dan peningkatan progresif menawarkan solusi.

Alih-alih mencari metode mundur untuk mempertahankan fitur-fitur baru ini, lebih baik perhatikan dulu struktur tata letak yang tepat.

Tulis HTML semantik dan markup CSS yang berfungsi di sebanyak mungkin browser aktif (dukungan untuk browser kuno seperti dukungan IE5 tidak diperlukan).

Ambil contoh JSFiddle ini yang menggunakan pelampung dengan dua sidebar (.tetap), dan area konten cairan (.cairan). Jika Anda menghapus semua CSS, dan jalankan kembali kode Anda akan melihat semuanya susun dengan baik dengan kolom pertama, lalu kedua, dan akhirnya yang terakhir.

Beberapa pengembang lebih suka memiliki kolom konten (.cairan) muncul pertama kali dalam HTML. Di sinilah peningkatan progresif berperan, dan solusi CSS alternatif menjadi layak.

Dua tujuan utama HTML Anda adalah sebagai berikut:

Sepenuhnya semantik dan valid kode
SEBUAH pengalaman yang konsisten untuk semua orang

Cara paling mudah untuk mencapai tujuan ini adalah dengan mulai dari nol dan bekerja, seperti yang disarankan oleh kebanyakan pendukung peningkatan progresif.

Jika kode Anda terlihat bagus dengan CSS yang dinonaktifkan dan diaktifkan, maka ia menawarkan solusi yang masuk akal untuk semua orang.

Ini juga layak dipertimbangkan pada titik mana Anda menjatuhkan dukungan untuk sesuatu. Microsoft telah menjatuhkan dukungan besar untuk IE6, sehingga pengguna yang menjalankan browser itu mungkin tidak sepadan dengan waktu Anda.

Tetapi masih ada satu pertanyaan besar: jika browser tidak mendukung CSS modern saya, apa yang harus saya lakukan?

Kamu hanya tulis kode yang berfungsi tanpa saya t, dan menganggap CSS modern sebagai peningkatan progresif. Ini adalah keindahan metodologi peningkatan progresif.

Anda tidak perlu mundur, karena Anda pada dasarnya dengan asumsi bahwa tidak ada yang didukung secara default.

Metode peningkatan progresif adalah tentang membuat situs dapat digunakan bahkan dalam kasus ketika sesuatu tidak didukung - tetapi jika didukung, semua lebih baik.

Anda perlu mempertimbangkan bagaimana sebenarnya konten mengalir tanpa CSS. Misalnya, ketika saya menonaktifkan CSS di situs web Transmit, konten masih mengalir secara organik ke bawah halaman.

Ya, itu jelek, dan ya, rasanya kami sudah kehilangan kemajuan selama dua puluh tahun ... tapi berhasil.

3. Menangani JavaScript

Patut disebutkan bahwa setiap masalah JavaScript yang mungkin Anda temui selama proses pengembangan rumit dan unik. Ketika Anda membangun proyek baru dengan peningkatan progresif, Anda harus mendaftar semua fitur berbasis JS yang diperlukan, dan mempertimbangkan bagaimana mereka bisa beroperasi tanpa JavaScript.

Ini akan membutuhkan banyak riset online untuk menemukan solusi yang valid. Aaron Gustafson menulis posting blog yang hebat dengan solusi untuk berbagai masalah, seperti mengganti Ajax dengan meta refresh untuk konten di dalam iframe.

Juga, saat Anda membuat tab JavaScript, adalah ide yang bagus untuk melakukannya gunakan tautan jangkar dengan nilai ID nyata. Dengan begitu, saat JavaScript dinonaktifkan, Anda masih dapat membuat tab terlihat dan dapat diakses dengan nilai jangkar. Aaron menulis artikel lain di A List Apart yang mencakup tinjauan umum tentang bagaimana Anda harus memikirkan masalah ini.

Ini contoh lain. Katakanlah Anda memiliki tautan yang memuat konten secara dinamis. Itu href nilai kosong, karena semuanya dimuat melalui JavaScript dengan metode preventDefault ().

Sebaliknya, akan lebih bijaksana untuk mengatur href properti untuk arahkan ke halaman yang berbeda di mana konten bisa dimuat secara alami, tetapi pengunjung hanya melihat halaman itu ketika JavaScript dinonaktifkan.

Peningkatan progresif adalah tentang lebih dari JavaScript, tetapi dengan pengembangan web semakin maju setiap tahun, tidak ada keraguan bahwa JavaScript memainkan peran penting.

Beroperasi dengan asumsi bahwa semuanya telah dinonaktifkan, dan skala dari sana. Ini mungkin termasuk masalah dengan widget tertanam yang di luar kendali Anda, the