Responsive Web Tasarım Nasıl Yapılır?

Responsive yada flexible deyimini artık duymayanımız yoktur sanırım. Web sitelerimiz masaüstü  ve dizüstü bilgisayarlarda zaten görüntüleniyordu ama birkaç yıldır hayatımızda tablet ve akıllı telefonlar girdi. Responsive Web Tasarım  sitelerimizin diğer cihazlarda da uyumlu bir şekilde görüntülenecek şekilde kodlanmasıdır.

Gelişen internet dünyası nedeni ile web tasarımı kavramı değişti. Web tasarımcılar şu an piyasada kullanılan tüm ekran çözünürlükleri ve boyutları için sorunsuz çalışan tasarımlar yapıyor.

Peki bu tasarımları nasıl yapıyorlar?

Öncelikle Responsive web tasarım nedir? özetleyelim:

Bilgisayar, tablet, telefon ve benzeri tüm ekranlarda; yatay scrollbar’sız ve sorunsuz bir şekilde çalışan aktif tasarımlardır.

Tüm ekran boyutlarına uygun site yaparken öncelikle en fazla kullanılan ekran boyutlarını bilmemizde fayda olacaktır.

Bu boyutlara dikkate aldığımızda bizim en az 4 seçeneğimiz oluyor; tabletler için tasarım,yatay telefonlar için,dikey telefonlar için ve gerçek (bilgisayar üzerindeki) tasarım.

İşte Css bu konuda hızır gibi yetişiyor ve her çözünürlüğe uygun kodlama yapmamıza yardımcı oluyor.

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

Rahatça anlayabilmeniz için öncelikler genel olarak mantığını kavramamız gerekiyor.

Genel olarak;

@media only screen and (max-width: 960px) { }

Bu seçenek en geniş ekran çözünürlüğünün 960px olduğu yerden itibaren geçerlidir. {} parantezlerinin arasına yazdığınız her CSS kodu 960px ‘den küçük tüm çözünürlüklerde geçerli olacaktır.Bir örnekle daha iyi kavrayabiliriz.

Class adı “enteresancizgi” olan bir div’imiz olsun (<div class=”enteresancizgi”></div>) ve biz bu div’i 960px‘den düşük çözünürlüğe sahip ekranlarda görmek istemeyelim. Böyle olduğu zaman yukarıda verdiğim CSS kodlarının arasına aşağıdaki gibi değer verirsek enteresancizgi div’i  960px’den küçük çözünürlüklerde görünmeyecektir.

@media only screen and (max-width: 960px){.enteresancizgi{display:none;} }

Bu şekilde herhangi bir Div’in arka plan rengini, boyutunu ve bir çok özelliğini değiştirebiliriz.

@media only screen and (max-width: 960px) {  .enteresancizgi{background:#fff;color:#000;width:100%;} }

Çözünürlükler için kodlar :

960px den düşük çözünürlüklerde:

@media only screen and (max-width: 960px) { }

801px ve 959px arasındaki çözünürlüklerde:

@media only screen and (min-width: 801px) and (max-width: 959px) { }

800px den düşük tüm çözünürlüklerde:

@media only screen and (max-width: 800px) { }

480px ve 759px arasındaki çözünürlüklerde:

@media only screen and (min-width: 480px) and (max-width: 759px) {}

479px den düşük tüm çözünürlüklerde:

@media only screen and (max-width: 479px) { }

 Son Aşama :

Kodların her çözünürlükte çalışması için Head etiketlerinin arasına şu kodları eklememiz gerekiyor:

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

Sitenizin CSS kodlarında bu şekilde ekleme ve düzelmeler yaptığınızda tasarımını yaptığınız web siteniz tüm çözünürlüklere uygun hale gelecektir.