Ukuran Lebar Yang Tepat Pada Website

Ukuran lebar yang tepat pada website yang dibahas pada artikel berikut ditujukan sebagai bahan acuan menetukan luas lebar yang paling baik pada website agar website tersebut dapat dilihat dengan baik pada setiap resolusi tinggi maupun pada resolusi rendah disetiap layar yang menampilkannya. Karena tidak semua website akan tetap terlihat baik pada resolusi rendah maupun pada resolusi tinggi ketika ditampilkan pada layar monitor komputer maupun pada layar perangkat mobile seperti IPhone, BlackBerry, dll.

Pendahuluan Ukuran Lebar Yang Tepat Pada Website

Berapa ukuran lebar yang tepat pada website ? Sebuah pertanyaan yang sering muncul, terutama bagi mereka mulai di desain web, adalah apa yang mereka harus menggunakan lebar ketika merancang situs web. Ini pertanyaan menarik, dan tidak ada jawaban yang tepat tunggal. Masalahnya dalam mencari tahu berapa ukuran lebar untuk desain situs Anda terletak pada kenyataan bahwa internet dapat dilihat pada berbagai perangkat dan layar yang berbagai ukuran dari perangkat mobile kecil seperti smartphone sampai dengan layar desktop yang besar. Menurut W3Schools, per Januari 2011 lebih dari 85% orang yang browsing menggunakan resolusi layar yang lebih tinggi dari 1024 x 768 piksel, tapi ada juga yang menggunakan iPhone 4 dengan resolusi layar 960 x 640 piksel dan ada beberapa yang menggunakan BlackBerry yang memiliki resolusi layar 320 x 240 piksel.

Bahkan jika kita mengambil persamaan pada perangkat mobile, resolusi layar hanya digunakan untuk bagian pada gambar. Pengukuran yang perlu kita tahu adalah seberapa besar ukuran pada area pandang. Ini adalah ukuran yang aktual pada layar website Anda ketika akan ditampilkan. Seseorang mungkin memiliki resolusi 1024 x 768 piksel, tapi berapa banyak piksel yang dipakai pada penggunaan browser Google Chrome - berapa banyak piksel yang dipakai pada bagian atas browser seperti address bar, tab, favorit dan siapa tahu para pengguna menggunakan plugin toolbar lainnya yang mungkin telah terinstal. Selanjutnya, berapa banyak dari para pengguna yang benar-benar memaksimalkan ukuran layar browser mereka ? Mungkin mereka menelusuri dengan browser yang menggunakan resolusi hanya setengah layar.

Selamanya akan ada argumen antara desainer web melalui bagaimana cara terbaik untuk mengatasi masalah merancang sebuah website sehingga terlihat bagus pada situasi apapun. Desain Liquid ( Liquid Layouts ) vs Desain Fixed ( Fixed-Width Layouts ) akan selalu menjadi perdebatan sengit selama beberapa waktu, dan belakangan tren "desain web responsif" popularitasnya mulai berkembang.

Dasar Pemilihan Ukuran Lebar Yang Tepat Pada Website

Desain Liquid ( Liquid Layouts )

Desain Liquid ( Liquids Layouts ) diibaratkan seperti benda cair (air) yang berada dalam wadah, ia akan menyesuaikan dengan bentuk wadahnya ( fleksibel / elastis ). Begitu pula dengan dengan situs Web yang kita desain, ia akan berubah sesuai dengan bentuk browser yang digunakan oleh para pengguna.

Liquid design dibuat menggunakan satuan yang fleksibel (%) agar menyesuaikan dengan ukuran resolusi monitor dan browser. Satuan ukuran tersebut adalah persen yang berlaku bagi semua tabel yang digunakan pada tata letak ( layouts ). Desain Liquid dapat menggunakan istilah relatif terhadap ukuran elemen pada situs web, menggunakan persentase misalnya atau ems. Kawasan konten utama Anda mungkin 80% dan lebar sidebarnya 20%.

Hal ini memungkinkan mendapatkan desain situs yang indah dengan menggunakan pendekatan pada desain liquid, tapi tetap saja mendatangkan beberapa kendala dan pertimbangan dari desain tetap. Kesulitan utama yang biasa dirasakan ketika membuat halaman Web dengan menggunakan metode desain liquid adalah penempatan tata letak pada situs yang banyak menggunakan gambar. Anda harus benar-benar mempertimbangkan bagaimana menampilkan gambar-gambar tersebut pada sebuah layout “Liquid”.

