Topluluk Merkezi
Advertisement

Toppluluğunuzun tasarımını özelleştirmesi mi düşünüyorsunuz? Bir CSS stratejisinin haritasını çıkarırken, genel olarak çekici seçimler yapmak ve mümkün olan en geniş editör ve okuyucu yelpazesini memnuniyetle karşılamak istersiniz. İşte size yardımcı olacak birkaç en iyi uygulama.

Yönergeler

Tema tasarımcısıyla başla

Topluluğunuzu özelleştirmenin en basit yolu, Fandom'un tema tasarımcısı kullanmaktır. Sitenizin temel renk paletini, marka, favicon ve arka plan kolayca değiştirmenize olanak sağlar. Tema tasarımcısı ile değiştirilebilecek her şey onunla değiştirilmelidir. Bu yüzden CSS'ye geçmeden önce oradan başlayın.

Renkler

Özellikle içerik alanında düşük kontrast, çakışan veya korkunç renklerden kaçının. İnsanların maddelernizi daha uzun süre kalabilmeleri için kolayca okuyabilmelerini istiyorsunuz. İyi bir kontrast kullanıp kullanmadığınızı kontrol etmek için WCAG Kontrast Denetleyicisi gibi web sitelerini kullanabilirsiniz.

Herhangi bir CSS yazmadan önce tema tasarımcısı ile başlayın.

Hatırlatma:

  • Herkesin görme yeteneği seninki gibi çalışmıyor. Önemli sayıda insanda görme ve renk körlüğünün azalmasıyla ilgili sorunlar var.
  • Farklı cihazlar farklı davranır. Kendi ekranınızda gördüğünüz renkler bir başkasında pek iyi çalışmayabilir.
  • Metin ve arka plan arasında iyi kontrast bulundurun.
  • Arka plan resimleri harikadır, ancak üstündeki metni okuyamazsanız değil. Tema Tasarımcısının şeffaflık kaydırıcısını, özellikle yoğun bir arka planda dikkatlice kullanın. Ayrıca uygun bir arka plan rengi ekleyin.
  • Yoğun geçmişlerden kaçınmaya çalışın.
  • Özellikle ana metin alanında yazı tipi boyutlarını çok küçük yapmamaya çalışın. Orijinal yazı tipi boyutunu ana metin alanında tutmak en iyisidir.

Yazı tipleri

  • Özel yazı tipleri kabul edilir, ancak daha azı çoğu zaman daha fazladır. Gözleri zorlamaktan kaçının. Yazı tipi türünü değiştirebileceğiniz yerlere dikkat edin: Özelleştirme politikası. Sayfa içeriğinin yazı tipini değiştirmemek en iyisidir çünkü kolayca okunabilmeleri gerekir.
  • Ticari kullanıma izin veren birçok ücretsiz yazı tipi bulabilirsiniz. Google Fonts'na bir göz atmak isteyebilirsiniz. Yardıma ihtiyacınız varsa, lütfen bu kılavuzu izleyin: Google Fonts'u şçe aktar.

Basit tutun

CSS, bir siteyi gerçekten öne çıkarmak için size olası efektlerin bolluğunu sunar. Ancak aşırıya kaçmamalısın. CSS'nin amacı, topluluğu genel olarak çekici kılmaktır ve çok gösterişli tasarım yeni okuyucuları kapatıyor olabilir.

  • Dekoratif öğeleri yalnızca gerekli yerlerde kullanın.
  • Sayfalarda çok "gösterişli" herhangi bir şeyden kaçının. Simgelerin öne çıkmasını sağlamak için bazı vurgulu efektler ekleyebilirsiniz, ancak vikilerin çoğunlukla bilgi ile ilgili olduğunu unutmayın. Elbette viki, yazdığınız konuyu görsel olarak çekici bir şekilde temsil etmeli, aynı zamanda izleyicinin dikkatini dağıtabilecek veya itebilecek her şeyi azaltacak şekilde olmalıdır.

Sorumlu tasarım

Hayranlık sayfalarının değişken genişlikleri vardır. Bu, tarayıcı penceresinin boyutuna göre biraz değiştikleri anlamına gelir. Test sırasında tarayıcınızın genişliğini değiştirerek tasarımınızın tam çalıştığından emin olun. Yapabiliyorsanız, tasarımınızı gerçek bir tablette de test edin.

Okunabilir kod yazma

Kolayca okunabilen ve anlaşılabilen bir kod yazın. CSS'niz bir noktada neredeyse kesinlikle başkaları tarafından okunacağından:

  • /* Bu kod x, y ve z yapar */ gibi net yorumlarla açıklama ekleyin (sadece bağlamdan anladığınız bir şey değil, aynı zamanda kodu bilmeden okuyup düzenleyen herkes olmalıdır)
  • özel sınıflarınızı ve kimliklerinizi anlaşılır adlar verin. Bir şeyin çevresinde bir kutu oluşturuyorsa, onu .tlk328 değil .box olarak adlandırmayı düşünün.
  • topluluğunuzun zevklerine boşluk ve girinti ekleyin, ancak bir biçim seçin ve buna bağlı kalın
  • Vikinin aynı bölümünü etkileyen kodu bir arada tutarak kodu mantıksal olarak düzenleyin.

Yararlı bağlantılar

Daha fazla yardım ve geri bildirim

Advertisement