Responsive tasarımlar çağın son teknolojisi !

Bilgisayar, tablet, akıllı telefonlar gibi cihazların internet servisleri üzerinden web sitenize giriş yapıldığında, tüm bu elektronik ürünlerle uyumlu olarak kodlanan ve web sitesinin cihazın ekran ölçülerine göre otomatik olarak CSS kodlama ile ayarlanmasına Responsive denir.

Tasarımlarımızı Responsive olarak hazırlamak

Css style özelliklerini ve kullanımını ayrıca temel HTML bilgisine sahip olduğunuzu varsayarak Responsive web sitesi hazırlamanız konusunda yapmanız gereken temel bilgileri aşağıda vermeye çalışacağız.

1.HEAD tagları arasına yerleştirilmesi gerekenler.
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

2.Sitede kullandığımız her hangi bir CSS dosyasına aşağıdaki kodu ekliyoruz.
@media only screenand(min-width: 480px)and(max-width: 767px) { }

Yukarıda eklediğimiz kodmin genişliği 480px ve max. yüksekliği 767px'den küçük ekranlar için geçerli olacaktır. Site içerisinde dilediğimiz DIV ID'lerine yada Class'larına bunları atayarak sadece belirli alanların bu özelliklere göre çalışmasını sağlayabiliriz.

<div class="vitrin"></div> soldaki bölünmüş alanın class'ına bu özelliği eklersek;

@media only screenand(min-width: 480px)and(max-width: 767px)
{
.vitrin{background:#333;color:#fff;width:100%;}
}


Şu an vitrin class’ımız 480×767 çözünürlükten düşük bir cihazda açıldığında eklediğimiz kod sayesinde bozulma olmayacaktır. Peki istediğimiz çözünürlüğe göre o class’ın görünmemesini nasıl sağlarız.

@media only screenand(min-width: 480px)and(max-width: 767px)
{
.vitrin{display:none;}
}


Artık yaptığımız tasarım 480×767 çözünürlüğünden küçük ekranlarda gözükmeyecektir.

Responsive web sitesi avantajları ve Responsive testi

Büyük ölçekli firmalar zaten maliyetlere katlanarak Android ve IOS uygulamalarıyla bu sorunları ortadan kaldırmış durumda. Oysa bu ortamlar yazılım geliştirmek oldukça maliyetli. Bu maliyetleri karşılayamayacak firmalar yaptıkların sitelerin aynı zamanda mobil siteymiş gibi çalışmasına responsive tasarım seçeneğiyle sahip olmaktadırlar. Bir sitenin Responsive özelliğine sahip olup olmadığı tarayıcınızda site açıkken zoom yaparak anlayabilirisiniz.