Tasarımcıların çoğu web sayfalarını oluştururken göz önünde bulundukları ilk şey, tasarlanması gereken çözünürlük . Bu gerçekten ne tutar, tasarımınızın ne kadar geniş olması gerektiğine karar vermek. Standart bir web sitesi genişliği olarak artık böyle bir şey yok.
Neden Çözünür?
1995 yılında, standart 640x480 çözünürlük monitörleri 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ç monitörde en üst düzeye çıkarılmış web tarayıcılarında iyi görünen sayfalar oluşturmaya odaklandığı anlamına geliyordu.
Bugünlerde 640x480 çözünürlük, çoğu web sitesi trafiğinin yüzde 1'inden daha azını oluşturuyor. İnsanlar 1366x768, 1600x900 ve 5120x2880 dahil olmak üzere bilgisayarları çok daha yüksek çözünürlüklerde kullanıyor. Çoğu durumda, 1366x768 çözünürlüklü bir ekran için tasarlanıyor.
Çözünürlük hakkında çok fazla endişelenmemiz gereken web tasarım tarihinin bir noktasındayız. Çoğu kullanıcının büyük, geniş ekranlı monitörleri vardır ve tarayıcı pencerelerini en üst düzeye çıkarmazlar. Dolayısıyla, 1366 pikselden daha geniş olmayan bir sayfa tasarlamaya karar verirseniz, sayfanız büyük olasılıkla tarayıcı pencerelerinin çoğunda yüksek çözünürlükteki büyük monitörlerde bile iyi görünecektir.
Tarayıcı Genişliği
“Tamam, sayfalarımı 1366 piksel genişliğinde yapacağımı” düşünmeden önce, bu hikayenin daha fazlası var. Bir web sayfasının genişliğine karar verirken çoğu zaman göz ardı edilen sorun, müşterilerinizin tarayıcılarını ne kadar büyük tuttuğudur. Özellikle, tarayıcılarını tam ekran boyutta en üst düzeye çıkarırlar veya tam ekrandan daha küçük tutarlar mı?
Şirket standartlarında 1024x768 çözünürlükte bir dizüstü bilgisayar kullanan tüm çalışanların tek bir gayri resmi anketinde, iki kişi tüm uygulamalarını en üst düzeye çıkardı. Diğerleri çeşitli nedenlerle açık farklı büyüklükteki pencerelere sahipti. Bu, şirketin intranetini 1024 piksel genişliğinde tasarlıyorsanız, kullanıcıların yüzde 85'inin tüm sayfayı görmek için yatay olarak kaydırılması gerektiğini gösterir.
En üst düzeye çıkan veya olmayan müşteriler için hesap açtıktan sonra, tarayıcı sınırlarını düşünün. Her web tarayıcısında, mevcut alanı 800 ila 740 piksel veya daha az 800x600 çözünürlükte ve 1024x768 çözünürlükte maksimum pencerelerde 980 pikselle küçülten bir kaydırma çubuğu ve kenarları vardır. Buna tarayıcı “krom” denir ve sayfa tasarımınız için kullanılabilir alandan uzaklaşabilir.
Sabit veya Sıvı Genişlik Sayfaları
Gerçek sayısal genişliği, web sitenizin genişliğini tasarlarken düşünmeniz gereken tek şey değildir. Ayrıca, sabit genişliğe veya sıvı genişliğine sahip olup olmayacağınıza da karar vermelisiniz. Diğer bir deyişle, genişliği belli bir sayıya (sabit) mi yoksa yüzdeye mi (sıvıya) mi ayarlayacaksınız?
Sabit genişlik
Sabit genişlik sayfaları tam olarak aynı seslerdir. Genişlik belirli bir sayıya sabitlenir ve tarayıcının ne kadar büyük veya küçük olursa olsun değişmez. Bu, eğer okuyucunuzun tarayıcıları ne kadar geniş veya dar olursa olsun, tam olarak aynı görünmek için tasarımınıza ihtiyacınız varsa iyi olabilir, ancak bu yöntem okuyucularınızı dikkate almaz. Tasarımlarınızdan daha dar tarayıcılara sahip kullanıcılar yatay olarak kaydırmalı 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şliği
Sıvı genişliği sayfaları (bazen esnek genişlik sayfaları olarak adlandırılır), tarayıcı penceresinin ne kadar geniş olduğuna bağlı olarak genişlik olarak değişir. Bu, müşterilerinize daha fazla odaklanan sayfalar tasarlamanıza olanak tanır. Sıvı genişlik sayfalarındaki problem, okunması zor olabilir. Bir metin satırının tarama uzunluğu 10 ila 12 kelimeden uzunsa veya 4 ila 5 kelimeden kısasa, okunması zor olabilir. Bu, büyük veya küçük tarayıcı pencereleri olan okuyucuların sorun yaşadığı anlamına gelir.
Esnek genişlikli sayfalar oluşturmak için sayfa bölümlerinizin genişlikleri için yüzdelerini veya em'leri kullanın. Kendinizi CSS max-width özelliğini de tanımanız gerekir. Bu özellik, yüzde olarak bir genişlik ayarlamanıza olanak tanır, ancak daha sonra bunu sınırlayamaz, böylece insanlar bunu okuyamaz.
Ve Kazanan: CSS Medya Sorguları
Bugünün en iyi çözümü, CSS medya sorgularını ve duyarlı tasarımı kullanarak, görüntüleyen tarayıcı genişliğini ayarlayan bir sayfa oluşturmak. Duyarlı bir web tasarımı, 5120 piksel genişliğinde veya 320 piksel genişliğinde görüntüleyip görüntülemediğinizde çalışan bir web sayfası oluşturmak için aynı içeriği kullanır. Farklı boyutlu sayfalar farklı görünüyor, ancak aynı içeriği barındırıyorlar. CSS3'teki medya sorgusuyla, her alıcı cihaz sorguyu büyüklüğüyle yanıtlar ve stil sayfası o boyutlara göre ayarlanır.