Responsive Web Sitesi Nasıl Yapılır?

Responsive kelime anlamı olarak duyarlı, hassas, uyumlu anlamlarına gelmektedir. İnternetin ceplerimize girmesinin akabinde bilgisayarlar için tasarlanmış olan sitelerin ziyaretçiler tarafından görüntülenmesinde maalesef uyumsuzluklar başlamıştır. Yani mesela bir cep telefonundan herhangi bir siteye giriş olduğunda ziyaretçi bu siteyi görüntülerken yazıları, menüleri ya da resim gibi site içerisinde mevcut bulunan metaryellere bakarken ekranı sürekli sağa, sola kaydırmak ya da büyütüp küçültmek suretiyle görüntülerdi.

Sürekli gelişmekte olan web dünyası içinde bu duruma karşı kolaylık getirmek amacıyla responsive tasarım olayı işin içine girmiş bulunmaktadır.

Yani anladığımız üzere responsive tasarım cep telefonlarımızda, tabletlerimizde ve bilgisayarlarımızda herhangi bir kaydırma, büyütme ya da küçültme gibi fonksiyonlar göstermeden rahatlıkla web sitesini ziyaret etmemizi sağlamaktadır.

Responsive görünüme geçtiğimiz aylarda google’da kesin bir karar göstererek, mobil sitelerin kullanıcılara daha rahat bir sunum yaptığını göz önüne alarak artık mobil uyumlu yani responsive sitelerin daha ön planda olacağını belirtmiştir.

Peki responsive site nasıl yapılır?

Responsive site yapımını tam olarak detaylı bir şekilde anlatmamız zaman bakımından çok mümkün olmasada. Mantığını az çok anlatmaya çalışacağım.

Öncelikle responsive yapmak istediğiniz sitede kodların arasında meta etiketlerinizin altına şu kodu eklemeniz gerekmektedir. Bu kod benim web sitem mobil uyumludur anlamına gelmekte, ve css dosyanızda ki mobil site css kodlarını çağırmaktadır.

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0">

Biz genelde bilgisayarlarda uyumlu bir görüntü sağlamak için yaptığımız tasarımlarda maximum width’i 980px olarak vermekteyiz.

Bu şekilde yapılan tasarımlarda görüntü her zaman aynı olduğundan kullanışlı bir değer olmaktadır.

Anlatacağım bu makalede de maximum width değerini 980px üzerinden almaktayız.

Css kodlarınızda web sitesinin normal yani bilgisayarlar üzerinde görüntülenmesi için normal css kodlarınız kalabilir, bunlara herhangi bir düzenleme yapılmasına gerek yoktur.

Hali hazırda ki web sitesini responsive yapmak için mesela css dosyanızın en altına aşağıda ki şekilde bir kod koyduktan sonra o pixel’e uygun olan cihaz için tasarımınızın nasıl görünmesini istiyorsanız ayarlamalarda bulunabilirsiniz.

@media only screen and ( max-width: 767px) 

css dosyanızın en altına bu kodu koyarak bu koddan sonra ki vereceğim değerler mobil cihazı için diyebilir, mobil cihazlarında görüntülenecek ayarları yapabilirsiniz.

Örneğin normal css dosyanızda
 
body: 980px {
 şeklindeyken, bu kısımda
 }

body: 320px {
yazabilirsiniz.
}

Css bilen ve responsive site yapacak arkadaşlar mantığı az çok anlamışlardır. Bunu bir kaç denemeden sonra mutlaka yapacaklarına inanıyorum.

Mesela ben ilk responsive site yapmayı düşündüğümde epeyce zor gelen bu iş , başladıktan sonra mantığı çok çabuk bir şekilde anlayarak kolayca akmıştır.

En çok merak ettiğim konu ise, bilgisayarda açtığımda görünmesini istediğim fakat mobilden girildiğinde görülmesini istemediğim bir nesneye nasıl bir css kodu uygulamam gerektiğiydi.

Mesela sizin telefon isminde bir diviniz var, bunun bilgisayar’da gözükmesini istemiyor fakat mobil sitede görünmesini istiyorsanız.

En üstte bilgisayar için hazırlamış olduğunuz css kodları içerisinde telefon divini bularak display:none vermeniz, mobil site için hazırlamış olduğunuz css kodları içerisindeki telefon div’ine ise display:block; yazmanız gerekmektedir.

Tasarımınızı responsive yaparken tarayıcınızın boyutunu küçülterek test edebilirsiniz.

Dilim döndüğünce ve vaktimizin müsade ettiği sürece responsive tasarım mantığını anlatmaya çalıştım. Zaten en çok kafa karıştıran işlemlere değindim. Bundan sonrasını tasarım yapmayı bilen arkadaşlar çözeceklerdir. Kafanıza birşey takıldığında çekinmeden sorabilirsiniz, ben sizlere seve seve yardımcı olmaya çalışacaklardır.

Başarılar..