Spor bölümlerinin ekranda nasıl gruplandığını, mobil cihazlarda içerik önceliğinin nasıl değiştiğini ve uzun sayfalarda okuma ritminin nasıl korunduğunu ele alan yeni analiz.
Sayfanın açılış alanı, ziyaretçinin bütün detayları okumadan önce konunun genel çerçevesini anlayabileceği kısa bir giriş düzeni kullanır. Üst navigasyon, kısa etiket, ana başlık ve iki temel yönlendirme ilk ekranın ana parçalarını oluşturur.
Bu yapı özellikle uzun içeriklerde önemlidir. Kullanıcı ilk anda hangi başlıklara ulaşabileceğini gördüğünde sayfanın geri kalanını daha kolay tarayabilir.
Ana metinlerin hero alanından ayrı tutulması ise tanıtım ve detay okuma bölümlerine farklı görevler kazandırır.
İçerik genel sayfa yapısından başlayıp spor kategorilerine, mobil yerleşime ve teknik ayrıntılara doğru ilerler. Böyle bir sıra ziyaretçinin ana fikirden detaylara doğal biçimde geçmesini sağlar.
Her yeni H2 başlığının farklı bir soruya cevap vermesi de içerik tekrarlarının azaltılmasına yardımcı olur.
Bir spor sayfasında kategori sayısı yükseldikçe hangi bilgilerin öncelikli olduğunu göstermek daha önemli hale gelir. Ana branşlar daha belirgin başlıklarla, yardımcı açıklamalar ise daha düşük görsel ağırlıkla sunulabilir.
Bu yaklaşım ekranda her öğenin aynı anda dikkat çekmeye çalışmasını önler ve daha kontrollü bir içerik hiyerarşisi oluşturur.
Kartlar, uzun açıklamaları tekrar etmek yerine kategori hakkında kısa bir özet vermelidir. Kullanıcı daha fazla ayrıntı istediğinde normal metin bölümlerine geçebilir.
Kart metinlerinin kısa olması mobil ekranda yükseklik farklarının azalmasına ve daha düzenli bir grid görünümüne katkı sağlar.
Farklı branş blokları arasında yeterli mesafe bırakılması bir kategorinin nerede bittiğini ve diğerinin nerede başladığını daha açık hale getirir.
Dar ekranlarda bütün navigasyon seçeneklerini aynı anda göstermek yerine en önemli bağlantıların korunması daha temiz bir görünüm oluşturabilir.
İkincil bağlantılar gizlense bile ana içerik başlıkları ve sayfa içi anchor bağlantıları kullanıcıya yön göstermeye devam eder.
Masaüstünde kullanılan merkez kolon telefon ekranında daha geniş oran kullanır. Ancak paragraf metinlerinin doğrudan ekran kenarına yaslanmaması için yatay boşluk korunur.
Büyük başlıkların küçültülmesi ve hero yüksekliğinin azaltılması da ilk ekranın daha verimli kullanılmasını sağlar.
| İçerik Parçası | Masaüstü Kullanımı | Mobil Kullanımı |
|---|---|---|
| Ana Menü | Geniş bağlantı listesi | Temel bağlantılar |
| Hero Başlığı | Büyük metin ölçeği | Kompakt ölçek |
| Özellik Kartları | Çoklu grid | Daha az kolon |
| Metin Alanı | Merkezde sınırlı genişlik | Ekrana göre genişler |
| Tablo Alanı | Tam görünüm | Gerekirse yatay kaydırma |
Uzun metinlerde paragrafların birbirine çok yakın olması sayfanın yoğun görünmesine neden olur. Dengeli alt boşluklar her düşüncenin ayrı bir blok olarak algılanmasına yardımcı olur.
Bu varyasyonda kehribar ve koyu turuncu tonları yalnızca buton, etiket, bağlantı ve tablo başlıkları gibi etkileşim veya vurgu gerektiren noktalarda kullanılır.
Ana metnin nötr renklerde tutulması uzun okumalarda renk yorgunluğunu azaltır ve önemli kontrollerin daha kolay fark edilmesini sağlar.
H2 başlıklarının altında bulunan ince çizgi, uzun sayfada yeni bir içerik alanına geçildiğini görsel olarak güçlendiren basit bir ayraçtır.
Grid davranışı, açılır soru alanı ve responsive yerleşim hakkındaki kısa açıklamalar aşağıdaki SSS bölümünde devam ediyor.
SSS Alanına GeçCSS grid içerisinde minimum kart genişliği tanımlanması, geniş ekranda birden fazla kolon oluşmasını ve dar ekranda kolon sayısının otomatik olarak azalmasını sağlar.
Sticky header uzun sayfalarda ana navigasyonu sürekli erişilebilir tutar. Bölüm başlıklarında kullanılan scroll-margin ise anchor geçişlerinde başlığın header altında kalmasını azaltır.
details ve summary etiketleri kullanıcı yalnızca ilgilendiği sorunun cevabını açtığı için uzun SSS bölümünü daha kompakt tutabilir.
Sayfanın ana konusunu kısa biçimde açıklamak ve kullanıcıyı önemli içerik bölümlerine yönlendirmektir.
Farklı konuların ayrı başlıklarda sunulması sayfanın daha kolay taranmasını ve ilgili bilginin daha hızlı bulunmasını sağlar.
Hayır. Kartların kısa özetler sunması, ayrıntılı açıklamaların ise normal paragraf bölümlerinde devam etmesi daha dengeli olabilir.
Telefon ekranındaki sınırlı yatay alanı marka ve temel bağlantılar için daha verimli kullanabilmek amacıyla.
Hayır. İçerik korunur; kolon düzeni, yazı ölçeği ve boşluk sistemi cihaz genişliğine göre yeniden ayarlanır.
Evet. Kolon sayısı yalnızca telefon ve masaüstü arasında değil, ara ekran genişliklerinde de kullanılabilir alana göre değişebilir.
Önceki gül-kırmızı, turkuaz, mor ve diğer renk varyasyonlarından ayrılan yeni bir görsel karakter oluşturmak için.
Etkileyebilir. Bu nedenle bölüm başlıklarında scroll-margin-top kullanılarak hedef başlığın daha görünür kalması sağlanabilir.
Bu örnekte hayır. Tarayıcının yerleşik details ve summary davranışı temel açılır-kapanır işlevi sağlamaktadır.
Zaman içerisinde değişme ihtimali bulunan bilgiler yayımlanmadan önce güncel ve doğrulanabilir kaynaklardan kontrol edilmelidir.