Friday, 10 July 2015

Dapatkan alat pengujian viewport Desain Web Responsif Anda di sini!

Pengguna Internet Explorer harus memastikan bahwa mereka memiliki Microsoft Internet Explorer Developer Toolbar yang dapat di download dari URL berikut :

http://www.microsoft.com/download/en/details.aspx?id=18359

Jika Anda menggunakan safari, Resize adalah favorit saya (http://resizeSafari.com/), ataupun ResizeMe (http://web.me.com/aaronholla/Safari_Extensions/ResizeMe.html) adalah sama dan juga gratis.

Jika Anda menggunakan Firefox, ada Firesizer (https://addons.mozilla.org/en-US/firefox/addon/firesizer/) dan pengguna Chrome tentu harus mempunyai Windows Resizer (https://chrome.google.com/webstore/detail/kkelicaakdanhinjdeammmilcgefonfh).

Viewport atau Screen Size?
Perlu diketahui bahwa viewport dan screen size adalah bukan hal yang sama. Viewport berhubungan dengan area konten dalam jendela browser, termasuk toolbar, tab, dan sebagainya. Singkatnya, hal ini berkaitan dengan daerah dimana sebuah situs web benar-benar ditampilkan. Screen size mengacu pada area tampilan fisik perangkat. Perlu diperhatikan bahwa beberapa tool resizer pada browser menampilkan ukuran, meliputi elemen browser seperti URL bar, tabs, kotak pencarian, dan yang lainnya. Dalam screenshot berikut, ukuran viewport yang sebenarnya ditampilkan di posisi kanan atas (1156 x 921 px) sementara plugin Firesizer menunjukan ukuran jendela pada kanan bawah (1171 x 1023).

 
Sekarang kita telah mempunyai senjata dengan segala sesuatu yang kita butuhkan untuk memulai membuat web desain responsif. Jalankan browser yang Anda pilih, Jalankan Sreen Size tool Anda, dan lihatlah pada http://thinkvitamin.com/

Jika Anda melihat halaman dengan viewport dengan lebar lebih besar dari 1060 piksel. Anda akan melihat layout yang mirip ditampilkan pada gambar berikut:

  
Namun, jika Anda melihat situs dengan viewport lebih besar dari 930 piksel tetapi lebih rendah dari 1060 piksel, Anda akan melihat layout, seperti yang ditunjukkan pada gambar berikut:


Perhatikan Navigasi Utama ke sisi logo telah berubah? Icon di sebelah kanan konten utama telah diurutkan memanjang kebawah. Semuanya digunakan secara sempurna, dan yang paling penting tidak menghilang dari layar. Sekarang kita lihat dengan viewport kurang dari 880 piksel, dalam screeshot berikut:


Header masih sama tetapi lihatlah bahwa sidebar kanan menjadi lebih tipis; icon sosial media sekarang di bagi menjadi 2 dan 2 (karena ada 4 icon, 2 atas dan 2 bawah). Sementara block teks telah disesuaikan dan teks mengalir sesuasi dalam block.

Namun, coba kurangi viewport Anda kurang dari 600 piksel, dan Anda akan melihat perubahan besar, seperti yang ditunjukkan pada gambar berikut:

Bagaimana dengan yang diatas? seluruh sidebar telah menempati viewport baru, membiarkan bagian paling penting dari situs yaitu konten menempati lebar penuh dari jendela browser. Perhatikan juga bagaimana header link menjadi horizontal yang sebelumnya berada di sisi logo, dan logo itu sendiri telah berubah ukurannya? Semua perubahan ini membantu untuk memberikan pengalaman yang lebih baik bagi pengguna berdasarkan dimensi viewport.


Mari kita lihat contoh lain http://2011.dconstruct.org/. Dengan viewport lebar (katakanlah lebih dari 1350 piksel) situs terlihat seperti gambar yang ditunjukkan berikut :




Perhatikan, khususnya grid pada sembilan gambar di atas. Ketika Anda menurunkan lebar viewport (kurang dari sekitar 960 piksel), perhatikan apa yang terjadi? grid 3 baris pada gambar menjadi 3 baris (berisi 2  gambar) dan 1 baris (berisi 3 gambar) pada bagian paling bawah. Seperti yang ditunjukkan pada gambar berikut:




Turunkan lebar viewport lebih kecil lagi, kurang lebih 720 piksel maka kita jumpai desain lain "break point", header link beralih memasukkan gambar yang menyediakan area target yang lebih baik untuk navigasi touchscreen:




Masih lebih kecil lagi, setelah kita mengurangi viewport kurang dari 480 piksel. grid gambar berubah lagi. sekarang menunjukkan deretan dua gambar, kemudian tiga, dan kemudian empat. Gambar-gambar ini terus mengubah ukuran sebagai viewport menyusut menjadi sekitar 300 piksel. Untuk menggambarkan, Screenshot berikut menunjukka bagaimana tampak pada iPhone :


No comments:

Post a Comment