Responsive
uyarlı, 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 çıktı ve son bir kaç yıldır dünyada ve ülkemizde popüler oldu. Responsive tasarım, web sitesinin mobil ve tablet cihazlardan girildiğinde site içindeki resim, yazı gibi elementlerin ekran genişliğine göre yeniden şekillenip ekrana tam oturması ile oluşur. Genellikle desktop, tablet ve mobil versiyon olarak 3 kademeli şekilde tasarlanı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.
Mobilden web site ziyaretleri dünyada %25 seviyelerine yükseldi ve kısa sürede daha da artacak. Bu sebeple responsive özellikli web sitelerinde ciddi bir artış öngörülüyor.
Nasıl Kullanılır ?
Anlayabilmeniz için öncelikle genel mantığı anlatıp sonra kısaca kodları verip nerede kullanıldığını yazacağım
Genel Mantık
Bu seçenek en geniş ekran çözünürlüğünün 960px olduğu yerden itibaren geçerlidir. {} parantezlerinin arasına yazdığınız her css kodu 960px den küçük tüm çözünürlüklerde geçerli olacaktır.Bir örnekle daha iyi kavrayabiliriz.
Class adı hibestil olan bir divimiz olsun (<div class=hibestil></div>) ve biz bu divi 960pxden düşük çözünürlüğe sahip ekranlarda görmek istemeyelim.Böyle olduğu zaman yukarıda verdiğim CSS kodlarının arasına aşağıdaki gibi değer verirsek hibestil divi 960pxden küçük çözünürlüklerde görünmeyecektir.
Bu şekilde herhangi bir Divin arkaplan rengini, boyutunu ve bir çok özelliğini değiştirebiliriz.
Çözünürlükler için kodlar
960px den düşük çözünürlüklerde:
801px ve 959px arasındaki çözünürlüklerde:
800px den düşük tüm çözünürlüklerde:
480px ve 759px arasındaki çözünürlüklerde:
479px den düşük tüm çözünürlüklerde:
Son Olarak
Kodların her çözünürlükte çalışması için Head etiketlerinin arasına şu kodları eklememiz gerekiyor:
Sitenizin Css kodlarında bu şekilde ekleme ve düzelmeler yaptığınızda tüm çözünürlüklere uygun hale gelecektir.Umarım yararım dokunmuştur.
uyarlı, 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 çıktı ve son bir kaç yıldır dünyada ve ülkemizde popüler oldu. Responsive tasarım, web sitesinin mobil ve tablet cihazlardan girildiğinde site içindeki resim, yazı gibi elementlerin ekran genişliğine göre yeniden şekillenip ekrana tam oturması ile oluşur. Genellikle desktop, tablet ve mobil versiyon olarak 3 kademeli şekilde tasarlanı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.
Mobilden web site ziyaretleri dünyada %25 seviyelerine yükseldi ve kısa sürede daha da artacak. Bu sebeple responsive özellikli web sitelerinde ciddi bir artış öngörülüyor.
Nasıl Kullanılır ?
Anlayabilmeniz için öncelikle genel mantığı anlatıp sonra kısaca kodları verip nerede kullanıldığını yazacağım
Genel Mantık
Kod:
@media only screen and (max-width: 960px) { }Class adı hibestil olan bir divimiz olsun (<div class=hibestil></div>) ve biz bu divi 960pxden düşük çözünürlüğe sahip ekranlarda görmek istemeyelim.Böyle olduğu zaman yukarıda verdiğim CSS kodlarının arasına aşağıdaki gibi değer verirsek hibestil divi 960pxden küçük çözünürlüklerde görünmeyecektir.
Kod:
@media only screen and (max-width: 960px) { .hibestil{display:none;} }
Kod:
@media only screen and (max-width: 960px) { .hibestil{background:#fff;color:#000;width:100%;} }Çözünürlükler için kodlar
960px den düşük çözünürlüklerde:
Kod:
@media only screen and (max-width: 960px) { }
Kod:
@media only screen and (min-width: 801px) and (max-width: 959px) { }
Kod:
@media only screen and (max-width: 800px) { }
Kod:
@media only screen and (min-width: 480px) and (max-width: 759px) {}
Kod:
@media only screen and (max-width: 479px) { }Son Olarak
Kodların her çözünürlükte çalışması için Head etiketlerinin arasına şu kodları eklememiz gerekiyor:
Kod:
<**** name="viewport" content="width=device-width, initial-scale=1.0">
