Resolusi situs web yang disarankan (lebar dan tinggi)? [Tutup]

Apakah ada standar resolusi situs web umum?

Kami menargetkan monitor yang lebih baru, mungkin setidaknya dengan lebar 1280px, tetapi tingginya dapat bervariasi, dan setiap browser mungkin memiliki ketinggian toolbar yang berbeda juga.

Apakah ada standar untuk ini?

Saran hari ini adalah:

Optimalkan untuk 1024x768 . Untuk sebagian besar situs, ini akan mencakup sebagian besar pengunjung. Kebanyakan log menunjukkan bahwa 92-99% dari kunjungan Anda akan lebih dari 1.024 lebarnya. Sementara 1280 semakin umum, masih ada banyak di 1024 dan beberapa di bawahnya. Optimalkan untuk ini tetapi jangan abaikan yang lain.

1024 = ~ 960 . Penghitungan untuk scrollbar, tepi jendela, dll berarti lebar sebenarnya dari layar 1024x768 adalah sekitar 960 piksel . Beberapa alat dibuat berdasarkan ukuran yang sedikit lebih kecil, sekitar 940 . Ini adalah lebar kontainer default di bootstrap twitter .

Jangan mendesain untuk satu ukuran . Ukuran jendela bervariasi. Jangan berasumsi ukuran layar sama dengan ukuran windows. Rancang untuk minimum yang wajar, tetapi anggap itu akan menyesuaikan.

Gunakan desain responsif dan tata letak cair . Gunakan tata letak yang akan menyesuaikan saat jendela diubah ukurannya. Orang sering melakukan ini, terutama pada monitor besar. Ini hanyalah praktik CSS yang baik. Ada beberapa kerangka kerja front-end yang mendukung ini.

Perlakukan seluler sebagai warga negara kelas satu . Anda mendapatkan lebih banyak lalu lintas dari perangkat seluler setiap saat. Ini memperkenalkan lebih banyak ukuran layar. Anda masih dapat mengoptimalkan 960, tetapi menggunakan teknik desain web responsif berarti halaman Anda akan menyesuaikan berdasarkan ukuran layar.

Log info tampilan browser . Anda bisa mendapatkan angka sebenarnya tentang ini. Saya menemukan beberapa nomor di sini dan di sini dan di sini . Anda juga dapat memasang situs Anda untuk mengumpulkan data yang sama.

Pengguna akan menggulir jadi jangan terlalu khawatir tentang ketinggian . Argumen lama adalah bahwa pengguna tidak akan menggulir dan apa pun yang penting harus "di paro atas". Ini terbalik beberapa tahun yang lalu. Pengguna banyak menggulir .

Lebih lanjut tentang resolusi layar:

• Resolusi Layar dan Tata Letak Halaman
• Resolusi Layar Terbaik untuk Mendesain Situs Web
• Desain untuk ukuran browser - bukan ukuran layar

Lebih lanjut tentang desain responsif:

• Desain Web Responsif (2010, 25 Mei), Ethan Marcotte, A List Apart.
• Desain Web Responsif di Wikipedia
• Pola tata letak multi-perangkat (2012, 14 Maret) Luke Wroblewski. Katalog pola paling populer untuk tata letak layar multi-perangkat yang dapat disesuaikan.

Alat dan kerangka kerja front-end untuk desain responsif dan tata letak cair:

• Twitter Bootstrap
• Zurb Foundation
• 50 alat luar biasa untuk desain web responsif (2012, 24 April) Denise Jacobs & Peter Gasston

Ide yang buruk, saya yakin. Inti dari pemisahan konten dari tata letak adalah agar halaman web Anda dapat ditampilkan di browser apa pun.

Menempatkan batasan buatan seperti ukuran layar minimum akan membatasi pasar Anda.

Karena itu, saya yakin setiap desktop harus dapat menampilkan 1024x768. Tapi bagaimana dengan browser yang berjalan di iPhone atau perangkat dengan tantangan layar lainnya, atau bahkan yang tidak menggunakan seluruh desktop mereka untuk browser?

Sebagai jawaban atas pertanyaan spesifik Anda, tidak, saya tidak percaya ada standar untuk area tampilan minimum atau umum di browser.

Memaksa pengguna Anda untuk menggulir secara horizontal adalah pelanggaran UI yang serius. Kecuali Anda secara khusus membangun situs web untuk populasi dengan ukuran layar yang diketahui, Anda paling aman memastikan bahwa desain Anda berfungsi dengan layar sekecil 800 piksel (sekitar 8% dari populasi penjelajahan web jika memori berfungsi dengan benar). Adalah bijaksana untuk membuatnya beradaptasi dengan baik dengan layar yang lebih besar tetapi tidak dengan biaya orang-orang yang masih berselancar pada 800x600.

