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

Responsive kelime anlamı olarak duyarlı, kırılgan, uyumlu anlamlarına gelmektedir. İnternetin ceplerimize girmesinin akabinde bilgisayarlar için tasarlanmış olan sitelerin ziyaretçiler tarafınca görüntülenmesinde maalesef uyumsuzluklar adım atmıştır. Kısaca örneğin bir cep telefonundan herhangi bir siteye giriş olduğunda ziyaretçi bu siteyi görüntülerken yazıları, menüleri ya da fotoğraf şeklinde site içinde mevcut bulunan metaryellere bakarken ekranı devamlı sağa, sola kaydırmak ya da büyütüp küçültmek suretiyle görüntülerdi.

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

Kısaca anladığımız suretiyle responsive tasarım cep telefonlarımızda, tabletlerimizde ve bilgisayarlarımızda herhangi bir kaydırma, büyütme ya da küçültme şeklinde fonksiyonlar göstermeden kolaylıkla internet sayfasını ziyaret etmemizi sağlamaktadır.

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

Peki responsive site iyi mi yapılır?

Responsive site yapımını tam olarak detaylı bir halde anlatmamız vakit bakımından oldukça mümkün olmasada. Mantığını azca oldukça anlatmaya çalışacağım.

İlgili Makaleler
  • En İyi Antivirüs Programları

  • Site Haritası Nedir VeNasıl Oluşturulur?

Ilk olarak responsive yapmak istediğiniz sitede kodların içinde 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.

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

Bu şekilde meydana getirilen tasarımlarda görüntü devamlı aynı olduğundan kullanışlı bir kıymet olmaktadır.

Anlatacağım bu makalede de maximum width kıymetini 980px üstünden almaktayız.

Css kodlarınızda web sitesinin düzgüsel kısaca bilgisayarlar üstünde görüntülenmesi için düzgüsel css kodlarınız kalabilir, bunlara herhangi bir düzenleme yapılmasına gerek kalmamıştır.

Hali hazırda ki internet sayfasını responsive yapmak için örneğin css dosyanızın en altına aşağıda ki şekilde bir kod koyduktan sonrasında o pixel’e uygun olan aygıt için tasarımınızın iyi mi 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 sonrasında ki vereceğim değerler mobil aleti için diyebilir, mobil cihazlarında görüntülenecek ayarları yapabilirsiniz.

Mesela düzgüsel css dosyanızda
 
body: 980px {
 şeklindeyken, bu bölümde
 }

body: 320px {
yazabilirsiniz.
}

Css bilen ve responsive site meydana getirecek dostlar mantığı azca oldukça anlamışlardır. Bunu bir kaç denemeden sonrasında kesinlikle yapacaklarına inanıyorum.

Sözgelişi ben ilk responsive site yapmayı düşündüğümde epeyce zor gelen bu iş , başladıktan sonrasında mantığı oldukça acele bir halde anlayarak kolayca akmıştır.

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

Sözgelişi 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çinde telefon divini bularak display:none vermeniz, mobil site için hazırlamış olduğunuz css kodları içindeki telefon div’ine ise display:block; yazmanız gerekmektedir.

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

Dilim döndüğünce ve vaktimizin müsade etmiş olduğu sürece responsive tasarım mantığını anlatmaya çalıştım. Aslına bakarsan en oldukça kafa karıştıran işlemlere değindim. Bundan sonrasını tasarım yapmayı bilen dostlar çözeceklerdir. Kafanıza birşey takıldığında çekinmeden sorabilirsiniz, ben sizlere seve seve destek olmaya çalışacaklardır.

Başarılar..