Günümüzde web sitelerinin tasarladığı 'en yaygın' genişlik ve yükseklik nedir?

Bir grup projesi üzerinde çalışıyorum ve meslektaşlarımın çevrimiçi başvuru vizyonları hakkında bir çizim yapmalarını sağlamaya çalışıyorum; Bu uygulama bir PC üzerinden görüntülenecektir. Bir endüstri standardı olmadığından şüphelenmeme rağmen, sabit genişlikli düzenlere sahip siteler için ortak yaklaşımlar olması gerektiğinden eminim. Endüstrideki en yaygın orantıları bilmem gerekiyor.

Bu prototipi basit tutacağız ve bu yüzden tarayıcıları, ekran genişliklerini vb.

Web sayfalarının son zamanlarda tasarlandığı 'en yaygın' genişlik ve yükseklik nedir? Çalışma arkadaşlarıma, çizimlerine dayandırmak için neden belirli bir oran hissi seçtiğimi söylediğimde bir kaynak yerleştirebilsem çok yararlı olurdu.

Lütfen bu soruyu nasıl sorduğuma dikkat edin:

En yaygın ekran çözünürlüklerini istemiyorum.
En yaygın tarayıcıları istemiyorum.

Çoğu web sitesinin sabit boyutlu mizanpajlar için hangi boyutları tercih ettiğini bilmek istiyorum. İnsanlar normalde kaydırma ve bu nedenle yükseklik ~ standart bir parçası olmayabilir biliyorum; bu durumda, en yaygın genişliği kabul edeceğim.

website-design

— John R
kaynak

Yanıtlar:

Dediğiniz gibi, son derece akıcı olduğu için standart bir yükseklik yoktur, bu yüzden tasarımınızı en iyi görselleştirmenize yardımcı olan her şeyi kullanın.

Genişlik 960 piksel için genişlik, sabit genişlikli tasarımlar için geçerli "standart" gibi görünüyor. Bir web sitesinin bu genişlikteki düzenleri keşfetmeye adanmış olması yeterince yaygındır .

(Akıcı bir tasarım kullanma konusunda kimsenin istemediğini varsayıyorum?)

— John Conde
kaynak

Gerçekten ayarlamanız gereken standart bir genişlik yok. 1024x768 monitör kullanan insan sayısı son birkaç yılda önemli ölçüde düştü, bu nedenle 960 genişliğinin önemi daha az. Çok fazla yeni cihazın (akıllı telefonlar, tabletler, dizüstü bilgisayarlar ve masaüstü bilgisayarlar ile birlikte) ortaya çıkmasıyla, her vaka için bir dizi stil sayfası oluşturmanız gerekir.

CSS medya sorguları stilleri kullanıcının ekran çözünürlüğüne göre değiştirmenize olanak tanır. Tüm görsel stilleri işleyen genel bir stil sayfasına sahip siteler oluşturuyorum, ardından mobil, tablet, standart masaüstü / dizüstü bilgisayar ve sayfayı yapılandıran ekstra geniş ekranlar için ayrı olanları yapıyorum.

Birkaç örnek için W3.org'daki bu sayfaya göz atın - http://www.w3.org/TR/css3-mediaqueries/

Daha fazla iştir, ancak kullanıcının sitelerini taramak için ne kullanırlarsa kullansın, mümkün olan en iyi deneyimi elde etmesine izin verecektir.

— Carson
kaynak

John Conde ne dedi. Buna ek olarak, hedef kitlenizin kim olduğunu da hesaba katmalısınız. Örneğin, web sitem bir teknoloji blogu veya gadget blogu ise, hedef kitlemin normal izleyiciden biraz daha teknoloji meraklısı olması nedeniyle 1200+ piksel genişliğinde düzen için çekim yapabilirim. Ya da bir site / blog / forum için web yöneticileri odaklanmış olsaydım biraz daha geniş gitmek istiyorum.

Günün sonunda kitle demografik verilerinizi bulun ve onlar için neyin işe yarayacağını takip edin.

Akılda tutulması gereken iki çok önemli şey ...

1) Tasarımınız 900'den fazla pikselle çalışabiliyorsa, demografik özellikleriniz bunu karşılayabilse bile 1200'den fazla piksele genişletmek için bir neden yoktur.

2) Hedef çözünürlüğünüze sahip olamayacakları uygun bir yapıya sahip olduğunuzdan emin olun.

— Adil
kaynak

2. maddeye katılmıyorum. 1366 piksel genişliğinde bir ekranla, muhtemelen son birkaç yılda satılan çoğu dizüstü bilgisayarda en yaygın genişlikle, iki 900px pencereyi yan yana yerleştiremez ve her ikisini aynı anda göremezsiniz. Yine de 900 piksellik tek bir düzeniniz varsa, yatay alanınızın% 34'ünü boşlukla harcıyorsunuz. Bu durumda, 1200 piksel ideal bir genişlik olacaktır. Evet Yani orada olduğunu bunu germek için bir neden.

— nhinkle

@nhinkle: Aslında 2. noktayı okuduğunuzu düşünmüyorum. cevabınızın yan yana iki adet 900 piksel pencere takmakla ne ilgisi var? Ayrıca, John R'nin ne istediğini anlamak için lütfen soruyu doğru bir şekilde okuyun. Bu gibi aşırı kullanım durumları hakkında bir tartışma değil sen yanyana veya bir tasarım yapmak için bir 1600px monitörler (2 tanesi) isteyen benim durumumda 2 900px pencereleri isteyen. Bunun yerine, siz veya ben olmayan kullanıcıların büyük çoğunluğu söz

— konusudur

Özür dilerim, 2. noktanıza cevap vermek istedim. Bu bir karışıklığa neden olduysa özür dilerim. Demek istediğim hala duruyor: kullanıcıların büyük çoğunluğu 900 piksellik bir yerleşim alanının büyük bölümünü boşa harcayacak kadar geniş ekranlara sahip. Cevabınızda söylediklerinizin çoğuna katılıyorum, ancak 1. “akılda tutulması gereken şey” gerçekten doğru değil. Demografik verileriniz 1200 piksel alabiliyorsa, bu 1200 pikseli kullanmalısınız, aksi takdirde 300 pikseli boşa harcarsınız.

— nhinkle

@nhinkle: 1 numaralı fikrimi yanlış okuyorsun. Tasarımım siteyi 900 piksel içinde kolayca gösterebiliyorsa neden 1200 piksel yapması için onu uzatmalıyım? Ayrıca, kullanıcıların% 13 hala ekran az sayıda şu Verilen 1024x768 çözünürlük ama rahatsızlık onları ve gevşek satış, reklam tıklamaları, potansiyel müşteri veya her türlü işletme modelidir için geniş yeterince sahip .... (veri alıntıladığınız: W3Schools .com / tarayıcılar / browsers_display.asp )

— Adil

Ne demek istediğimi anladım. Benim demek ki eğer tarafından ve büyük kullanıcılarınızın 1200px genişliğinde düzeni kullanmak yeterince geniş ekranlar, yapmalısın. Örneğin, yığın değişim siteleri yaklaşık 1000 piksel genişlik için optimize edilmiştir, ancak birçok kullanıcı daha fazla yatay alan kullanacak olan kaynak ve işaretleme önizlemesini yan yana görüntüleme seçeneği istemiştir. w3schools, web kullanıcılarının temsili bir örneği değildir, ancak bir yana, bu tartışma, tasarıma uyması durumunda 1200'ün mantıklı olacağı siteler içindi.

— nhinkle