Responsive Web Siteleri

Responsive-design

Responsive Tasarım Nedir ?

Responsive kavramı ilk olarak 2010 yılında bir web sitesinde Ethan Marcotte’nin bir yazısında geçti ve 2011 yılından itibaren popülerliği giderek arttı.

Responsive, kelime olarak duyarlı, uyumlu anlamına gelir. Responsive web tasarım da adını buradan alır, uyumlu web tasarım şeklinde de bilinir.

Özet olarak responsive web siteleri, CSS 3.0 ile yapılandırılan, bilgisayar, tablet, telefon ve benzeri tüm ekranlarda ekran çözünürlüğüne göre reaksiyon vererek yatay scrollbar’sız ve sorunsuz bir şekilde çalışan aktif tasarımlardır.

Peki adını son zamanlarda sıklıkla duyduğumuz responsive tasarımın açılımı nedir, neleri kapsar ve neden bu kadar önemlidir?

Günümüzde 3G internetin yaygınlaşmasıyla mobil ve tablet pc kullanım oranı ciddi şekilde arttı ve aynı hızda yükselmeye devam ediyor. Bir web sitesi tasarlandığı zaman, bu site mobil cihazlarda sorunsuz açılsa bile, bilgisayar ekranında göründüğü şekli ile açılır. Ancak telefonlar, bilgisayar ekranlarına göre çok küçük oldukları için sitenin bu şekilde küçük açılması ziyaretçiyi rahatsız eder çünkü sitedeki yazıları okumak, menülerde gezinmek zordur. Çoğu zaman ziyaretçi, bulmak istediği bilgilere ulaşamadan memnuniyetsiz şekilde siteyi terk eder. Bu durum, firma imajına büyük ölçüde zarar verir.

Mobil platformlarda bu sorunun üstesinden gelmek için bu ekranlara özel bir tasarım ihtiyacı doğdu ve mobil uyumlu web siteleri ortaya çıktı. Ziyaretçilerini memnun etmek isteyen firmalar, mobil web site yaptırarak mobil kullanıcılarına farklı bir arayüz ile merhaba demeye başladılar. Mobil cihazlardan siteye giriş yapıldığında, ziyaretçiler mobil için tasarlanan alt bir alan adına ya da dizine yönlendirildiler (m.domain.com – domain.com/m gibi).

Ancak bu mobil siteler, tablet ekranı için uygun değildi. Tabletlerin ve mobil cihazların ihtiyaca göre farklı büyüklüklerde üretilmeye başlaması ile bir çok çözünürlük ortaya çıktı. Web sitelerinin her cihaz için farklı tasarlanması çok maliyetli ve zor olacağı için tasarımlar web ve mobil site olarak iki çözünürlüğe göre yapıldı. Mobil web sitelerinin öneminin farkına varıldığı bu sıralarda, “responsive tasarım” kavramı ortaya çıktı. HTML dilinin CSS 3 ile birleşmesi ile web site içeriklerinin cihazlara göre şekillenebildiği fark edildi ve uygulanmaya başlandı.

responsive-banner

Responsive, kısaca bir web sitesinin, isminin ve sayfa linkinin değişmeden CSS mimarisi yardımı ile farklı cihaz çözünürlüklerine ve boyutlarına göre yeniden şekillenmesi olarak tanımlanabilir. Arayüz kademeli olarak tasarlanır ve açılan cihaz çözünürlüğüne en uygun kademe ile site görüntülenir.

Son 1-2 yılda yaygınlaşan bu tarz web sitelerinin önümüzdeki yıllarda giderek popülerleşeceği öngörülüyor. Arama motorları da responsive tasarımı destekliyor ve tavsiye ediyor. Çünkü arama motorları sıralamaları mobilde ve tablet bilgisayarlarda farklı sonuçlar vermiyor. Bu nedenle mobil cihazlardan yapılan aramalarda m.domain.com uzantılı mobil siteler değil, daha zengin içerikli ve daha çok hit alan web siteleri üst sıralarda çıkıyor.  Bu durum, web sitelerinin responsive olması ihtiyacını doğuruyor.

