Hazırlayan: Hakan Çamoğlu
| Framework | Genel Puan* | Grid Sayısı | Boyutu | Component | Tasarım | Kullanım |
|---|---|---|---|---|---|---|
Bootstrap |
12 column | 283KB | ||||
Semantic UI |
16 column | 766KB | ||||
Foundation |
12 column | 78KB | ||||
UIkit |
10 column | 401KB | ||||
Skeleton |
12 column | 29KB | ||||
Gumby |
12 column | 217KB |
* Genel puanlama frameworklerin grid sayısı, hızı, component genişliği, tasarımı, kullanım kolaylığı ve dokümantasyonları baz alınarak oluşturulmuştur.
Responsive yani duyarlı tasarım kısaca; tek bir HTML sayfasının CSS kodları ile farklı ekran boyutlarında farklı şekilde gösterilmesidir. Bu bazen sadece aynı nesnelerin boyut değişikliği şeklinde de olabilir. Bazen ise bazı nesnelerin tamamen gizlenmesi şeklinde de kullanılabilir.
Aslında bunun bir çok nedeni var! Ancak en büyük sebebi hazırladığımız web sitesinin tüm cihazlarda sorunsuz bir şekilde görünmesini sağlamaktır. Artık mobil ve tablet cihaz trafiği günümüzde %50 seviyesine çıkmış, hatta bazı web sitelerinde %80 seviyelerine ulaşmıştır. Bunun yanı sıra daha etkili bir SEO performansı almak da var diyebiliriz. Google başta olmak üzere bir çok arama motoru artık web sitelerinde mobil uyumluluğu aramaktadır. Daha etkili bir kullanıcı deneyimi ve daha çok kitleye erişim için web sitelerinizi responsive olarak hazırlayın.
Hangi framework tercihi yapacağınız ilk olarak yapmak istediğiniz projeye bağlı. Eğer sade bir tasarım ile çok fazla component ihtiyacı olmayan bir site yapacaksınız Bootstrap olmalı. Ancak çok fazla component ihtiyacınız varsa, form validation gibi özellikler için ekstra kütüphaneler kullanmak istemiyorsanız tercihiniz Semantic-UI olabilir. Ancak çok fazla component içerdiği için Semantic-UI dosya boyutu daha büyüktür ve bu yüzden de daha yavaş çalışacaktır.
Çoğu component bütün frameworklerde temel olarak yer almaktadır ama bazı componentler ise sadece bir frameworkde yer alabilir. Bu yüzden başlamadan önce yapmak istediğiniz projeye en uygun frameworkü seçmek için, componentlerini incelemenizi tavsiye ederim.
Framework Grid sayıları genel olarak 12'dir. Bunun sebebi 12 sayısının hem 4, hem de 3 sayısına tam olarak bölünebilmesidir. Bu da tasarımlarda büyük bir avantaj sağlamaktadır. Bu yüzden tabloda yer alan Semantic-UI ve UIkit grid sayıları sebebiyle dezavantajlı durumdadır.
Responsive bir web sitesi yapmak için burada listelenen frameworklerden birisini kullanmanız yeterli olacaktır. Ancak framework kullanmaya başlamadan önce, responsive tasarımın temellerini öğrenmenizi öneririm. Bunun için Vidobu sitesinde hazırladığım; Responsive Web Sitesi Nasıl Yapılır? eğitim setini izleyebilirsiniz. Bu eğitim seti ile hem Responsive Tasarım temellerini öğrenebilir, hem de tüm responsive frameworklerin nasıl kullanılacağını öğrenebilirsiniz.