Responsive web site tasarımı, duyarlı, uyumlu web tasarımı anlamına gelmektedir. Son yıllarda ismini sıkça duyduğunuz bu web sitesi tasarlama şekli ilk olarak 2010 yılında ortaya çıkarıldı ve artık hem dünyada hem de ülkemizde tüm siteler responsive haline getirilmeye başladı.
Responsive web sitelerine aynı zamanda mobil uyumlu web siteleri de diyebiliriz. Çünkü responsive bir site hazırlamanın esas amacı mobil platform kullanıcılarının da sıkıntı yaşamadan rahat bir şekilde web sitelerinde dolaşabilmesidir. Bunda mobil teknolojilerin gelişmesi, ve buna bağlı olarak mobil cihaz kullanan kişilerin sayısının da artması, responsive web site tasarım gibi bir ihtiyaç ortaya çıkmasına neden olmuştur.
Responsive tasarımın ne anlama geldiğinden bahsedecek olursak; bir web sitesine mobil ve tablet cihazlardan girildiğinde site içerisinde bulunan resim, yazı gibi elementlerin ekran genişliğine göre yeniden şekillenip tam oturacak şekilde yeniden ekranda düzenlenmesi olarak tanımlayabiliriz. Bilindiği gibi web siteleri mobil cihazlardan ziyaret edildiğinde siteyi görüntülemekte ve gezmekte güçlük yaşarlar. Eğer girilen site responsive veya mobil site değilse, okumak istedikleri yerleri ancak yaklaştırarak görebildiklerinden dolayı kullanım zorluğu çekerler.
Responsive sitelere mobil cihazlardan girildiğinde sitenin ana menüleri şekil değiştirip genellikle üstten veya yandan açılacak şekilde kullanımı kolay farklı bir versiyona dönüşür. Fontlar ve resimler alt alta gelerek ekranda herhangi bir yakınlaştırma yapmadan kolayca okunacak şekilde düzenlenir. Hatta responsive versiyonda önem derecesi düşük bazı elementler ziyaretçilerden gizlenir, sadece ziyaretçiye sayfayla ilgili en yalın halde bilgiler gösterilmek amaçlanır.
Responsive Web Sitesi Hazırlamayı Öğrenmeye Yeni Başlayacaklar İçin
Responsive web siteleri genel olarak masaüstü, tablet ve mobil versiyon olmak üzere 3 ana başlık altında yaklaşık 6 farklı ekran boyutunda, en büyük ekrandan en ufak ekrana kademeli olarak azalacak şekilde tasarlanır. Bu 6 ekran boyutu col-xs(xsmall), col-sm(small), col-md(medium), col-lg(large) ve col-xl(xlarge) olarak küçükten büyüğe doğru sıralanır. Bunlara ek olarak col-(column) u da katarsak 6 adet boyut belirtmiş oluruz. Son verdiğimiz “col” otomatik değer alır yani etrafındaki diğer nesnelerin boyutuna göre şekil alır.
Responsive sitelerde genel olarak ızgara yapısına göre sayfa düzenlemesi yapılır. Bu şu demektir, web sitesi, yukarıda bahsettiğimiz her 6 boyutta sayfayı 12’ye bölecek şekilde dizayn edilir. Bu en ufak mobil ekranda da bu şekildedir, masaüstü olan tüm ekranlarda da böyledir. En büyük boyuttan örnek verecek olursak eğer, col-xl-4 (1. Obje) col-xl-4 (2. Obje) col-xl-4 (3. Objedir) bu 3 obje sayfayı enine olarak eşit şekilde kaplayacak 3 parça şeklinde verilmiştir. Dikkat ettiyseniz sondaki sayıların toplamı 12 etmekte. Buradan yola çıkarak diyebiliriz ki siz 12 parçaya bölünmüş bir web sayfasını enine 4 er dilimlere ayırdığınızı veya 12 kişiden oluşan bir sınıfı 4 er gruplar halinde eşleştirdiniz şeklinde de düşünebilirsiniz. Bunu isterseniz birer birer 12’ye tamamlarsınız isterseniz düzensiz rastgele sayılar olarak belirlersiniz. Ancak mutlaka bu sayı 12 ye tamamlanmalı tabii eğer sitenin geriye kalan kısmını boş bırakmayacaksanız! Bu durum en ufak ekran için de aynı şekilde geçerlidir. En ufak ekranda tek fark “xl” yerine “xs” kullanırsınız. Her ekran için kullanacağınız elementler içerisine de bu boyutları nizami ve doğru bir şekilde tanımlamalısınız.
Arama Motorları İçin Çok Önemli!
Arama motorları responsive siteleri ciddi şekilde destekliyor ve onları daha ön plana çıkarıyor. Bu yüzden sitenizi mobil uyumlu yapmanız hem arama motorlarında ön plana çıkması açısından hem de ekstra mobil ziyaretçiler edinilmesi açısından müşteri sayınızı ciddi yönde artıracaktır. Mobilden web site ziyaretleri dünyada %27 seviyelerine yükseldi ve hızla artmaya da devam etmekte. Dolayısıyla sitenizi mobil uyumlu yapmanız en başta marka değerinizin artması açısından daha sonra da yukarıda bahsettiğimiz diğer tüm avantajlar açısından web sitenize çok fazla fayda sağlayacaktır.