Responsive_Web_Design_for_Desktop_Notebook_Tablet_and_Mobile_Phone

Responsive web tasarımın faydaları nelerdir?

Kolay kullanım

Şüphesiz en büyük yararı kolay kullanımdır. Kullanıcısına ekranı büyütmeden sadece aşağı ve yukarı parmak hareketleriyle gezinmesine olanak sağlar.

Kolay Bakım

Her çözünürlük için ayrı bir site tasarımı yaptırmak yerine, oluşturulmuş olan tek bir responsive web tasarım sayesinde, tek bir domain altında tüm cihaz çözünürlüklerine hizmet verir. Bu sayede web sitesinin bakımı da daha kolaydır.

Arama Motoru Optimizasyonu

Responsive bir web tasarımı ile web sitenize değer katıp, arama motorlarının istediği yapıya kavuşturmasını sağlayabilirsiniz. Mobil platformlarda site URL yapısı aynı kalacağı için responsive sitelerin arama motorları tarafından bulunması daha kolaydır.

Düşük Maliyet

Birden fazla site tasarımı yaptırmak yerine tercih edeceğiniz tek bir responsive web tasarım sayesinde daha az maliyetle daha kullanışlı bir web tasarımına sahip olabilirsiniz.

Responsive ve mobil site karşılaştırma

Responsive Web Sitesi Mobil Site
thickMobil ekrana tam olarak sığar. thickMobil ekrana tam olarak sığar
thickSite içeriği kolay okunur ve sitede gezinmek kolaydır. thickSite içeriği kolay okunur ve sitede gezinmek kolaydır.
thickHızlı yüklenir thickHızlı yüklenir
thickWeb sitesi güncellenince otomatik olarak mobil site de güncellenir. crossÇoğunlukla web sitesinden bağımsız olduğu için web sitesi panelinden farklı bir panelden güncellenir.
thickYapımı uygun maliyetlidir. crossResponsive siteye göre daha yüksek maliyetlidir.
thickTabletlere özel olarak şekillenebilir. crossTablet versiyonu yoktur, tabletlerde normal site ya da mobil site açılır.
thickMevcut alan adınızda çalışır, farklı bir sub-domaine ya da klasöre ihtiyaç duymaz. crossm.alanadiniz.com, alanadiniz.com/m gibi bir subdomain ya da ftp dizininde açılır.
thickAynı alan adından yayın yaptığı için arama motorlarının sevdiği yapıdadır. crossArama motorlarında bulunabilirlik ve indexleme 2. plandadır.
thickWeb site tasarımınızın uyumlaştırılması ile oluşur, menü isimleri, tasarım ve çizgiler sitenizle benzer bir yapı taşır. crossWeb sitenizin tasarımından bambaşka bir menü yapısı, tasarım ve içerik ile hazırlanabilir.
thick2012 yılında yaygınlaşmaya başlayan yeni bir teknoloji ve yapıdır. thick2005 yılından beri kullanılan bir yapıdır.

Mobil kullanımın her yıl daha da artacağı öngörülebilir bir gerçek ve günümüzde Türkiye’deki responsive web site sayısı ciddi şekilde az. Bugün web sitesini responsive olarak tasarlatan web site sahiplerinin karlı bir yatırım yapmış olacağını söylemek yanlış olmayacaktır. Bir çok firma bu konuda çalışmalara başladı bile…

Responsive web site tasarımlarımız HTML5 ve CSS3 ile oluşturulmaktadır. İleri derecede bilgi gerektiren bu çalışmaların yapılması için, sağlıklı bir kodlama çalışması ve tüm tarayıcılar ile cihazlar için kontrollerin yapılması gerekmektedir.

Siz de doğru stratejiler ile hazırlanmış bir web sitesi ile rakiplerinizden bir adım önde olabilirsiniz, zaman kaybetmeden bizimle buradan irtibata geçin.