APLIKASI ONLINE UNTUK MELAKUKAN TEST RESPONSIVE WEB DESIGN








Saat kita membuat responsive website, kita membuat sebuah desain web yang bersih, adaptif, dan gambar yang fleksibel serta layout yang 'fluid'. Dan tentunya kita perlu memastikan bahwa website yang kita buat berjalan di berbagai lingkungan web browser semaksimal mungkin dan melakukan test website tersebut di berbagai resolusi, sehingga kita dapat melihat bagaimana 'media query' dapat berjalan.

Melakukan test responsive web design bisa jadi merupakan tugas yang cukup berat, tidak mudah untuk setiap kali harus melakukan resize pada ukuran-ukuran yang spesifik (panjang dan lebar web browser). Mengubah lebar ukuran browser dan melakukan test pada berbagai browser dan aplikasi yang berbeda sangat melelahkan dan sangat menyita waktu. Apikasi di bawah ini sangatlah membantu anda dalam melakukan test responsive design pada berbagai ukuran layar browser.



THE RESPONSINATOR

Melakukan test pada berbagai perangkat dengan mengisi alamat URL. Ini merupakan aplikasi yang bagus karena outline pada aplikasi ditampilkan di halaman juga, menciptakan tampilan yang hidup. Apabila anda ingin klien anda terpesona dengan tampilan responsive design anda, pastikan gunakan responsinator.







http://www.responsinator.com/


RESIZEMYBROWSER

Tidak bekerja di Opera dan Chrome karena kedua browser ini memiliki dukungan yang minim pada prosedur "ResizTo". Untuk Safari, sangat disarankan untuk menggunakan Resize Safari Extension, menawarkan fitur lebih mendalam seperti "Offline usage", :Resize multiple tabs at once", "Reference book", "More customizable presets" dan "MoveTo tool". Bekerja dengan sempurna pada browser Firefox dan IE.





http://resizemybrowser.com/


RESPONSIVE DESIGN TESTING

Aplikasi ini untuk semua yang membutuhkan cara cepat dan mudah untuk melakukan test pada website design di berbagai ukuran layar browser. Matt tools adalah online tool yang berbasis iframe. Cukup masukkan url pada website dan test pada berbagai resolusi browser.



http://mattkersley.com/responsive/


RESPONSIVEPX

Sangat mirip dengan resizeMyBrowser, responzivepx membuka halaman web anda di window dimana anda dapat melakukan test lebar dan tinggi untuk menentukan seberapa sempurna tampilan media-query dan breakpoint di design.

Masukkan alamat url website anda - lokal atau online : keduanya dapat ditampilkan, dan gunakan kontrol untuk mengatur lebar dan tinggi dari viewport untuk menemukan lebar breakpoint yang tepat dalam pixel.



http://responsivepx.com/


SCREENFLY

Dengan screenfly anda dapat melakukan test website di berbagai resolusi desktop, tablet, mobile atau televisi, Pengetesan desktop saat ini terbatas hanya untuk Safari, sedangkan tablet dan mobile memiliki pilihan yang lebih banyak untuk perangkat dan browser. Televisi terbatas hanya untuk Opera.



http://quirktools.com/screenfly/


DEMONSTRATING RESPONSIVE DESIGN

Aplikasi lain yang cukup menyenangkan untuk melakukan test responsive website, dibuat oleh Jamus Reynolds. Aplikasi ini juga menampilkan outline dari 5 perangkat yang telah disiapkan (iPhone landscape dan portrait, iPad landscape dan portrait dan iMac) yang akan menjadi alat yang keren untuk ditampilkan bagi klien anda.



http://www.jamus.co.uk/demos/rwd-demonstrations/


WEB EXTENSIONS (CHROME AND/OR FIREFOX)


WINDOW RESIZER (CHROME APP)

Ekstensi ini mengubah ukuran window browser untuk melakukan emulasi berbagai resolusi. Ini sangat bermanfaat untuk para web designer dan web developer yang dapat membantu mereka melakukan test layout pada berbagai resolusi browser. Resolusi yang ditampilkan dapat dikustomisasi (ditambahkan, dihapus atau diurutkan lagi).



https://chrome.google.com/webstore/detail/kkelicaakdanhinjdeammmilcgefonfh?hl=en-US&hc=search&hcp=ext


WEB DEVELOPER

Extension Web Developer menambahkan berbagai aplikasi web developer pada web browser. Ekstensi ini tersedia untuk Firefox dan Chrome, dan dapat berjalan pada berbagai platform yang didukung browser ini termasuk diantaranya Windows, Mac OS X dan Linux.

Extension ini menyediakan beberapa alat untuk para designer agar dapat dengan mudah mendevelop responsive atau fluid website, tersedia pilihan untuk meresize browser dengan klik pada tombol yang disediakan. Ukuran baru dapat disimpan dan digunakan langsung.

Extension Web Developer menambahkan tombol pada toolbar browser dengan berbagai pilihan perangkat web developer. Ini merupakan porting resmi dari extension untuk Firefox yang dibuat oleh orang yang sama.

http://chrispederick.com/work/web-developer/


RESOLUTION TEST

Resolution Test mengubah ukuran browser window untuk para developer untuk melihat preview website mereka di berbagai resolusi layar. Termasuk didalamnya daftar resolusi yang umum dan kemampuan untuk mengkustomisasi list tersebut. Juga memberikan pilihan bagi para pengguna untuk mengaktifkan Google Browser Size.



https://chrome.google.com/webstore/detail/idhfcdbheobinplaamokffboaccidbal?hl=en-US&hc=search&hcp=ext


RESPONSIVIEW

responsiview adalah alat untuk melakukan test pada website di tampilan browser dengan berbagai ukuran. Terinspirasi dari kebutuhan untuk testing resposive design media query, responsiview memasukkan daftar ukuran sebagai berikut:
Tablets – portrait orientation: 768×1024
Mobiles – portrait orientation: 320×480
Mobiles – landscape orientation: 480×320

Sekali klik akan muncul pop-up window yang berisi website dengan ukuran layar tertentu. Anda juga dapat mengatur ukuran lebar dan tinggi sendiri.



https://chrome.google.com/webstore/detail/kcemonjjmilbiepahkhanlkddonpjlep?hl=en-US&hc=search&hcp=ext


BOOKMARKLETS

SIMPLE RESPONSIVE DESIGN TEST PAGE

Bookmarklet ini dapat menampilkan web di berbagai ukuran. Bookmarklet ini dapat dijalankan di setiap halaman (sesuai nama file anda) dan menyimpan langkah-langkahnya untuk dapat digunakan di setiap folder. (Firefox dan Chrome).



http://www.benjaminkeen.com/misc/bricss/


MEDIA QUERY BOOKMARKLET

Perangkat yang mudah digunakan untuk menampilkan dengan tepat ukuran untuk web anda. Cukup seret website pada bookmark bar dan anda langsung dapat melihatnya



http://seesparkbox.com/foundry/media_query_bookmarklet


RESIZER

Resizer adalah bookmarklet responsive design yang dapat digunakan untuk mengubah ukuran halaman web responsive design secara cepat. Kunjungi website yang anda ingin test dan klik Resizer bookmarklet pada bookmark bar (kini tersedia di extension chrome).



http://codebomber.com/jquery/resizer/




sumber:
http://www.visigraphic.com/article/aplikasi-online-untuk-melakukan-test-responsive-web-design