Saya Sudah Responsive, Bagaimana Dengan Anda?

Beberapa waktu yang lalu, kang +AYAHE MELA yang merupakan pemilik dari blog Eltelu sempat memberikan sarannya buat kemajuan blog ini (lihat disini). Beliau menyarankan saya untuk membuat blog ini menjadi responsive. Saran tersebut lalu saya sambut dengan sangat positif. Jujur saja, awalnya saya juga tidak mengerti bagaimana cara membuat blog ini agar bisa responsive seperti yang disarankan kang Ayahe. Namun, dengan sedikit ketekunan akhirnya saya berhasil membuat blog ini menjadi responsive. Walaupun responsive pada blog ini berlaku pada layar yang memiliki 768px untuk versi desktop dan 500px> (kebawah) untuk versi mobile.

Sedikit bercerita mengenai responsive. Responsive berdiri sejak dimulainya perkembangan teknologi seperti: smartphone dan tablet. Semua orang mulai mencari informasi dengan menggunakan perangkat tersebut. Namun yang menjadi masalahnya adalah ukuran pada layar smartphone dan tablet yang tidak sesuai (tidak sama) satu dengan yang lainnya. Kalau dipaksakan menggunakan ukuran web/blog yang tidak sesuai pada layar smartphone atau tablet mereka. Yang terjadi adalah penurunan jumlah pengunjung pada web/blog yang dikunjungi tersebut. Maka dari itu, para pengembang web mulai memperhitungkan akan masalah yang dihadapi tersebut. Dan akhirnya lahirlah istilah Responsive Web Design (RWD) ini.

Untuk membuat blog agar bisa responsive seperti gambar diatas, bisa dibilang: gampang-gampang susah. Gampang buat kamu yang mengerti dengan struktur CSS blog kamu dan susah buat kamu yang belum mengerti dengan susunan CSS blog kamu. Saya akan berbagi sebuah artikel panduan membuat blog agar bisa responsive. Artikel tersebut ditulis oleh +Agus Ramadhani  (lebih dikenal dengan sebutan o-om). Saya belajar membuat blog ini bisa responsive juga dari sana. Dan mudah-mudahan kamu juga bisa melakukan hal yang sama dengan saya.

Mungkin saya akan menambahkan saran saja buat kamu yang akan melakukan responsive pada blog kamu. Sebaiknya dalam memasukkan perintah @media screen disarankan untuk meletakkannya pada funsi kodisional (fungsi if/jika). Dengan susunan fungsi kondisional sebagai berikut:

<b:if cond='data:blog.isMobile'>
<style type='text/css'>
kode css buat versi mobile
</style>
<b:else/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
kode css buat versi desktop
</style>
</b:if>
</b:if>

Adapun tujuan dari fungsi kondisional yang saya berikan diatas. Tujuannya adalah untuk menghindari kerusankan tampilan blog. Atau bisa dibilang sebagai batas pemisah antara kedua versi tersebut.

Selesai melakukan penambahan perintah @media screen tersebut guna menghasilkan blog yang responsive. Maka blog tersebut perlu dilakukan pengujian responsivenya. Banyak website yang menawarkan pengujian responsive pada blog. Jika berhasil responsive, maka saya ucapkan selamat!