Saya sedang mengerjakan bagian grafis dari situs web dan diminta untuk merancang situs web di Photoshop. Saya bertanya-tanya apa itu dimensi rata-rata dan lebar browser untuk situs web sehingga saya dapat membuat mockup saya dengan dimensi tersebut.
website-design
Hugh G. Wreckshin
sumber
sumber
Jawaban:
Di zaman modern desain web, lebar browser tidak relevan. Ada begitu banyak perangkat yang berbeda di luar sana sehingga Anda PERLU untuk membuat desain Anda responsif , di mana mereka bekerja untuk ukuran layar apa pun.
Untuk melakukan ini, Anda harus menggunakan semacam sistem grid lebar fluida dan menargetkan perangkat khusus menggunakan kueri media .
Kueri media adalah sekumpulan aturan CSS yang berbeda untuk ukuran port tampilan yang berbeda. Kueri media juga merespons perubahan dinamis lebar peramban Anda. Ketika Anda membuat peramban Anda lebih kecil, halaman merespons dengan menjatuhkan float atau beralih dari 12 kolom ke 1 atau 2. Responsif juga bereaksi terhadap pengguna pada perangkat dan tabel seluler ketika mereka mengubah orientasi dari potret ke lanskap atau sebaliknya.
Ukuran yang ditargetkan:
Untuk melihat ini dalam aksi, lihat kisi Frameless . Ini sebenarnya bukan fluida tetapi saat Anda menyesuaikan browser Anda ia pergi dari 14 kolom sampai 1
Twitter Bootstrap , kerangka kerja CSS, HTML dan JS sederhana yang dibangun dengan komponen antarmuka pengguna yang populer, juga merupakan contoh yang baik dari praktik desain responsif modern.
Hal lain yang mungkin juga ingin Anda perhitungkan adalah kepadatan piksel . IPhone 4 dan iPad baru memiliki layar retina yang 2x setajam layar normal. Ini membuat praktik penyajian sprite dan gambar alih-alih teks hampir menjadi usang. Pada gambar iPad dengan teks terlihat mengerikan.
Jadi jawaban untuk pertanyaannya adalah tidak ada lebar peramban standar yang harus Anda desain. Anda harus membuat keputusan desain berdasarkan pengguna Anda dan membuatnya di tempat yang paling mudah diakses orang.
sumber
Banyak templat tata letak menggunakan lebar 960px karena sesuai dengan resolusi layar lebar 1024px yang umum, memberikan ruang untuk bilah gulir dan mudah dibagi dengan 2, 3, 4, 5, 6, 8, 10, 12 dan 16 - ideal untuk kolomisasi tata letak.
Lihat http://960.gs untuk contoh.
Kerangka kerja lain seperti bootstrap menggunakan 940px untuk memperhitungkan beberapa margin antara kolom.
sumber
Jika Anda menargetkan browser desktop, maka Anda dapat dengan mudah membuka lebar sekitar 1000 piksel, jika perlu.
Resolusi layar StatCounter
Mengapa sekitar 1000 piksel ketika tampilan paling tipikal adalah 1024 piksel atau lebih besar? Karena Anda harus mengizinkan bilah gulir dan krom jendela.
Jika Anda secara khusus menargetkan peramban seluler, maka lebar 320 piksel mungkin merupakan pilihan yang baik, meskipun peramban seluler biasanya skala konten agar sesuai dengan lebar tampilan, sehingga lebar 950 atau 960 piksel bisa menjadi besar. Harap perhatikan bahwa 320 piksel CSS / HTML sama dengan 640 piksel perangkat pada perangkat DPI tinggi seperti iPhone.
Resolusi layar seluler StatCounter
Target pasar Anda juga dapat mengubah banyak hal. Jika Anda menargetkan audiens yang mengerti teknologi, Anda dapat mengharapkan hal-hal yang condong ke perangkat yang lebih modern. Jika Anda membangun situs pemerintah, Anda harus melayani untuk rentang yang lebih luas.
Juga, bagaimana Anda membangun situs? Jika Anda menggunakan sistem kisi, seperti Blueprint CSS atau 960 Grid System, maka itu dapat menentukan ukurannya juga (sebagian besar sistem kisi juga dapat diubah ke ukuran lain).
Anda juga mungkin ingin melihat ke dalam desain responsif jika Anda mencoba bekerja dengan baik di ponsel maupun desktop.
sumber
saat ini ukuran desktop yang difitnah di seluruh dunia adalah 1024x768 ada baiknya membuat situs web dalam ukuran 1003px ...
sumber