Mengenal ‘Responsive Web Design’ Secara Sederhana

Akses internet, saat ini tidak hanya melalui PC atau notebook saja, tetapi juga melalui tablet dan smartphone. Bahkan menurut penelitian, akses internet terbesar justru melalui perangkat mobile, yaitu smartphone dan tablet. Hal ini mendorong web designer untuk mengembangkan web yang mampu beradaptasi secara fleksibel dengan berbagai ukuran layar perangkat.


responsive-test

Sempat berkembang istilah web ‘versi desktop’ dan ‘versi mobile’. Saat ini pun masih banyak web dengan model tersebut, termasuk web di tempat saya bekerja. Akan tetapi, model ini dirasa tidak efisien, karena masing-masing versi harus didesain secara terpisah. Salah satu contoh web yang masih menggunakan model ini adalah kompas.com. Coba cek web kompas.com menggunakan pc/notebook, kemudian minimize browser, mainkan ukuran lebar browser (seperti animasi di atas). Layout web akan terpotong begitu dimainkan ukuran lebarnya. Untuk mempermudah, lihat gambar di bawah ini.

non-responsive

Responsive Web Design adalah solusi masalah ini. Istilah Responsive Web Design pertama kali disebut tahun 2010 oleh Ethan Marcotte dalam artikelnya di alistapart.com. Dengan Responsive Web Design, web layout dalam bentuk grid/column dapat menyesuaikan diri sesuai dengan ukuran layar perangkat. Coba cek web dailysocial.net menggunakan pc/notebook, mainkan ukuran lebar browser. Penempatan grid/column beradaptasi sesuai ukuran layar, lihat gambar di bawah ini.

well-responsive

Secara umum Responsive Web Design menggunakan pendekatan flexible grid layout, flexible images, dan media queries. Saya tidak akan menjelaskannya secara teknis. Tapi secara sederhana, dengan flexible grid layout, setiap grid akan menyesuaikan diri sesuai layar perangkat. Animasi berikut mungkin bisa menjelaskan.

Flexible-Grid

Flexible grid (Sumber: blog.froont.com)

Pendekatan flexible images dapat dilakukan dengan menggunakan ukuran relatif (relative unit). Jika biasanya kita mengenal ukuran pixel (px) untuk ukuran image, ukuran relatif menggunakan %. Dengan begitu setiap persen merepresentasikan lebar layar. Contoh, jika kita menggunakan width=”100%” artinya lebar gambar akan selebar ukuran layar. Namun, jika kita menggunakan width=”50%”, artinya ukuran gambar akan tampil setengah (50%) dari ukuran layar. Animasi berikut mungkin bisa menjelaskan secara sederhana.

Relative-Units

Flexible image (Sumber: blog.froont.com)

Dengan pendekatan media query, kita dapat menentukan kode CSS tertentu pada ukuran layar tertentu. Artinya pada ukuran layar tertentu, ukuran grid dan image akan beradaptasi sesuai yang ditentukan. Tidak hanya ukuran, warna background pun bisa diubah pada ukuran tertentu. Lihat penjelasan lengkapnya di w3schools.com. Biasanya ukuran layar ditentukan dengan nilai max/min width.

Max-width-vs-No-max-width

Max Width vs No-Max Width (Sumber: blog.froont.com)

Mengingat akses internet terbesar datang dari pengguna perangkat mobile (smartphone dan tablet). Sudah saatnya bagi pemilik usaha atau individu yang ingin membuat web wajib menerapkan Responsive Web Design. Dengan begitu tampilan website tetap indah, fleksibel dan mudah dilihat ketika diakses melalui perangkat mobile. Responsive web design juga lebih efisien, karena satu desain web dirancang untuk semua jenis perangkat.

 

Bagaimana menurut Anda? Perlu web yang responsive?

 

Demikian penjelasan sederhana tentang Responsive Web Design. Untuk penjelasan yang lebih teknis silahkan kunjungi beberapa link berikut:

developers.google.com
this is responsive
blog.froont.com


Web Design