Amalan Terbaik untuk Peningkatan Progresif dalam Reka Bentuk Web

Kraf laman web bangunan sangat kompleks dengan banyak bahagian yang cepat berubah. Matlamat komuniti reka bentuk web adalah untuk mengurangkan kerumitan, dan mengurangkan kemungkinan kesalahan pada setiap peringkat proses penciptaan.

Peningkatan progresif adalah satu idea dalam reka bentuk web yang bertujuan untuk mengurangkan kesilapan dan menyediakan pengalaman pengguna yang konsisten secara menyeluruh. Konsep ini mempunyai laman Wikipedia sendiri yang menerangkannya sebagai kaedah kandungan yang boleh diakses sepenuhnya, membuat ciri yang dipertingkatkan hanya apabila disokong oleh penyemak imbas.

Sangat mudah untuk memahami peningkatan progresif, tetapi tidak mudah untuk menerapkannya secara langsung kepada kerja reka bentuk anda. Saya ingin menutup beberapa amalan terbaik untuk peningkatan progresif dalam projek-projek dunia sebenar kepada membantu para perancang berfikir lebih mantap tentang aliran kerja mereka.

1. Memahami Peningkatan Progresif

Teori peningkatan progresif mengesyorkan kepada mulakan dengan laman web yang mudah yang berfungsi dalam semua pelayar, menjadikannya boleh diakses untuk setiap pelawat. Kemudian tambahkan ciri-ciri apabila mungkin.

Ini adalah bertentangan dengan kemerosotan anggun yang merangkumi semua ciri secara lalai, kemudian merendahkan apabila sesuatu tidak berfungsi.

Peningkatan progresif adalah lebih baik untuk pengalaman pengguna keseluruhan, kerana pada dasarnya ia beban hanya elemen yang diperlukan. Setiap penyemak imbas web boleh menyokong teks (dan biasanya imej). Tanpa apa-apa CSS maklumat ini akan kelihatan hambar dan tawar, tetapi ia akan dapat diakses.

Ini Senarai selain artikel berpendapat bahawa peningkatan progresif adalah kandungan pertama dengan gaya dan komponen dinamik kemudian ditambahkan. Kandungan dalam HTML semantik perlu dihantar sebelum apa-apa lagi.

CSS maju dan JavaScript yang kami gunakan hari ini disokong secara meluas, tetapi jika kita mahu mengikuti prinsip peningkatan progresif, mereka harus dianggap kemewahan.

Berikut adalah ringkasan umum mengenai ciri-ciri utama peningkatan progresif, yang perlu diambil kira:

Tanda semantik untuk semua kandungan
Pengguna ' pilihan pelayar perlu dihormati
Kandungan dan fungsi asas mestilah tersedia untuk semua pengguna
JavaScript yang tidak mengganggu hanya dimuatkan dalam persekitaran yang boleh menyokongnya

Pengendalian teknologi dalam pembangunan terdahulu ditentukan terutamanya oleh keserasian pelayar. Peningkatan progresif dapat kembali kepada asas-asas pemikiran tentang bagaimana laman web mudah-telanjang-tulang mungkin kelihatan seperti. Dari sana, anda boleh merancang untuk ciri-ciri yang lebih maju, seperti sifat CSS3.

Tetapi bagaimana dengan pelayar yang tidak menyokong CSS3 moden? Di sinilah laman web seperti Bolehkah Saya Menggunakan bermain. Anda harus menentukan ciri-ciri yang patut dilaksanakan, dan membuat pertimbangan berdasarkan pada khalayak sasaran laman web anda.

2. Suntikan Dalam Stylesheets

Kebanyakan pelayar hari ini menyokong semua ciri asas yang anda perlukan. Tetapi CSS3 canggih masih menjadi masalah kepada pengguna warisan, dan peningkatan progresif menawarkan penyelesaian.

Daripada mencari kaedah jatuh balik untuk mengekalkan ciri-ciri baru ini, pertimbangkan diri anda terlebih dahulu struktur susun atur yang betul.

Tulis semantik HTML dan markup CSS yang berfungsi sebagai pelayar aktif sebanyak mungkin (sokongan untuk penyemak imbas purba seperti sokongan IE5 tidak diperlukan).

