Isi
- Merancang untuk yang tidak diketahui
- Pendekatan pragmatis untuk desain
- Menjadi tata letak agnostik
- Coding secara progresif
- Menyelam ke mark-up
Sepertinya semua orang berbicara tentang desain web yang responsif akhir-akhir ini, dan dengan alasan yang bagus; karena jumlah perangkat yang mendukung web terus bertambah - masing-masing dengan kemampuan dan fitur yang berbeda - membuat situs web dengan lebar tetap tidak lagi bijaksana.
Sebenarnya, itu tidak pernah terjadi. Namun hingga saat ini, mendesain pengalaman yang dibuat dengan sejumlah asumsi masih dianggap praktik terbaik, baik di sekitar resolusi layar, bandwidth, atau metode input. Jika Anda pernah merancang situs web dengan lebar 960px, hanya untuk melihatnya di netbook layar kecil teman (dan ya, saya menulis dari pengalaman yang menyakitkan di sini), Anda akan mengerti mengapa ini bukanlah pendekatan yang sangat cerdas. Sekarang, dengan smartphone dan tablet yang digabungkan, terlihat jelas bahwa metode tradisional kami tidak lagi sesuai untuk tujuan tertentu.
Untungnya, munculnya kueri media CSS dan pengakuan yang berkembang bahwa web adalah media tersendiri, berarti kami mulai merangkul sifat dasar platform, menerima bahwa universalitasnya adalah kekuatan, bukan kelemahan.
Selama lima hari ke depan, saya akan memandu Anda melalui teknik yang mengenali fakta ini: desain web yang responsif. Dikembangkan oleh Ethan Marcotte, ini menggabungkan tata letak yang lancar, gambar yang fleksibel, dan kueri media untuk membantu kami membangun situs yang dengan anggun beradaptasi dengan lingkungan apa pun yang mereka temui.
Saya akan mendemonstrasikan pendekatan ini dengan menunjukkan kepada Anda cara membuat galeri media sederhana. Dalam contoh saya, saya akan membuat situs web kecil untuk mendokumentasikan perjalanan yang saya lakukan baru-baru ini di seluruh Amerika Serikat, tetapi jangan ragu untuk menyesuaikan kode dan desain agar sesuai dengan kebutuhan Anda sendiri.
Merancang untuk yang tidak diketahui
Sebagian besar tutorial ini akan berpusat di sekitar aspek pengembangan desain responsif. Namun sebelum kita menggali kode apa pun, mari luangkan waktu sejenak untuk memikirkan bagaimana kita dapat merancang situs web yang mungkin memiliki tata letak tak terbatas.
Sekarang, saya beruntung bisa mendesain antarmuka dan kembangkan kode frontend yang membuatnya nyata. Ini bukan keahlian unik tentunya - jika Anda bekerja untuk diri sendiri, Anda mungkin sama. Tapi tentu saja bermanfaat untuk memahami bagaimana konten dapat beradaptasi dan mengalir kembali saat membuat desain yang mengalir.
Saya juga bekerja sebagai bagian dari tim yang lebih besar di mana peran saya lebih terspesialisasi. Dalam lingkungan seperti itu, perancang visual dapat menjadi fokus hanya pada menerjemahkan wireframes menjadi comp yang menarik, menarik (ditandatangani, pixel-perfect). Dan bukan hal yang aneh bagi pengembang untuk ditempatkan secara terpisah, menerjemahkan tata letak ini ke dalam markup dan CSS yang ramping dan efisien.
Namun, alur kerja linier dan terpisah seperti itu dengan cepat rusak begitu kami mulai mengevaluasi bagaimana desain akan beradaptasi dengan lingkungan yang berbeda. Seperti halnya alat atau teknologi baru, kita juga harus mempertimbangkan cara kerja yang lebih kolaboratif dan gesit. Banyak masalah tersulit yang dihadapi saat mendesain situs web responsif dapat diselesaikan hanya melalui percakapan, eksperimen, dan iterasi.
Pendekatan pragmatis untuk desain
Bukan berarti tidak ada ruang bagi desainer untuk memikirkan tentang bagaimana desain dapat bekerja di luar batasan perangkat tertentu.
Di Clearleft, kami memulai desain visual dari perspektif desktop. Kami mulai dengan mendefinisikan bahasa desain dan estetika visual yang menyeluruh, sering kali mendasarkan eksplorasi awal di sekitar bagian inti konten. Misalnya, jika kita mendesain situs makanan, kita akan mulai dengan halaman resep; untuk situs berita, halaman cerita.
Halaman ini tidak hanya penting di situs, tetapi mungkin menyertakan konten terstruktur yang cukup bagi kami untuk membuat palet tipografi. Kami juga akan memikirkan tentang bagaimana tata letak dapat beradaptasi - meskipun itu hanya ada di benak kami pada tahap ini.
Salah satu cara yang berguna untuk menguji desain adalah dengan mengambil halaman seperti itu dan menyesuaikannya untuk layar yang lebih sempit (~ 320px lebar). Anda mungkin akan menemukan bahwa beberapa aspek desain perlu dipikirkan ulang agar berfungsi pada lebar ini. Berikut beberapa contohnya:
- Tipografi: Judul besar dapat berfungsi dengan baik pada tata letak yang lebih lebar, tetapi pada layar yang lebih kecil, judul tersebut dapat memakan banyak ruang vertikal dan karenanya memerlukan pengguliran tambahan. Saat panjang garis berubah, Anda harus mempertimbangkan ketinggian garis dan perlakuan tipografi lainnya juga.
- Tautan: Bagaimana desain Anda akan berfungsi pada perangkat layar sentuh? Meskipun kami belum memiliki cara yang mudah untuk mendeteksinya (artinya kami harus mempertimbangkan semua aspek desain kami), mendesain untuk layar yang lebih sempit dapat memberi kami kesempatan untuk memikirkan area target untuk tautan dan elemen interaktif lainnya. . Panduan iOS merekomendasikan bahwa ini setidaknya 44 piksel / poin persegi, yang merupakan angka yang bagus untuk dituju.
- Navigasi: Ini mungkin akan menjadi komponen yang paling canggung dari semua desain responsif, terutama jika situs Anda memiliki banyak bagian dan hierarki yang dalam. Brad Frost telah menulis ringkasan beberapa pendekatan berbeda untuk navigasi yang saat ini sedang dipertimbangkan.
- Konten yang tidak berguna: Apakah beberapa konten tidak diperlukan? Apakah konten lain hanya perlu ditampilkan dalam skenario tertentu? Saya tidak menganjurkan menyembunyikan konten berdasarkan perangkat apa yang kebetulan digunakan pengguna, tetapi teknik seperti pemuatan bersyarat (yang akan kita lihat nanti minggu ini) dapat membantu kami menyajikan halaman yang lebih kecil yang hanya memuat konten pelengkap saat diperlukan.
Mendesain dua tata letak yang kontras memperkuat gagasan bahwa desain akan beradaptasi, sambil menyingkirkan potensi yang didapat sejak dini. Meskipun ini terdengar seperti penggandaan pekerjaan, perlu diingat bahwa kami tidak mendesain setiap halaman dengan presisi sempurna piksel. Alih-alih, kami berfokus pada pembuatan bahasa desain yang dapat diskalakan - bahasa yang akan berkembang saat kami mulai menerapkannya dalam kode, dan bahasa yang didasarkan pada modul dan komponen individual.
Menjadi tata letak agnostik
Tidak mengherankan, untuk industri yang secara historis memperlakukan web seperti cetakan, tata letak dengan lebar tetap telah meresap ke banyak hasil yang kami hasilkan. Saat kami mulai merancang untuk media yang dapat disesuaikan, pendekatan baru sedang dipertimbangkan yang memungkinkan kami untuk memecahkan masalah dan mengkomunikasikan ide sambil mengakui sifat cair dari media. Berikut ini beberapa favorit saya:
- Diagram deskripsi halaman: Meskipun wireframe sering kali menyiratkan tata letak (dan karenanya mengasumsikan jenis perangkat tertentu), diagram deskripsi halaman menghapus asumsi ini dan sebagai gantinya mendeskripsikan masing-masing komponen, yang disusun dalam dokumen dalam hal prioritas.
- Ubin gaya: Saat mengkomunikasikan ide desain dengan klien, kami dapat menemukan diri kami menampilkan 'lukisan situs web'. Jika kami tidak berhati-hati, klien akan meminta untuk melihat konsep yang menunjukkan bagaimana desain akan terlihat pada perangkat lain juga. Ini dapat memaksa kita ke dalam situasi yang tidak berkelanjutan dalam menghasilkan banyak halaman untuk banyak perangkat. Samantha Warren telah memikirkan masalah ini dan muncul dengan ubin gaya. Ini duduk di suatu tempat di antara papan suasana hati (tetapi kurang kabur) dan comps yang sepenuhnya terealisasi (tetapi kurang tepat), dan membantu kami mengkomunikasikan tipografi, gaya tombol, dan perawatan masthead. Mereka juga mendorong tingkat diskusi yang lebih dewasa dengan klien kami.
- Memobilisasi game desain: Latihan ini dapat bekerja dengan sangat baik selama lokakarya desain kolaboratif. Dalam latihan ini, setiap orang menuliskan di Post-it notes elemen-elemen yang mungkin muncul di halaman tertentu. Ini kemudian ditempelkan di dinding dalam urutan kepentingan, seolah-olah mereka tampak linier pada ponsel. Diskusi yang dihasilkan mungkin menghasilkan beberapa kesimpulan yang mengejutkan. Misalnya, Anda mungkin menyadari bahwa navigasi bukanlah komponen terpenting di halaman. Ini bisa mengikuti desain, di mana tautan lewati di bagian atas halaman terhubung ke navigasi di footer.
Tentu masih ada ruang untuk alat yang sudah kami gunakan, tetapi saat mendesain situs web dalam istilah yang luas, kami perlu ingat bahwa tata letak tidak lagi dikenal.
Coding secara progresif
Untungnya, kami tidak perlu khawatir tentang desain visual dalam contoh yang sedang kami kerjakan karena kerja keras telah dilakukan untuk kami! Sebaliknya, kami dapat berkonsentrasi pada pengkodean desain kami menjadi situs web yang sepenuhnya responsif.
Satu hal lagi sebelum kita mulai. Penting untuk mengingat prinsip dasar media tempat kita bekerja: universalitas. Itu berarti tidak hanya membangun untuk perangkat yang mendukung web saat ini, tetapi juga memastikan kompatibilitas dengan yang kemarin dan besok. John Allsopp menjelaskan mengapa prinsip ini penting dalam posnya The Next 6 Billion:
"Enam miliar berikutnya ini adalah anak-anak di pedesaan India, Afrika, Cina di mana akses ke listrik, dan jaringan, mungkin terputus-putus. Itu adalah seseorang di Sumatera dengan kotak Wintel yang berusia satu dekade. Orang-orang itu berbicara dalam ratusan bahasa yang berbeda, dengan lusinan bahasa yang berbeda. sistem penulisan. Orang-orang yang pertama di keluarga mereka yang dapat membaca dan menulis. 20 persen orang di seluruh dunia yang tidak dapat membaca atau menulis. Namun.’
Kita dapat melacak pemahaman kita tentang web dengan melihat mode yang berbeda (untuk menginginkan kata yang lebih baik) yang telah berlaku di antara profesi kita: standar web, aksesibilitas, JavaScript yang tidak mengganggu… semua varian pada tema yang sama: peningkatan progresif. Hal yang sama berlaku untuk desain web responsif. Untuk membangun a sungguh situs web responsif adalah membangun situs yang tidak hanya kompatibel ke belakang, tetapi juga ramah di masa depan.
Menyelam ke mark-up
Oke, cukup basa-basi, saatnya buka editor teks.Desainer kami telah memberi kami desain berorientasi desktop, dan telah berbaik hati memberikan contoh bagaimana hal ini dapat muncul di area pandang yang lebih sempit juga.
Mungkin tergoda untuk membuat kode ini secara terpisah, tetapi saya akan menyarankan pendekatan yang berbeda. Dengan menempatkan komponen terpisah - atau pola - yang menyusun desain ke satu halaman, kita dapat membuat portofolio pola. Hal ini memungkinkan kita untuk mengembangkan komponen di luar batasan tata letak halaman mana pun, dan akan memberi kita sesuatu untuk dirujuk nanti untuk pengujian regresi apa pun. Mari kita lihat markup awal di beberapa perangkat berbeda:
Lihat portofolio pola mark-up kami
Terkutuklah - kita sudah memiliki situs web yang responsif! Konten kami beradaptasi dengan batasan masing-masing perangkat, baik itu iPad baru yang mewah atau ponsel berfitur yang sudah dibuang. Ia bahkan bekerja di peramban teks saja seperti Lynx.
Berkat prinsip yang mendasari universalitas, web menjadi seperti itu responsif secara default. Itu bagus, tetapi itu juga berarti bahwa apa pun yang kami lakukan pada kode mulai sekarang dapat membahayakan kemampuan beradaptasi asli ini.
Besok: Kami akan melangkah dengan hati-hati dan mulai menerapkan aspek pertama dari desain responsif: tipografi dan kisi fluid.
