Responsive Web Design Quick Overview!

By ADMIN 03 July 2014

Saat ini banyak orang bicara tentang Responsive Web Design, tapi arti sebenarya Responsive Web itu mungkin tidak banyak yang tahu. Yang dimaksud Responsive Web bukanlah membuat membuat web yang dapat di akses mobile devices, tapi ini bicara tentang layout atau tampilan suatu website yang dapat beradaptasi secara otomatis tergantung dari device apa website itu di akses.

" Responsive web design means enabling users to view and interact with your website in a way that is appropriate to their device and browser size "

Responsive Web atau Responsive Web Design (RWD) dipopulerkan sekitar pertengahan 2010 lalu, ini berawal dari sebuah artikel yang ditulis oleh Ethan Marcotte pada website alistapart.com Pada artikel tersebut dia mengusulkan bagaimana sebuah desain web bisa menyesuaikan sendiri ukuran tampilan pada perangkat Mobile dan Desktop secara Fleksibel tanpa harus membuat dua desain untuk perangkat berbeda dengan konten yang isinya sama, dari permasalahan itulah maka lahirlah konsep Responsive Web Design yang lebih fleksibel dan bisa beradaptasi hampir disemua layar berbeda.Sederhananya RWD itu adalah : Merupakan suatu concept yang memaparkan tentang bagaimana sebuah layout dari suatu website dapat ditampilkan secara compatible di semua device . Device yang dimaksud ini sepert contoh : Mobile (Handphone), Laptop, Komputer, atau notebook. Ada 3 unsur inti yang harus ada pada Responsive Web Design agar bisa bekerja dengan baik, yaitu pada Flexible Grids, Fluid Images dan Media queries. Dari ketiga unsur tersebut diharafkan sebuah desain nantinya bisa beradaptasi pada berbagai layar berbeda, tidak peduli beberapapun banyaknya perangkat yang ada, dengan Responsive Web Design semua bisa dikontrol hanya dalam satu desain saja.1 . Flexible Grid / Flexible Layout

Pilar dari Responsive Web Design sebenarnya terletak dari Fleksibelitas Grid itu sendiri , jika kalian bingung dengan istilah Grid kita bisa menggunakan alternatif lain dengan istilah yang lebih mudah yaitu Flexible Layout / Template. Sebelum Desain Web Responsif populer seperti sekarang ini dulunya para Web Programmer terpaku dengan layar desktop dengan lebar desain yang tetap dan cenderung pada desain terpusat. Jika dulu biasanya para web desainer lebih banyak menggunakan satuan 'px' (pixel) untuk ukuran Layout dan Text namun untuk Desain Responsif saat ini para pengembang lebih banyak mengunakan satuan '%'(percent) sebagai penggantinya, ini dimaksudkan agar desain pada Layout tidak tampak kaku dan bisa Flexible ketika ditampilkan pada resolusi layar yang berbeda. Mungkin Kamu berencana untuk mengganti desain lama dengan desain yang lebih Responsive, sebaiknya urungkan saja niat tersebut karena desain yang lama masih bisa kok dibuat Responsive yang penting asal mengerti saja rahasianya :). Perlu diketahui bahwa Desain Responsif hanyalah bermain-main dengan CSS, jadi bagaimanapun bentuk template yang sekarang kalian gunakan semuanya bisa dibuat Responsive hanya dengan hitungan jam saja, gak percaya? buktikan saja :)2 . Media Queries

CSS Media Query adalah salah satu fitur dalam CSS3 yang memungkinkan kalian untuk menentukan kapan aturan CSS tertentu harus diterapkan. Hal ini memungkinkan untuk menerapkan CSS khusus untuk perangkat Mobile. Media queries bisa dikatakan otak dari Design Web Responsive karena diarea inilah kita memiliki kontrol penuh terhadap Design Responsive Template kita nantinya.Ada 3 cara untuk pemanggilan media queries:1. Menggunakan @import untuk mengimport aturan Style dari Style Sheet lainnya.@import url(style768min.css) screen and (min-width: 768px);2. Pemanggilan Style Sheet secara langsung dalam koding HTML dan biasanya ini pendekatan paling umum yang paling banyak digunakan pengembang saat ini.

@media screen and (max-width:768px){
/* CSS styles */
}
@media screen and (max-width:320px){
/* CSS styles */
}
@media screen and (max-width:240px){
/* CSS styles */
}

3. Pemanggilan melalui link untuk Style Sheet secara terpisah.link rel="stylesheet" type="text/css" media="screen and (max-device-width: 768px)" href="style768.css" Dari ketiga memanggilan media queries diatas mana yang lebih baik? menurut saya pribadi, saya tentu memilih yang no.2, selain gak ribet biasanya koding dalam Style Sheet juga tidak terlalu banyak dan bisa dikatakan hanya beberapa baris saja.3 . Menggunakan Meta Tag View PortDalam Design Web Responsive Meta Tag Viewport peranannya sangat penting karena meta tag ini berguna untuk mengontrol tata letak pada Browser Mobile. Saat pengguna mengakses blog kalian melalui Browser Desktop Meta Tag ini tidak memiliki pengaruh sama sekali tetapi cerita akan berbeda saat mereka mengakses blog kalian via Mobile Browser. Dibawah ini contoh tampilan facebook tanpa meta tag dan dengan meta tag [caption id="attachment_1558" align="alignnone" width="300"]

facebook tanpa meta tag viewport[/caption] [caption id="attachment_1557" align="alignnone" width="300"]

facebook dengan meta tag viewport[/caption] meta tag viewport yang paling sering digunakan biasanya : meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport' Jadi meta tag ini menentukan Desain web yang akan di tampilkan pada suatu mobile device, apa bila tidak menggunakan skala yang ditentukan maka akan terlihat berantakan jika diakses pada versi mobile untuk itulah kita perlu menambahkan meta ini. Untuk lebih jelas pada bahasan Meta Tag viewport coba sambangi aja disini.