Berikut hal lain yang perlu dipertimbangkan juga: tidak semua orang menjalankan browser mereka pada layar penuh (saya tidak). Jadi gagasan bahwa jika OK untuk mendesain untuk "ukuran layar" tertentu (dan besar) benar-benar tidak berfungsi karena sejumlah alasan.

Pembaruan pada 15/12/2010: Ketika saya pertama kali menjawab pertanyaan ini, 800 piksel adalah jawaban yang sesuai. Namun, pada titik ini, saya akan merekomendasikan lebar 1024 piksel (atau 960 seperti yang ditunjukkan orang lain). Teknologi berbaris di ...

Berikut adalah statistik tampilan browser tahun 2008: http://www.w3schools.com/browsers/browsers_display.asp

Sekitar 50% pengguna masih menggunakan 1024x768. Jika Anda ingin situs Anda terlihat bagus dalam resolusi tinggi, gunakan tata letak yang fleksibel.

sebenarnya ada standar industri untuk lebaran (setidaknya menurut yahoo). Lebar yang didukung adalah 750, 950, 974, 100%

Ada keuntungan dari lebar ini untuk kisi yang telah ditentukan sebelumnya (tata letak kolom) yang berfungsi baik dengan dimensi standar untuk iklan jika Anda menyertakannya.

Pembicaraan yang menarik juga layak untuk ditonton.

lihat YUI Base

Ini alat yang luar biasa: Ukuran Browser Google Labs

Saya akan mengatakan bahwa Anda seharusnya hanya mengharapkan pengguna memiliki monitor dengan resolusi 800x600. Pemerintah Kanada memiliki standar yang mencantumkan ini sebagai salah satu persyaratan. Meskipun itu mungkin tampak rendah bagi seseorang dengan monitor layar lebar yang mewah, ingatlah bahwa tidak semua orang memiliki monitor yang bagus. Saya masih tahu banyak orang yang menjalankan pada 1024x768. Dan sama sekali tidak aneh untuk bertemu dengan seseorang yang menjalankan 800x600, terutama di kafe web murah saat bepergian. Juga, senang harus menjadikan jendela browser Anda layar penuh jika Anda tidak mau. Anda dapat membuat situs lebih luas di monitor yang lebih lebar, tetapi jangan membuat pengguna menggulir secara horizontal. Pernah. Keuntungan lain dari mendukung resolusi yang lebih rendah adalah bahwa situs Anda akan bekerja pada ponsel dan Nintendo Wii jauh lebih mudah.

Sebuah catatan pada Anda setidaknya 1280 lebar, saya harus mengatakan itu terlalu berlebihan. Sebagian besar monitor non layar lebar 17 dan bahkan 19 inci saya hanya mendukung resolusi maksimum 1280x1024. Dan laptop layar lebar 14 inci yang saya ketikkan saat ini hanya berukuran 1280 piksel. Saya akan mengatakan bahwa resolusi minimum terbesar yang harus Anda perjuangkan adalah 1024x768, tetapi 800x600 akan ideal.

Semua jawaban sejauh ini berbicara tentang monitor desktop, tetapi saya menggunakan stack overflow di iPhone saya dan saya rasa Anda tidak harus mengecualikan platform seluler apa pun dengan menargetkan 1024 atau 1280 piksel horizontal. Markup halaman Anda sehingga browser tahu apa artinya semua dan membuatnya dapat digunakan akan datang secara gratis, bahkan pada pembaca layar dan perangkat lain yang belum Anda pikirkan.

Sebaiknya tidak menargetkan resolusi tertentu, tetapi beradaptasi dengan mudah ke berbagai resolusi.

Panduan yang kami gunakan, yang tampaknya cukup banyak digunakan dan didukung oleh angka-angka yang kami dapatkan dari Google Analytics, adalah merancang situs agar berfungsi pada layar dengan lebar 1024 piksel dan tinggi 768 piksel (1024x768 dan 1280x800 adalah resolusi paling umum yang kami lihat, mencakup setidaknya 70% dari semua lalu lintas).

Inilah sebabnya mengapa Anda melihat banyak situs (termasuk yang satu ini) yang menggunakan kolom tengah dengan lebar sekitar 1000 piksel dan dengan konten terpenting berada di 500-600 piksel teratas sehingga berada di paro atas saat dilihat di layar dengan ukuran ini.

