Responsive web tasarım, duyarlı, uyumlu web tasarım anlamına da gelir. Son yıllarda adını sıkça duyduğumuz bu web tasarım şekli ilk olarak 2010 yılında ortaya çıktı ve son bir kaç yıldır dünyada ve ülkemizde popüler oldu.
Responsive tasarım, web sitesinin mobil ve tablet cihazlardan girildiğinde site içindeki resim, yazı gibi elementlerin ekran genişliğine göre yeniden şekillenip ekrana tam oturması ile oluşur. Genellikle desktop, tablet ve mobil versiyon olarak 3 kademeli şekilde tasarlanır.
Bilindiği gibi web sitelerine mobil cihazlardan girildiğinde ziyaretçiler siteyi görüntülemekte ve gezmekte güçlük yaşarlar. Eğer girdikleri site vds satın al responsive yada mobil site değilse, okumak istedikleri alanı ancak zoom yaparak, kısıtlı bir alanı görüntüleyebilirler ve kulanım zorluğu çekerler. Site menülerini gezmekte oldukça zordur ve menüler mobil uyumlu olmadığı için genellikle gitmek istedikleri linki bulamayabilirler.
Responsive sitelere mobil cihazlardan girildiğinde menüler şekil değiştirip genellikle üstten açılacak şekilde kullanımı kolay bir versiyona dönüşür. Fontlar ve imajlar alt alta gelerek ekranda zoom yapmadan kolayca okunacak şekilde sıralanır. Hatta mobil versiyonda önem derecesi düşük elementler gizlenir, sadece ziyaretçiye sayfayla ilgili en yalın halde bilgi gösterilir.
Arama motorlarında responsive siteleri ciddi şekilde destekliyor. Bir sayfanın arama motorlarında hem kendi alan adı hem de m.alanadi.com gibi farklı subdomain altında bir mobil versiyonunun olmasındansa tek url ile sayfanın responsive yapılması daha uygun buluyor. Çünkü mobilden yapılan aramalarda genellikle arama motorları sayfanın mobil uyumluluğuna dikkat etmeksizin sonuçları sıralıyor.
Responsive Web Design
Temel neden, ulaşılabilir olmak. Online satış yapan bir marka, hizmet üreten bir ajans ya da deneyimlerini paylaşan bir blogger olmanız çok önemli değil. Önemli olan ürettiğiniz, sunduğunuz şeylerin mümkün olduğunca çok kişiye talep ettikleri sürece ulaşabilir olmasının zorunluluğu. Günümüz dijital alışkanlıkları içerisinde mobile trafiğin yoğunluğu göz önüne alındığında tepkisiz kalmak ve teknolojik gereksinimleri yerine getirmemek hem kullanıcı deneyimi hem de arama motoru sonuçları açısından büyük bir hata olacaktır elbette3. Google başta olmak üzere bir çok popüler arama motoru artık web sitelerinde mobil uyumluluğu aramakta, hatta bu amaca yönelik AMP gibi teknolojiler geliştirmekteler4. Diğer yandan performans reklamlarında da potansiyel müşterilere doğru zamanda doğru şekilde cevap vermek gerektiği de unutulmamalı.
CSS Framework ve Responsive Design
Projelerinizde bir css framework tercih edip etmemek projenin detaylarına ve ekibin kararına bağlı elbette. Ancak, en azından dahil olduğum projelerde genelde belli başlı frameworklerden birini seçiyor oluyoruz. Buradaki temel ayrım kimi zaman frameworkün ihtiyaç duyulan modül ve tamamlayıcılara sahip olması iken kimi zaman da sadece grid yapısını sunması olabiliyor. Özellikle son dönemde internet tarayıcılarının da yeni teknolojilere hızlı bir şekilde adapte olmasıyla birlikte flexbox konuştuğumuz, değerlendirdiğimiz bir diğer özellik haline geldi. Peki, flexbox nedir ve neden bizim için önemlidir?
CSS Flex / Flexbox
Bildiğiniz gibi CSS3 en son CSS standardı olarak kullanımda ve hala geliştirilmeye devam ediliyor Selektörler, Kutu Modeller, Arkaplan ve kenarlıklar, imaj ve metin düzenlemeleri, 2d/3d dönüştürümleri, animasyonlar, çok sütunlu yapılar CSS3 ile kullanıma kavuşan modüllerden sadece birkaçı. 2009 yılından beri örneklerini gördüğümüz CSS display:flex bu süreçte iki önemli geliştirme yaşıyor ve son kararlı sürümüne 2012 yılında kavuşuyor. Yapısal düzenlemelerde pratiklik ve esneklik sağlayan, elemanları yatay ve dikey olarak rahatlıkla ve ilişkili bir şekilde hizalandırabilmemizi sağlayan flex zamanla daha fazla CSS framework içerisinde de yer ediniyor.
