Responsive Web Sitesi Nedir ?


Website development UI/UX front end designer reviewing sketched wireframe layout design mockup for responsive web content with AR screen

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.

6
Kimler Ne Demiş?

avatar
6 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
6 Comment authors
Furkanvan haberAdıyaman haberFirma EkleAnkara Bilgisayar Servisi Recent comment authors
En Yeniler Eskiler Beğenilenler
Nihat
Ziyaretçi

Çok güzel bir yazı hazırlamışsınız emeğe teşekkürler…

Ankara Bilgisayar Servisi
Ziyaretçi

Çok iyi anlatılmış bir bir yazı olmuş teşekkürler 🙂

Firma Ekle
Ziyaretçi

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

Adıyaman haber
Ziyaretçi

Çok Faydalı Makel Olmuş Çok Tşk Ederim İyi Çalışmalr

van haber
Ziyaretçi

her şey google amca için yani

Furkan
Ziyaretçi

Güzel bir paylaşım. Emeğinize sağlık. İşimle ilgili olduğu için link paylaşarak alıntı yaptım.