Desain Web Responsif

Saat ini masih sering kita temui berbagai website yang menggunakan ukuran lebar halaman yang tetap, misalnya 960 pixel, dengan harapan bahwa semua pengguna yang mengakses website tersebut akan mendapatkan tampilan yang sama dan pengalaman yang sama saat berinteraksi dengan website terkait. Ukuran ini memang tidak terlalu lebar untuk layar laptop dan pengguna dengan layar yang memiliki resolusi besar akan mendapatkan margin yang cukup lebar di kanan kiri website.

Akan tetapi sekarang ada Smartphone. Di indonesia pengguna Smartphone kian meningkat baik itu berbasis android ataupun menggunakan produk Apple yakni iPhone. Seperti beberapa data yang sempat dirillis, pengguna internet di Indonesia yang menggunakan perangkat mobile dalam melakukan browsing di internet telah meningkat tajam. Belum lagi ditunjang semakin meningkatnya pengguna tablet dimana ukuran layarnya lebih besar dari smartphone dan lebih kecil dibandingkan laptop.

Definisi Responsive Design
Secara sekilas, teknik ini cukup sederhana, apabila anda menguasai HTML dan CSS, maka anda bisa menerapkan teknik Responsive Design. Karena sebenarnya yang dilakukan adalah CSS mengecek ukuran area browser, kemudian akan menerapkan style CSS yang sesuai dengan ukuran tersebut. Jadi tidak memerlukan kode pemrograman yang script based seperti PHP, ASP atau lainnya. Teknik ini murni urusan si UX designer atau front end designer.

