Responsive Style

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.

Pengalaman yang berbeda akan dirasakan para pengguna smartphone saat melakukan akses ke website dimana website tersebut menerapkan fixed width, misalnya 960 pixel. Maka pengguna smartphone akan perlu melakukan zoom in zoom out untuk menampilkan atau membaca tulisan yang ada di website tersebut. Belum lagi seringkali adanya salah pencet link dikarenakan terlalu kecilnya tulisan.

Untunglah sekarang telah ada solusi untuk menangani berbagai ukuran layar yang berbeda tersebut. Responsive Design, adalah salah satu istilah dari sekian istilah tentang konsep tampilan web yang akan menyesuaikan dengan besarnya viewport(luasan area pada browser untuk menampilkan website) yang digunakan oleh pengguna saat mengakses sebuah website. Teknik ini didukung teknologi terbaru yakni HTML5 dan CSS3. Serunya teknik ini dapat diimplementasikan tanpa harus berbasis server atau backend solutions.

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.

Posted in: