it-swarm-tr.com

Sabit genişlik vs dinamik genişlik

Tarayıcı penceresini yeniden boyutlandırmanın, tarayıcıyı yeniden boyutlandırmanın sayfanın bileşenlerinin birlikte "çizilmesine" neden olduğu esnek bir düzen yerine, daha fazla sitenin sabit genişlikli bir yerleşim planına gittiğini fark ettim. .
Buna benzer StackExchange siteleri sabit düzenin bir örneği. GMail ve iGoogle esnek mizanpaja örnektir. Birini diğerinden seçmenin sebepleri nelerdir?

15
BenV

Değişken genişlik düzeniyle daha karmaşık tasarımların gerçekleştirilmesi çok zor olabilir. Bu yüzden bunun bir rol oynadığını hayal ediyorum.

Çok geniş bir metni okumak için rahat olmadığı gerçeği de var. StackExchange sitelerinde sütun boyutu oldukça yönetilebilir ve okunması kolaydır. Değişken genişlikli bir düzende, ana metin gövdesini okunaksız hale getirmeden uzatamazsınız. Google bile arama sonuçlarının genişliğini sınırlıyor.

Tabii ki, alanın premium olduğu bir siteniz varsa (Google Dokümanlar ve Google Haritalar gibi), gerçekten kullanılabilir tüm alanı kullanmak için değişken genişlikli bir şemaya gitmek istersiniz.

11
Kris

İle düzeltildi karmaşık siteler için geliştirici çok daha kolaydır. Ayrıca, sabit genişlikli sitelerin çoğu yaklaşık 1000 piksel genişliğinde olacaktır. Sebebi tarayıcıların sadece% 1'i 800x640 ve% 0'ı 640x480 kullanıyor. En güncel istatistiklere göz atın burada . Buna rağmen cep telefonu dahil değil. Tamamen farklı bir top oyunudur.

Değişken genişlik düzeninin değeri, insanların web sitesini en üst düzeye çıkarılmayan bir pencerede kolayca kullanmalarına izin vermesidir.

Hedef kitlenize bakmalı ve ne tür bir deneyim istediğinizi düşündüğünüze karar vermelisiniz ve değişken genişlik yapmak zorundaysanız, değişken genişliğin geliştiremeyeceğiniz diğer özelliklerden daha önemli olup olmadığına karar vermelisiniz.

8
Ben Hoffman

İkisi arasında bir minimum genişlik ve maksimum genişlik (CSS kullanarak) ayarladığınız ve sonra iki uç arasındaki gerinin akışını sağlamak için yüzde genişlikleri kullandığınız arasında bir uzlaşma var. Örneğin, bir sol menü sütununun 200 pikselden daha dar olmamasını ancak ana içeriğin akmasını isteyebilirsiniz. Bu teknik, sitenizin çok yüksek çözünürlüklere veya çok düşük çözünürlüklere aptalca bakmadan ziyaretçilerin çözünürlüğüne ölçeklenmesini sağlar. Sonuçta HTML, akacak şekilde tasarlandı - bu bir işaret dilidir ve baskıyla aynı değildir.

Bu yaklaşım, bloglar veya çok fazla metin bilgisi içerenler gibi nispeten basit tasarımlar için işe yarar. Aslında, kendi başıma kullanıyorum kişisel web sitesi . Artık birçok insanın geniş ekranlı veya yüksek çözünürlüklü monitörleri olmasına rağmen - iş monitörüm 1680 piksel genişliğinde - peki neden büyük ölçüde bir emlak kaybına sahip olmalı ve bir tasarımcı uygun bir genişliğe karar verdiğinden dolayı yatay olarak kaydırmalı ekran? Sonunda, iyi tasarım kullanıcılara mümkün olan en iyi deneyimi sunmakla ilgilidir - bu sadece tasarımcının ekranında neyin hoş göründüğü ile ilgili değildir.

3
Dan Diplo

Jakob Nielsen 'in 113 Ana Sayfa Kullanılabilirliği için Tasarım Kuralları :

67 Ana sayfa boyutu farklı ekran çözünürlüklerine göre ayarlanması için sıvı bir düzen kullanın.

Aynı zamanda On En Çok İhlal Edilen Ana Sayfa Tasarım Yönergelerinden :

Donmuş mizanpajlarla savaşmak, kayıp bir savaş gibi görünüyor, ancak yinelenmeye değer: farklı kullanıcılar farklı monitör boyutlarına sahip. Büyük monitörleri olan kişiler, birden çok pencereyi aynı anda görüntülemek için tarayıcılarını yeniden boyutlandırmak istiyor. 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.

1
melhosseiny

Bu seçimi yapmak zorunda olmayabilirsin. Bir List Apart mükemmel bir Duyarlı Tasarım ile ilgili makale . Ana fikir tarayıcı penceresindeki veya görünüm alanı boyutundaki değişiklikleri yakalamak ve gerektiğinde CSS'yi yeniden atamak için ortam sorguları kullanabilmenizdir. Orada okumak için çok şey var, bu yüzden tüm sulu ayrıntılar için kontrol edin makale . Ancak bunun için uzun ve kısa (veya bunun "geniş ve dar" olması gerekir mi?) Örneklerinin önce ve sonra sayfalarına bakın. before page bir noktaya kadar güzel bir şekilde ölçeklenir, ancak yeterince daraltırsanız biraz dağınık hale gelir. after sayfası da ölçeklendirilir, ancak ölçeklendirmenin iyi çalışması için çok dar hale getirdiğinizde düzeni de değiştirir.

1
Alan

Peki ya karışıklık? Bu, yeterli alan varsa # içerik bölümünü sabit bir genişlikte (70em) görüntüler - aksi takdirde bölüm, görüntü alanı/tarayıcı penceresinin% 80'ine küçülür.

#content {
    margin: 0 auto 2em 0;
    width: 70em;
    max-width: 80%; }
0
feeela

Dinamik bir düzenin avantajı, mobil cihazlar dahil olmak üzere tüm ekran boyutlarında çalışmasıdır. İşlerin tüm bu boyutlarda iyi görünmesini sağlamak zor olsa da zor. Sorulması gereken soru şudur: Ziyaretçileriniz mobil cihazlar kullanacak mı?

0
paulmorriss