Responsive (Duyarlı) Web Tasarımı

Diğer ortak özellikleri de olmazsa olmaz olan modülerlik ve duyarlılık (responsive design/duyarlı tasarım). Mobile trafiğin artışı markalar ve yayıncılar için artık şaşırtıcı bir durum değil¹. Kullanıcıları cross-device track edebilmek için elbette buna uygun hazırlıklar da yapılması gerekmekte. Bu amaçla yürütülen bir web çalışmasının da olmazsa olmazı elbette responsive olması ve/veya device özelinde değerlendirilmesi. Konuyu çok strateji niteliğine sokmadan, özetle responsive web design nedir bir bakalım.

Responsive Web Design (RWD)

Responsive (duyarlı) tasarımı özetle, stil şablonu ile düzenlenmiş bir HTML sayfasının farklı elektronik cihazlar (desktops, tablets, and phones) ve ekran boyutlarına tasarımcının belirlediği niteliklerde cevap vermesi olarak ifade edebiliriz. Bu belirlenen cevap aynı nesnelerin boyutlarında farklılıkla sınırlı olabileceği gibi kimi durumda farklı bir sayfa düzeninin tamamen değişmesi ve hatta sayfanın tamamen hidden (gizlenmiş) olarak yorumlanması da sağlanabilir².

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 elbette³. 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ştirmekteler⁴. 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. Örnek bir framework listesine pek çok kaynak üzerinden ulaşmak mümkün⁶. Flex ile ilgili olarak da yenilenmiş flex modülü⁷, CSS flex yapısı kapsamlı anlatım⁸ ve CSS3 flexbox esnek kutu kullanımı⁹ yazılarını inceleyebilirsiniz.

Flexbox Destekli Frameworkler

CSS3 ile birlikte kullanıma geçen flexbox ve responsive design ile ilgili Bulma CSS içeriklerinde ve ilgili CMS yapılarında detaylıca konulara değineceğim. Aşağıda, incelemeniz, ihtiyaçlarınız ve ihtiyaçlarınıza uygun çözümleri listelediğinizi varsayarak CSS framework kullanımı örneklerine paralel flexbox destekli birkaç framework paylaşıyorum.

Bulma, Milligram, Tailwind bu kategorinin iddialı frameworklerinden bazıları. Yine popüler tercihlerden biri olan Foundation'da gelişmelere hızlıca adapte olanlardan bir diğeri. Daha detaylı bir listeye The Complete CSS Flexbox Resources¹⁰ ve Best CSS Frameworks in 2020¹¹ yazılarından ulaşabilirsiniz.