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 |