Kandungan
Reka bentuk web responsif telah menjadi topik hangat sejak beberapa tahun kebelakangan ini. Dan mengapa tidak? Bahan-bahan grid yang fleksibel, gambar yang fleksibel dan pertanyaan media adalah resipi hebat untuk membantu kami melayani laman web ke skrin dengan pelbagai saiz.
Tetapi kita tidak boleh berhenti di situ. Untuk benar-benar responsif, kita mesti berjumpa dengan pengguna di mana mereka berada. Laman web yang benar-benar responsif menyesuaikan diri bukan sahaja dengan ukuran skrin peranti, tetapi juga keupayaan dan tetapannya yang lebih luas. Laman web kami harus mengendalikan skrin dengan ukuran apa pun. Tetapi mereka juga harus mengendalikan banyak skrin, atau tidak ada layar sama sekali. Dan mereka masih perlu menangani lebih banyak lagi. Paparan hitam dan putih? Bawa. Tiada audio? Tiada masalah. Tidak ada sokongan JavaScript, CSS, atau gambar? Pastinya. Sambungan mudah alih yang perlahan? Layan versi laman web yang ringan. Peranti input yang tidak biasa? Semua sama untuk kita.
Bagaimana kita sampai di sana? Saya melihat lima asas asas: semantik, kebolehaksesan, fokus, pertanyaan media, dan kecekapan.
1. Semantik
Kami merancang laman web dengan mempertimbangkan pengguna, tetapi pengalaman pengguna bergantung pada apa yang difahami oleh penyemak imbas mereka. Untuk memastikan peranti yang tidak dapat diramalkan dapat memahami dokumen dan aplikasi kita, kita perlu menyediakan asas semantik yang kuat. HTML semantik adalah tulang belakang untuk ini, dan ia dapat difahami oleh penyemak imbas yang paling asas. HTML5 menambah makna semantik tambahan untuk penyemak imbas terkini dengan elemen seperti artikel dan masa. Peranan dan mercu tanda ARIA, yang awalnya dikembangkan untuk aksesibilitas, menambah konteks dan makna tambahan untuk peranti. Struktur ini membantu memastikan peranti memahami dan membuat web dengan betul.
Terdapat aspek lain dalam semantik. Kita perlu meneliti sistem pengurusan kandungan kita dengan teliti dan menilai sama ada sistem tersebut memenuhi tujuan mereka. Memperlakukan kandungan sebagai blok teks dan media yang tidak dapat dibezakan tidak akan berfungsi kerana kami memberikannya ke rangkaian peranti dan keupayaan peranti yang lebih luas. Sebaliknya, kita harus membina semantik ke dalam proses pembuatan konten, meminjam idea dari kewartawanan dan model "Buat Sekali, Terbitkan Di Mana-mana" NPR. Kecuali sistem yang kami gunakan untuk menerbitkan kandungan memperkuat struktur semantik, sistem itu tidak akan dapat dipertahankan. Hanya jika semantik kekal sepanjang hayat laman web, responsif akan berjaya.
2. Kebolehcapaian
Kebolehcapaian terlalu sering diperlakukan seperti kotak untuk dicentang, atau sesuatu yang hanya diperhatikan kerana ia adalah "perkara yang betul untuk dilakukan". Tetapi teknik kebolehaksesan menjadikan laman web lebih berguna untuk semua orang dan lebih mudah disesuaikan dengan pelbagai jenis peranti.
Garis panduan yang dibuat untuk pengguna pekak menjadikan laman berfungsi lebih baik untuk pengguna yang mematikan peranti mereka. Tetapan kontras yang dikembangkan dengan mempertimbangkan kebutaan warna memastikan laman web dapat dibaca pada peranti dengan keupayaan warna yang terhad atau tidak. Teknik untuk menjadikan laman web berfungsi untuk pengguna buta dengan pembaca layar juga menjadikannya dapat digunakan, kerana kawalan suara dan output audio bergerak ke arus perdana. Mempersembahkan kandungan dalam bahasa biasa dan direka untuk kejelasan adalah baik untuk semua orang.
Kawasan live ARIA, yang memungkinkan kita mengawal bagaimana dan kapan penyemak imbas akan memberitahu pengguna mengenai perubahan yang dibuat pada bahagian halaman, mempunyai peranan khas di sini. Kawasan langsung mempunyai implikasi yang jelas untuk pembaca skrin dan konteks audio sahaja, tetapi penting untuk memberikan pengalaman pengguna yang baik pada peranti yang didorong oleh HUD seperti Google Glass dan peranti dengan skrin yang lebih banyak dan lebih kecil juga. Laman web interaktif, berasaskan data dan masa nyata semakin biasa; mereka yang tidak bersedia untuk pelbagai peranti akan berada di belakang keluk.
3. Fokus
Pengguna menganggap laman web secara holistik, tetapi penyemak imbas hanya memfokuskan pada satu elemen pada satu masa. Pengurusan fokus yang teliti sangat penting untuk pengalaman. Pada peranti dengan layar kecil, ia memastikan bahagian layar yang betul ditampilkan setelah pengguna mengambil tindakan. Pada peranti atau peranti audio sahaja dengan input bukan tetikus, tanpa sentuhan, mungkin satu-satunya perkara yang menjadikan pengalaman dapat digunakan sama sekali.
4. Pertanyaan media
Pertanyaan media sudah menjadi bintang yang semakin meningkat, tetapi sekarang kami hampir tidak menggaruk permukaan. Selain ukuran skrin dan ruang pandang, pertanyaan media dapat memberitahu kami nisbah aspek peranti, kemampuan warna, orientasi (potret vs lanskap), sama ada progresif imbasan atau interlaced, dan banyak lagi. Menggunakannya semaksimal mungkin dapat membantu mengawal pengalaman pada pelbagai peranti yang jauh dari mudah alih, tablet dan desktop.
5. Kecekapan
Semua teknik ini membawa kepada mereka godaan untuk memberikan lebih banyak kod dan aset yang lebih besar kepada pengguna, sehingga penyemak imbas mereka mengetahuinya. Tetapi melayani setiap kemungkinan kombinasi aset dan kod tidak akan berfungsi untuk pengguna dengan sambungan lambat atau bermeter. Pengguna tidak perlu memuat turun setiap bahagian laman web anda hanya untuk mendapatkan yang mereka perlukan.
Mengamalkan reka bentuk responsif sepenuhnya juga bermaksud menggunakan teknik seperti peningkatan progresif untuk mengawal kod dan aset apa yang dimuat turun oleh pengguna. Sekiranya pustaka atau kod JavaScript mempunyai kemampuan khusus, muatkan hanya setelah menguji kemampuan peranti. Daripada memuatkan semua CSS pertanyaan media dalam satu fail besar, muatkan hanya CSS yang diperlukan menggunakan pertanyaan media. Kita juga harus mengusahakan teknologi untuk membantu kita menayangkan gambar dan kod yang responsif terhadap hubungan pengguna dan juga peranti mereka.
Ini akan menjadi sukar. Seluruh pasukan - pembuat kandungan, pereka, pembangun depan dan pelayan - perlu bekerjasama dan bekerjasama. Tetapi tujuan akhir (reka bentuk web yang benar-benar responsif) bermaksud laman web kami berfungsi untuk semua pengguna, tidak kira di mana, kapan, atau dengan peranti mana yang mereka lawati.
Untuk lebih lanjut mengenai reka bentuk web yang responsif, lihat bahagian terakhir tutorial Paul Robert Lloyd mengenai cara membina laman web yang responsif dalam seminggu.
