Responsive
web tasarım, duyarlı, uyumlu web tasarım anlamına da gelir. Son yıllarda adını
sıkça duyduğumuz bu web tasarım şekli ilk olarak 2010 yılında ortaya çıkmıştır.
Temel olarak
responsive tasarım; Tasarımın farklı ekran çözünürlüklerine göre uyum
sağlamasıdır. Responsive olarak yapılmış bir web sitesinin tasarımı masaüstü
bir bilgisayarda farklı görünürken ekran boyutu daha küçük olan mobil bir
cihazda farklı görünecektir.
Responsive tasarım
sayesinde masaüstü, tablet ve akıllı telefonlarda platform bağımsız bir şekilde
uygun tasarımlar yapılabilir. Siteye mobilden girildiğinde tasarım farklılaşır,
menüler telefonlara uyum sağlayacak şekilde küçülerek üzerine dokunulduğunda
açılacak hale gelir, fontlar ekranı büyütmeden okunacak hale gelirken, resimler
de ekran çözünürlüğüne göre esneyerek uygun şekilde görüntülenir. Frame ve
diğer elementlerin de çözünürlüğe göre değişmesi sağlanır. Gerekirse gerçek
tasarımda bulunan bazı modüller gizlenir. Burada farklı cihazların ekran
çözünürlüklerini bilinmesi önem taşır. Genellikle;
Masaüstü, Notebook
için 1024px ve üzeri
Tabletler için 768px – 1023px
Akıllı telefonların yatay tasarımları ve bazı tabletler için. 480px – 767px
Akıllı telefonlar için: 479px ve altı
Bu çözünürlüklere göre
css dosyasında örneğin 480px ve daha düşük ekranlar için;
@media screen and
(max-width: 480px)
Kodu yazılarak css dosyası bu çözünürlük için düzenlenir.
Ayrıca Sayfanın
responsive olması için
<meta name="viewport"
content="width=device-width; initial-scale=1.0">
kodunun mutlaka head
tagları arasında olması gereklidir.
Responsive tasarım
sayesinde ayrı bir subdomain ya da sanal dizinde mobil site yapmaya gerek
kalmaz. Herhangi bir yönlendirmeye gerek kalmaz. Ayrı bir url’ye gerek
kalmaması arama motoru performansı açısından avantaj sağlar. Url yapısı ve
sitenin indexlenmesi mobil site yapmaya göre daha da kolaylaşır.
Bilindiği gibi web sitelerine mobil cihazlardan
girildiğinde ziyaretçiler siteyi görüntülemekte ve gezmekte güçlük yaşarlar.
Eğer girdikleri site responsive yada mobil site değilse, okumak istedikleri
alanı ancak zoom yaparak, kısıtlı bir alanı görüntüleyebilirler ve kulanım
zorluğu çekerler. Site menülerini gezmekte oldukça zordur ve menüler mobil
uyumlu olmadığı için genellikle gitmek istedikleri linki bulamayabilirler.
Responsive sitelere mobil cihazlardan girildiğinde
menüler şekil değiştirip genellikle üstten açılacak şekilde kullanımı kolay bir
versiyona dönüşür. Fontlar ve imajlar alt alta gelerek ekranda zoom yapmadan
kolayca okunacak şekilde sıralanır. Hatta mobil versiyonda önem derecesi düşük
elementler gizlenir, sadece ziyaretçiye sayfayla ilgili en yalın halde bilgi
gösterilir.
Arama motorlarında responsive siteleri ciddi şekilde
destekliyor. Bir sayfanın arama motorlarında hem kendi alan adı hem de
m.alanadi.com gibi farklı subdomain altında bir mobil versiyonunun olmasındansa
tek url ile sayfanın responsive yapılması daha uygun buluyor. Çünkü mobilden
yapılan aramalarda genellikle arama motorları sayfanın mobil uyumluluğuna
dikkat etmeksizin sonuçları sıralıyor.
Yorumlar
Yorum Gönder