[Tested] Cara Test Responsive Template Latest Update

responsive-responsive.gif


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 Flash & Reset pengertiannya dulu.
Responsive Web Design?
Responsive Web Design adalah sebuah teknik yang digunakan untuk membuat layout internet site menyesuaikan diri dengan tampilan tool pengunjung, baik ukuran maupun orientasinya. Jadi tampilan yang berada di laptop 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 cellular 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 cell tool.
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 laptop, begitu juga dengan Smartphone dan Handphone.
Tapi di postingan ini saya tidak membahas lebih element tentang Responsive Template, karena saya hanya ingin memflash & Reset 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
responsive.png

  • Pilih dan Klik Developer
responsive2.png

  • 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
responsive3.png

  • 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.
responsive4.png




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
responsive6.png

responsive5.png

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

  • Lalu akan muncul 
responsive7.png

  • Anda bisa memilih resolusi yang di sediakan Google Chrome
responsive8.png


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

Tidak ada komentar:

Posting Komentar