Hal pertama yang dipertimbangkan kebanyakan desainer saat membangun halaman web mereka adalah apa? resolusi untuk merancang untuk. Apa artinya ini sebenarnya adalah memutuskan seberapa lebar desain Anda seharusnya. Tidak ada lagi yang namanya lebar situs web standar.
Mengapa Mempertimbangkan Resolusi
Pada tahun 1995, monitor standar 640-piksel-kali-480-piksel adalah monitor terbesar dan terbaik yang tersedia. Ini berarti bahwa desainer web berfokus pada pembuatan halaman yang terlihat bagus di browser web yang dimaksimalkan pada monitor 12 inci hingga 14 inci pada resolusi itu.
Saat ini, resolusi 640-kali-480 membuat kurang dari 1 persen dari sebagian besar lalu lintas situs web. Orang menggunakan komputer dengan resolusi yang jauh lebih tinggi termasuk 1366-kali-768, 1600-kali-900 dan 5120-kali-2880. Dalam banyak kasus, mendesain untuk layar resolusi 1366-kali-768 berfungsi.
Todya, kebanyakan orang memiliki monitor layar lebar yang besar dan mereka tidak memaksimalkan jendela browser mereka. Jadi, jika Anda memutuskan untuk mendesain halaman dengan lebar tidak lebih dari 1366 piksel, halaman Anda mungkin akan terlihat bagus di sebagian besar jendela browser bahkan pada monitor besar dengan resolusi lebih tinggi.
Lebar Peramban
Salah satu masalah yang sering diabaikan saat menentukan lebar halaman web adalah seberapa besar pelanggan Anda mempertahankan browser mereka. Secara khusus, apakah mereka memaksimalkan browser mereka pada ukuran layar penuh atau mereka membuatnya lebih kecil dari layar penuh?
Setelah Anda memperhitungkan pelanggan yang memaksimalkan atau tidak, pikirkan tentang batas browser. Setiap browser web menggunakan bilah gulir dan batas di sisi yang mengecilkan ruang yang tersedia dari 800 menjadi sekitar 740 piksel atau kurang pada resolusi 800 kali 600 dan sekitar 980 piksel pada jendela yang dimaksimalkan pada 1024 kali 768 resolusi. Ini disebut browser krom dan itu dapat menghilangkan ruang yang dapat digunakan untuk desain halaman Anda.
Halaman Lebar Tetap atau Cair
Lebar numerik sebenarnya bukan satu-satunya hal yang perlu Anda pikirkan saat merancang lebar situs web Anda. Anda juga perlu memutuskan apakah Anda akan memiliki lebar tetap atau lebar cair. Dengan kata lain, apakah Anda akan mengatur lebar ke angka tertentu (tetap) atau persentase (cair)?
Lebar Tetap
Halaman dengan lebar tetap persis seperti suaranya. Lebar tetap pada nomor tertentu dan tidak berubah tidak peduli seberapa besar atau kecil browser itu. Pendekatan ini bisa bagus jika Anda ingin desain Anda terlihat persis sama tidak peduli seberapa lebar atau sempit browser pembaca Anda, tetapi metode ini tidak memperhitungkan pembaca Anda. Orang dengan browser yang lebih sempit dari desain Anda harus menggulir secara horizontal, dan orang dengan browser lebar akan memiliki banyak ruang kosong di layar.
Untuk membuat halaman dengan lebar tetap, gunakan nomor piksel tertentu untuk lebar divisi halaman Anda.
Lebar cair
Halaman dengan lebar cair (terkadang disebut halaman dengan lebar fleksibel) bervariasi lebarnya tergantung pada seberapa lebar jendela browser. Strategi ini menghadirkan desain yang lebih fokus pada pelanggan. Masalah dengan halaman lebar cair adalah sulit dibaca. jika panjang pemindaian satu baris teks lebih panjang dari 10 sampai 12 kata atau lebih pendek dari 4 sampai 5 kata, bisa jadi sulit dibaca. Ini berarti pembaca dengan jendela browser besar atau kecil mengalami masalah.
Untuk membuat halaman dengan lebar fleksibel, gunakan persentase atau ems untuk lebar divisi halaman Anda. Biasakan diri Anda dengan CSS lebar maksimum Properti. Properti ini memungkinkan Anda menyetel lebar dalam persentase, tetapi kemudian membatasinya agar tidak terlalu besar sehingga orang tidak dapat membacanya.
Kueri Media CSS
Solusi terbaik saat ini adalah menggunakan kueri media CSS dan desain responsif untuk membuat halaman yang menyesuaikan dengan lebar browser yang melihatnya. Desain web responsif menggunakan konten yang sama untuk membuat halaman web yang berfungsi baik Anda melihatnya dengan lebar 5120 piksel atau lebar 320 piksel. Halaman dengan ukuran berbeda terlihat berbeda, tetapi berisi konten yang sama. Dengan media query di CSS3, setiap perangkat penerima menjawab query dengan ukurannya, dan style sheet menyesuaikan dengan ukuran tertentu.