Sebelumnya saya sudah cerita sedikit tentang seperti apa Responsive Web Design. Dan disana pula saya sudah berbagi dua macam tools yang bisa sahabat gunakan untuk mengecek apakah web atau blog sahabat sudah Responsif apa belum. Sebenarnya masih banyak sih alat-alat yang seperti itu. Kalau sahabat masih merasa kurang nyaman atau gak suka makek yang saya rekomendasikan sahabat bisa langsung searching aja lewat Mbah Google, ketikkan Resposive Tools atau semacamnya. Nah, setelah itu tinggal pilih aja deh mau makek yang mana.

Trus, emang ini untuk apaan sih?? Pasti sahabat akan bertanya seperti ini. Tapi saya sangat yakin sahabat yang bertanya seperti ini tuh karna sahabat sendiri belum sepenuhnya mengenal design template dari web atau blog yang sahabat gunakan, iyaa kan?? Gak salah juga sih, karna diluaran sana pun emang udah banyak banget temen-temen yang mau membagi-bagikan template atau theme buatannya untuk web dan blog secara GRATISan. Dan banyak pula diantara itu yang designnya sudah memang Responsive. Jadi, bagi kita-kita yang gak paham bener tentang coding HTML maupun CSS iyaa gak perlu repot lagi. Tinggal download trus pakek daah. Simple banget yaa?? ^_^ Iyaa kalau ada yang gampang ngapain juga dipersulit.

Tapi walaupun begitu tetep aja yang namanya GRATIS pasti ada juga kekurangannya. Menurut saya pribadi nih yaa, kalau kita menggunakan template design dari orang lain yang dibagikan untuk umum seperti itu, tentu kekurangan paling utamanya adalah itu design template pasti bakalan akan banyak orang lain yang juga mau memakainya. Jadi, bisa aja tampilan web atau blog kita nantinya bakal jadi terlihat sama dengan punya orang lain. Maka dari itu, tentu akan jauh lebih baik lagi kalau kita sebagai seorang setidaknya mau lah sedikit lebih memahami tentang edit-mengedit tampilan web atau blog kita sendiri. Minimal tahu sedikit bahasa HTML atau CSS deh.

Nah, kemarin sewaktu saya lagi mau nyoba-nyoba buat tampilan Responsive Weblog ini, saya baru tahu nih sob ternyata Google Chrome juga bisa dipakai sebagai Responsive Tool lhooh. Dibandingkan dengan dua macam tools yang sebelumnya udah saya share tentu dengan cara ini kita bisa lebih mudah mengechek tampilan design web atau blog kita. Salah satu kemudahannya, kita gak perlu lagi meng-input atau memasukkan alamat URL yang mau kita uji tampilannya ke website penguji halaman Responsif seperti itu lagi. Dan karena hal ini juga jadinya tentu bisa lebih menghemat quota modem internet kita deh, soalnya gak perlu loading halaman lagi untuk melihat tampilannya di beberapa ukuran yang ingin kita uji.

***

Terus gimana caranya tuuh??

Sangat GAMPANG. Ikuti saja tiga langkah berikut ini:
Pertama, Silahkan buka web atau blog sahabat pada tab baru seperti biasanya. Atau untuk test anggaplah weblog ini yang ingin kita uji tampilannya yaa.
Kedua, Klik tombol Restore Down yang letaknya disamping tombol Exit Google Chrome.
Ketiga, Sesuaikan ukuran lebar dan tinggi jendela Google Chrome dengan tampilan yang kita inginkan. Disini kita tinggal menyesuaikan dengan ukuran layar Handphone, Smartphone, Tablet, iPad dsb.

Berikut ini pembahasannya:
Pada langkah pertama, saya sangat yakin sekali sahabat yang menggunakan PC/Laptop/Netbook pasti umumnya selalu membuka Aplikasi Google Chrome pada tampilan Maximize, kan? ๐Ÿ˜€ Atau sesuai dengan tampilan maksimal resolusi layar monitor yang sedang digunakan. Seperti Netbook saya resolusinya 1024×768 tentu ketika setiap saya ingin membuka suatu halaman web dengan Chrome, maka saya akan melihat tampilannya di ukuran resolusi tersebut. Kita sebut saja inilah sebagai Tampilan Awal dengan ukuran standartnya. Sedang yang menjadi permasalahan dalam tampilan Responsive Web Design itu hanyalah Apakah design tampilan web itu bisa tetap bertahan tertata dengan rapi sesuai dengan tema Tampilan Awalnya?? Saat dilihat dari ukuran resolusi yang berbeda dari standart (yang lebih kecil). 

Maka, pada langkah kedua dengan hanya memanfaatkan fungsi dari tombol Restore Down kita jadi bisa melihat tampilan web tersebut dari ukuran resolusi yang lebih kecil. Karna jendela Chrome sudah menjadi lebih kecil dari resolusi maksimal monitor yang kita gunakan. Seperti yang saya katakan diawal kita pun bisa dengan mudah sekali mau mengaturnya menjadi ukuran berapapun. ^_^

***

