Berapa lebar browser yang harus saya gunakan untuk mendesain situs web?

9

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

itu pertanyaan yang sama sekali berbeda dari yang lain. Ini bertanya apa resolusi default dari gambar mockup seluruh situs web harus yang lain meminta grafis dalam situs web itu.

— Xitcod13

2

Tidak yakin mengapa ditutup, ini bukan duplikat utas lainnya. (Saya memilih untuk membuka kembali). Juga mengubah judul menjadi sedikit lebih akurat. - Sebagian besar pengguna sekarang berselancar dengan browser yang diatur ke 1024 x 768 atau lebih besar. Secara umum dapat diterima untuk menggunakan 1000 piksel sebagai lebar maks. Inilah sebabnya mengapa formula seperti grid 960, bootstrap, dan lainnya semakin populer.

— Scott

Maaf teman-teman, saya terpaku pada judul-judul yang hampir identik. Dibuka kembali ...

— Farray

Apakah ini mengasumsikan tata letak lebar tetap untuk situs? Atau apakah itu layak termasuk satu bingkai di mockup untuk "Dan jika pengguna menggunakan resolusi 640x480 karena mereka memiliki penglihatan yang buruk, situs akan terlihat seperti ini ..." dan menunjukkan bagaimana tata letak ulang? (OK, Anda mungkin menggunakan 800x600 sebagai gantinya)

— Andrew Leach

7

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:

320 x 480 perangkat seluler dalam mode potret
480 x 640 tablet kecil atau iPhone dalam mode lansekap
768 x 1024 tablet dalam mode potret
1024 x 768 tablet dalam mode lansekap
1200 + browser desktop
2900 ++ tampilan atau konferensi media besar (Ini bukan keharusan tetapi bagaimana jika seseorang melihat situs Anda pada tampilan yang sangat besar.

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.

— Chris_O
sumber

Tautan kotak Frameless Anda sekarang mati.

— Ruslan

6

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.

— cweiske
sumber

Referensi hebat ke situs 960gs. @Hugh, Anda harus menggunakan template psd mereka untuk membantu Anda.

— skids89

6

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.

— Marc Edwards
sumber

4

Saya kedua sistem grid 960. Sangat fleksibel dan akan bekerja untuk sebagian besar pemirsa Anda.

— Lauren-Clear-Monica-Ipsum

"... Anda dapat dengan mudah pergi ke 1024 piksel lebar, jika Anda perlu .." ini tampaknya tidak ada peringatan penting dalam bahwa beberapa lebar layar akan diambil oleh batas jendela browser.

— e100

+1 untuk desain responsif. Mengingat lebih banyak orang akan melihat web di ponsel daripada komputer pada 2014 saya pikir responsif adalah jalan yang baik untuk setidaknya melihat ke dalam - bahkan jika tidak menggunakannya untuk proyek ini.

— DBUK

Ini jawaban yang sangat ketinggalan jaman. Layar memiliki lebih banyak variasi, terutama di ujung atas tempat TV dan layar 4k digunakan

— Zach Saucier

-3

saat ini ukuran desktop yang difitnah di seluruh dunia adalah 1024x768 ada baiknya membuat situs web dalam ukuran 1003px ...

— Guy Desain Grafis
sumber

3

Kenapa 1003px ....?

— e100

karena ukuran terdampar adalah lebar dunia 1024 lebar dan tinggi 768 dengan kebutuhan 1024px lebar 11px untuk scroll bar dan 5px untuk margin sisi kanan dan kiri

— Graphic Design Guy

2

Saya berharap saya bisa memilih komentar ... :( Tapi hanya FYI @Rizwanabbasi: scrollbar memiliki lebar berbeda pada sistem yang berbeda (perangkat sentuh bahkan tidak memilikinya) dan bahkan pada sistem ini scrollbar dapat diubah (Google melakukan itu misalnya dalam aplikasi dari GMail aktif)

— Robert Koritnik

Harus salah ketik lol

— shash7