Menggunakan tata letak lebar 1000 piksel bekerja cukup baik pada ukuran layar hingga sekitar 1680 piksel (biasanya setinggi yang Anda lihat di laptop, kecuali yang besar 17 ") tetapi mulai terlihat agak konyol pada 1920 piksel yang lebar (komputer kelas atas, biasanya workstation), namun resolusi yang sangat tinggi ini tidak memperhitungkan sebagian besar lalu lintas di internet umum - 2% atau kurang (sebaliknya, jika Anda memiliki audiens spesialis seperti situs ini , angka dengan resolusi tinggi mungkin sedikit lebih tinggi).

Meskipun lebar terbaik mungkin pada 1024 Anda harus menyesuaikan tinggi untuk akun untuk berbagai pengaturan browser (toolbar navigasi, toolbar bookmark, toolbar status, dll) dan akun untuk pengaturan taskbar. Ini akan dengan cepat menurunkan 768 menjadi sekitar 550.

Berapa pun ukuran browser target Anda, pastikan untuk menyertakan ruang untuk toolbar browser, status bar, dan scroll bar seperti di atas. Internet Explorer (IME) sering kali memiliki lebih dari 100 piksel ruang vertikal di bilah alat dan bilah status. Biasanya, jika saya memotret untuk 1024 x 768, saya akan mencoba membuat desain dengan lebar sekitar 960 - 980px dan tinggi 600px agar aman. Dengan cara itu Anda dapat mengakomodasi pengguliran jika perlu dan ruang putih yang bagus (jika desain memerlukannya). Saya sangat merekomendasikan grid YUI untuk contoh di mana Anda perlu menargetkan ukuran tertentu:

YUI Grid

Saya mendapat banyak pertanyaan dari desainer tentang tidak hanya lebar tetapi juga tinggi apa yang digunakan untuk 'menjaga semuanya tetap di atas lipatan'. Ini satu jawaban yang saya berikan baru-baru ini -

Untuk lebar, saya bukan seorang desainer tetapi saya telah membaca bahwa lebar 960px adalah cara yang harus dilakukan hari ini, karena cocok untuk dibagi menjadi kolom yang terlihat bagus, dan cocok dengan baik di sebagian besar tampilan. Jika Anda bisa, rancang tata letak cair - tetapi ini tidak selalu praktis tergantung pada perancang Anda, keterampilan CSS Anda, gambar dan jumlah teks.

(Anda selalu ingin ada 65-80 karakter per baris, dengan tinggi baris sekitar 1,15). Ini adalah lebar kolom yang optimal untuk teks, dan telah terbukti jauh lebih cepat dan menyenangkan untuk dibaca daripada kolom yang sangat lebar atau sempit)

Sejauh 'paro atas', saya hanya perlu berhati-hati agar tidak menggunakan konsep seperti itu di web. Pengguliran horizontal dapat dan harus dihindari, tetapi pengguliran vertikal adalah sesuatu yang tidak dapat Anda hindari 100%. Yang dapat saya katakan kepada Anda adalah bahwa pada tampilan 1024x768 (setidaknya 95% pengguna memilikinya atau lebih tinggi), Anda akan baik-baik saja dengan blok tinggi tetap 600px. Tetapi ada banyak format tampilan yang berbeda di luar sana, browser chrome dapat memakan banyak ruang, dan tidak semua orang memaksimalkan jendela browser.

berikut adalah beberapa situs lain yang mengatakan hal yang kurang lebih sama - tetapi merencanakan untuk mendapatkan segalanya 'paruh atas' untuk semua orang itu sulit karena Anda mungkin hanya memiliki 400 piksel atau lebih, menurut statistik aktual.

Dan akhirnya sebuah artikel panjang yang bagus yang menjelaskan dengan sangat rinci (saya akan memposting lebih banyak tetapi SO mengatakan saya terlalu pemula) - Bagaimana mendesain untuk Ukuran Browser - baekdal.com

Saya pribadi selalu menempel pada lebar maksimal 1000px, di tengah tengah halaman (melalui margin kiri / kanan: otomatis).

Jika Anda menjalankan pada sesuatu yang kurang dari 1024x768, sekarang saatnya untuk meningkatkan. Sungguh. Ini hampir tahun 2010. Anda dapat membeli monitor lcd nampan murah dengan resolusi asli 1280x1024.

Saya sarankan Anda melihat media-queries. Ini adalah tambahan baru yang berguna untuk CSS yang sangat masuk akal, Anda akan bertanya-tanya mengapa ini tidak diterapkan sebelumnya. Pada dasarnya ini memungkinkan Anda untuk menargetkan atribut browser (seperti max dan min-widths) secara langsung melalui CSS dan mencabangkan kode tata letak Anda dari sana. Mirip dengan membuat lembar gaya cetak, Anda dapat membuat tata letak desktop dan seluler Anda secara paralel dalam file yang sama, yang membantu pengembangan.

