Spor kategorilerinin sayfa üzerindeki dağılımını, mobil ekran davranışını ve uzun içeriklerde kullanılan hiyerarşiyi değerlendiren tamamen yeniden yazılmış rehber.
Sayfanın açılış bölümü, uzun içeriğe geçmeden önce kullanıcıya genel bir çerçeve sunacak biçimde hazırlanmıştır. Marka alanı, ana navigasyon ve kısa tanıtım bölümü birbirinden belirgin sınırlarla ayrılır.
Bu yöntemin temel amacı ziyaretçinin daha ilk ekranda sayfanın hangi konuları kapsadığını anlayabilmesini sağlamaktır. Uzun açıklamalar başlamadan önce içerik yönlendirmelerinin gösterilmesi özellikle mobil kullanımda sayfa içerisinde kaybolma ihtimalini azaltabilir.
Hero alanının kontrollü yükseklikte tutulması sayesinde ana içerik masaüstünde de ekranın çok aşağısında başlamaz.
Tek parça halinde sunulan uzun metinler hızlı taramayı zorlaştırabilir. Bu nedenle ana konuların H2, bunlara bağlı ayrıntıların ise H3 seviyesinde gösterilmesi daha düzenli bir okuma sırası oluşturur.
Bölümler arasındaki dikey boşluk da yalnızca estetik bir tercih değildir. Yeni bir konuya geçildiğini görsel olarak anlatan önemli bir bileşendir.
Birden fazla spor başlığının bulunduğu sayfalarda bütün kategorilerin aynı görsel ağırlıkta sunulması ekranı gereğinden yoğun gösterebilir. Bu nedenle ana branşlar ve yardımcı başlıklar arasında tipografik bir ayrım oluşturulması faydalıdır.
Futbol, basketbol veya tenis gibi ana gruplar daha belirgin başlık ölçekleriyle sunulurken ikincil açıklamalar daha nötr biçimde gösterilebilir.
Bu yapı özellikle küçük ekranlarda ziyaretçinin uzun metinleri okumadan önce ilgili kategori alanını hızlıca bulmasını kolaylaştırır.
Bilgi kartları ayrıntılı paragrafların yerine geçmekten çok hızlı özet sağlamak için kullanılmalıdır. Her kartın kısa bir başlık ve tek cümlelik açıklama taşıması sayfanın daha kolay taranmasını sağlar.
Daha kapsamlı bilgiler ise kartların altında veya ayrı bölüm içerisinde normal paragraf yapısıyla devam edebilir.
Masaüstü ekranında aynı anda daha fazla bilgi göstermek mümkünken telefon ekranında içerik alanı sınırlıdır. Bu nedenle mobil düzenin temel görevi yalnızca küçültmek değil, önem sırasını yeniden belirlemektir.
Ana başlık, temel navigasyon ve bölüm metinleri öncelikli tutulurken ikincil navigasyon bağlantıları veya dekoratif alanlar azaltılabilir.
Mobil cihazlarda bağlantı ve butonların birbirine çok yakın olması yanlış dokunmalara yol açabilir. Bu nedenle etkileşimli öğeler arasında masaüstüne kıyasla daha kontrollü boşluk kullanılması gerekir.
Paragrafların ekran kenarına tamamen yapışmaması için içerik alanında yatay padding bırakılması da mobil okunabilirliğe katkı sağlar.
| Arayüz Alanı | Masaüstü Görünümü | Mobil Düzen |
|---|---|---|
| Header | Marka ve geniş menü | Temel yönlendirmeler |
| Hero | Daha geniş başlık | Kompakt metin ölçeği |
| Kategori Kartları | Birden çok kolon | Tek veya dar kolon |
| İçerik Boşluğu | Geniş yan alanlar | Dar ama dengeli padding |
| Soru-Cevap | Tam genişlik satır | Dokunmatik uyumlu satır |
Sayfadaki H1 başlığının ana konuyu tanımlaması, diğer içerik başlıklarının ise H2 ve H3 seviyelerinde devam etmesi daha temiz bir doküman yapısı sağlar.
Böylece hem ziyaretçi hem de sayfa yapısını analiz eden sistemler farklı bölümler arasındaki ilişkiyi daha rahat anlayabilir.
Bu varyasyonda uzun metinler beyaz ve açık gri yüzeylerde tutulurken mor renk yalnızca bağlantı, etiket, buton ve küçük vurgu noktalarında kullanılmıştır.
Vurgunun sınırlı alanlarda kullanılması sayfanın tamamının aynı renk yoğunluğuna sahip olmasını önler.
Yaklaşık 920 piksel maksimum genişlik, büyük monitörlerde paragrafların gereğinden fazla uzamasını engeller. Daha kısa satırlar gözün bir sonraki satıra geçişini kolaylaştırabilir.
Sayfanın responsive davranışı ve içerik organizasyonu hakkındaki diğer açıklamalar soru-cevap bölümünde özetlenmiştir.
Sık Sorulanları GörKart alanında kullanılan CSS grid sistemi uygun ekran genişliğinde birden fazla kolon oluşturabilir. Alan daraldıkça kolon sayısı otomatik biçimde azalır.
Tablo kapsayıcısında yatay taşma kontrolü bulunması, çok kolonlu tabloların telefon ekranında sayfa genişliğini bozmasını engeller.
FAQ alanında details ve summary elemanlarının kullanılması temel açılır-kapanır davranışın ek JavaScript kodu olmadan çalışmasını sağlar.
Kontrollü genişlik uzun metinlerde satırların aşırı uzamasını önlemeye ve daha düzenli bir okuma alanı oluşturmaya yardımcı olur.
Birbirinden farklı branşları açık biçimde ayırmak ziyaretçinin ilgilendiği içeriği sayfa içerisinde daha hızlı bulmasını sağlayabilir.
Her zaman değil. Alan sınırlı olduğunda ikincil bağlantılar gizlenip temel navigasyon seçenekleri korunabilir.
Evet. Media query kurallarıyla büyük masaüstü başlıkları dar ekranlarda daha uygun ölçülere düşürülmektedir.
Kartların amacı uzun içeriği tekrar etmek değil, önemli noktaların hızlı biçimde taranabilmesini sağlamaktır.
Tablo ekran genişliğinden büyük olduğunda kapsayıcı içerisinde yatay kaydırma kullanılabilir.
Hayır. Bu örnekte HTML details ve summary elemanları temel açılır-kapanır işlevini tarayıcı üzerinden sağlamaktadır.
Önceki mavi ve turuncu varyasyonlardan ayrılan yeni bir görsel karakter oluşturmak amacıyla mor tonları vurgu rengi olarak kullanılmıştır.
Hayır. Tablet ve farklı pencere genişlikleri de aynı responsive kurallar içerisinde değerlendirilebilir.
Zaman içerisinde değişme ihtimali bulunan hizmet veya platform bilgileri yayımlanmadan önce güncel ve doğrulanabilir kaynaklardan kontrol edilmelidir.