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

123

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?

Aximili
sumber
32
Mengapa ini ditutup sebagai "tidak konstruktif"? Sepertinya pertanyaan yang valid untuk ditanyakan, dan khususnya jawaban yang dinilai tertinggi dan diterima memberikan informasi yang berharga.
Damon
20
Saya setuju dengan Damon. Ini adalah pertanyaan yang valid dan banyak orang ingin mendengar jawabannya. Saya pikir SO telah menjadi terlalu bersemangat dalam pertanyaan penutup.
webworm
Stack overflow lebih cocok untuk Tanya Jawab mutlak, yaitu, hal-hal teknis yang memiliki jawaban konkret, bukan pertanyaan di mana pendapat yang berbeda mungkin valid atau di mana jawaban yang benar bergantung sepenuhnya pada kasus penggunaan / proyek ..
Juan
Lebar situs stackoverflow sekitar 1090px.odd!
Necktwi

Jawaban:

221

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:

Lebih lanjut tentang desain responsif:

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

Karl Fast
sumber
8
Anda mungkin ingin melihat: 960.gs situs lengkap tentang desain yang menggunakan 960 piksel dalam kisi. Teknik ini disebut "960 desain kisi".
BerggreenDK
3
Sepertinya SO menggunakan 960 tanpa ada yang cair. FYI
colithium
Situs Anda juga tidak boleh memiliki scroll horizontal pada 800px. Mungkin tidak terlihat yang terbaik, tetapi semuanya harus tetap pas.
palswim
Ada pembaruan tentang ini? Jawaban ini sudah berumur beberapa tahun sekarang.
Crashalot
29

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.

paxdiablo
sumber
14
Tunggu, 1024x768 mungkin ukuran seluruh layar, tetapi ini sering kali dikurangi dengan bilah sistem, hiasan jendela, bilah menu, bilah alat, bilah tab, dan kemungkinan bilah gulir dan tab navigasi.
Svante
7
Saran yang buruk. Siapa bilang HTML bukan untuk tata letak? Tata letak liquid sangat mirip dengan 90-an, dengan perbedaan resolusinya relatif kecil. Cobalah membaca beberapa teks dengan font 10pt pada layar 2560x1600 tanpa batasan lebar yang ditentukan. Anda akan segera membenci tata letak cair itu.
Wouter van Nifterick
1
@Pax: Maksud saya adalah sangat sulit untuk menghasilkan tata letak cair yang berfungsi baik pada resolusi yang sangat rendah dan sangat tinggi. Saya tidak pernah menemukan situs web yang berfungsi baik pada PDA saya dan pada monitor resolusi tinggi, dengan html yang sama. Yang terbaik ditargetkan secara khusus.
Wouter van Nifterick
1
setuju, tata letak cair bekerja lebih baik untuk semua orang. Layar besar yang terlalu besar bukanlah masalah karena pengguna ini dapat mengukur browser mereka ke dimensi apa pun yang sesuai untuk mereka.
nailitdown
9
Untuk tata letak cair, Anda selalu dapat mengatur lebar-maksimal sebagai batas atas bagi mereka yang menjalankan peramban yang dimaksimalkan pada layar besar.
Richard
8

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 ...