Layout yang fleksibel atau cair memang sedikit mengubah desain, misalnya jika Anda menggunakan gambar latar belakang yang harus sesuai dengan gambar latar belakang tubuh.

Saya lebih suka membuat tata letak css yang berbeda untuk situs dan menerapkannya tergantung pada resolusi pengguna, atau jika itu tidak memungkinkan (belum menggali lebih dalam), jadikan itu opsi yang dapat dipilih.

Baiklah, saya melihat banyak informasi yang salah di sini. Sebagai permulaan, membuat halaman web menggunakan resolusi tertentu, katakanlah 800x600 misalnya, membuat halaman itu dirender dengan benar hanya menggunakan resolusi itu! Ketika halaman yang sama ditampilkan di laptop orang lain, atau monitor PC rumah, halaman tersebut akan ditampilkan menggunakan resolusi layar saat ini, BUKAN resolusi yang Anda gunakan saat mendesain halaman. Jangan membuat halaman web untuk satu resolusi tertentu! Ada terlalu banyak rasio aspek dan resolusi layar yang berbeda untuk mengharapkan skenario "satu ukuran cocok untuk semua", yang tidak ada pada desain web. Berikut solusinya: Gunakan CSS3 Media Queries untuk membuat kode resolusi yang dapat disesuaikan. Berikut contohnya:

@media screen and (max-width: 800px) {
styles
}
@media screen and (max-width: 1024px) {
styles
}
@media screen and (max-width: 1280px) {
styles
}

Lihat, yang baru saja kita lakukan adalah menetapkan 3 set gaya yang dirender pada resolusi berbeda. Dalam kasus contoh kami, jika resolusi layar lebih besar dari 800px, CSS untuk 1024 akan dieksekusi. Demikian juga, jika layar yang menampilkan konten adalah 1224 piksel, maka 1280 akan dijalankan karena 1224 lebih besar dari 1024. Situs yang saya kerjakan sekarang berfungsi pada semua resolusi 800x600 hingga 1920x1080. Hal lain yang perlu diingat adalah tidak semua monitor dengan resolusi yang sama memiliki ukuran layar yang sama. Anda dapat meletakkan 15,4 laptop berdampingan, meskipun keduanya terlihat sama, keduanya dapat memiliki resolusi yang sangat berbeda, karena tidak semua piksel berukuran sama pada layar LCD yang berbeda. Jadi, gunakan kueri media, dan mulailah membuat situs web Anda dengan layar laptop dengan resolusi tinggi, khususnya 1280+. Juga, buat setiap kueri media menggunakan resolusi berbeda di laptop Anda. Anda dapat menggunakan pengaturan resolusi di Windows untuk menyesuaikan 800x600 dan membuat kueri media pada resolusi tersebut, lalu beralih ke 1024x768 dan membuat kueri media lain pada resolusi tersebut. Saya bisa terus dan terus, tapi saya pikir kalian harus mengerti maksudnya.

PEMBARUAN: Berikut tautan untuk menggunakan kueri media yang akan membantu menjelaskan lebih lanjut, Desain Web Inovatif untuk Perangkat Seluler dengan Kueri Media

Tutorial itu akan menunjukkan cara mendesain untuk semua perangkat. Ada juga tutorial khusus untuk Media Queries. Saya mengembangkan seluruh situs untuk dirender di semua perangkat, semua layar, dan semua resolusi tanpa menggunakan subdomain, dan hanya CSS! Saya masih mengerjakan dukungan untuk tablet dan ponsel pintar. Situs ini tampil sempurna di laptop apa pun, atau TV LCD 50 inci Anda, dan banyak halaman berfungsi dengan sempurna di semua perangkat seluler. Jika Anda meletakkan semua kode Anda di halaman, maka halaman Anda akan memuat kilat dengan cepat! Selain itu, pastikan untuk memperhatikan pembahasan di artikel itu tentang CSS "background-size: cover;" atau properti "berisi", mereka akan membuat grafik latar belakang Anda mengalir dan dapat ditampilkan dengan sempurna di semua resolusi.

Ikuti tutorial situs dan Anda dapat membuat satu halaman web yang menampilkan apa saja!

Cobalah untuk menargetkan 1024 sebagai lebar minimum. Coba tampilannya pada 800, tapi jangan terlalu repot membuatnya berhasil. Pada 800x600 hampir tidak ada situs web utama yang akan berfungsi, jadi orang yang bekerja pada resolusi itu akan selalu mengalami masalah.

