Responsive Tasarım Nedir?

---

Responsive tasarım, güncel teknolojinin ihtiyaçları doğrultusunda birçok cihazdan web sayfanızın kusursuz görünmesini sağlayan tasarım yöntemidir. Responsive tasarım sayesinde günümüz teknolojilerine ayak uydurabilir, rakiplerinizin önüne geçebilirsiniz. Son zamanlarda tablet, cep telefonu ve laptopların çoğalmasıyla beraber çeşitli çözünürlüklerle uyumlu olmak zorunda kalıyoruz.

Teknik olarak responsive tasarım nedir?

CSS3’ün media kuralı sayesinde ekran boyutlarını algılayıp, o ekran boyutuna özel css kodu yazmamızı sağlar.

Örneğin aşağıdaki kod sayfa 300px boyutundan küçük olursa arkaplan lightblue olacaktır.


@media screen and (max-width: 300px) {
   body {
    background-color: lightblue;
   }
}

Sizde bu şekilde, belirlediğiniz genişliğe göre elementlerinizin boyutlarını ayarlayabilirsiniz.

Daha fazla teknik bilgiyi buradan bulabilirsiniz: http://goo.gl/mTdmGD

Responsive tasarımın avantajları:

– Maliyet

Responsive tasarım sayesinde mobil uygulama ihtiyacınız ortadan kalkıyor. Tek web sitesi üzerinden uyumlu css yapısıyla birçok ekranda rahatlıkla gezinebiliyorsunuz.

– Kullanıcı Deneyimi (UX)

Son zamanlarda rakiplerinizin önüne geçmek için User Experience (Kullanıcı Deneyimi) çalışmaları artış göstermektedir. Giren her kullanıcıyı sitenizde tutmak size her türlü kazanç sağlayacaktır. Cep telefonu ile kocaman bir siteyi dolaşmak mı? Yoksa sadece scroll ederek sitede rahat rahat dolaşmak mı?

– SEO

Google son zamanlarda mobil uyumlu web sitelerinin önemini bize hissettirir hale geldi. Mobil uyumlu siteler artık daha avantajlı olacak ve sıralamada üst sıralarda çıkacak. (Kaynak: http://goo.gl/Q2Ww8f) Siteye giren ziyaretçiler sitesi uyumlu olduğu için zaten hemen çıkmayacaktır, buda bize sitede geçirilen ortalama süre olarak geri dönecektir.

Responsive tasarım her yönden bize avantaj sağlayacaktır.

HTML ve CSS ile uğraşan Front-end Developer arkadaşlarıma şiddetle öneriyorum. (Kendi sitem responsive değil, ama en yakın zamanda olacak.)

 

Kaynaklar:

• http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
• http://searchengineland.com/google-sending-mobile-usability-warnings-huge-number-webmasters-213113