Bina laman web yang responsif dalam seminggu: merancang dengan responsif (bahagian 1)

Kandungan

• Merancang untuk yang tidak diketahui
• Pendekatan pragmatik untuk merancang
• Menjadi susun atur agnostik
• Pengekodan secara progresif
• Menyelam mark-up

Nampaknya semua orang bercakap mengenai reka bentuk web yang responsif hari ini, dan dengan alasan yang baik; kerana bilangan peranti berkemampuan web terus bertambah - masing-masing dengan keupayaan dan ciri yang berbeza - tidak masuk akal untuk membina laman web selebar tetap.

Kebenarannya, tidak pernah berlaku. Namun hingga kini dianggap praktik terbaik untuk merancang pengalaman yang membuat sejumlah asumsi, baik mengenai resolusi layar, lebar jalur atau metode input. Sekiranya anda pernah merancang laman web seluas 960 piksel, hanya untuk melihatnya di netbook skrin kecil rakan (dan ya, saya menulis dari pengalaman yang menyakitkan di sini), anda akan memahami mengapa ini bukan pendekatan yang sangat bijak. Kini, dengan telefon pintar dan tablet dimasukkan ke dalam campuran, jelas bahawa kaedah tradisional kami tidak lagi sesuai dengan tujuan.

Syukurlah, munculnya pertanyaan media CSS dan semakin bertambahnya pengakuan bahawa web adalah media dengan sendirinya, ini bermaksud kita mulai merangkul sifat sebenar platform, dan menerima bahawa universalitasnya adalah kekuatan, bukan kelemahan.

Selama lima hari akan datang, saya akan membimbing anda melalui teknik yang menyedari hakikat ini: reka bentuk web responsif. Dibangunkan oleh Ethan Marcotte, ini menggabungkan susun atur cecair, gambar fleksibel dan pertanyaan media untuk membantu kami membina laman web yang menyesuaikan diri dengan baik dengan persekitaran yang mereka hadapi.

Saya akan menunjukkan pendekatan ini dengan menunjukkan cara membina galeri media ringkas. Dalam contoh saya, saya akan membuat laman web kecil untuk mendokumentasikan perjalanan darat baru-baru ini yang saya lalui di Amerika Syarikat, tetapi jangan ragu untuk menyesuaikan kod dan reka bentuk untuk memenuhi keperluan anda sendiri.

Merancang untuk yang tidak diketahui

Sebilangan besar tutorial ini akan berpusat pada aspek pengembangan reka bentuk responsif. Tetapi sebelum kita menggali kod apa pun, mari luangkan sedikit masa untuk memikirkan bagaimana kita dapat merancang laman web yang mungkin mempunyai susun atur yang tidak terbatas.

Sekarang, saya bernasib baik kerana dapat merancang antara muka dan mengembangkan kod frontend yang menjadikannya nyata. Ini tentu bukan kemahiran yang unik - jika anda bekerja untuk diri sendiri maka anda mungkin sama. Tetapi tentu sekali menguntungkan untuk memahami bagaimana kandungan dapat menyesuaikan diri dan melakukan reflow ketika membuat reka bentuk cecair.

Saya juga bekerja sebagai sebahagian daripada pasukan yang lebih besar di mana peranan saya lebih khusus. Dalam persekitaran seperti itu, pereka visual hanya dapat memfokuskan diri dalam menerjemahkan bingkai kawat menjadi kompak yang menarik (menarik, sempurna, piksel). Dan tidak biasa bagi pembangun untuk berada secara berasingan, menerjemahkan susun atur ini menjadi markup dan CSS yang ramping dan cekap.

Walau bagaimanapun, aliran kerja yang linear dan berasingan dengan cepat merosot sebaik sahaja kita mula menilai bagaimana reka bentuk akan menyesuaikan diri dengan persekitaran yang berbeza. Sama seperti alat atau teknologi baru, kita juga harus mempertimbangkan cara kerja yang lebih kolaboratif dan tangkas. Banyak masalah paling sukar yang dihadapi ketika merancang laman web yang responsif dapat diselesaikan hanya melalui perbualan, percubaan dan lelaran.

Pendekatan pragmatik untuk merancang

Itu tidak bermaksud tidak ada ruang bagi pereka untuk memikirkan bagaimana reka bentuk dapat berfungsi di luar batasan mana-mana peranti tertentu.

Di Clearleft, kami memulakan reka bentuk visual dari perspektif desktop. Kita mulakan dengan mendefinisikan bahasa reka bentuk yang menyeluruh dan estetika visual, sering mendasari penjelajahan awal di sekitar isi inti. Contohnya, jika kita merancang laman web makanan, kita akan mulakan dengan halaman resipi; untuk laman berita, halaman cerita.

