En baştan itibaren, World Wide Web bağımsız olacak şekilde tasarlandı. Hangi donanıma sahip olduğunuz önemli değildir. Cihazınızda hangi işletim sisteminin çalıştığı önemli değildir. İnternet'e bağlanabildiğiniz sürece World Wide Web'e de erişebilirsiniz.
Web'in ilk günlerinde çoğu kişi masaüstü bilgisayar kullanıyordu. Bugünlerde web; masaüstü bilgisayarlarda, dizüstü bilgisayarlarda, tabletlerde, katlanabilir telefonlarda, buzdolabında ve arabalarda kullanılabiliyor. İnsanlar hangi cihazı kullanırlarsa kullansınlar web sitelerinin güzel görünmesini haklı olarak bekler. Duyarlı tasarım bunu mümkün kılar.
Duyarlı tasarım, web sitesi tasarlamadaki ilk yaklaşım değildir. Duyarlı tasarımdan önceki yıllarda, web tasarımcıları ve geliştiriciler birçok farklı teknik denediler.
Sabit genişlikli tasarım
1990'ların başında, web ilk kez popüler hale geldiğinde çoğu monitörün ekran boyutları 640 piksel genişliğinde ve 480 piksel yüksekliğindeydi. Bunlar dışbükey katot ışını tüpleriydi Düz sıvı kristal ekranlar gibi değil.
Web tasarımının ilk günlerinde, 640 piksel genişliğinde web sayfaları tasarlamak güvenli bir seçimdi. Ancak telefon ve kamera gibi diğer teknolojiler minyatürleştiriliyordu. ekranlar büyüyordu (ve sonunda daha düz hale geliyordu). Çok eskiden çoğu ekran boyutu 800 x 600 pikseldi. Web tasarımları buna göre değişti. Tasarımcılar ve geliştiriciler 800 pikselin güvenli bir varsayılan seçenek olduğunu düşünmeye başladılar.
Sonra ekranlar tekrar büyüdü. 1024x768 varsayılan olarak ayarlandı. Bu, web tasarımcılarıyla donanım üreticileri arasında bir silah yarışı gibi görünüyordu.
640, 800 veya 1024 piksel olması fark etmeksizin tasarımı için belirli bir genişlik seçmek, sabit genişlikli tasarım olarak adlandırılıyordu.
Düzeniniz için sabit bir genişlik belirtirseniz düzeniniz yalnızca ilgili genişliğe iyi görünür. Sitenize gelen bir ziyaretçi seçtiğiniz genişlikten daha geniş bir ekrana sahipse ekranda boşa alan olur. Alanı daha eşit bir şekilde dağıtmak için sayfalarınızın içeriğini ortalayabilirsiniz (bir tarafta boş alan olması yerine) ancak yine de kullanılabilir alandan tam olarak yararlanamazsınız.
Benzer bir şekilde, bir ziyaretçi seçtiğiniz genişlikten daha dar bir ekranla gelirse içeriğiniz yatay olarak sığmaz. Tarayıcı bir tarama çubuğu (kaydırma çubuğunun yatay eşdeğeri) oluşturur ve kullanıcının tüm içeriği görebilmek için tüm sayfayı sola ve sağa hareket ettirmesi gerekir.
Sıvı düzenleri
Tasarımcıların çoğu sabit genişlikli düzenler kullanırken bazıları sayfa düzenini esnek hale getirmeyi tercih etti. Düzenleriniz için sabit genişlikler kullanmak yerine, sütun genişlikleri için yüzde değerleri kullanarak esnek bir düzen oluşturabilirsiniz. Bu tasarımlar, yalnızca belirli bir boyutta düzgün görünen sabit genişlikli düzenden daha fazla durumda işe yarar.
Bunlara sıvı yerleşim adı veriliyordu. Sıvı bir tasarım, çeşitli genişliklerde iyi görünse de uç noktalarda kötüleşmeye başlayacaktır. Geniş ekranda, düzen genişletilmiş görünüyor. Dar bir ekranda düzen bozuk görünüyor. Her iki senaryo da ideal değildir.
Düzeniniz için min-width ve max-width kullanarak bu sorunları azaltabilirsiniz.
Ancak minimum genişliğin altında veya maksimum genişliğin üzerinde olduğunda sabit genişlikli düzenle karşılaşabileceğiniz sorunların aynısını yaşarsınız.
Geniş bir ekranda kullanılmayan alan boşa gider.
Dar bir ekranda kullanıcının her şeyi görmek için tüm sayfayı sola ve sağa hareket ettirmesi gerekir.
Sıvı kelimesi, bu tür bir düzeni açıklamak için kullanılan terimlerden yalnızca biridir. Bu tür tasarımlar, akış düzeni veya esnek yerleşim olarak da adlandırılıyordu. Terminoloji de teknik kadar akıcıydı.
Küçük ekranlar
21. yüzyılda web büyümeye ve büyümeye devam etti. Monitörler de öyle. Ancak tüm masaüstü cihazlardan daha küçük ekranlarla kullanıma sunuldu. Tüm özelliklere sahip web tarayıcılarına sahip cep telefonlarının kullanıma sunulmasıyla birlikte tasarımcılar bir ikileyle karşı karşıya kaldı. Tasarımlarının masaüstü bilgisayarda ve cep telefonunda iyi görünmesini nasıl sağlayabilirler? 240 piksel kadar küçük ve binlerce piksel genişliğinde ekranlar için içeriklerini biçimlendirmenin bir yolunu arıyorlardı.
Ayrı siteler
Seçeneklerden biri, mobil ziyaretçiler için ayrı bir alt alan adı oluşturmaktır. Ancak bu durumda iki ayrı kod tabanı ve tasarımı kullanmanız gerekir. Mobil cihazlarda ziyaretçileri yeniden yönlendirmek için kullanıcı aracısı yoklaması, kolayca adres sahteciliğine maruz kalabilir. Chrome, gizlilik nedeniyle kullanıcı aracısı dizesini kullanımdan kaldıracak. Ayrıca, mobil cihazlar ile mobil olmayanlar arasında net bir çizgi yoktur. Tablet cihazları hangi siteye gönderiyorsunuz?
Uyarlanabilir düzenler
Farklı alt alan adlarında ayrı siteler oluşturmak yerine, iki veya üç sabit genişlikli düzene sahip tek bir siteniz olabilir.
Medya sorguları CSS'ye ilk sunulduğunda, düzenleri daha esnek hale getirmenin kapılarını araladılar. Ancak pek çok geliştirici hâlâ sabit genişlikli düzenler üretmekte en rahat olanı elde etti. Tekniklerden biri, belirli genişliklerde birkaç sabit genişlikli düzen arasında geçiş yapmayı içeriyordu. Bazıları buna uyarlanabilir tasarım diyor.
Uyarlanabilir tasarım, tasarımcıların birkaç farklı boyutta iyi görünen düzenler sağlamasına olanak tanıdı. Ancak tasarım bu boyutlar arasında görüntülendiğinde hiçbir zaman doğru görünmedi. Sabit genişlikli düzen kadar kötü olmasa da fazla alan sorunu devam ediyordu.
CSS medya sorgularını kullanarak, kullanıcılara tarayıcı genişliğine en yakın düzeni verebilirsiniz. Ancak cihaz boyutlarının çok çeşitli olması nedeniyle, ekran düzeni büyük olasılıkla çoğu kullanıcıya pek mükemmel olmayacaktır.
Duyarlı web tasarımı
Uyarlanabilir düzenler, medya sorgularının ve sabit genişlikli düzenlerin bir karışımıysa duyarlı web tasarımı, medya sorguları ile sıvı düzenlerin birleşimidir.
Bu terim, Ethan Marcotte tarafından A List Apart'ta yayınlanan makale:
Ethan, duyarlı tasarım için üç kriter tanımladı:
- Sıvı ızgaralar
- Değişken medya
- Medya sorguları
Duyarlı bir sitenin düzeni ve resimleri her cihazda iyi görünür. Ama bir sorun vardı.
viewport için meta öğesi
Cep telefonlarındaki tarayıcılar, daha geniş ekranlar için sabit genişlikli sayfa düzenleri ile tasarlanmış web siteleriyle uğraşmak durumundaydı. Varsayılan olarak mobil tarayıcılar, kullanıcılar için 980 piksel genişliğinin tasarlandığını (ve bu genişliğin yanlış olmadığını) varsayıyordu. Yani likit düzeni kullansanız bile tarayıcı 980 piksellik bir genişlik uygular ve daha sonra, oluşturulan web sayfasını ekranın gerçek genişliğine kadar ölçeklendirir.
Duyarlı tasarım kullanıyorsanız tarayıcıya bu ölçeklendirmeyi yapmamasını söylemeniz gerekir.
Bunu, web sayfasının head içindeki bir meta öğesiyle yapabilirsiniz:
<meta name="viewport" content="width=device-width, initial-scale=1">
Virgülle ayrılmış iki değer vardır.
İlki width=device-width.
Bu seçenek, tarayıcıya, web sitesinin genişliğinin cihazın genişliğiyle aynı olduğunu varsaymasını söyler
(web sitesinin genişliğinin 980 piksel olduğu varsaymak yerine).
İkinci değer initial-scale=1.
Bu, tarayıcıya ölçeklendirmenin ne kadar veya az olacağını bildirir.
Duyarlı bir tasarımda, tarayıcının hiç ölçeklendirme yapmasını istemezsiniz.
Bu meta öğesi yerleştirildiğinde, web sayfalarınız duyarlı olmaya hazır olur.
Modern, duyarlı tasarım
Günümüzde, görüntü alanı boyutlarının çok ötesinde duyarlı web siteleri yapabiliyoruz.
Medya özellikleri, geliştiricilerin kullanıcı tercihlerine erişmesine olanak tanır ve özelleştirilmiş deneyimler sunar.
Kapsayıcı sorguları, bileşenlerin kendi duyarlı bilgilerine sahip olmasını sağlar.
picture öğesi, tasarımcıların ekran oranlarına göre sanat yönü kararları almasına yardımcı olur.
Öğrendiklerinizi sınayın
Duyarlı web tasarımı bilginizi test edin
2021'de web sayfalarını sabit genişlikte tasarlamak mantıklı mı?
Sıvı düzenler genellikle hangi ekran boyutlarında sorun yaşanır?
Duyarlı tasarımın ilk üç kriteri aşağıdakilerden hangileridir?
Duyarlı tasarım, heyecan verici ve büyüyen bir olasılıklar dünyasıdır. Bu kursun geri kalanında bu teknolojiler hakkında bilgi edinecek ve bunları kullanarak güzel, duyarlı web siteleri oluşturabilirsiniz.