Bir web sitesi tasarlamak için hangi tarayıcı genişliğini kullanmalıyım?

Web sitesinin grafik kısmında çalışıyorum ve Photoshop'ta bir web sitesi tasarlamam istendi. Bir web sitesi için ortalama boyutlar ve tarayıcı genişliklerinin ne olduğunu merak ediyorum, böylece bu boyutlarla mockup'umu oluşturabilirim.

Web tasarımının modern çağında, tarayıcı genişliği önemsizdir. Dışarıda o kadar çok farklı cihaz var ki , tasarımlarınızı herhangi bir boyut ekranı için çalışacak şekilde duyarlı hale getirmeniz gerekiyor .

Bunu yapmak için bir çeşit sıvı genişliği ızgara sistemi kullanmalı ve @media sorguları kullanarak belirli cihazları hedeflemelisiniz .

Medya sorguları, farklı görünüm bağlantı noktası boyutları için farklı CSS kuralları kümesidir. Medya sorguları ayrıca tarayıcınızın genişliğini dinamik olarak değiştirmeye de yanıt verir. Tarayıcınızı küçülttüğünüzde sayfa, kayan reklamları bırakarak veya 12 sütundan 1 veya 2'ye giderek yanıt verir. Duyarlılık, yönlendirmeyi dikeyden yataya veya yataydan değiştirdiklerinde mobil cihazlardaki ve tablolardaki kullanıcılara da tepki verir.

Hedeflenen boyutlar:

• Portre modunda 320 x 480 mobil cihaz
• 480 x 640 küçük tablet veya yatay modda bir iPhone
• Portre modunda 768 x 1024 tablet
• Manzara modunda 1024 x 768 tablet
• 1200+ masaüstü tarayıcı
• 2900 ++ büyük medya ekranları veya konferanslar (Bu bir zorunluluk değildir, ancak birileri sitenize çok büyük bir ekranda bakıyorsa.

Bunu çalışırken görmek için Çerçevesiz ızgaraya bir göz atın . Aslında akıcı değil ama tarayıcınızı ayarlarken 14 sütundan sonuna kadar gider 1

Popüler kullanıcı arabirimi bileşenleriyle oluşturulmuş basit bir CSS, HTML ve JS çerçevesi olan Twitter Bootstrap , modern duyarlı tasarım uygulamalarına iyi bir örnektir.

Hesaplamak isteyebileceğiniz başka bir şey de piksel yoğunluğudur . İPhone 4 ve yeni iPad, normal ekranlardan 2 kat daha keskin retina ekranlara sahip. Bu, metin yerine sprite ve resim sunma pratiğini neredeyse geçersiz kılar. Metin içeren bir iPad'de görüntüler korkunç görünüyor.

Bu yüzden sorunun cevabı, tasarlamanız gereken standart bir tarayıcı genişliği olmadığıdır. Tasarım kararlarınızı kullanıcılarınıza göre vermeli ve çoğu kişi için en erişilebilir olduğu yerde yapmalısınız.

Çoğu düzen şablonu, ortak 1024 piksel geniş ekran çözünürlüğüne sığdığı, kaydırma çubuğu için biraz alan sağladığı ve 2, 3, 4, 5, 6, 8, 10, 12 ve 16 ile kolayca bölünebildiği için 960 piksel genişlik kullanır - sütunlaştırma için idealdir tasarım.

Örnek için bkz. Http://960.gs .

Bootstrap gibi diğer çerçeveler , sütunlar arasındaki bazı kenar boşluklarını hesaba katmak için 940 piksel kullanır.

Masaüstü tarayıcıları hedefliyorsanız, gerekirse yaklaşık 1000 piksel genişliğe kolayca gidebilirsiniz.

StatCounter ekran çözünürlüğü

En tipik ekranlar 1024 piksel veya daha büyük olduğunda neden yaklaşık 1000 piksel? Çünkü kaydırma çubuklarına ve pencere kromuna izin vermelisiniz.

Özellikle mobil tarayıcıları hedefliyorsanız, mobil tarayıcılar genellikle içeriği görüntüleme genişliğine uyacak şekilde ölçeklendirse de, 950 veya 960 piksel genişliğinde harika olabilir. Lütfen 320 CSS / HTML pikseli, iPhone gibi yüksek DPI'lı cihazlarda 640 cihaz pikseli anlamına gelir.

StatCounter mobil ekran çözünürlüğü

Hedef pazarınız da bazı şeyleri değiştirebilir. Teknoloji meraklısı bir kitleyi hedefliyorsanız, şeylerin daha modern cihazlara eğilmesini bekleyebilirsiniz. Bir hükümet sitesi inşa ediyorsanız, daha geniş bir yelpazeye hitap etmeniz gerekir.

Ayrıca, siteyi nasıl inşa ediyorsunuz? Blueprint CSS veya 960 Izgara Sistemi gibi bir ızgara sistemi kullanıyorsanız, bu da boyutu dikte edebilir (çoğu ızgara sistemi diğer boyutlara da değiştirilebilir).

Ayrıca hem mobil hem de masaüstünde iyi çalışmaya çalışıyorsanız duyarlı tasarıma bakmak isteyebilirsiniz.

bu zamanda dünya çapında iftiralı masaüstü boyutu 1024x768, 1003 piksel boyutunda bir web sitesi yapmak iyidir ...