Saturday, 11 July 2015

Memahami Viewport

Salah satu konsep penting dalam desain responsif adalah viewport. Viewport, seperti namanya, adalah view di mana Anda melihat situs web Anda.

Sebelum HTML5 dan CSS3, kita biasanya berpikir tentang sebuah situs web dalam kaitannya dengan ukuran jendela browser. Biasanya pengguna kita menggunakan layar ukuran minimal 1024 x 800 dengan jendela layar penuh, maka kita akan membangun situs web untuk lebar tetap, biasanya dengan lebar tetap sekitar 960px 980px. Ketika mengembangkan perangkat awal yang lebih kecil, produsen perangkat kecil menghadapi masalah. Sebagian besar situs pada waktu itu dibangun untuk menjadi lebar tetap ini, yang jauh lebih lebar dari lebar layar perangkat yang baru mereka memiliki. Jika situs mereka dimuat di resolusi asli perangkat, maka pengguna akan perlu untuk menggulir secara horisontal dan vertikal untuk melihat situs.

Solusi untuk ini adalah dengan mengatur lebar viewport menjadi lebih besar dari lebar perangkat, yang berarti situs akan disesuaikan dengan ukuran layar. iOS misalnya mengatur lebar viewport untuk lebar 980px secara default sehingga lebar penuh dari situs yang khas akan sesuai untuk layar tanpa horisontal bergulir. Situs ini karena itu akan diperkecil, sehingga untuk membaca isi situs, pengguna kemudian akan memperbesar konten yang mereka merasa tertarik. Ini memberikan kompromi terbaik untuk situs yang lebih tua untuk memastikan mereka dapat digunakan pada perangkat yang lebih kecil.

Untuk memberikan para developer kontrol terhadap lebar viewport, sebuah meta tag diperkenalkan, yang memungkinkan lebar viewport dan skala awal harus ditetapkan. Akan kita bahas mengenai meta tag ini pada artikel selanjutnya, Apakah ini berarti Anda dapat memberitahu browser  ponsel untuk membuat situs pada lebar viewport yang berbeda. Dimana teknik desain responsif yang digunakan, Anda dapat memilih untuk menceritakan browser untuk mengatur lebar viewport untuk menjadi sama dengan ukuran jendela browser  (atau dalam kasus jendela perangkat tunggal menjadi lebar perangkat itu).

Gambar di bawah menunjukkan dimana lebar viewport dan tinggi viewport diukur dalam kaitannya dengan jendela browser.


 Berbagai macam lebar perangkat berarti Anda membutuhkan untuk memastikan Anda menguji pada berbagai ukuran viewport yang berbeda. Untuk memudahkan mencari ukuran viewport dari berbagai macam perangkat populer maka Anda dapat mencoba http://viewportsizes.com, yang memungkinkan Anda untuk mencari melalu daftar perangkat, dengan informasi pada ukuran viewport  perangkat.

No comments:

Post a Comment