Ambil contoh JSFiddle ini yang menggunakan terapung dengan dua sidebars (.tetap), dan kawasan kandungan bendalir (.cecair). Sekiranya anda memadam semua CSS, dan ulang kod itu, anda akan melihat semua susunan dengan baik dengan lajur pertama, kemudian kedua, dan akhirnya yang terakhir.

Sesetengah pemaju lebih suka mempunyai lajur kandungan (.cecair) muncul dahulu dalam HTML. Ini adalah di mana peningkatan progresif dimainkan, dan penyelesaian CSS alternatif menjadi berdaya maju.

Kedua matlamat utama HTML anda adalah seperti berikut:

Sepenuhnya semantik dan sah kod
A pengalaman yang konsisten untuk semua orang

Cara yang paling mudah untuk mencapai matlamat ini adalah untuk bermula dari apa-apa dan bekerja sehingga, kerana kebanyakan penyokong peningkatan yang progresif akan mengesyorkannya.

Sekiranya kod anda kelihatan baik dengan CSS kedua-dua orang kurang upaya dan didayakan, maka ia menawarkan penyelesaian yang munasabah untuk semua orang.

Ia juga patut dipertimbangkan pada titik apa anda menjatuhkan sokongan untuk sesuatu. Microsoft telah menjatuhkan sokongan utama untuk IE6, jadi pengguna yang menjalankan penyemak imbas itu mungkin tidak bernilai masa anda.

Tetapi masih ada satu persoalan besar: jika pelayar tidak menyokong CSS moden saya, apa yang harus saya lakukan?

Anda semata-mata tulis kod yang berfungsi tanpa ia, dan pertimbangkan CSS moden sebagai peningkatan progresif. Inilah keindahan metodologi peningkatan progresif.

Anda tidak perlu jatuh, kerana anda pada dasarnya mengandaikan bahawa tiada apa yang disokong secara lalai.

Kaedah penambahbaikan progresif adalah mengenai membuat tapak boleh digunakan walaupun dalam kes-kes apabila sesuatu tidak disokong-tetapi jika disokong, semua lebih baik.

Anda perlu dipertimbangkan bagaimana kandungan sebenarnya mengalir tanpa CSS. Sebagai contoh, apabila saya melumpuhkan CSS pada laman web Transmit, kandungan masih mengalir secara organik ke bawah halaman.

Ya, ia hodoh, dan ya, rasanya kita kehilangan dua puluh tahun kemajuan ... tetapi ia berfungsi.

3. Mengendali JavaScript

Perlu dicatatkan bahawa setiap isu JavaScript yang anda dapat bertemu semasa proses pembangunan adalah rumit dan unik. Apabila anda membina sebuah projek baru dengan peningkatan progresif, anda harus menyenaraikan semua ciri yang diperlukan oleh JS anda, dan pertimbangkan bagaimana ia boleh beroperasi tanpa JavaScript.

Ini memerlukan banyak penyelidikan dalam talian untuk mencari penyelesaian yang sah. Aaron Gustafson menulis jawatan blog yang hebat dengan penyelesaian kepada pelbagai masalah, seperti menggantikan Ajax dengan meta refresh untuk kandungan di dalam iframe.

Juga, apabila anda membuat tab JavaScript, ia adalah idea yang baik gunakan pautan utama dengan nilai ID sebenar. Dengan cara itu, apabila JavaScript dilumpuhkan, anda masih boleh melihat tab dan boleh diakses dengan nilai utama. Aaron menulis satu lagi bahagian di A List Apart yang merangkumi gambaran yang lebih umum mengenai bagaimana anda harus memikirkan masalah ini.

Berikut adalah contoh lain. Katakan anda mempunyai pautan yang memuatkan kandungan secara dinamik. The href nilai kosong, kerana segala-galanya memuat melalui JavaScript dengan kaedah preventDefault ().

Sebaliknya, adalah bijak untuk menetapkan href harta kepada tunjuk ke halaman yang berbeza di mana kandungan boleh memuat secara semula jadi, tetapi pengunjung hanya melihat halaman tersebut apabila JavaScript dilumpuhkan.

Peningkatan progresif adalah lebih daripada JavaScript, tetapi dengan perkembangan web yang semakin meningkat setiap tahun, tidak ada keraguan bahawa JavaScript memainkan peranan penting.

Beroperasi di bawah andaian itu segala-galanya telah dilumpuhkan, dan naik dari sana. Ini mungkin termasuk masalah dengan widget terbenam yang berada di luar kawalan anda