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”

Kutipan John Allsoop diatas dikutip ulang dari tulisan Ethan Marcotte di A List Apart, tentang Reponsive Web Design. Sebuah tulisan lawas tentang dasar-dasar pembuatan laman web yang responsive. Dalam bahasa sederhananya, responsive web adalah Laman web yang bisa dicetak, melakukan penyesuaian otomatis terhadap layar perangkat kecil seperti sabak atau telepon genggam.

Berangkat dari rasa penasaran dan keingin tahuan tentang responsive web design, akhirnya diputuskan untuk membuat laman blog ini menjadi laman yang responsive. Walaupun belum sempurna, setidaknya sudah tidak tergantung lagi dengan pengaya MobilePress yang selama ini digunakan.

Untuk mendapatkan gambaran nyata penerapan responsive desain, khususnya di template wordpress, digunakan beberapa tema gratis yang sudah menerapkan desain ini, diantaranya Theme Scherzo buatan Leon Paternoster dan Bonpress buatan WPZOOM. Dari kedua theme ini yang dipelajari hanya strukturnya saja.

Untuk membuat theme ini menjadi responsive, dipilih menggunakan metode Media Queries.
Yang pertama dilakukan menyisipkan Meta Tag pada header template.
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Langkah selanjutnya, menentukan besaran layar yang disupport oleh tema dengan membuat file CSS-nya.
Untuk Layar dengan dimensi minimal 640px dan maksimal 1024px :

@media only screen and (min-width: 640px) and (max-width: 1024px)
body {color:#4b4b4b;}
.wrapper { width: 100%;}	
.headmenu {display:none;}
#container { width:90%;padding:0 5%;}

Untuk layar dengan dimensi minimal 320px dan maksimal 640px :

@media only screen and (min-width: 320px) and (max-width: 640px)
body {color:#333;}
a, a:link ,a:hover, a:link:hover, #bottom h2 {text-shadow:none;}
.wrapper { width: 96%; margin:0 auto;}
.headmenu {display:none;}
.logo h1{font-size:150%;}
.logo p{font-size:100%;}
#container { width:90%;padding:0 5%;}
.post-content img.alignnone,
.post-content img.alignleft,
.post-content img.alignright,
.post-content img.aligncenter{max-width:95%;}	
.post-title {font-size:130%;}
.post-meta-bottom-single {display:none;}
.wp-pagenavi {display:none;}

Kedua CSS diatas hanya contoh, silahkan berkreasi sendiri, sesuaikan dengan template yang digunakan. Terutama memahami struktur HTML yang digunakan pada template.

Sedangkan untuk tampilan pada layar dimensi yang lebih besar, tampilannya dibuat normal seperti yang sendang anda buka saat ini.

Pengetesan dimensi tersebut dilakukan pada Matt Kerssley. Selain alamat ini pengetesan dapat dilakukan pada beberapa tempat lain seperti : Mobile Phone Emulator, Operas Mini, Ipad Peek, ResponsivePx dan lain-lainnya.