Hal pertama yang paling dipertimbangkan oleh para desainer ketika membangun halaman web mereka adalah resolusi untuk desain. Apa ini sebenarnya adalah menentukan seberapa lebar desain Anda seharusnya. Tidak ada hal seperti itu lagi sebagai lebar situs web standar.
Mengapa Pertimbangkan Resolusi
Pada tahun 1995, monitor resolusi standar 640x480 adalah monitor terbesar dan terbaik yang tersedia. Ini berarti bahwa perancang web fokus untuk membuat halaman yang tampak bagus di browser web dimaksimalkan pada monitor 12 inci menjadi 14 inci pada resolusi tersebut.
Hari-hari ini, resolusi 640x480 membuat kurang dari 1 persen dari sebagian besar lalu lintas situs web. Orang menggunakan komputer dengan resolusi yang jauh lebih tinggi termasuk 1366x768, 1600x900 dan 5120x2880. Dalam banyak kasus, merancang untuk layar resolusi 1366x768 bekerja.
Kami berada di titik dalam sejarah desain web di mana kami tidak perlu khawatir tentang resolusi. 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 yang lebih tinggi.
Lebar Peramban
Sebelum Anda berpikir "oke, saya akan membuat halaman saya lebar 1366 piksel," ada lebih banyak cerita ini. Satu masalah yang sering diabaikan ketika memutuskan lebar halaman web adalah seberapa besar pelanggan Anda menyimpan browser mereka. Secara khusus, apakah mereka memaksimalkan browser mereka pada ukuran layar penuh atau apakah mereka membuatnya lebih kecil dari layar penuh?
Dalam satu survei informal rekan kerja yang semuanya menggunakan laptop resolusi 1024x768 standar perusahaan, dua menyimpan semua aplikasi mereka dimaksimalkan. Sisanya memiliki jendela berukuran berbeda yang terbuka karena berbagai alasan. Ini menggambarkan bahwa jika Anda mendesain intranet perusahaan ini dengan lebar 1024 piksel, 85 persen pengguna harus menggulir secara horizontal untuk melihat seluruh laman.
Setelah akun Anda untuk pelanggan yang memaksimalkan atau tidak, pikirkan tentang perbatasan browser. Setiap peramban web memiliki bilah gulir dan batas di sisi yang mengecilkan ruang yang tersedia dari 800 menjadi sekitar 740 piksel atau kurang pada resolusi 800x600 dan sekitar 980 piksel pada jendela yang dimaksimalkan pada resolusi 1024x768. Ini disebut browser "chrome" dan dapat mengambil dari ruang yang dapat digunakan untuk desain halaman Anda.
Halaman Lebar Tetap atau Cair
Lebar numerik yang sebenarnya bukan satu-satunya hal yang perlu Anda pikirkan ketika merancang lebar situs web Anda. Anda juga perlu memutuskan apakah Anda akan memiliki lebar tetap atau lebar cairan . Dengan kata lain, apakah Anda akan mengatur lebar ke nomor tertentu (tetap) atau persentase (cair)?
Fixed Width
Halaman lebar tetap persis seperti yang mereka dengar. Lebar ditetapkan pada nomor tertentu dan tidak berubah tidak peduli seberapa besar atau kecil peramban. Ini bisa menjadi baik jika Anda perlu desain Anda untuk terlihat persis sama tidak peduli seberapa lebar atau sempit browser pembaca Anda, tetapi metode ini tidak memperhitungkan pembaca Anda. Orang-orang dengan browser lebih sempit dari desain Anda harus menggulir secara horizontal, dan orang-orang dengan browser yang luas akan memiliki sejumlah besar ruang kosong di layar.
Untuk membuat halaman lebar tetap, cukup gunakan nomor piksel tertentu untuk lebar divisi halaman Anda.
Lebar cairan
Halaman lebar cair (kadang-kadang disebut halaman lebar fleksibel) bervariasi dalam lebar tergantung pada seberapa lebar jendela browser. Ini memungkinkan Anda untuk mendesain halaman yang lebih fokus pada pelanggan Anda. Masalah dengan halaman lebar cair adalah bahwa mereka bisa sulit dibaca. Jika panjang scan suatu garis teks lebih panjang dari 10 hingga 12 kata atau lebih pendek dari 4 hingga 5 kata, itu bisa sulit dibaca. Ini berarti pembaca dengan jendela browser besar atau kecil mengalami masalah.
Untuk membuat halaman lebar yang fleksibel, cukup gunakan persentase atau ems untuk lebar divisi halaman Anda. Anda juga harus membiasakan diri dengan properti lebar-lebar CSS. Properti ini memungkinkan Anda menetapkan lebar dalam persentase, tetapi kemudian membatasi sehingga tidak terlalu besar sehingga orang tidak dapat membacanya.
Dan Pemenangnya Adalah: CSS Media Queries
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 jika Anda melihatnya di lebar 5120 piksel atau lebar 320 piksel. Halaman berukuran berbeda terlihat berbeda, tetapi berisi konten yang sama. Dengan kueri media di CSS3, setiap perangkat penerima menjawab pertanyaan dengan ukurannya, dan style sheet menyesuaikan dengan ukuran tertentu.