Desain Responsif

Desain web responsif merupakan pendekatan yang mendapatkan popularitas, pada dasarnya adalah sebuah referensi untuk membuat desain web Anda responsif terhadap lingkungan yang berbeda. Ini bukan pendekatan tunggal melainkan kesadaran pada perangkat dan resolusi yang berbeda dan menerapkan apa yang baik ketika diperlukan untuk melihat dari segala sisi. Hal ini mungkin, misalnya mengkombinasikan desain liquid digabungkan dengan beberapa media queries dari script CSS untuk memenuhi resolusi ekstrim dimana untuk menutupi kelemahan dari desain liquid.

Desain Fixed ( Fixed-Width Layouts )

Tapi untuk sekarang, mari kita berasumsi bahwa Anda ingin membuat website dengan desain fixed ( fixed-width layouts ) dan Anda masih memiliki pertanyaan pada berapa ukuran lebar yang seharusnya pada desain website Anda. Website fixed-width pada umumnya menggunakan tata letak ( layouts ) yang biasa digunakan, dan mereka dirancang pada ukuran lebar tertentu. Jika Anda memiliki monitor kuno dengan resolusi kecil, Anda akan sering menggunakan horizontal scroll untuk melihat sidebar pada situs dimana ukuran luas lebar tetapnya melebihi dari ukuran resolusi yang Anda gunakan.

Ukuran Area Pandang ( Viewport Size )

Dengan menggunakan perangkat seperti Google Browser Size milik Google dan juga FoldTester.com. Alat-alat ini memberikan suatu indikasi tentang seberapa baik ukuran area pandang pada umumnya kepada pengguna web. Dengan kedua alat tersebut memungkinkan Anda untuk memasukkan URL untuk melihat overlay yang akan menunjukkan kepada Anda rincian persentase dari ukuran viewport pada umumnya. Sebagai contoh, menurut FoldTester 99% orang memiliki viewport dengan kemampuan melihat pada resolusi 585 x 300 piksel, dan 90% dari orang memiliki viewport dengan kemampuan melihat pada resolusi 955 x 465 piksel.

Menilai Audiens Anda dan Sistem Grid yang Populer

Skema tata letak yang populer adalah 960 pixel pada ukuran luas melebar, menurut FoldTester dan Browser Size ukuran ini akan berada pada 80% dari total nilai viewport semua orang. Anda akan perlu memutuskan berapa persentase yang dapat diterima untuk memenuhi kasus Anda. Sebuah desain dengan lebar 770 pixel akan berada dalam viewport dari 95% dari browser, namun Anda harus mempertimbangkan popularitas bahwa banyak situs sekarang menggunakan desain yang lebih luas seperti sistem grid 960 atau sistem grid 978.

Tingkat prevalensi ini dimaksudkan pada situs web Anda, sementara seluruhnya terlihat pada sebagian besar viewports, mungkin akan terlihat kuno, atau bagi pengunjung yang menggunakan resolusi besar dan dengan browser dimaksimalkan, desain Anda mungkin terlihat seperti terdapat banyak ruang kosong.

Jika Anda mendesain ulang situs. Anda harus memperhatikan jumlah ukuran area pandang para pengunjung Anda sendiri untuk menentukan ukuran lebar yang terbaik bagi audiens Anda sendiri. Lakukan dengan menggunakan pencarian Google untuk menerapkan pelacakan area pandang dengan menggunakan " Google Analytics " untuk memulainya.

Titik awal yang solid

Tidak setiap audiens situs pasti sama, dan sebisa mungkin perlu memeriksa audiens Anda sendiri, sebelum memutuskan pada ukuran lebar situs Anda - namun jika Anda memulai merancang sebuah website baru dengan tidak melihat statistik yang tersedia, dan audiens Anda mungkin menjadi khalayak umum, maka Anda bisa mengandalkan prevalensi sistem grid 960 dan menggunakannya sebagai titik awal. Tidak ada yang pernah " dipecat " untuk merancang menggunakan luas lebar 960 piksel.

Sumber : Ezine Articles