Thursday, 23 July 2015

Menguji Desain Responsif di Browser

Selama development life cycle dari sebuah situs web, ada kemungkinan bahwa tempat pertama untuk menguji situs Anda adalah browser yang sama untuk Anda gunakan menjelajah web. Dengan desain responsif selama browser Anda mendukung media queries (IE9+, Chrome, Firefox, Opera, Safari), Anda dapat terus melakukan ini, beralih ke browser lain ketika Anda mencapai point dimana Anda membutuhkan cross-browser test.

Untuk memulai pengujian situs responsif Anda, langkah pertama adalah memuat URL situs responsif Anda ke dalam browser, sebagai contoh mari lihat blog saya http://swaradio.com

swaradio.com

Karena ini adalah sitsus responsif, browser dapat diubah ukurannya untuk menguji mobile view


swaradio.com  resized on a smaller device
Itu adalah situs saya di lihat dari perangkat desktop dan mobile, cara sederhana mengubah ukuran dari proses jendela yang sama pada semua browser yang mendukung media queries.

Fitur Pengujian dengan Browser Tertentu
Saya sebutkan sebelumnya bahwa Anda tidak perlu mengubah browser Anda untuk menguji sebuah situs responsif. Beberapa browser menyediakan developer tools tambahan yang yang membantu kita untuk menguji situs responsif. Meskipun Anda tidak perlu untuk mengubah browser untuk core development Anda, hal ini berguna untuk menyadari perbedaan tool-tool pada browser yang menawarkan sehingga dimana Anda merasa ada keuntungan disana untuk workflow Anda, Anda dapat berpindah browser mengambil keuntungan dari tool tertentu.

Google Chrome
Dengan menggunakan Chrome Anda dapat meniru beberapa perangkat yang populer dengan mengikuti langkah-langkah berikut:
  1. Buka Developer tools, Ada dua cara untuk Anda dapat melakukan ini, yang pertama klik kanan halaman Anda dan klik Inspect element. yang kedua adalah dengan mengklik tombol menu yang dapat Anda temukan di sebelah kanan url field dan More tools ➤ Developer Tools.
  2. Klik Show console icon di sebelah kanan dari Developer Tools atau tekan tombol Esc pada keyboard Anda. Maka ini akan membuka Console drawer, seperti gambar yang ditampilkan pada figure 1.1
  3.  Dengan Console drawer  yang sudah terbuka, Anda sekarang dapat memilih Emulation tab. Seperti yang dapat Anda lihat pada Figure 1.2
  4. Menggunakan menu drop-down, Anda mempunyai pilihan untuk meniru perangkat tertentu, Piliah Apple iPhone 4 dan click Emulate, Figure 1-3
  5. Setelah memilih perangkat untuk ditiru, Anda sekarang dapat melihat viewport  kini otomatis menyempit, dan ketika Anda menggerakkan cursor mouse Anda di atas viewport, maka Akan berubah menjadi lingkaran untuk menandai jari Anda. Lihat figure 1-4
figure 1-1 The Console drawer open in Chrome’s Inspector
figure 1-2 The Emulation tab, preselected with a default device
figure 1-3 Memilih iPhone pada tab emulation
figure 1-4. Dengan perangkat yang dipilih dan emulation diaktifkan, maka browser viewport berubah
Catatan : Emulation di Chrome tidak benar-benar meniru perangkat, melainkan hanya akan meniru beberapa key features dari perangkat. Ini termasuk ukuran viewport, rasio piksel perangkat,  user agent, dan touch events. Ini berarti bahwa setiap bug browser-specific akan tidak ditunjukkan karena Anda msih menguji dalam Chrome.
Firefox
Firefox mengambil pendekatan yang sedikit berbeda untuk ini, daripada meniru perangkat tertentu, Anda dapat masuk ke mode desain responsif, yang memungkinkan Anda untuk menguji lebar viewport yang umum.
  1.  Buka developer tools, Cara termudah melukan ini adalah dengan klik kanan pada halaman web dan klik pada Inspect element.
  2. Masukkan tampilan desain responsif, ini dicapai dengan tab icon paling kanan
  3. Sekarang Anda berada pada tampilan desain responsif, Anda dapat melihat situs pada viewport yang lebih kecil. Anda mempunyai pilihan untuk beralih ke landscape view, enable touch events,  mengubah ukuran viewport dengan ukuran lainnya yang umum digunakan. Anda dapat juga mengubah ukuran viewport dan kemudian menyimpan ukuran viewport yang baru sebagai preset. Anda dapat melihat antarmuka Firefox seperti gambar di bawah ini
Firefox inspector dengan Responsive Design view active


No comments:

Post a Comment