Responsive (Duyarlı) Web Tasarımı

CSS Framework Kullanımı‘nda da bahsi geçen Bootstrap, Foundation, Sematic UI, Pure, Ulkit gibi CSS Framework'lerin bu kadar popüler olmasının altında diğer standartları barındırıyor ve/veya kolaylıkla entegre edilebiliyor olmaları yatmakta. 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ğil1. 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.

Cross device pathing

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ğlanabilir2.

Özel İçerikleri Kaçırma!
Web analitiği, kod kurulumları, servis incelemeleri, örnekler ve video anlatımlarını takip etmek, içeriklerle ilgili destek almak ister misin?

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 Mudülleri ve Geliştirmeleri

CSS Flex / Flexbox

Bildiğiniz gibi CSS3 en son CSS standardı olarak kullanımda ve hala geliştirilmeye devam ediliyor5. 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ün6. Flex ile ilgili olarak da yenilenmiş flex modülü7, CSS flex yapısı kapsamlı anlatım8 ve CSS3 flexbox esnek kutu kullanımı9 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 Resources10 ve Best CSS Frameworks in 202011 yazılarından ulaşabilirsiniz.