Jika Anda ingin menggunakan tata letak cair, pastikan teks tidak terlalu lebar , karena jika garis terlalu panjang, mereka menjadi sulit untuk dibaca. Itulah alasan utama mengapa sebagian besar situs web memiliki lebar tetap.

Saya menargetkan monitor 1024 piksel (tetapi tidak menggunakan 100% dari ruang itu). Saya sudah menyerah pada mereka yang berukuran 800x600. Saya lebih suka menghukum beberapa orang dengan perangkat keras usang dengan membuat mereka menggulir jika perlu, dibandingkan menghukum semua orang dengan peralatan baru dengan membuang-buang ruang.

Saya kira itu tergantung pada audiens Anda, dan sifat aplikasi Anda.

Pada akhirnya, ini bukan masalah standar atau praktik terbaik untuk markup, tetapi lebih kepada mengetahui audiens Anda dan memastikan situs web Anda melakukan apa yang Anda inginkan.

Lebih penting untuk mempertimbangkan lebar area pandang browser daripada resolusi layar - Anda tidak dapat berasumsi bahwa setiap piksel pada tampilan akan dialokasikan ke browser (dan meskipun demikian, Anda harus mengurangi chrome browser). Jika Anda memiliki akses ke analitik yang melaporkan lebar browser ( nb lebar browser, bukan resolusi layar), perhatikan baik-baik.

Sangat menyenangkan mencoba mengakomodasi jangkauan area pandang seluas mungkin tetapi ada beberapa batasan. Beberapa tantangan dapat ditangani dengan jenis media CSS , beberapa tidak. Beberapa dapat ditangani dengan tata letak yang lancar. Namun tata letak fluid tidak dapat berfungsi di semua situasi, tergantung pada jenis informasi yang akan ditampilkan, panjang garis, kenyamanan membaca, dll. Beberapa tata letak fluid tidak berfungsi dalam tampilan lebar. Sebagian besar pecah jika berukuran di bawah lebar tertentu, dll.

Saya pribadi ingin mendesain untuk area pandang ~ 960 piksel dan lebih tinggi, Anda tidak selalu dapat melakukannya. Jadi dalam beberapa kasus, masih paling aman mendesain untuk area pandang <= 760 piksel atau lebih (layar lebar 800 piksel, dimaksimalkan) - meskipun pada akhirnya kami dapat membuang batasan ini untuk selamanya - setidaknya untuk desktop - sangat cepat mendekat.

Di mana konversi menjadi masalah - dan Anda memiliki tata letak lebar tetap - sebaiknya Anda memiliki alasan yang sangat bagus untuk meletakkan apa pun yang perlu diklik pengguna agar mesin kasir dapat "ka-ching" di mana pun di sebelah timur tanggal 760 piksel.

Ditto untuk navigasi utama.

Terakhir, uji tata letak Anda dalam segala hal yang bisa Anda dapatkan. Besar. Kecil. Desktop. Genggam. Pekerjaan. Tidak ada pengganti.

Saya baru saja mengambil contoh resolusi layar dari semua situs klien yang saya akses, ini mencakup lebih dari 20 situs di lebih dari 8 industri, berikut hasilnya:
teks alt http://unkwndesign.com/so/percentScreenResolutions.png
Berdasarkan ini, saya akan mengatakan memastikan itu terlihat bagus pada 1024x768 karena itu adalah mayoritas di sini dengan tembakan panjang. Juga jangan khawatir tentang tingginya, namun cobalah untuk menghindari membuat kebanyakan halaman lebih dari 1-2 halaman tercetak pada ukuran font default Anda, kebanyakan orang tidak akan membaca halaman yang panjang, dan jika pengguna menginstal toolbar yang membutuhkan ruang vertikal, preferensi pribadi saya adalah bahwa itu masalah mereka, tetapi menurut saya itu bukan masalah besar.

* Perhatikan persentase menambahkan hingga 100,05% karena pembulatan.

Perlu diingat bahwa semakin tinggi resolusinya, semakin kecil kemungkinan browser internet akan dimaksimalkan.

Dan beberapa browser juga memiliki bilah lateral.

Itu tergantung pada apa yang ingin Anda render, tetapi saya akan menggunakan tata letak lebar variabel yang tidak merusak sekitar 800-900 lebar.

Tinggi badan sebenarnya tidak menjadi masalah.

sbeam mengatakan bahwa 'Anda selalu ingin ada 65-80 karakter per baris'. Itu tidak benar. Wikipedia, misalnya, mungkin memiliki 180 karakter per baris. Atau apakah itu dimaksudkan untuk menjadi situs web tertentu?