Daha fazla sitenin, tarayıcı penceresinin yeniden boyutlandırılmasının, tarayıcının yeniden boyutlandırılmasının sayfanın bileşenlerinin birlikte "ezilmesine" neden olduğu esnek bir düzenin aksine kaydırma çubuklarının görünmesine neden olduğu sabit genişlikte bir düzene gittiğini fark ettim. .
Bunun gibi StackExchange siteleri, sabit mizanpajın bir örneğidir. GMail ve iGoogle esnek düzenin örnekleridir. Birini diğerinden seçmenin nedenleri nelerdir?
Yanıtlar:
Daha karmaşık tasarımların değişken genişlik düzeniyle gerçekleştirilmesi çok zor olabilir. Bunun bir rol oynadığını hayal ediyorum.
Ayrıca, çok geniş metinleri okumanın rahat olmadığı gerçeği de vardır. StackExchange sitelerindeki sütun boyutu oldukça yönetilebilir ve okunması kolaydır. Değişken genişlik düzeniyle, ana metin gövdesini okunaksız hale getirmeden uzatamazsınız. Google bile arama sonuçlarının genişliğini sınırlar.
Tabii ki alanın yüksek olduğu bir siteniz varsa (Google Dokümanlar ve Google Haritalar gibi) tüm kullanılabilir alanı kullanmak için değişken genişlik düzeniyle gitmek istersiniz.
Sabit siteler için geliştirici çok daha kolay. Ayrıca, sabit genişlikli sitelerin çoğu yaklaşık 1000 piksel genişliğinde olacaktır. Bunun nedeni, tarayıcıların yalnızca% 1'inin 800x640 ve% 0'ının 640x480 kullanmasıdır. En güncel istatistiklere buradan göz atın . Buna mobil dahil değildir. Bu tamamen farklı bir top oyunudur.
Değişken genişlik düzeninin değeri, insanların web sitesini en üst düzeye çıkarılmamış bir pencerede kolayca kullanmasına izin vermesidir.
Hedef kitlenize bakmalı ve istedikleri deneyime ve değişken genişliğin, değişken genişlik yapmanız gerektiğinde geliştiremeyeceğiniz diğer özelliklerden daha önemli olup olmadığına göre karar vermelisiniz.
Minimum genişlik ve maksimum genişlik (CSS kullanarak) ayarladığınız ikisi arasında bir uzlaşma vardır ve daha sonra geri kalanın iki uç arasında akmasını sağlamak için yüzde genişliklerini kullanır. Örneğin, bir sol menü sütununun 200 pikselden daha dar olmamasını ancak ana içeriğin akmasını isteyebilirsiniz. Bu teknik, sitenizin son derece yüksek çözünürlüklere veya son derece düşük çözünürlüklere aptalca bakmadan ziyaretçi çözünürlüğüne göre ölçeklendirilmesini sağlar. Ne de olsa HTML, akacak şekilde tasarlandı - bu bir biçimlendirme dilidir ve baskı ile aynı değildir.
Bu yaklaşım, bloglar veya çok fazla metin bilgisi sunanlar gibi nispeten basit tasarımlar için iyi çalışır. Gerçekten, kendi kişisel web sitemde kullanıyorum . Artık birçok insanın geniş ekran veya yüksek çözünürlüklü monitörleri olduktan sonra - çalışma monitörüm 1680 piksel genişliğinde - neden büyük bir gayrimenkul kaybettiler ve basitçe yatay olarak kaydırmak zorundalar çünkü bir tasarımcı ekran? Sonuçta iyi tasarım, kullanıcılara mümkün olan en iyi deneyimi sunmakla ilgilidir - sadece tasarımcının monitöründe "güzel" görünen şeyle ilgili değildir.
Bu seçimi yapmak zorunda kalmayabilirsiniz. A List Apart , Duyarlı Tasarım hakkında mükemmel bir makaleye sahiptir . Ana fikir, tarayıcı penceresindeki veya görünüm alanı boyutundaki değişiklikleri yakalamak ve gerekirse CSS'yi yeniden atamak için medya sorgularını kullanabilmenizdir . Orada okunacak çok şey var, bu yüzden tüm sulu detaylar için makaleye göz atın. Ama uzun ve kısa için (ya da onun "geniş ve dar" olması gerekir mi?) Örneklerinin önceki ve sonraki sayfalarına bakın. Önce yaparsanız güzel bir noktaya kadar sayfa ölçekleri, ama buna biraz aksak alır yeterince dar. sonra sayfa ölçeklendirilir, ancak ölçeklemenin iyi çalışması için çok dar yaptığınızda da düzeni değiştirir.
Göre Jakob Nielsen 's Anasayfa Kullanılabilirlik için 113 Dizayn Rehberi :
67 Ana sayfa boyutu farklı ekran çözünürlüklerine ayarlanacak şekilde sıvı bir düzen kullanın.
Ayrıca En Çok İhlal Edilen On Ana Sayfa Tasarım Kılavuzu'ndan biridir :
Donmuş düzenlerle mücadele kayıp bir savaş gibi görünüyor, ancak tekrar etmeye değer: farklı kullanıcıların farklı monitör boyutları var. Büyük monitörleri olan kişiler, aynı anda birden çok pencereyi görüntülemek için tarayıcılarını yeniden boyutlandırabilmeyi ister. Herkesin pencere genişliğinin 800 piksel olduğunu varsayamazsınız: bazı kullanıcılar için çok fazla, diğerleri için çok az.
Dinamik bir düzenin avantajı, mobil cihazlar da dahil olmak üzere tüm ekran boyutlarında çalışmasıdır. Her şeyin bu boyutlarda iyi görünmesini sağlamak daha zor bir iş. Sorulması gereken soru şudur: Ziyaretçileriniz mobil cihazlar mı kullanacak?