Bukan hanya ini halaman penting di laman web ini, tetapi mungkin merangkumi kandungan terstruktur yang cukup untuk kita membuat palet tipografi. Kami juga akan memikirkan bagaimana susun aturnya dapat disesuaikan - walaupun hanya di fikiran kita pada tahap ini.

Salah satu cara yang berguna untuk menguji tekanan pada reka bentuk adalah dengan mengambil halaman sedemikian dan menyesuaikannya dengan skrin yang lebih sempit (~ 320 piksel). Anda mungkin akan mengetahui bahawa beberapa aspek reka bentuk perlu difikirkan semula agar mereka dapat bekerja seluas ini. Berikut adalah beberapa contoh:

• Tipografi: Tajuk besar dapat berfungsi dengan baik pada susun atur yang lebih luas, tetapi pada layar yang lebih kecil mereka dapat mengambil banyak ruang menegak dan oleh itu memerlukan penggulungan tambahan. Apabila panjang garis berubah, anda juga harus mempertimbangkan ketinggian garis dan rawatan tipografi yang lain.
• Pautan: Bagaimana reka bentuk anda berfungsi pada peranti skrin sentuh? Walaupun kita belum mempunyai cara yang mudah untuk mengesannya (bermaksud kita harus mempertimbangkan dalam semua aspek reka bentuk kita), merancang untuk skrin yang lebih sempit dapat memberi kita peluang untuk memikirkan bidang sasaran untuk pautan dan elemen interaktif lain . Garis panduan iOS mengesyorkan agar ini sekurang-kurangnya 44 piksel / titik persegi, yang merupakan angka yang baik untuk dituju.
• Navigasi: Ini mungkin merupakan komponen yang paling canggung dari reka bentuk responsif, terutamanya jika laman web anda mempunyai banyak bahagian dan hierarki yang mendalam. Brad Frost telah menulis ringkasan beberapa pendekatan berbeza untuk navigasi yang sedang dipertimbangkan.
• Kandungan berlebihan: Adakah beberapa kandungan tidak diperlukan? Adakah kandungan lain hanya perlu ditunjukkan dalam senario tertentu? Saya tidak menganjurkan menyembunyikan kandungan berdasarkan peranti apa yang kebiasaannya digunakan pengguna, tetapi teknik seperti pemuatan bersyarat (yang akan kita lihat pada akhir minggu ini) dapat membantu kami menyajikan halaman yang lebih kecil yang hanya memuatkan kandungan pelengkap apabila diperlukan.

Merancang dua susun atur yang berbeza menguatkan idea bahawa reka bentuk akan menyesuaikan diri, sambil menyiapkan potensi yang lebih awal. Walaupun ini sepertinya berlipat ganda dari pekerjaan, ingatlah bahawa kami tidak merancang setiap halaman dengan ketepatan piksel yang sempurna. Sebagai gantinya, kami memfokuskan diri untuk membangun bahasa reka bentuk yang dapat diskalakan - bahasa yang akan berkembang ketika kami mulai menerapkannya dalam kod, dan bahasa yang didasarkan pada modul dan komponen individu.

Menjadi susun atur agnostik

Tidak menghairankan, untuk industri yang secara historis memperlakukan web seperti cetak, susun atur lebar tetap telah merembes banyak hasil yang kami hasilkan. Ketika kita mulai merancang untuk medium yang dapat disesuaikan, pendekatan baru sedang dipertimbangkan yang memungkinkan kita untuk menyelesaikan masalah dan menyampaikan idea sambil mengakui sifat medium yang lancar. Berikut adalah beberapa kegemaran saya:

• Gambarajah keterangan halaman: Walaupun rangka dawai seringkali menyiratkan susun atur (dan dengan itu menganggap jenis peranti tertentu), diagram keterangan halaman menghilangkan anggapan ini dan sebaliknya menggambarkan komponen individu, yang disusun dalam dokumen dari segi keutamaan.
• Jubin gaya: Semasa menyampaikan idea reka bentuk dengan pelanggan, kita dapat menunjukkan 'lukisan laman web'. Sekiranya kita tidak berhati-hati, pelanggan dengan betul akan meminta untuk melihat konsep yang menunjukkan bagaimana reka bentuk akan kelihatan pada peranti lain juga. Ini dapat memaksa kita ke dalam situasi tidak berkesinambungan menghasilkan banyak halaman untuk pelbagai peranti. Samantha Warren telah memikirkan masalah ini dan hadir dengan jubin gaya. Ini terletak di antara papan mood (tetapi kurang kabur) dan komputasi yang disedari sepenuhnya (tetapi kurang tepat), dan membantu kami menyampaikan tipografi, gaya butang dan rawatan masthead. Mereka juga mendorong perbincangan yang lebih matang dengan pelanggan kami.
• Menggerakkan permainan reka bentuk: Latihan ini dapat berjalan dengan baik semasa bengkel reka bentuk kolaboratif. Dalam latihan ini, semua orang menulis di Post-it mencatat unsur-unsur yang mungkin muncul di halaman tertentu. Ini kemudian dilekatkan ke dinding dalam urutan penting, seolah-olah mereka kelihatan lurus pada telefon bimbit. Perbincangan yang dihasilkan dapat menghasilkan beberapa kesimpulan yang mengejutkan. Sebagai contoh, anda mungkin menyedari bahawa navigasi bukanlah komponen terpenting di halaman. Ini dapat diteruskan ke reka bentuk, di mana pautan langkau di bahagian atas halaman menghubungkan ke navigasi di footer.

