Farklı ekran çözünürlükleri nedeniyle, bir web sitesine göz atma kullanıcı deneyimi farklı olabilir. Web sitesini sabit bir genişlikte düzenlemek daha mı iyi? (ve eğer öyleyse standart çözünürlükler için farklı statik genişlikler olmalı mı?) Yoksa bir web sitesi her zaman değişken genişlikte mi düzenlenmelidir?
Burada kolay bir cevap olduğunu düşünmüyorum, çünkü nihayetinde, ne inşa ettiğinize ve kime inşa ettiğinize bağlı. Hem sabit genişlikli alanların hem de değişken genişlikli alanların avantajları ve dezavantajları vardır.
Burada işaret etmem gereken bir şey, sabit/akışkan siteler için mobil deneyimlerden bahsetmeyeceğim, çünkü mobil siteler, bir masaüstü sitesinin mobil bir platformun bir limanı değil, tasarımı mobil cihazlara özgü olduğunda en iyisidir.
Sabit genişlikli bir site daha tutarlı bir deneyimdir ve değişken genişlikli bir siteden daha hızlı gelişir. Ayrıca tasarımcının sunum üzerinde daha fazla kontrole sahip olmasına izin verir, çünkü genişlikler, çizgi uzunlukları, tipografi boyutları vb. İçin sabit değerler ayarlayabilirsiniz. Ayrıca, değişken genişlikli bir siteye göre bakımı son derece kolaydır.
Öte yandan, Edge kasaları göründüğünde sabit genişlikli tasarımlar başarısız olmaya başlar. Şu anda, insanların 1024 piksel genişlikli bir monitör için siteler tasarlamaları çok yaygın, ancak hala daha düşük çözünürlüklü makinelere sahip insanlar var. Şu anda, 960 piksel ızgara kullanılarak tasarlanmış bir uygulama üzerinde çalışıyorum; Bugün analitiklere baktım ve kullanıcıların% 3'ünün 800 x 600 monitörde olduğunu ve toplamın yaklaşık% 5'inin 1024 x 768'in altındaki çözünürlüklerde olduğunu fark ettim. Bu kullanıcılar, site genişliği sabit olduğundan muhtemelen oldukça kötü bir deneyim yaşıyorlar. .
Akışkan genişliği, kullanıcının ayarlarına göre tasarımın genişlemesine izin verir; tasarım onlara uyar, ki bu iyi bir şey. Bu, sitenin oransal negatif alanı korumasına izin verir, böylece site hiçbir zaman çok karmaşık veya çok açık hissetmez (özellikle bu şekilde tasarlanmadığı sürece).
Ne yazık ki, akışkan genişliği tasarımları Edge kasalarına da dayanıklı değildir. Genişlikler çok sıska veya çok geniş olduğunda, özellikle metinle ilgili kötü şeyler olabilir. Çok kısa veya çok uzun olan hat uzunlukları aslında okunamaz. Ayrıca, akışkan genişlikli tasarımlarda görüntüler veya Flash nesneleri gibi birçok ortam biçiminin ölçeklendirilmesi zordur; IE görüntüleri yeniden boyutlandırmak için javascript gerektirir, aksi takdirde pikselleştirilirler.
Birkaç kişi örnek gösterdi, ancak bu tekniğe henüz adıyla değinilmedi. Ethan Marcotte kısa süre önce, kullanıcının ekran çözünürlüğüne göre tamamen değişebilen akışkan düzenlerini tanımlamak için terim üretti (ayrıntılara bakın burada ). Bu sabit genişlik ve akışkan genişliğinin bir melezidir - minimum veya maksimum değerleri ayarlamanıza izin verir, böylece ortam veya hat uzunlukları kontrol dışı kalmaz ve ayrıca tasarımın kullanıcı ayarlarına göre ayarlanmasına izin verir. Tabii ki, bu tekniğin kendi avantajları ve dezavantajları da vardır. Bir kullanıcının ayarları için özel olarak seçilmiş bir düzen sağlansa da, bu tür bir sitenin geliştirilmesi zordur. Tüm tarayıcılar bunu yapmak için gerekli medya sorgularını desteklemez. Ayrıca, temel olarak birden fazla düzen geliştiriyorsunuz ve inşa etmek ve korumak için gereken süreyi uzatıyorsunuz.
Sadece bir battaniye yerleştirmenin imkansız olduğuna inanıyorum "Bunu daima kullan" veya "Bunu asla kullanmayın"; Karar vermeden önce her zaman ihtiyaçlarınızı değerlendirmeniz gerektiğini söyleyebilirim. Çoğu durumda, sabit genişlik düzeninin amaçlarınıza hizmet edeceğini hissediyorum, ancak akışkan veya duyarlı bir düzen, yalnızca ekstra zorluk pahasına çok daha iyi bir kullanıcı deneyimi sağlayabilir.
% 100 değişken genişlik kullanmayla ilgili sorun, en küçük ve en büyük ekranlara sahip kullanıcılar için gerçekten iyi görünmemesi. Genellikle ana içerik bölümümü bir min/maks genişlik ayarlayarak norm için tasarlayacağım ve sonra önemli (sabit) içeriği ortalayacağım. Ardından, ekranı doldurmak için uzayan/daralan değişken genişlikli tasarım öğelerine sahip olabilirsiniz (önemli olmadığı için).
Bu şekilde, önemli bilgiler her zaman (umarım) birçok çözünürlükte iyi görünürken doğru şekilde görüntülenir.
Ben bir web tasarımcısı değilim, ama bence ideal olarak akıcı bir düzen yapmalısınız. Yani, otomatik olarak (ve dinamik olarak) geçerli genişliğe göre değişecek bir düzen. Bu şekilde, telefonlar gibi dar cihazlar ve çeşitli ekran genişliklerinin tümü güzel bir şekilde desteklenir.
Blog yazısı Son olarak, akıcı bir Hicksdesign tekniği açıklar ve domonstrate eder. Tarayıcı penceresi genişliğine göre seçilen 3 sütun, 2 sütun ve bir sütun düzenine sahiptir.
Satır uzunluğu çok uzun olduğunda metnin okunması zordur. Bu nedenle, herhangi bir değişken genişlikli site için, okunabilirliği korumak için herhangi bir metin alanı için en azından bir maksimum genişlik olması gerekir.
Değişken genişlikte bir sitenin iyi görünmesi çok daha zordur.
Üzerinde çalıştığım şeye bağlı, ancak hala sabit genişlikli sitelere yaslanma eğilimindeyim. Bunun nedeni, kullanıcı arayüzünü daha iyi kontrol etmenize ve ekran boyutları arasında tutarlı kalmanıza izin vermesidir. Birçok sıvı genişliği bölgesi, daha büyük/daha küçük monitörlerde (ne için tasarlandıklarına bağlı olarak) korkunç görünüyor.
Benim için genel kural:
İşte bazı artıları/eksileri büyük bir dökümü: http://www.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one- için-size /
Ne zaman yapabilirim,
px içinde ama
%
Değişken genişliğin hesaplanmasını veya daha geniş ekranlar için alternatif bir düzen sunmanızı öneririm.
Sabit bir genişliğe giderseniz - lütfen küçük olmadığından emin olun! Sarı sayfaları taramak gibi siteyi okumayı sağlayan 500 veya 600 piksel genişliğinde bazı siteler gördüm.
Uzun zamandır The Man In Blue'nun mevcut genişliğe göre alternatif düzenler sağlama yaklaşımının hayranıyım: canlı demoya bakın
Web sitenizin düzenini landscape yönünde tasarlayabilirsiniz. 1920x1080 çözünürlükleri giderek daha fazla geniş ekran monitör kullanılıyor (bu en yaygın olanıdır). Hiç dikey sabit düzen gösteren bir tarayıcı penceresini büyütmeyi denediniz mi? Ekranın arka plan renginiz/resminizle dolu üçte ikisi gibi.
Windows 7'nin bir pencereyi ekranın yarısına hızla yeniden boyutlandırmanıza ve bir kenara yapıştırmanıza izin vermesi güzel: WindowsKey + Left/Right
Değişken genişlik muhtemelen gitmenin yoludur, çünkü sabit bir genişlikle, bazı insanlar web sitenizin monitörleri için çok küçük olduğunu ve bazı insanlar monitörleri için çok büyük olduğunu düşünebilir.
Web sitesinin içeriğine bağlıdır. Çok fazla metin varsa, değişken genişlik metnin yayılabileceği ve kullanıcıların metni daha verimli okuyabileceği için daha mantıklıdır. Görünüşün daha önemli olduğu bir pazarlama web sitesine benziyorsa, sabit genişlikli bir web sitesinin harika görünmesini sağlamak çok daha zor olduğu için sabit genişlikle gidin.
Sabit boyutlu bir düzen tasarlarken yaptığınız varsayımlar, bazı kullanıcılarınız için yanlıştır. Herkes için tatmin edici bir deneyim sağlamanın tek yolu esnek, duyarlı bir tasarım kullanmaktır.
İki sorun (tekrardan kaçınmaya çalışmak):
Tarayıcının tam ekran olduğunu varsayamazsınız; ekran çözünürlüğünü rapor eden analitikler hikayenin sadece bir kısmını anlatır.
Kullanıcıların aynı yazı tipi boyutlarını kullandığını varsayamazsınız. Yazı tipi boyutunuzda okunamayacak kadar geniş olan satırlar, yazı tipi boyutunu birkaç çentik artırmak zorunda kalan biri için okunamayacak kadar geniş olmayabilir; tersine, yazı tipi ayarlarınıza göre sabit bir genişlik ayarladığınız sütun, kullanıcının satır başına beş kelime veya başka bir şey gördüğü anlamına gelebilir.
Tüm kullanıcılar tarafından kullanılabilmesi için web tasarımınızın yalnızca ve yalnızca tarayıcının size sağladığı alanı kullanması gerekir. Kendi deneyimini optimize etmek için kullanıcının tarayıcısını boyutlandırdığına güvenin; o zaman bu sınırlar içinde çalışmalısınız. Bu yaklaşım 30 "monitörlerde ve 7" tabletlerde (hatta mobil cihazlara özel bir sürüm yapmadıysanız telefonlarda bile) çalışır.