Satu Desain untuk Semua

Jika Anda ingin memiliki website atau mengganti wajah website lama, Anda harus tahu tentang responsive web design.

[dropcap]P[/dropcap]ernahkah Anda mengunjungi sebuah website yang tampilan/layout-nya bisa berubah otomatis sesuai ukuran jendela browser? Tatkala jendela browser dikecilkan, beberapa elemen pada halaman web akan menye­suaikan baik dari sisi ukuran maupun posisi. Misalnya, menu website di bagian atas dan kolom kanan menjadi berpindah turun ke bawah. Boleh dibi­lang, website itu sudah menerapkan sebuah teknik yang sedang menjadi tren di dunia web sekarang ini yakni Responsive Web Design. Istilah ini diperkenalkan oleh seorang pengembang web bernama Ethan Marcotte yang menulis tentang konsep responsive web design di tahun 2011.

Pada tahun 2013 ini, website yang meng­gunakan responsive web design akan semakin banyak. Mereka akan meninggalkan teknik lama mendesain web dengan ukuran lebar tetap (fixed width). Website dengan lebar 960px misalnya akan tampak kurang bagus bila dibuka pada layar beresolusi 800px karena ada beberapa bagian website yang terpotong terutama di sisi kanan.

Teknik fixed width juga menjadi ber­ma­salah bila website dibuka di layar kecil seperti ponsel atau smartphone. Selama ini, untuk menyiasati perbedaan ukuran layar, pengembang web membuat website tersendiri untuk pengguna mobile. Oto­matis, pembuatan website butuh biaya mahal dan dan waktu yang lebih lama.

Responsive web design dianggap mam­pu mengatasi semua keterbatasan pada teknik fixed width karena kemam­puannya untuk merespon sesuai dengan ukuran perangkat dan platform yang digunakan. Ketika seseorang mengunjungi sebuah URL, website itu akan mendeteksi perang­kat yang digunakan dan menye­suaikan diri dengan tampilan yang optimal.

Berkat responsive web design, pengem­bang website tidak perlu mem­buat layout yang berbeda untuk perangkat mobile dan desktop. Satu desain tunggal bisa diguna­kan untuk semua perangkat. Hal ini tentu sangat menguntungkan bagi para peng­em­bang dan pemilik web.

Desainer web tidak perlu membuat desain khusus untuk tampilan di mobile browser, dan programmer tidak perlu membuat kode yang berbeda untuk desktop dan mobile browser. Cukup meng­gu­nakan platform responsive web design tertentu, satu website bisa tampil konsis­ten dalam tampilan yang berbeda, baik di desktop, tablet, hingga smartphone.

Sejumlah merek besar sudah meng­gu­nakan responsive web design diantaranya time.com, disney.com, microsoft.com, sony.com, starbucks.com, barackobama. com, bostonglobe.com, harvard.edu, aids.gov, mediaqueri.es, css-tricks.com, dan smashingmagazine.com.

More Read

Adu Kekuatan di Perang Cyber

Petualangan Terakhir Divisi Fringe

Menumpas Kejahatan Tanpa Basa-basi

Website Time, Starbucks, dan President Obama misalnya, memanfaatkan tiga elemen dalam responsive web design yakni fluid grids, flexible images dan CSS3 media inquiries untuk mendeteksi reso­lusi layar. CSS atau Cascading Style Sheet merupakan bahasa pemrograman yang mengatur tampilan sebuah website. Desainer web yang mengadopsi responsive web design pasti menggunakan fluid grids untuk menata letak halaman web­site. Dengan fluid grids, tampilan website bisa beradaptasi dalam berbagai ukuran layar dan perangkat. Sedangkan flexible images adalah gambar yang ukurannya otomatis berubah bila dilihat di perangkat mobile dan CSS3 media inquiries bertugas melakukan kontrol terhadap target media atau resolusi, cukup dengan satu file CSS. Sejauh ini, ada beberapa framework responsive web design yang memungkinkan siapa saja bisa membuat web responsif dengan cepat dan praktis diantaranya Less Frame­work, 1140 CSS Grid, Colum­nal, dan yang belakangan ini makin populer, Twitter Bootstrap.

Bagi sebagian orang, website dengan fixed width dipandang masih memadai. Namun, cepat atau lambat, mereka akan menyadari bahwa website yang responsif akan membuat pengalaman browsing pengunjung lebih baik. Apalagi pengguna perangkat mobile akan meningkat drastis di tahun 2015.

Menurut comScore, ada sekitar 800 juta pengguna internet mobile di tahun 2009 dan akan meningkat hingga 1,9 mi­li­ar pada 2015. Sedangkan jumlah peng­guna inter­net di desktop ada sekitar 1,4 miliar orang pada 2009 dan akan me­ning­kat menjadi sekitar 1,6 miliar pada tahun 2015. Bahkan menurut survei TechCrunch 2012, perang­kat mobile akan mengambil alih posisi desktop sebagai perangkat utama untuk mengakses inter­net.

