Responsive Web Design

CSS Framework Kullanımı‘nda da bahsi geçen Bootstrap, Foundation, Sematic UI, Pure, Ulkit gibi CSS Frameworklerin bu kadar popüler olmasının altında diğer standartları barındırıyor ve/ya 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ğ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/ya 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) Nedir?

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.

Neden Responsive Web Design Tercih Edilmeli?

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

CSS Flex / Flexbox Nedir?

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 şuradan ulaşabilirsiniz. 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 Semantic UI 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 bir kaç framework paylaşıyorum.

Bulma, Milligram, Semantic UI bu kategorinin iddialı frameworklerinden bazıları. Bootstrap yardımcı uygulamalarla flexbox özelliği sunabiliyor. 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 of 2017 yazılarından ulaşabilirsiniz.

Leave a Reply