Mark Brittingham
sumber
Saya akan memperluas pernyataan tersebut untuk mungkin mengatakan memaksa pengguliran multi-arah adalah kemungkinan pelanggaran. Hori-scroll bisa menjadi bagus jika dilakukan dengan benar. deanoakley.com thehorizontalway.com/html/css/urban-outfitters
typeoneerror
2
Yang kami butuhkan adalah dua tombol baru pada keyboard, "Page Left" dan "Page Right".
paxdiablo
@TypeOneError, tidak ada yang terasa enak untuk dijelajahi, itu tidak wajar.
UnkwnTech
@TypeOneError, situs portofolio menggunakannya untuk memberikan efek yang baik hanya karena "kerapian" dan seberapa bersih desainnya. Namun, saya setuju dengan Unkwntech bahwa rasanya tidak benar. Belum lagi fakta bahwa sebagian besar pengguna akan memiliki roda gulir vertikal dan bukan horizontal. Itu saja membuat pengguliran horizontal menjadi ide yang buruk.
Eric
@Eric, roda gulir saya menggulir secara horizontal di dua situs yang ditautkan. Saya akan mengatakan untuk hal-hal seperti portofolio di mana Anda ingin menarik perhatian dan menunjukkan gaya berseni tidak apa-apa untuk tampil beda. Tetapi secara umum akan membingungkan bagi pengguna
monkeypushbutton
4

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.

Adam Dziendziel
sumber
Paling baik untuk diingat bahwa statistik w3schools ditujukan untuk orang yang mengunjungi situs mereka. Ini sebagian besar adalah orang yang mengembangkan halaman web, yang bukan merupakan penampang populasi yang tepat. Melihat statistik browser mereka, firefox adalah 44% sedangkan IE 46%. Mungkin bukan contoh yang baik untuk mengukur web umum.
Kibbee
3

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

Simon_Weaver
sumber
Bisakah Anda menambahkan tautan ke ceramah yang Anda sebutkan.
Sri Kadimisetty
3

Ini alat yang luar biasa: Ukuran Browser Google Labs

Plynx
sumber
1
Link sudah mati. Sekarang bagian dari Google Analytics, hanya dapat diakses dengan login, di bawah Audiens> Teknologi> Browser & OS> pilih "Resolusi Layar".
Dave Liepmann
2

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.

Kibbee
sumber
2

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.


sumber
Bravo, upvoting karena Anda setuju dengan saya :-) meskipun dalam dua pemikiran tentang itu karena Anda mungkin mendapatkan lebih banyak suara daripada saya :-(. Oh well, c'est la vie.
paxdiablo
1 untuk tampaknya mengetik respons ini dengan keyboard iphone. ;) Situs web saya tampak hebat di 1024 dengan safari iphone, fwiw.
typeoneerror
Dengan iPhone saya pikir itu akan tergantung pada bagaimana Anda memegangnya, vertikal atau horizontal karena jelas dimensinya akan berbeda
UnkwnTech
1
@TypeOneError tidak hanya saya mengetiknya di iPhone, saya juga berjalan kembali dari pub ;-)
@Pax tidak, ternyata saya tidak akan. ;-)
1

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

Nate879
sumber
1

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).

Greg Beech
sumber
Jika Anda tidak memilih, silakan tambahkan komentar mengapa.
Greg Beech
1

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.

Kucing hitam
sumber
1

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

typeoneerror
sumber
1

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

sbeam
sumber
1

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.

Sneakyness
sumber
Untuk menambah ini, saya baru saja membeli layar lcd 1080p (1920x1080) layar lebar 23 inci seharga $ 150 pada Jumat hitam ini.
Sneakyness
2
Saya tidak dapat melihat betapa pentingnya layar pengembang untuk pertanyaan itu? pengunjung situs web yang penting menurut saya? Karena itu adalah rekomendasi yang baik untuk mendapatkan monitor yang lebih baik atau lebih dari satu monitor.
BerggreenDK
1

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.

Jesse
sumber
1

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.

mike
sumber
1

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!

djdaniel150
sumber
0

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.

Wouter van Nifterick
sumber
Saya sangat setuju dengan kedua poin tersebut. Saya menggunakan lebar sekitar 960 (jadi untuk layar 1024x768). Desainer web juga harus memastikan bahwa panjang baris tidak terlalu panjang, jika tidak maka akan sangat sulit untuk dibaca.
Philip Morton
0

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.

EJ Brennan
sumber
0

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.

PartialOrder
sumber
0

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.

UnkwnTech
sumber
0

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.

XenF
sumber
0

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?


sumber