Tool : Testing Responsive web Design

Entry kali ini saya akan sharing tentang tool sederhana untuk menguji responsivitas hasil design

Warna hitam dalam hidup seseorang tidak akan pernah terhapus--tapi kita bisa memberikan warna lain agar hitam itu tidak lagi menyedihkan. MTQ

Entry kali ini saya akan sharing tentang tool sederhana untuk menguji responsivitas hasil design

Last Modif at February 25th, 2012

Jika anda pernah merancang atau membuat theme web yang responsive, pasti membutuhkan sebuah tools untuk menguji hasil desain anda.
Pertanyaannya adalah, apakah tool yang anda gunakan harus support koneksi internet atau desain harus di upload dulu? Jika ya, saya ingin membagikan sebuah tools alternatif yang mungkin berguna bagi yang ngga memiliki koneksi internet desktop.

Download Tools + sample

Download terlebih dahulu file-nya dimari : https://sites.google.com/site/indaamwp/myfile/responsive-test.zip?attredirects=0&d=1
Setelah didownload, Extract, lalu Jalankan “testing-responsive.html” dengan browser rilis terbaru.

Sample/contoh

Sample atau contoh desain yang di uji responsivitasnya adalah hasil coding saya untuk PSD tumblr dari desaindigital.com

Keterangan

Tools tadi menguji responsivitas desain sampai pada device dengan
lebar antara 100px sampai 1600px, silakan cek sendiri.

Cara menggunakan;

Edit responsive.test.html dengan editor favorit kesayangan Anda, kemudian temukan markup seperti ini

<iframe src="sample/thumbr/index.html"

Keterangan value;

sample/thumbr/index.html adalah value dari atribut src, maksudnya ialah menjalankan index.html yang berada didalam folder sample > tumblr.
Jadi, jika Anda ingin menguji responsivitas web lain, gantikan value ini; sample/thumbr/index.html dengan url web yang ingin anda uji.
Tapi jangan test indaam.net yah, karena web ini masih menggunakan desain lama. Doain supaya saya ada waktu buat redesign secara total.

Jangan lupa save, setelah itu jalankan kembali atau reload testing.responsive.html

Tambahan;

Anda dapat menguji hasil desain Anda dengan lebar selain yang sudah
saya tentukan, untuk caranya, cukup dengan mengganti value “width” pada tag iframe.

Well, semoga bermanfaat dan ada guna.

Indam

A geek, frontend developer. Like you, coding & experiment.
#web #design #ui #ux #standard #dreamer
#welding #interisti #beer #coffee

8 thoughts on “Tool : Testing Responsive web Design”

  1. iskandaria says:

    Langsung saya tes mas. Lumayan bermanfaat bagi saya. Tool ini mirip dengan screenfly. Untuk blog saya sendiri, walaupun sudah responsive, namun pada lebar tertentu, tampilannya masih kurang (masih perlu dibenahi). Soalnya responsive kan bukan cuma masalah menyesuaikan lebar halaman agar tidak muncul scrolling horizontal, tapi juga bagaimana agar berbagai elemen yang ada di halaman tersebut juga bisa responsive. Dan itu membutuhkan sedikit usaha ekstra.

    Oya, sebenarnya cukup dengan bermodalkan web browser pun kita sudah bisa melakukan tes responsive web. Caranya cukup dengan meresize lebar browser. Tapi yang belum terpecahkan bagi saya sampai sekarang yaitu masalah belum bisa responsive pada device tertentu (misalnya pada ponsel tertentu jika diakses menggunakan opera mini), padahal ketika dites menggunakan browser di PC/laptop, tidak ada masalah atau tidak ada scrolling di bawah layarnya.

  2. indam says:

    Mas Is,
    Ia bener mas, sayangnya peramban ngga bisa di resize melebihi resolusi normal.
    Itu sederhana mas, temukan elemen yang membuat itu melebar kekanan.

  3. muji says:

    mas idam terima kasih tutorialya mas, oya mas kalau bikin themes yg kayak gambar itu bagai mana mas idam?

  4. tinus says:

    sedot dulu ya, makasi om indam

  5. Jokotem says:

    Terima kasih bener ni mas infonya, bisa buat coba desain web saya…

  6. JhnWorld says:

    Menurut saya, cukup menggunakan browser aja dengan cara meresizenya

  7. JhnWorldj says:

    Menurut saya cukup menggunakan browser saja dengan cara meresize nya

  8. blog remaja says:

    Mas Is,
    Ia bener mas, sayangnya peramban ngga bisa di resize melebihi resolusi normal.
    Itu sederhana mas, temukan elemen yang membuat itu melebar kekanan.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Disclaimer, FAQ & License

Hello Gaes, untuk tujuan apapun semua content text di blog ini dapat di copas, tanpa harus menulis sumbernya. Namun content yang berupa gambar--harus Anda periksa kembali lisensinya.

Adapun(mungkin) sebagian content blog ini sudah kadaluarsa atau sudah tidak relevan, contoh :'Theme default WordPress 3+ adalah Twentyten 'apakah selamanya Twentyten?' ngga kan? Indam selaku pengelolah berharap melaporkan jika menemukan content basi yang mungkin dapat menimbulkan salah persepsi tentang content dan konsep itu sendiri. Oia, karena blog ini bersifat pribadi dan bukan untuk komersil, mungkin anda juga akan menemukan tulisan tentang aku dan hal-hal rancu yang sama sekali ngga ada hubungan dengan web dan blog-blogan. Perlu dicatat: Indam selaku pengelolah tidak bertanggung jawab atas kerugian materi, waktu, tenaga, pikiran yang mungkin ditimbulkan dari sini. So, pandai-pandai yah dalam memilah informasi. Thanks for reading.

Quote

Ketika Anda melihat orang lain mengangkat dirinya dengan cara merendahkan orang lain, sebenarnya orang itu lebih rendah dari mereka yang direndahkan. Phidias--greece filsuf

+
-