Web sayfası örnekler tasarlamak için standart bir genişlik var mı?
Evet Hayır Belki?
Bir zamanlar (aşağıya bakınız) web tasarımı büyük ölçüde çoğu ekrana oldukça iyi uyması gereken tek bir görünüm yaratmaya çalıştı. Son beş yılda, Duyarlı Web Tasarım (RWD) benimseme ile büyük ölçüde değişti.
RWD, tasarımları, cihazın boyutuna bakılmaksızın herhangi bir cihaza oldukça iyi uymasını sağlayacak şekilde yapma konusunda bir tasarım prensibidir .
Web geliştirmede, medya sorguları genellikle bir dizi faktöre bağlı olarak web sayfalarına farklı stil kümeleri uygulamak için kullanılır. Bazı yaygın faktörler şunlardır:
- mevcut ekran genişliği
- mevcut ekran yüksekliği
- cihaz genişliği
- cihaz yüksekliği
- cihaz oryantasyonu
Stiller belirli ekran boyutlarına hedeflenebildiğinden, belirli aralıkları hedefleyen birden fazla tasarım kümesi oluşturmak nadir değildir.
Açık olmak gerekirse, belirlenmiş “standartlar” yoktur. “Tasarımcılar bu boyutlandırma kurallarına uyarak tasarımlar yapmalı” diyen bir yönetim organı veya kuruluşu yoktur, çünkü sonuçta bu bir yargı çağrısıdır.
Bununla birlikte, web geliştirme endüstrisi organik olarak tekrar tekrar meydana gelen bir takım ortak sınır değerleri ortaya çıkarmıştır.
Tipik kesme noktaları geçerli ekran genişliği içindir ve genellikle:
içindeki birimler px
- 320
- 480
- 768
- 1024
- 1200
- 1600
Bu belirli sayıların nedeni oldukça sıradan. Orijinal iPhone 320 × 480 boyutunda bir ekrana sahipti; Orijinal iPad'in 768 × 1024 boyutunda bir ekranı vardı; 1600 × 1200, daha büyük ekran çözünürlükleri için ortaktır.
Bu kesme noktalarının bazılarında veya hepsinde örnekler görmek yaygın olsa da, ara tasarımdaki çarpma noktalarını gösteren belirli bir sayfanın çoklu görüntülemelerini sağlamanız da yaygındır.
768 piksel genişliğindeki istiflenmiş öğeleri gösteren bir akışkan genişlikli comp'in, öğelerin iki sütuna geçtiği 900 piksellik bir tasarım içermesi gerekebilir. Bu ara sınır değerler için birçok tasarım kümesi sağlamanız gerektiğini tespit ederseniz, münferit sayfayı sayfanın kalan kısmını dahil etmeden, her bir bileşenin bileşen bazında değiştiği kesme noktalarını göstermenizi şiddetle tavsiye ederim.
Bu aynı zamanda, belirli UI bileşenlerinin eksik kaldığı ya da sınır değerler arasında uyuşmadığı ortak tasarım tehlikelerinin önlenmesine yardımcı olur.
Aşağıdakiler, gelecek vaatler için sakladığım bu cevabın eski halidir, ancak bir süredir geçerli değildi.
Bundan kimsenin bahsetmediğine şaşırdım:
Google adında güzel bir geliştirme aracı var.
Sorunuza yalnız cevap vermeli.
Mevcut trendler hakkında birkaç notum var:
Şu anda kullanıcıların büyük çoğunluğu 1024x600 (tablet / netbook) veya daha büyük çözünürlüktedir. 24pxKaydırma çubukları için kaldırmayı hatırlamanız gerekir , ki bu da 1000 piksel genişliğinde güzel bir boşluk bırakır. Yükseklik gelince: web kullanıcıları fareler üzerinde tekerlek kaydırma alışkın büyüdükçe, dikey kaydırma konusunda çok iyi. İlk yükseklik, ilk izlenimler için çoğunlukla önemlidir.
Kullanıcılar yatay kaydırma konusunda pek başarılı değiller, bu nedenle düzenleri 1000 pikselden daha geniş yapmak önerilmez.
Ayrıca daha büyük ekranlara sahip birçok kullanıcı, tüm ekranlarını web tarayıcılarında kullanmaz. Özellikle şimdi Windows 7, ekranın yarısına bir pencere bırakmak için basit bir drag-n-dock işlevi içeriyor.
Özetle:
- 1000px üzerindeki statik genişliklerden kaçının
- İlk izleniminizin 1024x600’de iyi göründüğünden emin olun
- içeriği ekranın altına bırakmaktan korkmayın.