Istilah Responsive web design awalnya dicetuskan oleh Ethan Marcotte dalam sebuah artikelnya di ListApart(http://www.alistapart.com/articles/responsive-web-design/). Ia mengulas tiga teknik yang telah ada yakni Flexible grid layout, flexible images, dan media and media queries ke dalam satu pendekatan dan menamakannya Responsive Design. Beberapa istilah yang digunakan untuk mengacu hal yang sama antara lain fluid design, elastic layout, rubber layout, liquid design, adaptive layout, cross-device design, dan flexible design.

Marcotte dan beberapa ahli lainnya berargumen bahwa metodologi responsive yang sebenarnya adalah tidak hanya cukup melakukan perubahan layout sesuai dengan ukuran browser yang mengaksesnya, akan tetapi melakukan perubahan total secara keseluruhan terhadap pendekatan yang kita pakai saat mendesain sebuah web. Daripada memulai desain pada ukuran layar desktop yang fixed atau tetap dan kemudian mengecilkannya dan mengatur isinya guna keperluan ukuran yang lebih kecil, maka sebaiknya desain dilakukan pada ukuran viewport yang terkecil terlebih dahulu dan dilanjutkan pada ukuran viewport yang lebih besar.

Viewport atau ukuran layar
Penting untuk diketahui bahwa viewport dan ukuran layar atau screen size merupakan dua istilah yang berbeda. Viewport merupakan area content pada browser, diluar toolbars, tab, address box atau lainnya pada browser. Lebih sederhananya lagi adalah ukuran atau luasan dimana sebuah website ditampilkan pada browser. Sedangkan  screen size mengacu pada ukuran layar secara fisik.

Mengapa harus HTML5 dan CSS3?
HTML5 menawarkan kelebihan yang luar biasa dibandingkan generasi sebelumnya yakni HTML4 dan element yang digunakan pada HTML5 lebih memiliki arti atau gampang kita pahami saat kita membaca atau menuliskannya. CSS3 memiliki salah satu fitur yakni media queries yang merupakan salah satu fitur utama untuk responsive design dan tentunya didukung fitur-fitur lain untuk menghasilkan web yang fleksibel. Beberapa fitur CSS3 yang lain misalnya gradient, shadows, animasi dan transformasi.

Galeri Responsive design
Sebelum kita membahas secara lebih detail tentang responsive design, mari kita lihat beberapa website yang telah menerapkannya. Siapa tahu bisa menjadi inspirasi bagi anda. Anda bisa langsung mencoba mengaksesnya melalui berbagai perangkat yang anda miliki. Akan tetapi apabila anda hanya menggunakan komputer atau laptop, cobalah saat selesai halaman web di load, silahkan secara perlahan lebar browser anda kecilkan. Bisa anda lakukan dengan klik dan drag secara perlahan ke arah kiri pada batas tampilan sebelah kanan browser anda. Anda akan melihat perubahan tampilan pada website-website tersebut.

Kelemahan Desain Web Responsif

Desain web responsif kini sedang naik daun, tapi dia hanyalah salah satu dari sejumlah pilihan untuk merancang strategi situs mobile. Buat sebagian mungkin desain yang mengandalkan fitur HTML5 dan CSS3 ini menjadi satu-satunya pilihan untuk masa depan padahal belum tentu.

Bagi yang belum tahu, desain responsif memungkinkan situs web secara otomatis mengubah tampilannya sendiri agar sesuai dengan layar sebesar apa pun yang digunakan pengunjung (desktop, tablet, mobile), sehingga meniadakan kebutuhan pengembangan situs mobile yang terpisah.

Akan tetapi, kedatangan teknologi dan teknik desain baru ini bukanlah obat bagi segala penyakit. Ada juga kelemahan-kelemahan  desain responsif yang perlu dipertimbangkan sebelum menghabiskan semua sumber daya ke arah sana. Berikut adalah sejumlah masalah potensial yang perlu diketahui dan dipahami para pemilik situs sebelum memutuskan seberapa jauh investasi yang akan digelontorkan bagi desain responsif  

Loading (mungkin) Lamban

Desain responsif menggunakan satu set kode yang sama untuk semua tampilan, sehingga pengguna ponsel mungkin harus mengunduh (download) ukuran file yang sama dengan pengguna dekstop. Namun, bisa diakali dengan memuat pengaturan "display: none" melalui mobile media query, sehingga pengguna tablet dan ponsel tak perlu mengunduh bagian tertentu, semisal sidebar.

Gambar atau Foto

Masalah foto atau gambar ini mungkin problem utama para pengembang desain responsif saat ini. Gambar pemandangan untuk layar desktop 27" akan tampak berbeda untuk layar 3,5". Bagusnya foto-foto untuk mobile lebih ke close-up atau fokus ke objek tertentu. Belum lagi pemborosan bandwidth karena gambar untuk resolusi desktop langsung ditempel dan dikecilkan di layar smartphone.

Butuh Waktu dan Upaya Lebih

Desain responsif membutuhkan perencanaan yang lebih detail karena memuat kemungkinan-kemungkinan tampilan dan efeknya. Bila hendak benar-benar mengandalkan teknologi baru ini, waktu pengembangan (dan berkaitan dengan anggaran) untuk mengimplementasikan desain baru perlu dihitung betul dibandingkan dengan 2 desain (desktop dan mobile). Bila situs dikelola oleh perusahaan, Andamungkin butuh karyawan baru atau setidaknya pelatihan staf untuk membangun sebuah situs responsif. Jika Anda sudah memiliki situs mobile dan sudah cukup sesuai kebutuhan pelanggan, mestinya ada alasan yang jauh lebih rasional kalau ingin beralih total ke desain responsif.

Perubahan Tampilan Iklan

Gambar desktop dikonversi ke layar ponsel bakal menjadi tantangan rumit bila menyangkut penghasilan dari iklan. Sudah ada ukuran standar dunia untuk iklan, tapi bila semisal dari versi dektop lalu dikecilkan (rescaling) untuk layar 320x480 bisa mengakibatkan gambar iklan rusak dan pengiklan tentu tidak akan senang. Mungkin juga iklan yang tadinya menarik jadi terlihat aneh.

Perbedaan Perilaku User

Smartphone, tablet, dan desktop adalah tiga perangkat yang berbeda dan hal itu menjadikan perilaku pengunjung berbeda-beda pula. Untuk tablet dan desktop memungkinkan pengguna berlama-lama menjelajahi situs Anda karena resolusi tampilan cukup besar. Tapi untuk pengguna ponsel, biasanya orang hanya butuh informasi tertentu dan mungkin hanya singgah dalam waktu singkat sebelum menutup jendela browser. Untuk situs berita sih tidak tampak bedanya, tapi situs toko mungkin jadi lain efeknya. Jadi, baik tampilan dan navigasinya mungkin mesti didesain berbeda-beda untuk tiap gadget.

Halaman Kepanjangan

Pakem standar desain mobile yang dianggap baik adalah meminimalkan kemungkinan fitur gulir (scrolling). Bila tampilan situs lebih banyak teks dan berisi pilihan-pilihan semisal situs ini mungkin tak banyak pengaruhnya. Tapi bila situs Anda banyak berisi aksesoris pemanis dan menampilkan konten yang lumayan banyak, pengguna ponsel mungkin malas menggulirkan tampilan, halaman demi halaman yang seolah tak habis-habis.

Coding Rumit dan Butuh Pengujian

Walau hanya perlu satu set kode (HTML, Javascript, CSS) dan seharusnya menjadi lebih sederhana, dampak yang menyusahkan nantinya adalah pada seberapa cepat Anda dapat merombak tampilan untuk desain baru (misal ada fitur baru). Sebab, Anda harus mengadopsi semua itu ke dalam desain responsif, tidak bisa lagi cuma memperbarui desain desktop secara terpisah. Anda harusmemertimbangkan dampaknya pada semua jenis tampilan. Waktu pengujian juga butuh lebih lama karena harus menguji di beberapa model tampilan.

http://bp.dapur.in/2013/12/kelemahan-desain-web-responsif.html