Belajar Membuat Tampilan Responsive Web Design

Update Terakhir pada

Responsive Web Design semakin populer sekitar pertengahan 2010 lalu, ini berawal dari sebuah artikel Responsive Web Design yang ditulis oleh Ethan Marcotte pada website A List Apart (www.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.

The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility. But first, we must accept the ebb and flow of things.” – John Allsopp, ‘A Dao of Web Design’

Jumlah pengguna perangkat mobile seperti smartphone dan tablet setiap hari semakin meningkat, mulai dari berbagai macam seperti BlackBerry, iPhone, iPad dan berbagai macam perangkat dengan sistem operasi Android sepertinya tidak akan ada habisnya. Sebelum adanya Responsive Web Design seperti saat ini jika memang harus mendesain dan menyesuaikan semua perangkat tersebut mungkin bagi saya pribadi adalah sesuatu yang konyol dan tampak bodoh, dan akan lebih baik buat saya hanya fokus pada desain yang hanya ditampilkan pada layar desktop saja.

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 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.

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 Responsive Web Design 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 Designer lebih banyak menggunakan satuan px (pixel) untuk ukuran layout dan text namun untuk desain responsive 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.

Kalian mungkin berencana untuk mengganti desain lama dengan desain yang lebih responsive, sebaiknya urungkan saja niat tersebut karena desain yang lama masih dapat dibuat responsive, 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.

Formula Perhitungan Sederhana Pada Flexible Grid

Desain yang belum responsive biasanya lebih banyak menggunakan satuan px seperti dalam contoh CSS dibawah ini :

.wrapper {
	width : 1024px ;
}
.content {
	width : 700px ;
}
.sidebar {
	width : 300px ;
}

Diatas lebar Grid utama adalah dalam resolusi width:1024px, untuk content width:700px dan sidebar width:300px. Disini 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%

700px / 1024px = width : 68.359375%

Dari hasil kalkulasi diatas maka bisa didapatkan nilai % dalam koding CSS seperti dibawah ini :

.wrapper {
	width : 1024px ;
}
.content {
	width : 68.35% ;
}
.sidebar {
	width : 29.29% ;
}

Formula diatas sebenarnya bisa juga digunakan untuk menghitung ukuran text (font-size). Katakanlah konteks normal untuk ukuran font dalam body adalah 16 piksel. Jika kalian ingin menetapkan bahwa H1 harus 24 pixel, maka kalian 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 diatas yaitu dengan menggunakan Responsive Web Design Calculator, kalian bisa langsung sambangi alamatnya di RWD Calculator (www.rwdcalc.com).

Bekerja Dengan 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 (style768.css) screen and (min-width : 768px)
  1. 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) {
    	.........
    }
    @media screen and (max-width : 320px) {
    	.........
    }
    @media screen and (max-width : 240px) {
    	.........
    }

    Dalam rancangan media queries max-width sebaiknya penempatan kode akan lebih baik dari resolusi besar ke resolusi yang lebih kecil atau kalian 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 kalian lebih mudah merancang queries berdasarkan urutan resolusi layar.

    @media screen and (min-width : 768px) {
    	.........
    }
    @media screen and (min-width : 320px) {
    	.........
    }
    @media screen and (min-width : 240px) {
    	.........
    }
  1. 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 tidak ribet biasanya koding dalam Style Sheet juga tidak terlalu banyak dan bisa dikatakan hanya beberapa baris saja.

Menggunakan Meta Tag Viewport

Dalam Responsive Web Design, 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 merupakan meta tag viewport yang paling sering digunakan.

<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">

(Kiri) Tampilan Facebook tanpa Viewport (Kanan) Tampilan Facebook denganViewport

Desain web yang tidak menggunakan skala yang ditentukan 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 saja Dokumentasi Viewport dari Mozilla (http://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag). Agar lebih mudah kalian untuk memahaminya kalian bisa melihat contoh sederhana penerapan viewport dan media queries. Di contoh ini saya menggunakan versi HTML5.

<!DOCTYPE html>
	<html>
		<head>
			<meta charset="UTF-8"/>
			<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport"/>
			<style type="text/css">
				/* ==== CSS UTAMA DISINI =====*/
				body {
					.........
				}
				/* ==== RESPONSIVE DENGAN MEDIA QUERIES =====*/
				@media screen and (max-width  : 3000px) {
					.........
				}
				@media screen and (max-width : 1300px) {
					.........
				}
				@media screen and (max-width : 1024px) {
					.........
				}
				@media screen and (max-width : 992px) {
					.........
				}
				@media screen and (max-width :880px) {
					.........
				}
				@media screen and (max-width :768px) {
					.........
				}
				@media screen and (max-width :600px) {
					.........
				}
				@media screen and (max-width :480px) {
					.........
				}
				@media screen and (max-width :320px) {
					.........
				}
				@media screen and (max-width :240px) {
					.........
				}
			</style>
		</head>
		<body>
			.........
		</body>
	</html>

Kenapa saya hampir semua menggunakan resolusi pada layar? Jawabannya cukup simple, bukankah kita ingin desain template kita bisa tampil sempurna, jadi kenapa harus tanggung-tanggung dengan hanya menentukan beberapa resolusi saja dan kenapa harus membatasinya jika bisa dilakukan sekaligus! Bekerja satu kali tentu lebih baik dari pada berulang-ulang dengan desain yang sama. Oke, sekian dulu pembahasannya, lain kali saya akan memberitahu cara membuat responsive pada gambar, video, menu dan lainnya.