Duyarlı (Responsive) Web Tasarım Nedir?
Duyarlı web tasarım nedir, nasıl çalışır? Esnek ızgara, kırılım noktaları ve mobil öncelikli yaklaşımı örnekle öğrenin; sık yapılan hataları görün.
Duyarlı web tasarım nedir?
Duyarlı web tasarım (responsive web design), tek bir web sitesinin arayüzünün ekran boyutuna, çözünürlüğüne ve yönüne göre kendini otomatik olarak uyarlamasıdır. Aynı adres, aynı içerik ve aynı kod tabanı telefonda, tablette ve masaüstünde kullanıcıya uygun bir yerleşimle sunulur.
Kavram, ayrı bir mobil site (örneğin m. ile başlayan alt alan adı) yaklaşımının yerini almıştır. İçerik ve bakım tek yerde yapıldığı için tutarlılık korunur. Yaklaşım üç temel teknikle uygulanır: esnek ızgaralar, esnek görseller ve medya sorguları.
Üç temel teknik
Duyarlı tasarımın çalışma mantığı şu parçalara dayanır:
- Esnek yerleşim: Genişlikler sabit piksel yerine yüzde, fr birimi ya da esnek kutu ve ızgara düzenleriyle tanımlanır. Kolonlar ekran daraldıkça alt alta iner.
- Esnek görsel ve medya: Görseller kapsayıcısına göre ölçeklenir; farklı ekran yoğunluklarına uygun boyutlar sunulur ve gereksiz büyük dosya mobil ağa yüklenmez.
- Medya sorguları ve kırılım noktaları: Ekran genişliği belirli bir değeri geçtiğinde yerleşimi değiştiren CSS kuralları yazılır. Kırılım noktaları cihaz modeline değil, içeriğin bozulduğu genişliğe göre belirlenmelidir.
Üstüne tarayıcının sayfayı doğru ölçekte göstermesini sağlayan viewport ayarı gelir; bu ayar olmadan mobil tarayıcı sayfayı masaüstü genişliğinde çizip küçültür.
Mobil öncelikli yaklaşım
Mobil öncelikli (mobile-first) yaklaşımda tasarım ve kod önce en dar ekran için yazılır, ekran genişledikçe kurallar eklenir. Bunun iki faydası vardır. Birincisi, dar ekranda neyin gerçekten önemli olduğu sorusunu en başta sormanızı zorlar; içerik önceliklendirilir. İkincisi, mobil cihazlara yalnızca gereken stil yüklenir, performans korunur.
Tersine, masaüstü öncelikli yazılan sitede sonradan mobile uyarlama sırasında çoğu zaman bileşenler sıkıştırılır, gizlenir ya da yeniden yazılır. Bu da hem bakımı hem kullanıcı deneyimini zorlaştırır.
Küçük bir örnek
Örneğin bir eğitim kataloğu sayfası düşünün. Masaüstünde çok kolonlu kart ızgarası, solda filtre paneli ve üstte yatay menü bulunuyor. Aynı sayfa telefonda tek kolonlu kart listesine dönüşür; filtre paneli gizlenip "Filtrele" düğmesiyle açılan bir çekmeceye taşınır, yatay menü hamburger menüsüne çevrilir.
Düğmeler parmakla rahat dokunulabilecek boyuta büyür, form alanları tam genişliğe yayılır ve görseller ekrana göre uygun boyutta yüklenir. İçerik değişmemiştir; değişen yalnızca sunuş biçimi ve etkileşim düzenidir.
Duyarlı, uyarlanabilir (adaptive) ve ayrı mobil site
Uyarlanabilir (adaptive) tasarım, belirli cihaz sınıfları için önceden hazırlanmış sabit düzenler arasından uygun olanı seçer; duyarlı tasarım ise düzeni sürekli ve akışkan biçimde ayarlar. Adaptive daha fazla kontrol sunar ama her yerleşim ayrı bakım gerektirir. Ayrı mobil site ise iki kod tabanı, iki içerik akışı ve yinelenen adresler demektir.
Sık görülen yol, akışkan yerleşimi temel alıp gerektiğinde bileşen bazında uyarlama yapan karma bir yaklaşımdır. Arama motorlarının mobil uyumlu siteleri değerlendirmesi de tek adresli yaklaşımı kolaylaştırır.
Sık yapılan hatalar
En yaygın hata kırılım noktalarını popüler cihaz boyutlarına sabitlemektir; yeni cihazlar çıktıkça yerleşim bozulur. Dokunmatik hedefleri küçük bırakmak, hover'a bağımlı etkileşimler tasarlamak ve mobilde yatay kaydırma oluşturan sabit genişlikli öğeler diğer sık hatalardır.
Performans da çoğu zaman unutulur: masaüstü için hazırlanmış büyük görselin telefona olduğu gibi gönderilmesi sayfayı yavaşlatır. Test için tek bir tarayıcıda pencere küçültmek yetmez; gerçek cihazlarda, farklı yönlerde ve farklı yazı tipi boyutlarında deneme yapılmalıdır.
Mindset programlarında duyarlı tasarım
Mindset kataloğundaki Responsive ve Çoklu Ekran Arayüz Tasarımı eğitimi responsive düşüncenin temellerini, esnek yerleşim sistemlerini, kırılım noktası stratejisini, zor bileşenlerin uyarlanmasını ve test ile devir sürecini işler. Responsive ve Mobil Öncelikli Arayüz Tasarımı eğitimi ise mobil öncelikli yaklaşım, konteyner sorguları, dokunmatik etkileşim ve form deneyimi konularına odaklanır.
İlgili Mindset programı
Responsive ve Çoklu Ekran Arayüz Tasarımı
Sık sorulan sorular
Responsive tasarım ile mobil uyumlu tasarım aynı mıdır?
Günlük dilde birbirinin yerine kullanılır. Mobil uyumlu, sitenin mobilde kullanılabilir olması sonucunu anlatır. Responsive tasarım ise bu sonucu esnek yerleşim ve medya sorgularıyla sağlayan teknik yaklaşımın adıdır.
Kırılım noktası (breakpoint) nedir?
Kırılım noktası, yerleşimin değişmesi için belirlenen ekran genişliği eşiğidir. Örneğin kolonların alt alta inmesi ya da menünün sadeleşmesi bu eşiklerde tetiklenir. En sağlıklı yöntem, belirli cihazlara değil içeriğin bozulduğu genişliklere göre belirlemektir.
Konteyner sorgusu medya sorgusundan nasıl ayrılır?
Medya sorgusu tüm görüntü alanının genişliğine bakar. Konteyner sorgusu ise bileşenin bulunduğu kapsayıcının genişliğine bakar. Böylece aynı bileşen bir kenar çubuğunda ya da ana alanda yerleşimine göre farklı davranabilir.
Duyarlı tasarım SEO'yu etkiler mi?
Dolaylı olarak evet. Tek adres ve tek içerik, mobil için ayrı sürümlerin yarattığı yinelenen içerik sorunlarını önler. Ayrıca mobilde kullanılabilir ve hızlı açılan sayfalar kullanıcı deneyimi ölçütlerini iyileştirir.
Duyarlı tasarım öğrenmeye nereden başlanır?
Önce HTML ve CSS temelleri, ardından esnek kutu ve ızgara düzenleri ile medya sorguları çalışılır. Sonra küçük bir sayfayı önce dar ekran için kurup genişleterek mobil öncelikli yazma alışkanlığı kazanmak iyi bir uygulamadır.