Responsive tema, ekran boyutlarına bağlı olarak web sitelerinin görünümü özelleştiren temalardır. Cep telefonları, tabletler gibi ekran boyutları küçük olan cihazlardan mobil uyumlu temaya sahip olan bir siteye girildiğinde, masaüstü bilgisayardaki görüntüden farklı bir görüntü ile karşılaşılır.
İçerik aynı kalır ancak girilen sitenin görüntüsü kullanılan cihazın ekran boyutlarına göre otomatik olarak şekillenir. Menüler “açılır – kapanır” menülere dönüşebilir, resimler küçülebilir, sidebarlar (yan sütunlar) alt kısma geçebilir ya da hiç görünmeyebilir ve bunlar gibi daha birçok değişiklik gerçekleşebilir.
Responsive tema kullanımı, görünümü ve web siteniz üzerinde dolaşan ziyaretçilerin web siteniz hakkında hoşnut kalabilmesini ve telefon, tablet gibi cihazlarda daha rahat görüntülenmesini sağlayacaktır.
Web siteniz üzerinde responsive tema kullanmak için temanızı yeniden tasarlatmanıza gerek yoktur. Responsive temanızı barındıran bir subdomain üzerinde işlemlerinizi yapılandırabilir, sitenize mobil cihaz üzerinden bağlanan kullanıcılar, ilgili subdomaine yönlendirilebilir. Bu işlemi sağlayabilmeniz için yönlendirme scriptleri ile mobil bir responsive site tasarlatabilirsiniz. WordPress gibi açık modüller üzerinde yer alan eklentiler de web sitenizi, mobil uyumlu hale getirecektir. Bu modüller arasında en çok bilinen eklenti WpTouch eklentisidir.
Responsive site nasıl yapılır?
Responsive site tasarlayabilmeniz için iki temel bileşen bulunmaktadır. Bu bileşenler HTML ve CSS’dir. CSS web sitenizin yapılandırılmasını ve bir düzen halinde kalabilmesini sağlamaktadır. CSS üzerinde yapılandırdığınız ve etiketlediğiniz yapılandırmaları HTML siteniz üzerinde belirli kısımlarda çekmektesiniz. Aşağıdaki kod bloğu web sitenizin mobil uyumlu olarak yapılandırılması için temel iskelet olmaktadır.
@media only screen and (max-width: 960px) {}
Web sitenizi hangi cihaza göre yapılandırdığınız bu alanda etken olmaktadır. Aşağıdaki genel bilgiye göre kod bloğu içerisinde {} yer alan kısmın içerisine gireceğiniz her kod satırı o cihazın ekran genişliğine etki sağlayacak satır olacaktır.
Tabletlerin en geniş çözünürlüğü 960px’dir.
Yatay tutulan telefonların en geniş çözünürlüğü 768px’dir.
Dikey tutulan telefon çözünürlüğü 479px’dir.
Bu taktirde Örn: 479 px çözünürlüğe sahip dikey bir telefonda sitenizi yapılandırmak istediğinizde CSS içerisinde;
@media only screen and (max-width: 479px) {} kod bloğu yer almalıdır.
Responsive kodlarınızın çalışabilmesi için “head” etiketlerinizin içerisinde aşağıdaki kod bilgisi bulunmalıdır.
Google yetkilileri web sitesi üzerinde SEO hizmetinden yararlanan kişilerin site içeriklerini responsive olarak yapılandırması durumunda ek olarak avantaj kazandıklarını ve web siteleri üzerinde responsive olarak tema belirlemeleri dahilinde google üzerinden arama motorundan arama gerçekleştiğinde üst sıralamalarda yer alan sitelerin daha çok mobil uyumlu temaya sahip olan sitelere göre tercih yapılacağı bildirilmiştir.
İçerik aynı kalır ancak girilen sitenin görüntüsü kullanılan cihazın ekran boyutlarına göre otomatik olarak şekillenir. Menüler “açılır – kapanır” menülere dönüşebilir, resimler küçülebilir, sidebarlar (yan sütunlar) alt kısma geçebilir ya da hiç görünmeyebilir ve bunlar gibi daha birçok değişiklik gerçekleşebilir.
Responsive tema kullanımı, görünümü ve web siteniz üzerinde dolaşan ziyaretçilerin web siteniz hakkında hoşnut kalabilmesini ve telefon, tablet gibi cihazlarda daha rahat görüntülenmesini sağlayacaktır.
Web siteniz üzerinde responsive tema kullanmak için temanızı yeniden tasarlatmanıza gerek yoktur. Responsive temanızı barındıran bir subdomain üzerinde işlemlerinizi yapılandırabilir, sitenize mobil cihaz üzerinden bağlanan kullanıcılar, ilgili subdomaine yönlendirilebilir. Bu işlemi sağlayabilmeniz için yönlendirme scriptleri ile mobil bir responsive site tasarlatabilirsiniz. WordPress gibi açık modüller üzerinde yer alan eklentiler de web sitenizi, mobil uyumlu hale getirecektir. Bu modüller arasında en çok bilinen eklenti WpTouch eklentisidir.
Responsive site nasıl yapılır?
Responsive site tasarlayabilmeniz için iki temel bileşen bulunmaktadır. Bu bileşenler HTML ve CSS’dir. CSS web sitenizin yapılandırılmasını ve bir düzen halinde kalabilmesini sağlamaktadır. CSS üzerinde yapılandırdığınız ve etiketlediğiniz yapılandırmaları HTML siteniz üzerinde belirli kısımlarda çekmektesiniz. Aşağıdaki kod bloğu web sitenizin mobil uyumlu olarak yapılandırılması için temel iskelet olmaktadır.
@media only screen and (max-width: 960px) {}
Web sitenizi hangi cihaza göre yapılandırdığınız bu alanda etken olmaktadır. Aşağıdaki genel bilgiye göre kod bloğu içerisinde {} yer alan kısmın içerisine gireceğiniz her kod satırı o cihazın ekran genişliğine etki sağlayacak satır olacaktır.
Tabletlerin en geniş çözünürlüğü 960px’dir.
Yatay tutulan telefonların en geniş çözünürlüğü 768px’dir.
Dikey tutulan telefon çözünürlüğü 479px’dir.
Bu taktirde Örn: 479 px çözünürlüğe sahip dikey bir telefonda sitenizi yapılandırmak istediğinizde CSS içerisinde;
@media only screen and (max-width: 479px) {} kod bloğu yer almalıdır.
Responsive kodlarınızın çalışabilmesi için “head” etiketlerinizin içerisinde aşağıdaki kod bilgisi bulunmalıdır.
Kod:
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />Google yetkilileri web sitesi üzerinde SEO hizmetinden yararlanan kişilerin site içeriklerini responsive olarak yapılandırması durumunda ek olarak avantaj kazandıklarını ve web siteleri üzerinde responsive olarak tema belirlemeleri dahilinde google üzerinden arama motorundan arama gerçekleştiğinde üst sıralamalarda yer alan sitelerin daha çok mobil uyumlu temaya sahip olan sitelere göre tercih yapılacağı bildirilmiştir.
