Berapa lebar dan tinggi 'paling umum' yang dirancang situs web untuk hari ini?

9

Saya sedang mengerjakan proyek grup dan mencoba meminta kolega saya untuk mengirimkan gambar mengenai visi mereka untuk aplikasi online; aplikasi ini akan dilihat melalui PC. Meskipun saya menduga tidak ada standar industri, saya yakin bahwa harus ada pendekatan umum untuk situs dengan tata letak lebar tetap. Saya perlu tahu perasaan proporsi yang paling umum dalam industri ini.

Kami akan membuat prototipe ini tetap sederhana, dan karena itu tidak akan mendeteksi browser, lebar layar dll. Jadi, saya pikir saya akan menanyakan ini dengan cara yang sederhana dengan harapan mendapatkan jawaban yang sederhana:

Berapa lebar dan tinggi 'paling umum' yang dirancang untuk laman web baru-baru ini. Akan sangat membantu jika saya dapat menemukan sumber ketika saya memberi tahu rekan-rekan saya mengapa saya memilih proporsi tertentu untuk mereka gunakan sebagai dasar gambar mereka.

Harap perhatikan bagaimana saya mengajukan pertanyaan ini:

  • Saya tidak meminta resolusi layar paling umum.
  • Saya tidak meminta browser yang paling umum.

Saya ingin tahu dimensi apa yang dipilih sebagian besar situs web sehubungan dengan tata letak ukuran tetap. Saya tahu bahwa orang biasanya menggulir dan karena itu ketinggian mungkin bukan bagian dari ~ 'standar'; dalam hal ini, saya akan puas dengan lebar yang paling umum.

website-design John R
sumber

Jawaban:

9

Seperti yang Anda katakan, tidak ada ketinggian standar karena sangat cair, jadi gunakan saja apa pun yang membantu Anda memvisualisasikan desain terbaik.

Untuk lebar, lebar 960 piksel tampaknya merupakan "standar" saat ini untuk desain dengan lebar tetap. Sudah cukup umum bahwa situs web telah didedikasikan untuk menjelajahi tata letak dengan lebar seperti itu .

(Saya berasumsi Anda tidak ingin ada yang mengomel tentang menggunakan desain cairan?)

John Conde
sumber
3

Sebenarnya tidak ada lebar standar yang harus Anda atur. Jumlah orang yang menggunakan monitor 1024x768 telah menurun secara drastis dalam beberapa tahun terakhir, sehingga lebar 960 kurang penting. Dengan munculnya begitu banyak perangkat baru (ponsel pintar, tablet beserta laptop dan desktop), Anda harus membuat sejumlah lembar gaya untuk setiap kotak.

Kueri media CSS memungkinkan Anda mengubah gaya berdasarkan resolusi layar pengguna. Saya cenderung membuat situs dengan stylesheet umum yang menangani semua gaya visual, kemudian memisahkannya untuk ponsel, tablet, desktop / laptop standar dan layar ekstra lebar yang menyusun halaman.

Lihatlah halaman ini di W3.org untuk beberapa contoh - http://www.w3.org/TR/css3-mediaqueries/

Ini lebih banyak pekerjaan, tetapi akan memungkinkan pengguna untuk mendapatkan pengalaman terbaik apa pun yang mereka gunakan untuk meramban situs mereka.

Carson
sumber
1

Apa yang dikatakan @John Conde. Selain itu, Anda harus mempertimbangkan siapa target audiens Anda. Misalnya, jika situs web saya adalah blog teknologi atau blog gadget, kemungkinan audiens target saya sedikit lebih paham teknologi daripada audiens normal, jadi saya bisa memotret tata letak lebar 1200+ px. Atau jika saya memfokuskan situs / blog / forum untuk webmaster, saya akan sedikit lebih luas.

Pada akhirnya, cari tahu demografi massal Anda dan ikuti apa yang akhirnya akan berhasil bagi mereka.

Dua hal yang SANGAT penting untuk diingat ...

1) Jika desain Anda dapat bekerja dengan 900+ px maka tidak ada alasan untuk merentangkannya ke 1200+ px bahkan jika demografi Anda mampu membelinya ..

2) Pastikan Anda memiliki struktur yang tepat yang dapat mengakomodasi pengguna yang mungkin tidak memiliki resolusi target Anda.

Adil
sumber
Saya tidak setuju dengan poin # 2. Dengan layar lebar 1366px, lebar yang paling umum pada kebanyakan laptop yang dijual dalam beberapa tahun terakhir, Anda tidak dapat memuat dua jendela 900px di sebelah satu sama lain dan melihat keduanya secara bersamaan. Jika Anda hanya memiliki tata letak 900px tunggal, Anda menghabiskan 34% dari ruang horizontal Anda dengan spasi putih. Dalam hal ini, 1200px akan menjadi lebar yang ideal . Jadi ya, ada adalah alasan untuk meregangkan itu.
nhinkle
@nhinkle: Saya tidak berpikir Anda benar-benar membaca poin # 2.. Apa tanggapan Anda terkait dengan pemasangan dua jendela 900px di samping satu sama lain? Selanjutnya, silakan baca pertanyaan dengan benar untuk memahami apa yang diminta John R. Ini bukan diskusi tentang kasus penggunaan ekstrem seperti Anda ingin memiliki 2 jendela 900px di sebelah satu sama lain atau dalam kasus saya menginginkan monitor 1600px (2 dari mereka) untuk melakukan desain. Melainkan tentang sebagian besar pengguna yang bukan Anda atau saya ..
Adil
Maaf, saya bermaksud membalas poin 1 Anda, bukan poin 2 Anda. Saya minta maaf jika itu menyebabkan kebingungan. Maksud saya masih berdiri: sebagian besar pengguna memiliki tampilan yang cukup luas sehingga tata letak 900px menghabiskan banyak ruang mereka. Saya setuju dengan sebagian besar dari apa yang Anda katakan dalam jawaban Anda, tetapi "hal pertama yang perlu Anda ingat" tidak benar-benar berlaku. Jika demografi Anda mampu membayar 1200px, Anda harus menggunakan 1200 px itu, jika tidak, Anda membuang-buang 300 pikselnya.
nhinkle
@nhinkle: Anda salah membaca poin saya # 1. Jika desain saya dapat menampilkan situs dengan mudah dalam 900px mengapa saya harus merentangkannya untuk membuatnya 1200px? Juga, 13% dari pengguna masih memiliki resolusi layar 1024x768 Memang sedikit, tetapi cukup besar untuk membuat mereka tidak nyaman dan kehilangan penjualan, klik iklan, prospek atau apa pun model bisnis Anda .... (data dikutip dari: w3schools .com / browsers / browsers_display.asp )
Adil
Saya mengerti maksud Anda. Maksud saya adalah bahwa jika pengguna Anda pada umumnya memiliki layar yang cukup lebar untuk menggunakan tata letak lebar 1200px, Anda harus melakukannya. Sebagai contoh, situs pertukaran stack dioptimalkan untuk lebar sekitar 1000px, tetapi banyak pengguna telah meminta opsi untuk melihat sumber posting dan pratinjau penurunan harga secara berdampingan, yang akan menggunakan lebih banyak ruang horisontal. w3schools bukan sampel yang representatif dari pengguna web, tetapi selain itu, diskusi ini adalah untuk situs di mana 1200 akan logis jika sesuai dengan desain.
nhinkle