Masih ada ruang untuk alat yang sudah kita gunakan tentu saja, tetapi ketika merancang laman web secara luas, kita perlu ingat bahawa susun atur tidak lagi diketahui.

Pengekodan secara progresif

Syukurlah, kita tidak perlu bimbang tentang reka bentuk visual dalam contoh yang sedang kita kerjakan kerana kerja keras telah dilakukan untuk kita! Sebagai gantinya, kami dapat menumpukan perhatian pada pengkodan reka bentuk kami ke laman web yang responsif sepenuhnya.

Satu perkara lagi sebelum kita memulakan. Penting untuk mengingat prinsip asas media yang kita bekerjasama: universalitas. Ini bermaksud bukan sahaja membangun untuk peranti yang dibolehkan web hari ini, tetapi juga memastikan keserasian dengan peranti yang ada pada hari semalam dan esok juga. John Allsopp menerangkan mengapa prinsip ini penting dalam tulisannya The Next 6 Billion:

"Enam bilion berikutnya adalah kanak-kanak di luar bandar India, Afrika, China di mana akses kepada kuasa, dan rangkaian, mungkin berselang. Ia adalah seseorang di Sumatera pada kotak Wintel yang berusia satu dekad. Ini adalah orang-orang yang bercakap beratus-ratus bahasa yang berbeza, dengan puluhan bahasa sistem penulisan. Ini adalah orang yang pertama dalam keluarga mereka dapat membaca dan menulis. Ini adalah 20 peratus orang di seluruh dunia yang tidak dapat membaca atau menulis.’

Kami dapat menelusuri pemahaman kami tentang web dengan melihat berbagai mode (kerana memerlukan kata yang lebih baik) yang berlaku di kalangan profesion kami: standard web, kebolehaksesan, JavaScript yang tidak mengganggu ... semuanya adalah varian dengan tema yang sama: peningkatan progresif. Begitu juga dengan reka bentuk web yang responsif. Untuk membina a sungguh laman web responsif adalah membina laman web yang bukan sahaja serasi ke belakang, tetapi juga mesra masa depan.

Menyelam mark-up

Baiklah, cukup mukadimah, sudah tiba masanya untuk membuka editor teks.Pereka kami telah memberikan kami reka bentuk yang berorientasikan desktop, dan cukup baik untuk memberikan contoh bagaimana ini mungkin muncul di ruang pandang yang lebih sempit juga.

Mungkin menggoda untuk mengkodkannya secara berasingan, tetapi saya akan mencadangkan pendekatan yang berbeza. Dengan meletakkan komponen yang terpisah - atau corak - yang membentuk reka bentuk ke satu halaman, kita dapat membuat portfolio corak. Ini membolehkan kami mengembangkan komponen di luar batasan susun atur halaman, dan akan memberi kami sesuatu untuk dirujuk kemudian untuk sebarang ujian regresi. Mari lihat markup awal dalam beberapa peranti yang berbeza:

Lihat portfolio corak bertanda kami

Baiklah, saya akan terkilan - kami sudah mempunyai laman web yang responsif! Kandungan kami menyesuaikan diri dengan batasan setiap peranti, seperti iPad baru yang mewah atau telefon bimbit yang dibuang. Ia bahkan berfungsi dalam penyemak imbas teks sahaja seperti Lynx.

Berkat prinsip universalitas yang mendasari, web adalah responsif secara lalai. Itu bagus, tetapi ini juga bermaksud bahawa apa sahaja yang kita lakukan terhadap kod mulai sekarang boleh menjejaskan kemampuan menyesuaikan diri ini.

Esok: Kami akan mengikuti dengan teliti dan mula menerapkan aspek pertama reka bentuk responsif: tipografi dan grid cecair.