Meski demikian, responsive web design tidak untuk semua orang. Banyak bank dan perusahaan-perusahaan ter­tentu yang menyediakan aplikasi mobile untuk menjual produk dan jasanya tidak meng­gunakan responsive web design karena membatasi ruang gerak mereka. Misalnya aplikasi mobile banking yang bisa men­cair­kan cek dengan memfoto cek itu. Aplikasi yang menyediakan fasilitas untuk konsumen seperti itu biasanya rumit dan tidak bisa diterapkan dengan grid layout.

Begitu pula dengan situs-situs jasa penerbangan. Bagi pengunjung yang mengakses website via smartphone, mereka biasanya punya kebutuhan spe­sifik seperti memesan tiket atau me­meriksa status penerbangan. Lain halnya bila mereka mengakses website via kom­puter, yang bisa menyajikan data pener­bangan lebih lebih lengkap dan variatif.

Oleh sebab itu, Carin van Vuuren, chief marketing officer di Usablenet, dalam tulisannya di Forbes.com mencatat bahwa responsive web design cocok untuk web­site-website berita online, majalah dan surat kabar karena konten pada dasarnya hanya ditata ulang. Namun responsive web design menjadi tidak berfungsi efektif bila website berita tersebut ingin menjual kontennya mengingat aplikasi mobile untuk transaksi jual beli terbilang rumit.

Hal lain yang menjadi perhatian pada responsive web design adalah lamanya waktu untuk membuka website. Bila sebuah website memiliki fitur-fitur rumit seperti transaksi jual beli yang meman­faatkan bahasa pemrograman umum tapi ‘gemuk’ seperti CSS, Javascript dan PHP, halaman website itu pasti rumit dan dijejali banyak kode. Mau tidak mau, membuka halaman web seperti itu di perangkat mobile butuh waktu lama dan akan membuat pengunjung lari. Lain halnya bila dibuat aplikasi khusus sesuai perangkat yang digunakan oleh pengun­jung. Aksesnya pasti lebih cepat dan minim masalah.

[hr]

[divider]

Lima Responsive Framework Populer

Ada banyak responsive web design framework di internet mulai dari yang sederhana hingga yang rumit.  Untuk yang sederhana ada, The 1140 Grid, Responsive Aeon 2.0, Columnal, Gridiculous, Ingrid, Responsive Grid System by Denis LeBlanc, Responsive Grid System by Graham Miller, Titan, Ivory, dan Toast. Untuk yang lebih rumit ada, Base, Zurb Foundation, Gumby, Kube, Skeleton, dan Twitter Bootstrap.

HTML5 Boilerplate
html5boilerplate.com
Menurut pengembangnya, Boiler­plate bukanlah sebuah framework melainkan hanya memberikan be­be­rapa trik agar proyek web res­pon­sif Anda bisa cepat selesai dengan cara yang benar. Dengan kata lain, boilerplate bisa diguna­kan sebagai langkah awal untuk proyek HTML5 apa saja. Boiler­plate menawarkan cross-browser normalization, performance optimizations, bahkan cross-domain XHR dan Flash.

Twitter Bootstrap
twitter.github.com/bootstrap
Framework yang semakin populer ini merupakan kumpulan perang­kat/alat yang tersedia gratis untuk membuat website dan aplikasi web. Di situ terdapat template-template untuk forms, buttons, charts, navigation dan komponen-komponen tampilan lainnya ter­masuk ekstensi-ekstensi Java­script. Kode inti Bootstrap diba­ngun dengan LESS. Banyak orang suka pada sistem 12-column grid-nya dan plugin-plugin javascript-nya yang bagus seperti modal windows, tooltips, dan carousel.

Zurb Foundation
foundation.zurb.com
Menurut pengembangnya, Foundation adalah responsive front-end framework paling canggih di dunia. Dengan Foundation, Anda bisa segera membuat website dan aplikasi yang mampu bekerja di semua jenis perangkat. Foundation mempunyai koleksi pondasi layout yang besar (misal, full res­ponsive grid), dan elemen-elemen siap pakai. Foundation dibangun dengan Sass.

Skeleton
getskeleton.com
Skeleton merupakan kumpulan file CSS yang bisa membantu kita untuk cepat membuat website yang cantik di semua ukuran, entah itu di layar laptop 17 inch atau iPhone. Sejumlah website template komersial sudah meng­gu­na­kan skeleton.

HTML KickStart
www.99lime.com
HTML Kickstart merupakan kum­pulan file HTML5, CSS, dan jQuery (javascript), layout-layout dan elemen-elemen yang mem­bantu kitamembuat website res­pon­sif lebih cepat.