Çoğu tasarımcının web sayfasını oluştururken dikkate aldığı ilk şey, çözüm için tasarlamak. Bunun gerçekte ne anlama geldiği, tasarımınızın ne kadar geniş olması gerektiğine karar vermektir. Artık standart web sitesi genişliği diye bir şey yok.
Neden Çözünürlüğü Düşünmelisiniz?
1995'te standart 640 piksele 480 piksel monitörler mevcut en büyük ve en iyi monitörlerdi. Bu, web tasarımcılarının bu çözünürlükte 12 inç ila 14 inçlik bir monitörde web tarayıcılarında iyi görünen sayfaları maksimize etmeye odaklandıkları anlamına geliyordu.
Bu günlerde, 640'a 480 çözünürlük, çoğu web sitesi trafiğinin yüzde 1'inden daha azını oluşturuyor. İnsanlar, 1366'ya 768, 1600'e 900 ve 5120'ye 2880 dahil olmak üzere çok daha yüksek çözünürlüklü bilgisayarları kullanıyor. Çoğu durumda, 1366'ya 768 çözünürlüklü bir ekran için tasarım yapmak işe yarar.
Todya, çoğu insanın büyük, geniş ekran monitörleri vardır ve tarayıcı pencerelerini büyütmezler. Bu nedenle, 1366 pikselden daha geniş olmayan bir sayfa tasarlamaya karar verirseniz, sayfanız muhtemelen daha yüksek çözünürlüklü büyük monitörlerde bile çoğu tarayıcı penceresinde iyi görünecektir.
Tarayıcı Genişliği
Bir web sayfasının genişliğine karar verirken genellikle gözden kaçan bir sorun, müşterilerinizin tarayıcılarını ne kadar büyük tuttuğudur. Spesifik olarak, tarayıcılarını tam ekran boyutunda büyütüyorlar mı yoksa tam ekrandan daha küçük mü tutuyorlar?
En üst düzeye çıkaran veya yapmayan müşterileri hesaba kattıktan sonra, tarayıcı sınırlarını düşünün. Her web tarayıcısı, kullanılabilir alanı 800'den yaklaşık olarak küçülten kenarlarda bir kaydırma çubuğu ve kenarlıklar kullanır. 800 x 600 çözünürlükte 740 piksel veya daha az ve 1024 x 768'de ekranı kaplayan pencerelerde yaklaşık 980 piksel kararlar. Buna tarayıcı denir krom ve sayfa tasarımınız için kullanılabilir alandan uzaklaşabilir.
Sabit veya Sıvı Genişlik Sayfaları
Web sitenizin genişliğini tasarlarken düşünmeniz gereken tek şey gerçek sayısal genişlik değildir. Ayrıca, sahip olup olmayacağınıza da karar vermeniz gerekir. sabit genişlik veya sıvı genişlik. Başka bir deyişle, genişliği belirli bir sayıya mı (sabit) yoksa bir yüzdeye mi (sıvı) ayarlayacaksınız?
Sabit genişlik
Sabit genişlikli sayfalar tam olarak göründükleri gibidir. Genişlik belirli bir sayıda sabitlenir ve tarayıcı ne kadar büyük veya küçük olursa olsun değişmez. Okuyucularınızın tarayıcıları ne kadar geniş veya dar olursa olsun tasarımınızın tamamen aynı görünmesi gerekiyorsa bu yaklaşım iyi olabilir, ancak bu yöntem okuyucularınızı hesaba katmaz. Tarayıcıları tasarımınızdan daha dar olan kişiler yatay olarak kaydırmak zorunda kalacak ve geniş tarayıcıları olan kişilerin ekranda büyük miktarda boş alanı olacaktır.
Sabit genişlikli sayfalar oluşturmak için sayfa bölümlerinizin genişlikleri için belirli piksel numaralarını kullanın.
Sıvı Genişlik
Sıvı genişlikli sayfalar (bazen esnek genişlikli sayfalar) genişliği tarayıcı penceresinin genişliğine göre değişir. Bu strateji, müşterilere daha fazla odaklanan tasarımlar getiriyor. Sıvı genişlikteki sayfalarla ilgili sorun, okunmasının zor olabilmesidir. Eğer tarama uzunluğu bir metin satırının 10 ila 12 kelimeden uzun veya 4 ila 5 kelimeden kısa olması, okunması zor olabilir. Bu, tarayıcı pencereleri büyük veya küçük olan okuyucuların sorun yaşadığı anlamına gelir.
Esnek genişlikte sayfalar oluşturmak için yüzdeleri veya ems sayfa bölümlerinizin genişlikleri için. CSS ile tanışın maksimum genişlik Emlak. Bu özellik, yüzde olarak bir genişlik ayarlamanıza, ancak daha sonra insanların okuyamayacağı kadar büyük olmaması için sınırlandırmanıza izin verir.
CSS Medya Sorguları
Bugünlerde en iyi çözüm, onu görüntüleyen tarayıcının genişliğine göre ayarlanan bir sayfa oluşturmak için CSS medya sorguları ve duyarlı tasarım kullanmaktır. Duyarlı bir web tasarımı, 5120 piksel genişliğinde veya 320 piksel genişliğinde görüntüleseniz de çalışan bir web sayfası oluşturmak için aynı içeriği kullanır. Farklı boyuttaki sayfalar farklı görünür, ancak aynı içeriği içerirler. CSS3'teki medya sorgusu ile, her alıcı cihaz sorguyu kendi boyutuyla yanıtlar ve stil sayfası o belirli boyuta göre ayarlanır.