En İyi Front-End Framework’lerin Savaşı: Bootstrap ve Materialize CSS

Web geliştiricileri için seçebileceğiniz çok çeşitli front-end frameworkler sunulmakta. Ancak, daha iyi bir kullanıcı deneyimi için en iyi front-end framework hangisi? Bu makalede Materialize’nin nispeten daha popüler olan Bootstrap ile nasıl rekabet ettiğini öğreneceksiniz…

Web geliştiricileri olarak seçim yapabileceğiniz çok sayıda front-end framework bulunmaktadır. Bugüne kadarki en popüler tercih Bootstrap oldu. Bununla birlikte, şık kullanıcı deneyimi ortaya çıkaran bir alternatif arıyorsanız Materialize CSS‘e bir göz atmak isteyebilirsiniz.

Her iki framework’ü karşılaştırmak için bilmeniz gerekenleri sıralıyorum:

Materialize ve Bootstrap framework’lerinin ortak özellikleri:

Her ikisi de MIT lisanslıdır.
Her ikisi de (benzer yapı ve sınıf adlarına sahip) 12 sütun üzerinde çalışan bir grid sistemini kullanıyorlar, ancak Bootstrap’ın bu konuda ek yetenekleri var.
Her ikisinde de bir dizi bileşen ve bir simge seti bulunur.
Web uygulamalarında yapı CSS, JavaScript ve yazı tipleri sırasıyla css, js ve font klasörlerinde saklanır (varsayılan olarak).
İkisi de beklenen, duyarlı düzenleri sağlar.
Her ikisi de aktif şekilde korunuyor ve destekleniyor. (Twitter ve Google)

Materialize Hakkında Bilmeniz Gerekenler

Materialize, Google’ın tasarım felsefelerini kullanıyor. Buna aşina olmayanlarınız için, özellikler modern UI tasarımının basit ama anlamlı felsefesi üzerine odaklanmakta. Bu felsefe kullanıcı deneyimi öğelerinin davranışını ve kullanıcının görsel olarak nasıl etkileşime girdiğini ele alır. Web’in de bulunduğu tüm platformlarda (yalnızca Android değil) Google’ın kullanıcı arayüzüne tekdüzelik getirmek amacıyla ortaya çıktı. Spesifikasyon, görsel öğelerle ilgili genel ilkeleri özetler ve fizik, ışık, alan, momentumun nasıl kullanılacağını tartışır. Daha sonra belirli öğeler için somut örnekler ve gereksinimler sağlar. Örn. Düğmeler, listeler, sekmeler vs.

Materialize’nin Google’ın bir uygulaması olduğu göz önüne alındığında, öğelerin 3 boyutlu bir alan etrafında tasarlanmış olduğunu ve hareketten büyük ölçüde faydalanıyor olduğunu görüyoruz. Bu öğrenin bir genişlik ve yüksekliğe sahip olmakla birlikte, belirli bir şekilde bir derinliğe ve hareketine sahip olduğu anlamına da gelir. Bu, kullanıcının tanıdık görsel ipuçlarını kullanarak işlev bağlamını anlamasına yardımcı olmadaki bir nevi anahtardır. Basit olsa da bu görsel kavramlar etkilidir. Örneğin ben ekran bileşenlerini daha iyi kullandıkları için form bileşenlerinin çalışma biçimini de kullanmayı tercih ediyorum. Benim gibi düşünen geliştiriciler mutlaka olacaktır.

Materialize, bir CSS + JavaScript çerçevesi olarak istemtiye gönderilir, ancak CSS bölümleri Sass’ta yazılmıştır..

Kullanılabilir kullanıcı arabirimi bileşenlerine bakıldığında, Materialize‘nin Bootstrap kadar çok componenti malesef şuanlık yok. Bununla birlikte, kullanabileceğiniz ve işinize yarayacak birkaç bileşeni var. Bunlar arasında benim kullandıklarım:

Toasts
Modals that are fixed to the bottom of the window
Parallax

