Desain Responsif Tanpa Media Query Pada CSS Yang Dipakai Dalam Template

Pernah suatu ketika ada yang tidak percaya ketika saya membuat sebuah pernyataan di salah satu situs sosial media paling terkemuka saat ini yaitu Facebook, yang menerangkan bahwa sebenarnya membuat template dengan desain yang responsif dapat dilakukan tanpa memakai media query sama sekali pada CSS yang digunakan dalam template. Bahkan ada pula yang mencibir serta mentertawakan saya yang telah melontarkan pernyataan seperti itu karena dia menganggap bahwa pernyataan tersebut merupakan sebuah pernyataan yang sangat tidak logis, tidak masuk akal , dan dianggap sebagai sebuah pernyataan yang tidak berdasar dan tanpa bukti.

Untuk membuat template dengan desain yang responsif , bisa jadi yang kita tahu selama ini hanya dapat dilakukan dengan memanfaatkan serta menggunakan fitur media query pada CSS yang terdapat dalam template. Sebagai contoh dari pemanfaatan dan penggunaan media query pada CSS di sini misalnya adalah @media only screen and (min-width : 241px) and (max-width : 600px) {.xyz{display: none;} yang artinya yaitu bagian atau elemen dengan class xyz tidak akan ditampilkan di layar apabila resolusi layarnya antara 241 piksel sampai dengan 600 piksel.

Namun tahukah Anda bahwa sebenarnya untuk membuat tempate dengan desain yang responsif itu dapat dilakukan tanpa menggunakan media query sama sekali dalam CSS yang dipakai? Pernyataan ini bukan merupakan sebuah pernyataan tanpa dasar dan tanpa bukti sama sekali. Akan tetapi pernyataan ini tentu saja sangat berdasar dan tentu saja juga ada bukti yang dapat saya tunjukkan secara langsung untuk membuktikan bahwa teori atau pernyataan saya itu bukanlah omong kosong belaka.

Menurut sepengetahuan saya, teknik floating umumnya merupakan teknik yang sampai saat ini masih sering dipakai oleh para perancang template. Dimana teknik floating yang saya maksud di sini yaitu merancang template dengan cara menempatkan langsung masing-masing bagian laman sesuai dengan posisi yang diinginkan. Dalam hal ini sebagai contoh misalnya yaitu langsung menempatkan bidang posting  di bagian kiri (.bidang-posting{float:left;width:600px;}) dan bidang sidebar di bagian kanannya (.bidang-sidebar{float:right;width:300px;}). Untuk selanjutnya setelah layout laman menjadi seperti yang diinginkan, perancang template baru menggunakan media query dalam CSS yang dipakai untuk membuatnya menjadi responsif.

Seiring dengan perkembangan teknologi yang diterapkan pada berbagai browser dan perkembangan fitur yang dapat dimanfaatkan dari CSS, maka jika Anda adalah seorang perancang template, pernahkah Anda berpikir untuk merancang dan membuat template dengan memulainya dari teknik linear baru kemudian dilanjutkan dengan menggunakan teknik floating? Jika Anda belum pernah berpikiran demikian dalam merancang dan membuat template, maka ketahuilah bahwa dengan cara seperti inilah nantinya Anda dapat membuat template dengan desain yang responsif tanpa menggunakan media query sama sekali pada CSS yang dipakai.

Teknik linear yang saya maksud merupakan teknik merancang template dengan layout tegak lurus. Sehingga kalau misalnya dengan memakai teknik floating tadi bidang posting dan sidebar terletak pada posisi yang berdampingan, maka dengan memakai teknik linear ini bidang posting dan sidebar akan terletak pada posisi tegak lurus. Dalam hal ini bisa saja sidebar terletak di bawah bidang posting dan bisa juga sidebar terletak di atas bidang posting menyesuaikan dengan struktur penempatan prosedur untuk masing-masing bagian.

Berdasarkan hal tersebut maka dapat disimpulkan bahwa dalam merancang template dengan memakai teknik linear ini awalnya dapat dilakukan tanpa memakai CSS sama sekali, untuk selanjutnya apabila semua elemen utama template telah terpasang baru kemudian ditata dengan memanfaatkan CSS sesuai dengan yang diinginkan. Oleh sebab itu karena template awal tidak memakai CSS sama sekali, maka secara otomatis template yang terbentuk pun merupakan template yang telah memiliki desain responsif. Sehingga terbukti bahwa tanpa menggunakan media query sekalipun kita dapat membuat template dengan desain yang responsif.

Namun demikian bisa jadi selanjutnya Anda akan berpikir bahwa jika template tidak menggunakan CSS sama sekali maka dapat diibaratkan seperti halnya orang yang tak mengenakan baju. Dan karena tak mengenakan baju, maka secara otomatis dia pun menjadi tampak jelek, acak-acakan, dan tak beraturan. Lantas bagaimana agar menjadi elok, rupawan, dan tampak cantik? Tentu saja dia harus dipakaikan baju dan dirias sedemikian rupa sehingga menjadi sesuai dengan yang diharapkan.

Demikian pula dengan template, agar tampak keren dan cantik sesuai dengan yang diinginkan maka tentu saja juga harus ditata dengan menambahkan CSS tertentu didalamnya. Akan tetapi agar template tetap responsif seperti sebelumnya, maka jangan dulu menggunakan float dalam CSS yang dipakai. Selain itu jangan pula menggunakan ukuran tetap dalam bentuk piksel dan atau sejenisnya untuk lebar masing-masing bagian. Akan tetapi gunakan saja ukuran persen agar nantinya masing-masing bagian laman tetap dapat menyesuaikan secara otomatis dengan dimensi layar yang dipakai. Dimana dalam hal penggunaan persen untuk ukuran lebar di sini misalnya adalah .bidang-posting, .bidang-sidebar{width:100%;}.

Berdasarkan hal tersebut maka dapat disimpulkan dan terbukti lagi bahwa template yang responsif dapat dibuat tanpa menggunakan media query sama sekali pada CSS yang dipakai. Karena dengan menggunakan satuan persen sebagai ukuran untuk lebar masing-masing bagian, maka secara otomatis masing-masing bagian tersebut pun akan menyesuaikan secara otomatis dengan (berapapun) dimensi layar yang dipakai untuk membukanya.

Teknik seperti itulah yang saya pakai dalam merancang dan membuat template Eltelu Blog. Oleh sebab itulah apabila Anda membuka blog ini dengan memakai browser yang berbeda, perangkat yang berbeda, dan dimensi layar perangkat yang berbeda sekalipun maka laman blog tetap diyatangkan dengan tampilan yang responsif.

Seperti itu pula lah teknik yang saya pakai pada beberapa tutorial pembuatan template yang saya terbitkan di blog ini. yang mana dalam hal ini beberapa di antaranya dapat Anda lihat pada tutorial pembuatan template tahap 1, tahap 2, tahap 3, tahap 4, dan tahap 5. Namun demikian karena tahapan tersebut belum selesai, maka untuk tahap selanjutnya akan saya terbitkan pada postingan yang berikutnya.

Anda tertarik untuk beralih menggunakan teknik perancangan dan pembuatan template seperti yang saya pakai? Jika ya, maka tidak ada salahnya bagi Anda untuk mencoba melakukan perancangan dan pembuatan template dengan memakai teknik linear terlebih dulu baru kemudian dilanjutkan dengan memakai teknik floating untuk menghasilkan template dengan desain yang sepenuhnya responsif pada berbagai browser yang berbeda, versi yang berbeda, perangkat yang berbeda, serta dimensi layar yang berbeda pula. Dan bahkan template yang terbentuk tetap memiliki desain responsive walaupun browser yang dipakai belum mendukung fitur media query yang dapat dimanfaatkan dari CSS.