Responsive Web Sitesi Nedir ?


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-web-sitesi-tasarımı

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.

responsive-web-sitesi-ölçüleri

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.
<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.

 


Hasan Uza

Natro Hosting’de Destek Uzmanı olarak görev yapan Hasan, yazıları ile Hosting Blog’a katkı sağlıyor.

Yorumlar 6

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

  1. Google her geçen gün kullanıcı deneyimi daha iyi bir hale getirmek için çalışmalarını sürdürmektedir. Responsive tasarımda bunlardan bir tanesi artık her web sitesi için mecuriyet diyebiliriz. Mobil uyumluluk önemli. Teşekkürler bu güzel yazı için

Responsive Web Sitesi Nedir ?

İçerik Formatı Seçiniz
Anket
Yeni bir anket yayınlayabilirsiniz.
İçerik
Görsel ile desteklenmiş zengin içerikler yayınlayın
List
Liste-list içerikler oluşturabilirsiniz.
Video
Youtube, Vimeo ve Vine videoları yayınlayabilirsiniz.
Galeri
Fotoğraf ve GIF içerikler yayınlayabilirsiniz.