Berawal dari sebuah artikel Design Web Responsive yang ditulis oleh Ethan Marcotte pada website alistapart.com dan semakin populer sekitar pertengahan 2010 lalu. 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 itu maka lahirlah konsep Responsive Web Design.
Sebelum adanya Responsive Web Design seperti saat ini, jika memang harus mendesain dan menyesuaikan semua perangkat tersebut mungkin bagi saya pribadi suatu yang konyol dan tampak bodoh, akan lebih baik bagi saya hanya fokus pada desain ditampilkan pada layar desktop saja.
Pengguna perangkat mobile seperti Smartphone dan Tablet setiap hari semakin meningkat, mulai dari berbagai macam Netbook, BlackBerry, iPhone, iPad dan berbagai macam perangkat dengan sistem operasi Android sepertinya tidak akan ada habisnya.
Para pengembang web diluar sana tentu tidak tinggal diam untuk mengatasi masalah ini, maka lahirlah istilah Responsive Web Design dari hasil pengembangan pada fitur CSS terbaru yaitu CSS3 yang memiliki dukungan penuh untuk mengatasi berbagai resolusi pada layar dengan teknik terbaru yang diberi nama Media Queries.
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 diharapkan 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.
Flexible Grid/Flexible Layout
Pilar dari Responsive Web Design sebenarnya terletak dari Fleksibelitas Grid itu sendiri, 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.
Formula perhitungan sederhana pada Flexible Grid
Desain yang belum responsive biasanya lebih banyak menggunakan satuan px seperti dalam contoh CSS di bawah ini:
Desain yang belum responsive biasanya lebih banyak menggunakan satuan px seperti dalam contoh CSS di bawah ini:
.sidebar{
width:300px;
}
.content{
width:700px;
}
.wrap{
width:1024px;
}
Lebar grid utama adalah dalam resolusi width:1024px dan untuk sidebar width:300px dan content width:700px. Di sini saya coba jelaskan formula dan kalkulasi sederhana dalam mengkonversi nilai px (pixel) agar bisa diganti dengan satuan % (percent).
Target / Context = Result
300px / 1024px = width: 29.296875%; /* 300 (originally 300) / 1024 */
700px / 1024px = width: 68.359375%; /* 700 (originally 700) / 1024 */
Dari hasil kalkulasi di atas maka bisa didapatkan nilai percent dalam koding CSS seperti di bawah ini:
.sidebar{
width:29.29%;
}
.content{
width:68.35%;
}
.wrap{
width:1024px;
}
Formula di atas sebenarnya bisa juga digunakan untuk menghitung ukuran text (font size), Katakanlah konteks normal untuk ukuran font dalam body adalah 16 piksel. Jika Anda ingin menetapkan bahwa H1 harus 24 pixel, maka Anda bisa mengganti dengan satuan em dengan cara menghitungnya sebagai berikut:
24px / 16px = 1,5em
Dengan gaya CSS akan didapat koding seperti ini:
h1 {
font-size: 1.5em;
}
Sebenarnya ada juga cara yang lebih mudah untuk menghitung formula di atas yaitu dengan menggunakan Responsive Web Design Calculator.
Media Queries
CSS Media Query adalah salah satu fitur dalam CSS3 yang memungkinkan Anda 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(style.min.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:480px){
/* CSS styles */
}
@media screen and (max-width:320px){
/* CSS styles */
}
Dalam rancangan media queries max-width sebaiknya penempatan kode akan lebih baik dari resolusi besar ke resolusi yang lebih kecil atau bisa juga menggunakan media queries min-width, dengan catatan menggunakan queries ini urutannya dari resolusi kecil ke resolusi yang lebih besar. Hal ini disarankan agar Anda lebih mudah merancang queries berdasarkan urutan resolusi layar.
@media screen and (min-width:320px){
/* CSS styles */
}
@media screen and (min-width:480px){
/* CSS styles */
}
@media screen and (min-width:768px){
/* 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="style.css" />
Dari ketiga memanggilan media queries di atas mana yang lebih baik? Menurut saya pribadi, saya tentu memilih yang nomor 2, selain gak ribet biasanya koding dalam Style Sheet juga tidak terlalu banyak dan bisa dikatakan hanya beberapa baris saja.
Meta Tag Viewport
Dalam 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 Anda melalui Browser Desktop Meta Tag ini tidak memiliki pengaruh sama sekali tetapi cerita akan berbeda saat mereka mengakses blog Anda via Mobile Browser. Di bawah ini merupakan meta tag viewport yang paling sering digunakan.
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport' />
Selamat mencoba!