Responsive web tasarımlar sitenizin her türlü çözünürlüğe ayak uydurmasını sağlayacaktır. Bu sayede görsel kaliteden ödün vermekten kaçınmış olunacaktır.Responsive web tasarım, duyarlı, uyumlu web tasarım anlamına da gelir. Son yıllarda adını sıkça duyduğumuz bu web tasarım şekli ilk olarak 2010 yılında ortaya çıktı ve son bir kaç yıldır dünyada ve ülkemizde popüler oldu.

Öncelikle responsive akışkan (fluid) manasını taşıdığını bilmemiz gerekir.Buradan suyun kabın şeklini aldığı gibi web sitelerinin de ekran boyutuna göre şekil alması anlamını çıkarabiliriz.

 

 

Responsive tasarımın pek çok yararı mevcuttur.Bunlardan bazılar ;

Mobil siteler için ayrıca içerik girişine gerek kalmaz.
Tablet,Mobil,Pc vs. platformlarına otomatik uygulanabilir bir sistemdir.
Tek style dosyasında tüm tanımlamalar yapılabilir.
Vs. vs.
Responsive tasarımı yaparken css ‘nin @media screen özelliğini kullanıyoruz. Kullanımı ise aynen aşağıdaki gibidir.

 

/*——————————[ 996 ]—————————*/
@media screen and (max-width:996px){

/* Buraya yazacağınız css kodu maksimum 996px genişliği olan cihazlarda çalışacaktır. Tabletler için kullanabiliriz.*/
}
/*——————————[ 480 ]—————————*/
@media screen and (max-width:480px){
/* Buraya yazacağınız css kodu maksimum 480px genişliği olan cihazlarda çalışacaktır. */
}
/*——————————[ 320 ]—————————*/
@media screen and (max-width:320px){
/* Buraya yazacağınız css kodu maksimum 320px genişliği olan cihazlarda çalışacaktır. */
}

 

 

Yukarıdaki formatlara ek olarak sizde çeşitli atamalarda bulunabilirsiniz.

 

 

Responsive tasarımda px yerine % , width yerine de max-width kullanmaya dikkat etmeniz daha kaliteli sonuçların ortaya çıkmasını sağlayacaktır.

Mobilden web site ziyaretleri dünyada %25 seviyelerine yükseldi ve kısa sürede daha da artacak. Bu sebeple responsive özellikli web sitelerinde ciddi bir artış öngörülüyor.