Para desainer web dunia sedang hangat membahas tentang desain web responsif. Pada tingkatan tertentu, popularitas konsep desain web yang responsif menjadi agenda utama, hal ini karena semakin banyaknya pengguna di tambah beragamnya perangkat keras akses internet yang digunakan pengguna untuk mengakses halaman web. iPad, iPhone, perangkat mobile Android, desktop, netbook dan lain-lain. Ini memaksa kita masuk ke dalam sebuah masa di mana desain web harus berfungsi dalam banyak cara dan banyak perangkat. Mari kita sama-sama telusuri pengertian dan prinsip di balik desain web responsif.
Fitur Inti Desain Web Responsif
Agar desain web kita dianggap "responsif," maka perlu untuk memahami tiga fitur kunci dalam merancang web responsif. Desainer dan pengembang web, Ethan Marcotte menuliskan bahwa konsep desain web responsif memiliki tiga fitur kunci, yaitu:
- Situs yang akan dibangun harus memiliki kerangka dasar fleksibel (flexible grid).
- Gambar yang dimasukkan ke dalam desain harus mampu fleksibel sendiri.
- Pandangan yang berbeda (different view) harus diaktifkan pada konteks yang berbeda melalui media query.
Tiga kunci dasar desain web responsif diatas harus diperhatikan dengan seksama agar hasil akhir web benar-benar responsif. Jika kemudian kita mendesain web tanpa tiga kunci dasar tadi maka hasil akhir web bukanlah web responsif. Berarti desain cacat...
Grid Fleksibel
Istilah grid ini berkaitan dengan desain web yang cukup tumit. Mengharuskan situs web yang anda desain menggunakan grid fleksibel bukan berarti bahwa itu membatasi anda untuk memilih berbagai bentuk dan ukuran dalam penyesuaian dengan sistem jaringan yang kompleks di luar sana. Namun sebaliknya grid fleksibel membantu kita untuk mendesain web yang lebih mudah dan fleksibel dengan berbagai pandangan.
Mendefinisikan parameter sendiri untuk kolom (column), jarak (spacing) dan kontainer (container) merupakan solusi terbaik untuk desain web yang akan menghasilkan halaman web fleksibel dan mampu menyesuaikan dengan sistem di luar sana. Bahkan, sistem grid yang ada sebagian besar, terbatas hanya menggunakan CSS class untuk menentukan ukuran (size), ruang (space) dan keselarasan (alignment). Ketika anda mencoba untuk menempatkan objek di batas-batas ini ke dalam desain web responsif yang anda buat, itu justru akan membuat proses menjadi lebih rumit dan akan memakan banyak waktu dibandingkan dengan koding grid buatan anda sendiri.
Apakah anda menggunakan sistem grid premade (bahan mentah sebagai acuan) atau membuat kustom grid sendiri, hal ini merupakan aspek penting dari sebuah sistem grid fleksibel dalam menyusun mekanisme ukuran, tata letak dan jarak. Bagi seorang desainer web, ini berarti meninggalkan satuan ukuran pixel yang telah lama menemani hari-hari kita dalam mendesain web dan menggantinya dengan layout web yang menggunakan satuan ukuran presentase dan em, yang merupakan satuan unit ukuran relatif.
Namun, hal ini bukan berarti kita meninggalkan satuan pixel dalam pembuatan layout web dengan perangkat lunak editing gambar (misal; Photoshop, Fireworks dan lain-lain). Sebaliknya, ini merupakan tantangan kepada para desainer web untuk kembali belajar dasar-dasar perhitungan matematika. Perhitungan matematika merupakan bagian dari proses desain web responsif yang digunakan sebagai proses konversi dari satuan pixel ke dalam layout web dengan menggunakan satuan unit pengukuran relatif (persen dan em).
Gambar Fleksibel
Gambar yang bergerak dan berskala dengan grid fleksibel adalah kunci berikutnya dalam mendesain web responsif. Maksudnya, ukuran gambar dan posisi gambar akan berubah sesuai dengan pandangan browser. Hal ini merupakan kisah klasik yang membuat para desainer web cukup mengerutkan dahi pertanda pusing tingkat kelurahan. Kenapa? Karena gambar yang diload oleh browser adalah gambar dengan ukuran maksimal, ini membuat loading page (pemuatan halaman) cenderung menjadi lebih berat, sedangkan desainer web hanya bisa mengubah ukuran skala gambarnya saja dari atribut HTML width dan height tanpa mampu menurunkan ukuran gambar yang sebenarnya. Perubahan skala gambar mengikuti pandangan dari perangkat browser di tujukan untuk penyesuaian dan memberikan ruang teks artikel pada halaman tersebut. Dan perubahan skala gambar bukanlah cara terbaik untuk mempercepat loading page web responsif. Mungkin inilah saatnya bagi para desainer web untuk mengkaji ulang penggunaan gambar-gambar yang terlalu berlebihan pada desain web-nya.
Sebuah alternatif lain dalam masalah gambar adalah dengan menggunakan CSS. Properti CSS overflow (misal; overflow: hidden) memberikan kemampuan cropping gambar dinamis yang mampu menyesuaikan gambar dengan wadah (frame) ketika terjadi perubahan pandangan. Selain itu ada juga yang menggunakan metode penyediaan berbagai ukuran gambar pada servernya, sehingga mampu melayani berbagai ukuran gambar yang tepat sesuai dengan permintaan dari agen perangkat browser dengan memanfaatkan fitur deteksi side-server atau side-client seiring dengan berkembangnya metode DOM.
Dan cara terakhir untuk mengakali beratnya loading page akibat ukuran gambar adalah dengan metode menyembunyikan gambar. Hal ini diterapkan pada halaman situs yang memfokuskan web pada konten non-gambar, menggunakan metode stylesheet media query yang menetapkan property display: none pada gambar. Atau menerapkan sebuah subset pada opsi penggantian gambar dengan menggunakan class seperti optional-img sebagai sebuah cara pemilihan gambar melalui selektor CSS yang spesifik didalam stylesheet. Sederhananya, menggunakan opsi pengganti gambar asli dengan gambar yang lebih kecil melalui CSS.
Media Query
Media Query adalah fitur yang paling menarik untuk di bahas (namun paling menakutkan untuk desainer web yang belum terbiasa) dalam proses desain web responsif. Terkadang, para desainer web terbawa arus dengan berkonsentrasi hanya pada media query, tanpa memikirkan komponen inti dari sebuah desain web responsif, bahkan meninggalkan komponen opsional halaman fleksibel. Hal ini justru membuat media query hampir tak berpengaruh terhadap situs web jika meninggalkan prinsip dasar HTML dan CSS yang meliputi grid fleksibel dan gambar fleksibel. Media Query memungkinkan para desainer untuk membuat beberapa layout menggunakan dokumen HTML yang sama secara selektif melalui stylesheet berdasarkan fitur agen pengguna (user agent), seperti misalnya ukuran jendela browser, orientasi layar (landscape atau portrait), resolusi layar, warna (kemampuan menampilkan sejumlah warna pada layar), dan lain sebagainya.
Berikut adalah contoh media query yang melayani stylesheet tergantung pada lebar viewport (pandangan):<link rel="stylesheet" media="(max-device-width: 320px)" href="mobile.css" />
<link rel="stylesheet" media="(min-width: 1600px)" href="widescreen.css" />
Media Query tidak dikhususkan untuk memberikan solusi untuk mobile atau solusi untuk tablet (kadang para desainer web pemula berfikir demikian). Sebaliknya, media query dan desain responsif mengajak kita untuk berfikir keluar dari batasan ukuran atau resolusi layar dan mulai membangun website fleksibel yang mampu menyesuaikan diri (secara teoritis) dengan semua media yang beragam.
Apakah Bisa Desain Web Responsif
Seperti telah ditulis diatas mengenai tiga fitur kunci dari desain web responsif, itu hanyalah hal kecil jika dibandingkan dengan semangat anda. Dari 90% desain web responsif yang terbaik adalah dengan memulainya untuk belajar mendesainnya. Well-formed HTML dan tata letak fleksibel harus menjadi bagian penting yang harus diperhatikan dari web desainer modern. Apa yang telah disampaikan oleh Marcotte mengenai aturan desain web responsif hanyalah untuk menunjukan kepada kita cara baru dalam penerapan praktek-praktek mendesain yang terbaik yang harus kita kerjakan. Dalam konteks modern, mengingat bahwa kebutuhan akan layout fleksibel, hal penting yang harus dilakukan sekarang adalah kemampuan dalam mengakomodasi susunan terbaik yang lebih luas sesuai dengan situasi saat ini, kita memerlukan desain yang fleksibel dan fluid. Desain web responsif memaksa kita meluangkan banyak waktu untuk melakukan hal yang benar, bukan hanya bagaimana kita menulis kode, namun bagaimana kita memahami ide-ide baru dan menciptakannya menjadi desain yang segar.
Kami Masih Belum Mengerti
Siapapun yang telah meluangkan banyak waktu dalam mengerjakan konten fleksibel dan merealisasikannya melalui media query maka ia akan menyadari bahwa ini belum mampu memberikan solusi terbaik dalam membangun website yang siap melayani setiap user agent. Pengguna menjelajah web dengan niat berbeda yang terkadang mempunyai keinginan dan kebutuhan yang berbeda-beda, tergantung dari perangkat yang digunakan. Seorang pengguna dengan mobile web browser kemungkinan besar akan tertarik untuk mengakses informasi utama secepat mungkin. Misal; untuk restoran, pengguna mungkin hanya ingin menelusuri menu, nomor telephone untuk pemesanan, alamat, dan sebagainya. Dalam kondisi seperti ini, memuat seluruh halaman situs dan kemudian menyembunyikannya sebanyak 90% bagian halaman, jelas bukan solusi ideal.
Arah Yang Baik
Apa yang membuat desain itu harus responsif, kemudian, apakah langkahnya sudah benar. Banyak situs dibuat untuk memperoleh desain responsif yang terbaik, dan setiap desainer tentunya harus mampu menemukan solusi dan mencari cara untuk mengoptimalkan desain mereka. Desainer akan terus membuat kemajuan untuk menemukan solusi dan menemukan desain yang mampu bekerja dengan baik pada berbagai perangkat dan situasi, sehingga mampu menampilkan web dengan cara yang paling ideal dan intuitif. Hal ini karena kedua belah pihak (desainer dan pengguna) mengarahkan ke arah yang terbaik, ini memberi banyak kesempatan untuk membangun web yang lebih dinamis, menarik dan indah.
Dan itu adalah sesuatu yang sangat berharga... Selamat berkarya...
Pranala Luar :
[1] Kumpulan Situs Responsif
[2] 960 Grid System
[3] 978 Grid System
[4] Fluid Baseline Grid System
[5] Tiny Fluid Grid System
