World Wide Web en başından bağımsız olacak şekilde tasarlandı. Hangi donanıma sahip olduğunuz önemli değildir. Cihazınızın hangi işletim sistemini kullandığı önemli değildir. İnternete bağlanabildiğiniz sürece World Wide Web'e erişebilirsiniz.
Web'in ilk zamanlarında çoğu insan masaüstü bilgisayar kullanıyordu. Günümüzde web; masaüstü bilgisayarlarda, dizüstü bilgisayarlarda, tabletlerde, katlanabilir telefonlarda, buzdolaplarında ve arabalarda kullanılabilmektedir. Kullanıcılar haklı olarak hangi cihazı kullanırlarsa kullansınlar web sitelerinin güzel görünmesini bekler. Duyarlı tasarım bunu mümkün kılar.
Duyarlı tasarım, web sitesi tasarlamanın ilk yaklaşımı değildir. Duyarlı tasarımdan önceki yıllarda, web tasarımcıları ve geliştiricileri birçok farklı teknik denemişti.
Sabit genişlikli tasarım
Web'in ilk popüler olduğu 1990'ların başlarında çoğu monitör 640 piksel genişliğinde ve 480 piksel yüksekliğinde ekran boyutlarına sahipti. Bunlar, şu anda sahip olduğumuz düz likit kristal ekranlardan farklı olarak, dışbükey katot ışın tüpleriydi.
İlk web tasarımının gelişim dönemlerinde, 640 piksel genişliğinde web sayfaları tasarlamak güvenli bir tercihti. Ancak, telefon ve kamera gibi diğer teknolojiler minyatür hale gelirken, ekranlar büyüyor (ve sonunda daha düz hale geliyordu). Çok geçmeden çoğu ekran 800x600 piksel boyutundaydı. Web tasarımları da buna göre değiştirildi. Tasarımcılar ve geliştiriciler, 800 pikselin güvenli bir varsayılan seçenek olduğunu varsaymaya başladılar.
Sonra ekranlar yeniden büyüdü. 1024x768 varsayılan oldu. Bu süreç, web tasarımcıları ile donanım üreticileri arasında bir silah yarışına benziyordu.
640, 800 veya 1024 piksel olması fark etmeksizin, tasarlanacak belirli bir genişliği seçmeye sabit genişlikli tasarım denir.
Düzeniniz için sabit bir genişlik belirtirseniz, düzeniniz yalnızca bu belirli genişlikte iyi görünür. Sitenize gelen bir ziyaretçi seçtiğiniz genişlikten daha geniş bir ekrana sahipse ekranda boş bir alan olur. Alanı daha eşit bir şekilde dağıtmak için sayfalarınızın içeriğini ortalayabilirsiniz (bir tarafında boş alan bulundurmak yerine), ancak kullanılabilir alandan tam olarak yararlanamazsınız.
Benzer şekilde, bir ziyaretçi seçtiğiniz genişlikten daha dar bir ekranla ulaşırsa 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, içeriğin tamamını görmek için tüm sayfayı sola ve sağa hareket ettirmesi gerekir.
Sıvı düzenler
Tasarımcıların çoğu sabit genişlikli düzenler kullanırken, bazıları düzenlerini esnek hale getirmeyi seçti. Düzenleriniz için sabit genişlikler kullanmak yerine, sütun genişlikleriniz için yüzde değerleri kullanan esnek bir düzen oluşturabilirsiniz. Bu tasarımlar, yalnızca belirli bir boyuta düzgün görünen sabit genişlikli bir düzene göre daha fazla durumda işe yarar.
Bunlara sıvı düzenler denir. Ancak likit düzen çok çeşitli genişliklerde iyi görünecek olsa da uç noktalarda kötüleşmeye başlayacaktır. Geniş ekranda düzen daha gerilmiş görünür. Dar ekranda düzen dar bir şekilde görünür. 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 üzerindeki herhangi bir boyutta, sabit genişlikli bir düzende karşılaşacağınız sorunların aynılarıyla karşılaşırsınız.
Geniş bir ekranda ise, boşa giden boş bir alan olur.
Dar bir ekranda, kullanıcının her şeyi görmek için tüm sayfayı sola ve sağa hareket etmesi gerekir.
liquid kelimesi bu tür bir düzeni tanımlamak için kullanılan terimlerden yalnızca biridir. Bu tür tasarımlar, akış düzeni veya esnek düzenler olarak da adlandırılıyordu. Kullanılan terminoloji teknik kadar akıcıydı.
Küçük ekranlar
Web 21. yüzyılda büyümeye ve büyümeye devam etti. Monitörler de öyle. Ancak tüm masaüstü cihazlardan daha küçük yeni ekranlar hayatımıza girdi. Tam işlevli web tarayıcılarına sahip cep telefonlarının ortaya çıkmasıyla, tasarımcılar bir ikilemle karşı karşıyaydı. Tasarımlarının masaüstü bilgisayarda ve cep telefonunda iyi görünmesini nasıl sağlayabilirler? İçeriklerini, 240 piksel kadar küçük ve binlerce piksel genişliğindeki ekranlar için biçimlendirmenin bir yolunu bulmaları gerekiyordu.
Ayrı siteler
Seçeneklerden biri, mobil ziyaretçiler için ayrı bir alt alan oluşturmaktır. Ancak bu durumda iki ayrı kod tabanını ve tasarımı yönetmeniz gerekir. Ayrıca, ziyaretçileri mobil cihazlarda yönlendirmek için güvenilir olmayan ve kolayca adres sahteciliği yapılabilen kullanıcı aracısı yoklama işlemi yapmanız gerekir. Chrome, gizlilik nedeniyle kullanıcı aracısı dizesini kullanımdan kaldıracaktır. Ayrıca, mobil olanla mobil olmayan arasında net bir çizgi yoktur. Tablet cihazları hangi siteye gönderiyorsunuz?
Uyarlanabilir düzenler
Farklı alt alanlarda ayrı sitelere sahip olmak yerine, iki veya üç sabit genişlikli düzene sahip tek bir siteniz olabilir.
Medya sorguları CSS'de ilk kez kullanıma sunulduğunda, düzenleri daha esnek hale getirmenin önünü açtılar. Ancak birçok geliştirici, en rahat sabit genişlikli düzenlerdi. Tekniklerden biri, belirtilen genişliklerdeki 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 sunmasını sağladı, ancak bu boyutlar arasında görüntülendiğinde tasarım hiçbir zaman pek iyi görünmüyordu. Fazla alan sorunu devam ediyordu, ancak sabit genişlikli bir düzendeki kadar kötü değildi.
CSS medya sorgularını kullanarak, kullanıcılara tarayıcı genişliklerine en yakın düzeni verebilirsiniz. Ancak cihaz boyutlarının çeşitliliği göz önünde bulundurulduğunda, düzenin çoğu kullanıcı için mükemmel olmaktan uzak görünme ihtimali vardır.
Duyarlı web tasarımı
Uyarlanabilir düzenler medya sorgularının ve sabit genişlikli düzenlerin karışımıysa duyarlı web tasarımı, medya sorguları ile likit düzenlerin karışımıdır.
Bu terim, Ethan Marcotte tarafından 2010 yılında A List Apart'taki bir makalede türetilmiştir.
Ethan, duyarlı tasarım için üç kriter tanımladı:
- Akışkan ızgaralar
- Akışkan medya
- Medya sorguları
Duyarlı bir sitenin düzeni ve resimleri, tüm cihazlarda güzel görünür. Ancak bir sorun vardı.
viewport için bir meta öğesi
Cep telefonlarındaki tarayıcılar, daha geniş ekranlar için sabit genişlikli düzenlerle tasarlanmış web siteleriyle çalışmak zorundaydı. Varsayılan olarak, mobil tarayıcılar 980 pikselin kullanıcıların tasarım için tasarladığı genişlik olduğunu varsayıyordu (ve bu yanlış değildi). Dolayısıyla, likit düzen kullansanız bile tarayıcı 980 piksellik bir genişlik uygular ve ardından, 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.
Bu işlemi web sayfasının head bölümündeki 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 işlem, tarayıcıya, web sitesinin genişliğinin cihazın genişliğiyle aynı olduğunu varsaymasını
(web sitesinin genişliğinin 980 piksel olduğunu varsaymak yerine) bildirir.
İkinci değer initial-scale=1.
Bu, tarayıcıya ne kadar veya az ölçeklendirme yapılacağını bildirir.
Duyarlı bir tasarımda, tarayıcının hiç ölçeklendirme yapmasını istemezsiniz.
Bu meta öğesi kullanıldığında web sayfalarınız duyarlı olmaya hazır hale gelir.
Modern duyarlı tasarım
Bugün, görüntü alanı boyutlarının çok ötesinde duyarlı web siteleri oluşturabiliyoruz.
Medya özellikleri, geliştiricilerin kullanıcı tercihlerine erişmesini sağlar 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ı almalarını sağlar.
Öğrendiklerinizi sınayın
Duyarlı web tasarımı bilginizi test edin
2021'de web sayfalarını sabit genişlikte tasarlamak güvenli bir yaklaşım olur mu?
Sıvı düzenler genellikle hangi ekran boyutlarında zorlanır?
Duyarlı tasarımın orijinal üç kriteri aşağıdakilerden hangisidir?
Duyarlı tasarım, heyecan verici ve hızla büyüyen bir olasılıklar dünyasıdır. Bu kursun geri kalanında, bu teknolojileri ve bunları herkes için güzel, duyarlı web siteleri oluşturmak üzere nasıl kullanacağınızı öğreneceksiniz.