Page 56 - Majalah Berita Indonesia Edisi 86
P. 56
56 BERITAINDONESIA, Februari 2013BERITA IPTEKZSatuDesainuntukSemuaernahkah Anda mengunjungisebuah website yang tampilan/layout-nya bisa berubah otomatissesuai ukuran jendela browser? Tatkalajendela browser dikecilkan, beberapaelemen pada halaman web akan menyesuaikan baik dari sisi ukuran maupunposisi. Misalnya, menu website di bagianatas dan kolom kanan menjadi berpindahturun ke bawah. Boleh dibilang, websiteitu sudah menerapkan sebuah teknikyang sedang menjadi tren di dunia websekarang ini yakni Responsive Web Design. Istilah ini diperkenalkan olehseorang pengembang web bernama EthanMarcotte yang menulis tentang konsepresponsive web design di tahun 2011.Pada tahun 2013 ini, website yangmenggunakan responsive web designakan semakin banyak. Mereka akanmeninggalkan teknik lama mendesainweb dengan ukuran lebar tetap (fixedwidth). Website dengan lebar 960pxmisalnya akan tampak kurang bagus biladibuka pada layar beresolusi 800pxkarena ada beberapa bagian website yangterpotong terutama di sisi kanan.Teknik fixed width juga menjadi bermasalah bila website dibuka di layar kecilseperti ponsel atau smartphone. Selamaini, untuk menyiasati perbedaan ukuranlayar, pengembang web membuat websitetersendiri untuk pengguna mobile. Otomatis, pembuatan website butuh biayamahal dan dan waktu yang lebih lama.Responsive web design dianggap mampu mengatasi semua keterbatasan padateknik fixed width karena kemampuannyauntuk merespon sesuai dengan ukuranperangkat dan platform yang digunakan.Ketika seseorang mengunjungi sebuahURL, website itu akan mendeteksi perangkat yang digunakan dan menyesuaikandiri dengan tampilan yang optimal.Berkat responsive web design, pengembang website tidak perlu membuat layoutyang berbeda untuk perangkat mobile dandesktop. Satu desain tunggal bisa digunakan untuk semua perangkat. Hal ini tentusangat menguntungkan bagi para pengembang dan pemilik web.Desainer web tidak perlu membuatdesain khusus untuk tampilan di mobilebrowser, dan programmer tidak perlumembuat kode yang berbeda untuk desktop dan mobile browser. Cukup menggunakan platform responsive web designtertentu, satu website bisa tampil konsisten dalam tampilan yang berbeda, baik didesktop, tablet, hingga smartphone.Sejumlah merek besar sudah menggunakan responsive web design diantaranyatime.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.Website Time, Starbucks, dan PresidentObama misalnya, memanfaatkan tigaelemen dalam responsive web designyakni fluid grids, flexible images dan CSS3media inquiries untuk mendeteksi resolusi layar. CSS atau Cascading Style Sheetmerupakan bahasa pemrograman yangmengatur tampilan sebuah website.Desainer web yang mengadopsi responsive web design pasti menggunakan fluidgrids untuk menata letak halaman website. Dengan fluid grids, tampilan websitebisa beradaptasi dalam berbagai ukuranlayar dan perangkat. Sedangkan flexibleimages adalah gambar yang ukurannyaotomatis berubah bila dilihat di perangkatmobile dan CSS3 media inquiries bertugasmelakukan kontrol terhadap target mediaatau resolusi, cukup dengan satu file CSS.Sejauh ini, ada beberapa framework responsive web design yang memungkinkansiapa saja bisa membuat web responsifdengan cepat dan praktis diantaranyaLess Framework, 1140 CSS Grid, Columnal, dan yang belakangan ini makinpopuler, Twitter Bootstrap.Bagi sebagian orang, website denganfixed width dipandang masih memadai.Namun, cepat atau lambat, mereka akanJika Anda ingin memilikiwebsite atau menggantiwajah website lama, Andaharus tahu tentangresponsive web design.P
