screenshot-responsive-design

Responsive Web Design dewasa ini memang semakin terasa perlu untuk dipikirkan bagi seorang . Pasalnya di zaman teknologi yang kian canggih ini, internet dapat diakses dari mana saja dan kapan saja. Melihat perkembangan dunia smartphone yang juga semakin meningkat. Pengunjung blog atau situs bukan lagi hanya berasal dari laptop saja. Iyaa! Dari perangkat mobile pun orang-orang sudah betah untuk berselancar di dunia maya.

Lewat tulisan ini saya belum akan membahas detail tentang bagaimana caranya untuk bisa membuat tampilan sebuah situs agar menjadi responsif. Kalau kalian mau, di postingan berikutnya akan saya jelaskan. Gimana mau? 😀

Bagaimana cara melihat tampilan responsif?

Sebelumnya saya sudah pernah memberitahu gimana cara Mendeteksi Web Responsive dari Chrome. Mungkin agak repot juga karna kita harus beberapa kali me-resize ukuran layar browser. Nah, untuk itu saya ingin memberitahu cara lain yang lebih mudah. Barangkali kalian juga sudah pada tahu sih. Tapi tidak apa-apa. Mungkin saja masih ada sahabat yang belum pernah nyoba. Caranya adalah dengan menggunakan Responsive Tools.

Ada banyak situs yang menyediakan tools semacam ini. Jika kalian mau silahkan cari saja lewat Google. Kalau bisa sih cari yang simpel dan ringan saja. Karna biasanya tools penguji tampilan responsif seperti ini banyak menggunakan iframe. Jadinya wajar kalau situs tersebut agak berat untuk me-loading hasil pengujian tampilan web.

Membuat Responsive Tools sendiri

Beberapa kali saya sudah mencoba responsive tools dari situs-situs yang berbeda. Hingga akhirnya entah kenapa saya kepikiran dan pengen rasanya bisa membuat sendiri situs seperti ini. Iyaa, rasanya pasti lebih menyenangkan menggunakan alat buatan kita sendiri. Jadinya kita bisa atur semau kita. Syukur-syukur kalau ternyata ada orang lain yang suka menggunakannya. ^_^

Dan Alhamdulillah kemarin akhirnya saya berhasil juga membuat responsive tools sendiri. Tidak sulit memang. Saya rasa kalian yang sudah mengerti soal HTML, CSS dan Javascript pasti juga bisa kok membuat yang semacam ini. Karna memang cara kerjanya sangat sederhana. Saya aja belajar sendiri, praktek sendiri dan akhirnya bisa sendiri. Untuk responsive tools ini saya menggunakan self hosting.

Situs ini tidak banyak menggunakan iframe karna hanya menampilkan 4 (empat) macam ukuran layar saja. Dan itu sudah cukup standard lah menurut saya. Minimal kita sudah tahu tampilannya dari Desktop, Laptop, Tablet dan versi Mobile. Untuk desain gambar frame saya masih pinjem dari punyanya @Justinavery.

Kelebihan Responsive Tools ini adalah perangkatnya bisa kalian pindah posisi atau drag. Coba saja sendiri. Dan hasilnya pun bisa kalian Screenshot untuk disebarin ke media sosial atau sekedar jadi bahan review juga keren.

Empat macam ukuran layar rasanya kurang!! Okay, saya masih punya yang lain. Untuk yang ini saya buatnya hanya menggunakan fitur laman blogspot. Dan disini kalian bisa melihat tampilan responsive sampai 7 (tujuh) macam perangkat berbeda. Gimana? 🙂

Semoga saja kalian suka dengan Responsive Tools buatan saya.

Salam Semangat,

[email protected]