Cara Test Responsive Template



Bagi anda yang sering berurusan dengan Template Website atau Blog, saya rasa kata Responsive Web Design tidak asing lagi buat anda, tapi bagi yang belum tau atau belum paham apa itu Responsive Web Design, saya akan Beritahu pengertiannya dulu.

Responsive Web Design?
Responsive Web Design adalah sebuah teknik yang digunakan untuk membuat layout website menyesuaikan diri dengan tampilan device pengunjung, baik ukuran maupun orientasinya. Jadi tampilan yang berada di desktop komputer dengan tampilan yang diakses melalu SmartPhone misalnya, itu akan berbeda tampilannya. Responsive Web Design Untuk mengetes tampilan yang menggunakan teknik Responsive tersebut tidak harus mengaksesnya melalui mobile device ataupun device lainnya, namun cukup dengan meminimize browser saja ke dalam ukuran mobile device yang diinginkan, kita sudah dapat melihat tampilan website kita pada layar mobile device.

Template Responsive menurut saya adalah Template yang mengikuti resolusi device yang ada, misal kita membuka Website atau Blog di PC, Template akan otomatis mengikuti resolusi layar pc, begitu juga dengan Smartphone dan Handphone.

Tapi di postingan ini saya tidak membahas lebih detail tentang Responsive Template, karena saya hanya ingin memberitahu bagaimana anda bisa Menguji Responsive Atau Tidak Template Website Atau Blog Hanya Memakai Satu Perangkat Saja (Leptop/PC).

Pastikan Anda sudah menginstal dua aplikasi yaitu Mozila Firefox dan Google Chrome, kalau satu saja sih boleh juga, hehe. Disini saya mengunakan Mozila Firefox Versi 32 dan Google Chrome Versi 38,
NOTE: Saya sarankan untuk yang memakai Versi Jadul harap di Update dulu.

Langsung Saja

1.Untuk Mozila Firefox


  • Buka Mozila Firefox anda, klik Icon Open Menu yang ada di sebelah Pojok Kanan Atas, lalu akan keluar Menu seperti gambar di bawah

  • Pilih dan Klik Developer

  • Pilih dan Klik Responsive Design View, 
NOTE: Untuk lebih Cepatnya anda juga bisa menggunakan HotKey Ctrl+Shift+M
  • Setelah itu akan muncul pengaturan Resolusi seperti pada gambar di bawah

  • Terlihat disitu saya menggunakan resolusi 320x480, anda bisa merubah resolusi di atas sesuai opsi resolusi yang ada, atau anda juga bisa mengcostum resolusi sesuai keinginan anda.




2. Untuk Google Chrome

  • Buka Google Chrome anda, Klik Icon Costumize And Control Google Chrome yang ada di Pojok Kanan Atas Google Chrome, pilih More Tools dan pilih Developer Tools


NOTE: Anda bisa mempercepat dengan menggunakan HotKey Ctrl+Shift+I

  • Lalu akan muncul 

  • Anda bisa memilih resolusi yang di sediakan Google Chrome


Sekian dulu postingan saya kali ini, mudah mudahan bisa bermamfaat untuk Para Pembaca.
Lihat juga Videonya

0 Response to "Cara Test Responsive Template "

Post a Comment