Duyarlı Web Tasarım

Responsive Tasarım, mobil cihazlara göre web sitenizin tasarımını yeniden boyutlandıran, kullanıcı deneyimini arttıran, CSS3 ile web dünyasına giriş yapmış bir teknoloji. Türkçe kelime karşılığı duyarlı tasarım anlamına gelen responsive tasarım, mobil cihazların yaygınlaşmasıyla önem kazanmıştır.Responsive olmayan bir web sitesine mobil cihazlardan giriş yapıldığında, içeriğin okunabilirliği ve sayfalar arası geçişler oldukça zor bir hal alır. İstediğiniz bir sayfaya ulaşmak için web sitesinde zorlu bir mücadele vermek gerekir. Bu durumda ziyaretçilerin websitesinde geçirdikleri sürelerde düşüşler meydana gelir ve bu da size ziyaretçi kaybı olarak olumsuz bir geri dönüş sağlar.

 

 

Ne Kolaylık Getirir?

Responsive sitelerde, girilen cihaza göre şekillenen bir tasarım, mobil cihazlarda hiç bir önemi olmayan alanların gizlenmesi, ziyaretçiye sadece aradığı ile ilgili sonuçlar veren bir yapı oluşur. Ziyaretçi çok daha rahat bir şekilde aradığını bulacak, hiçbir yakınlaştırma yapmadan metinler arasında kaybolmayacaktır.

Google için önemli !

Son aylarda Google'ın algoritmasında yaptığı güncellemeler ile de mobil uyumlu websitelerin önemi gün geçtikçe artmaktadır. Google'ın arama sonuçlarına getirdiği  Mobil Uyumlu  ibaresiyle ziyaretçilere, siteye giriş yapmadan da bilgi verilmektedir. Bu da sitenizin bir adım geride kalması anlamına gelir.

 

 

Klavuzlar

Responsive web siteleri tasarlaken grid şeklinde adlandırılan türkçesi klavuz anlamına gelen çizgiler kullanılır. Bu çizgiler genel standartlara oturtulmuş olmasa da genel kabul görmüş, kolay dizinlenebilir örnekler ortaya çıkarmıştır. Bu klavuzların oluşturduğu sayfa genişiklerini reponsive tasarım ebatları olarak aşağıda vereceğiz. Site dizinini genelde kolay bölünebilir 6 - 4 - 3 - 2 gibi ortak bölünebilir tam sayılardan oluşturmaya özen gösterdiğimiz için klavuzlarımız 12 adet sütun ve birbirleri arasında gutter dediğimiz eşit sütun aralıkları ile hazırlarız. Dikkat etmemiz gereken bir diğer unsur ise bu aralıkların yarısı kadar boşlukları ise oluşturduğumuz sütunların en baş ve en sonuna ekliyor olmamız gerektiğidir. Örnek olarak bootstrap frameworkü için kabul görmüş ve çokça kullanılan bir klavuz yapısını örnekte görebilirsiniz.

 

 

 

Responsive Tasarım Ebatları

 

Extra Small  576px’ den küçük çözünürlükler < 576px
Small 576px’ e eşit ve daha büyük çözünürlükler ≥ 576px
Medium 768px’ e eşit ve daha büyük çözünürlükler ≥ 768px
Large 992px’ e eşit ve daha büyük çözünürlükler ≥ 992px
Extra Large 1200 px’ e eşit ve daha büyük çözünürlükler ≥ 1200px

Bize Ulaşın