Terus gimana caranya supaya kita bisa membuat ukurannya jadi benar-benar pas gitu?? Seperti misal ukuran 240×320

Kita kan gak tahu nih ukuran jendela Chrome nya jadi berapa dalam satuan piksel (px) setelah di Restore Down. Tenang!! Masih ada kok solusinya. Coba ikuti langkah berikut ini:

Pertama, Klik Kanan pada jendela Chrome yang sedang membuka halaman web tadi, lalu pilih Periksa Elemen. Ini bertujuan untuk mengaktifkan fitur Developer Tools dari Google Chrome. Klik screenshot dibawah ini untuk melihat tampilan fullscreen pada gambar.

Kedua, Klik Undock into separate window yang letaknya ada dipojok kiri bawah jendela Chrome. Supaya menu dari Developer Tools nya terpisah dari halaman web yang ingin kita uji. Tapi kalau saat pada langkah pertama menunya sudah langsung muncul pada jendela baru (terpisah) langkah ini bisa dilewatkan saja.

Ketiga, Kembali ke jendela Chrome yang ada halaman web tadi. Klik tombol Restore Down. Dan coba sahabat atur ukuran jendela Chrome nya bisa lebar ataupun tingginya terserah. Caranya, klik pada tepi jendela lalu drag (tahan klik + geser). Nanti pasti akan ada muncul semacam ukuran yang memberi tahu resolusi dari jendela Chrome saat kita drag.

Gimana sobat?? Mudah kan?? ^_^
Sebenarnya pada prinsipnya sih cara ini hampir sama seperti Reponsive Tools lain yang ada di web online. Dan bisa jadi pun Alat Responsif yang secara online itu memanfaatkan konsep ini. Tapi sebagai CATATAN, cara ini hanya berlaku untuk melihat tampilan Responsif suatu web atau blog yang pada pengaturan template nya menggunakan Media Screen Query saja sob. Kalau ada yang menggunakan plugin atau fitur semacam aplikasi dari pihak ketiga dengan cara ini kita tidak bisa melihat tampilan versi Mobile nya.

***

Lalu ada gak cara untuk mengatasinya??

Tentu jawabnya ADA. Karna mungkin emang Google Chrome ini udah sangat lengkap fiturnya kali yaaa. Bukan mau promosi ini lhoh. -_- Sebagai alternatif lain sahabat bisa mengikuti cara yang ini dan sebenarnya pun cara ini hampir sama seperti yang sebelumnya. Simak saja lah:

Pertama, Aktifkan fitur Developer Tools dari Google Chrome pada halaman yang ingin diuji. Sama seperti langkah diatas.
Kedua, Klik Undock into separate window (ini hanya optional) tujuannya agar lebih mudah melihat tampilan web atau blog sahabat.
Ketiga, Pada jendela Developer Tools tadi klik tombol Settings (gambar roda bergerigi pojok kanan bawah). Maka akan muncul kotak Settings seperti berikut:

Keempat, Pilih tab Overrides dan beri checklist pada pilihan Device Metrics. Silahkan masukkan ukuran layar yang diinginkan misal 320×240. Pilihan Fit in Window berfungsi agar apabila ukuran yang dimasukkan lebih besar dari resolusi monitor tampilan akan otomatis disesuaikan jadi tetap bisa terlihat keseluruhannya.
Pilihan User Agent berfungsi untuk memilih tampilan yang diinginkan berdasarkan ukuran yang memang sudah ada seperti Blackberry, iPhone dsb.

Gimana bisa gak sob?? Lebih mudah yang mana?? ๐Ÿ˜€ hehehe..
Euyah, ada satu trik lagi nih yang perlu juga sobat tahu khususnya yang menggunakan platform blogspot. Terkadang dengan cara diatas bisa saja kita belum benar-benar melihat tampilan versi Mobile web atau blog yang ingin diuji tadi. Itu dikarenakan kita kan mengaksesnya lewat versi Desktop. Kalau sahabat ada memilih pengaturan menggunakan versi Mobile bawaan maka dia hanya akan bisa terlihat saat diakses lewat perangkat mobile. Tapi saya punya cara agar sahabat tetep bisa melihatnya. Gampang!! Tinggal tambahkan saja tulisan ini ?m=1 dibelakang alamat web atau blog yang sedang diuji.

Sekian dulu yaa sharing-sharing hari ini, semoga sahabat bisa memahami penjelasan saya diatas. Maaf kalau bahasanya acak-acakan yaaa. Kalau ada yang berasa kurang jelas boleh langsung tinggalin aja pertanyaan ataupun masukan lewat kotak komentar dibawah tulisan ini. Lain kali mungkin saya akan coba bahas Cara membuat Web/Blog menjadi Responsif dengan Script Media Query deh. ๐Ÿ˜€ Makanya yuuk mending follow aja weblog ini supaya sahabat bisa terus ikutin perkembangan dan update artikel terbaru dari Chaidir’s Web. ^_^ hehehe.. promosi kan jadinya!!

Sampai jumpa di tulisan berikutnya yaaa..
Semangat Berkarya!! Dan Selamat Mencoba..