Tarayıcı uyumluluğu ile ilgili olarak, Materialize, modern tarayıcılarla çalışır, ancak Internet Explorer ile ilişkili olarak, IE10 + ile sınırlıdır, bu, belirli uygulama gereksinimlerinize bağlı olarak ciddi bir sorun mudur, bu sizin bileceğiniz bir konu.

Bootstrap Hakkında Bilmeniz Gerekenler

Twitter’ın gelişimini sağladığı Bootstrap, duyarlı bir tasarıma sahip mobil dostu web siteleri oluşturmak için kullanılan en popüler CSS framewoküdür. 2010 yılında kuruldu, ancak Ağustos 2011’e kadar resmi olarak piyasaya sürülmedi. O tarihten bu yana bir dizi bülten yapıldı. Güncel sürüm bilgisi için buraya tıklayabilirsiniz.

Kütüphane, ilk yaklaşım olarak mobile odaklanır; diğer bir deyişle, web siteleri mobil platformları hedeflenerek tasarlanır ve oluşturulur. Daha sonra masaüstlerinde ve daha büyük cihazlarda çalışmaya hazırlanır. Bununla birlikte, yukarıda Materialize için özetlendiği gibi, çerçeve çoğunluğu, etkileşimde bulundukları şeylerin görünüm ve tepki vermeleri üzerine odaklanır ve sonuç olarak, duyarlı bir kullanıcı deneyimi sunmak ana hedeftir.

Bootstrap, HTML sınıfları, CSS stilleri ve davranışlarını kullanarak yanıt veren kullanıcı deneyimini oluşturmak için bize belirli bir çerçeve sağlar; diğer bir deyişle, nesnelerin görünümüne odaklanmak yerine, HTML’ye tutarlı ve özelleştirilebilir bir temel yapıyı sağlamayı amaçlar.

Bootstrap varsayılan bir tema sağlarken, görsel sunum ve stil çerçevenin odağı değildir. CSS sınıfları kullanılarak yoğun bir şekilde tasarlandığından, görsel sunum stil sayfalarını kullanarak kolayca özelleştirilebilir. Sonuç olarak, Web sitenizin görsel sunum ve stilini değiştirmek için Bootstrap’ın sağladığı çok çeşitli temalar bulunmaktadır.

Bootstrap Materialize’den çok daha kapsamlı bir framewoktür. Örneğin:

Temel olarak bize, öğeleri gizlemek veya göstermek için sınıfları kullanma olanağı sunar.
Dokümantasyon çok daha kapsamlıdır (kullanım örneklerinden daha fazla yararlanılmıştır).
Tarayıcı uyumluluğu kapsamlı, IE9 +

Materialize‘nin Bootstrap’in doğrudan bir rakibi olduğunu söylemek Materialize için adil olmayacaktır; Ama umarım bir gün olacaktır, çünkü Materialize‘nin görünümü ve kullanıcı deneyimi çok hassas. İyi bir tasarımın, özellikle de 3 boyut ve hareketle ilgili tasarım ilkeleri açısından iyi tasarımın inkar edilmesi zor, ancak bunun nedeni, büyük ölçüde Google’ın Malzeme Tasarımı’ndan tutarlı bir dizi kılavuz uygulayacak olmasıdır. Bununla birlikte, Materialize framework’ü hala oldukça yeni – sonuç olarak yetenekleri, belgeleri ve topluluğu Bootstrap’ınkiyle yarışamıyor.

Sonuç olarak;

Uygulamanızı en az çabayla birinci sınıfa çeviren bir framework arıyorsanız veya uygulamanızı Google’ın tasarımıyla birleştirmek istiyorsanız, o zaman kesinlikle Materialize‘ye bir göz atın.

Öte yandan, denenmiş ve test edilmiş sağlam bir front-end framework arıyorsanız, büyük bir topluluk, eklenti seçenekleri ve temalarla Bootstrap‘ı denemelisiniz.