Spor bilgi gruplarının sayfa üzerinde nasıl ayrıştırıldığını, mobil görünümde içerik yoğunluğunun nasıl yeniden dağıtıldığını ve uzun sayfalarda daha kolay takip edilen bir okuma rotasının nasıl oluşturulduğunu ele alan yeni çalışma.
Sayfanın üst kısmı ziyaretçiye bütün detayları aynı anda göstermek yerine içeriğin genel yönünü açıklayan kısa bir giriş alanı olarak kullanılır. Marka, menü, ana başlık ve temel bölüm bağlantıları bu alanda birlikte yer alır.
Daha kapsamlı açıklamaların ana gövdeye bırakılması açılış bölümünün daha hafif görünmesini sağlarken kullanıcının detaylı bilgiye daha düzenli biçimde ulaşmasına yardımcı olur.
Bu yapı özellikle telefon ekranında ilk görünümün gereğinden fazla dikey alan kaplamasını azaltabilir.
Genel sayfa yapısından spor sınıflandırmasına, mobil görünümden arayüz akışına kadar her ana konu farklı bir bölüm altında ele alınır.
Bu yaklaşım ziyaretçinin yalnızca ihtiyaç duyduğu bölüme ilerlemesini kolaylaştırırken içerik tekrarlarının da azalmasına yardımcı olur.
Spor içeriğinin yoğun olduğu bir sayfada bütün kategori isimlerinin aynı büyüklükte ve ağırlıkta gösterilmesi kullanıcıya net bir öncelik sırası sunmayabilir.
Ana branşların daha güçlü tipografiyle ayrılması ve yardımcı açıklamaların daha sakin görünmesi sayfanın daha hızlı taranmasını destekler.
Kartlar, kapsamlı paragraf metinlerini tekrar etmek yerine kullanıcıya bölümün temel fikrini birkaç saniyede gösterecek kısa içerikler taşıyabilir.
Ayrıntılı bilgiler normal metin alanında devam ettiğinde kartlar ile ana gövde birbirini tamamlayan farklı görevler üstlenir.
Kategori isimleri değişse bile boşluk, kenarlık ve başlık yapısının tutarlı kalması sayfa genelindeki görsel bütünlüğü korur.
Telefon ekranında tüm navigasyon bağlantılarının aynı anda görünür olması üst bölümün sıkışmasına neden olabilir.
İkincil seçeneklerin gizlenmesi marka ve temel bölüm bağlantıları için daha fazla alan bırakırken sayfanın ana içerik yapısı korunur.
Masaüstünde sınırlı merkez kolon kullanılan metin alanı, telefonlarda ekranın kullanılabilir genişliğinden daha fazla yararlanabilir.
Kart kolonlarının azaltılması da her bilgi bloğuna daha rahat bir satır genişliği sağlar.
| Bileşen | Masaüstü Görünümü | Mobil Görünümü |
|---|---|---|
| Navigasyon | Geniş bağlantı dizisi | Öncelikli menü |
| Hero Başlığı | Geniş tipografi | Daha kontrollü ölçek |
| Özet Kartları | Çok kolonlu yapı | Daha az kolon |
| Metin Alanı | Sınırlı merkez kolon | Ekrana yaklaşan genişlik |
| SSS Kontrolleri | Standart tıklama alanı | Daha geniş dokunma alanı |
Bu varyasyonda koyu gece mavisi sayfanın temel arayüz rengini oluştururken buz moru tonları bağlantı, ikon ve küçük etiket alanlarında vurgu için kullanılır.
Uzun paragrafların beyaz ve açık gri yüzeylerde devam etmesi renk yoğunluğunu azaltarak içeriğin daha sakin görünmesini sağlar.
Ana başlıklar arasında bırakılan daha geniş mesafe ziyaretçiye yeni bir konu alanına geçildiğini gösterir.
Paragraf aralıkları ise aynı bölüm içindeki farklı fikirleri daha küçük ölçekte birbirinden ayırır.
Kartların yalnızca hızlı özetlerde kullanılması uzun sayfanın her noktasının kutularla çevrilmesini engeller ve daha doğal bir metin akışı sağlar.
Responsive grid, sabit navigasyon ve açılır soru-cevap yapısıyla ilgili kısa açıklamalar aşağıdaki bölümde devam ediyor.
Teknik SSS'yi İnceleGrid sisteminde minimum kart genişliği kullanılması geniş ekranda daha fazla, dar ekranda ise daha az kolon oluşturulmasına imkân verir.
Sticky header uzun sayfada kullanıcı aşağı doğru ilerlediğinde ana navigasyon seçeneklerinin erişilebilir kalmasını kolaylaştırır.
details ve summary elemanları temel açılır-kapanır davranışını ek JavaScript kodu kullanmadan sağlayabilir.
İlk ekranın kolay taranabilir kalmasını ve ziyaretçinin ana konuyu daha hızlı anlamasını sağlamak için.
Geniş monitörlerde metin satırlarının aşırı uzamasını azaltarak daha dengeli bir okuma alanı oluşturmak amacıyla.
Ana ve yardımcı başlıkların daha hızlı ayırt edilmesine yardımcı olur.
Her zaman değil. Daha düşük öncelikli bağlantılar küçük ekranlarda alan kazanmak amacıyla gizlenebilir.
Kolon sayısı azaldığında her kart daha fazla yatay alan kullanabilir.
Evet. İçeriğin kendisi korunurken başlık ölçeği, boşluk ve yerleşim değişebilir.
Önceki petrol-mint, lacivert-turkuaz ve bordo varyasyonlardan ayrılan yeni bir görsel kimlik oluşturmak amacıyla.
Ana navigasyona sürekli erişim sağlayarak bölüm geçişlerini kolaylaştırabilir.
Evet. details ve summary etiketleri temel açılır-kapanır davranışını tarayıcı üzerinden sağlayabilir.
Zaman içinde değişebilecek platform veya hizmet bilgileri yayımlanmadan önce güncel ve doğrulanabilir kaynaklardan ayrıca kontrol edilmelidir.