Spor içeriklerinin sayfa üzerinde hangi mantıkla ayrıldığını, mobil görünümde hangi öğelerin daha fazla alan kazandığını ve uzun rehberlerde bilgi mimarisinin nasıl sade tutulduğunu inceleyen yeni çalışma.
Açılış bölümü ziyaretçinin tüm içeriği okumadan sayfanın temel yönünü anlayabilmesini sağlayacak kısa bir sunum alanı olarak çalışır. Navigasyon, başlık ve iki ana yönlendirme burada birlikte kullanılır.
Detaylı açıklamalar doğrudan hero bölümüne yığılmadığı için ilk ekran daha temiz kalır ve kullanıcı ana içeriğe daha hızlı ulaşabilir.
Bu yöntem özellikle uzun sayfalarda giriş ile detay bölümlerinin görevlerini birbirinden ayırır.
Sayfanın ana alanları farklı sorulara cevap verir. Genel içerik yapısı, spor organizasyonu, mobil ekran davranışı ve teknik mimari ayrı başlıklarda ele alınır.
Bu dağılım içerik tekrarını azaltırken her bölümün kendine ait bir anlam taşımasına yardımcı olur.
Farklı spor kategorilerinin aynı arayüzde bulunması halinde her öğenin aynı görsel ağırlığa sahip olması sayfanın taranmasını zorlaştırabilir.
Ana branşların daha belirgin başlıklarla gösterilmesi, yardımcı içeriklerin ise daha sakin tipografiyle devam etmesi daha açık bir bilgi sırası oluşturur.
Bilgi kartları uzun açıklamaların tamamını taşımak yerine bölümün temel noktasını hızlı biçimde göstermek için kullanılabilir.
Daha ayrıntılı bilgiler normal paragraf akışında sunulduğunda kartlarla metinler birbirini tamamlayan iki farklı yapı haline gelir.
Kart kenarlıkları, metin ölçekleri ve boşlukların kategori değişse bile tutarlı kalması tüm spor alanlarının aynı arayüz sistemine ait görünmesini sağlar.
Telefon ekranında geniş menülerin tüm bağlantılarıyla korunması yatay alanı sıkıştırabilir. Bu nedenle temel yönlendirmeler görünür bırakılıp daha düşük öncelikli bağlantılar gizlenebilir.
Böylece marka alanı ve ana kontroller daha rahat kullanılabilir.
Masaüstünde daha dar bir merkez kolonda yer alan metin mobil görünümde ekranın kullanılabilir genişliğine daha fazla yaklaşır.
Kartların kolon sayısı da azaltılarak her öğeye daha geniş satır alanı verilebilir.
| Bileşen | Geniş Ekran | Mobil Ekran |
|---|---|---|
| Header | Geniş navigasyon | Temel menü seçenekleri |
| Ana Başlık | Geniş tipografi ölçeği | Kompakt metin ölçüsü |
| Bilgi Kartları | Çok kolonlu görünüm | Az kolonlu görünüm |
| Metin Alanı | Merkezde sınırlandırılmış | Ekran alanına yaklaşır |
| SSS Kontrolleri | Standart satır yüksekliği | Dokunmaya uygun alan |
Bu sürümde koyu lacivert sayfanın ana yapısına ağırlık verirken lime yeşili küçük vurgu, etiket ve bağlantı noktalarında kullanılır.
Uzun metin alanları nötr yüzeylerde bırakılarak içerik okumasının daha sakin kalması sağlanır.
H2 başlıklarından önce kullanılan geniş boşluk yeni bir ana bölüme geçildiğini gösterirken paragraf aralıkları daha küçük ölçekli düşünce ayrımları oluşturur.
Her metnin kutu içine alınması sayfayı daha düzenli değil, daha parçalı gösterebilir. Bu nedenle kartlar yalnızca özet bilgiler için kullanılır.
Grid sistemi, sticky header ve açılır içerik davranışı hakkındaki kısa açıklamalar aşağıdaki SSS bölümünde devam ediyor.
Teknik Soruları İnceleKart alanlarında minimum genişlik kullanılması, ekran büyüdükçe daha fazla ve daraldıkça daha az kolon oluşmasına imkân verir.
Sticky header kullanıcının sayfanın alt bölümlerine ilerlediğinde bile ana navigasyon seçeneklerine erişebilmesini kolaylaştırır.
details ve summary etiketleri temel soru-cevap etkileşiminin tarayıcı tarafından sağlanmasına olanak verir.
İlk ekranı daha kolay taranabilir tutmak ve kullanıcının detaylı içeriğe daha hızlı ulaşmasını sağlamak için.
Büyük ekranlarda satırların aşırı uzamasını önleyerek daha rahat bir okuma alanı oluşturmak amacıyla.
Ana ve ikincil bilgi seviyelerinin daha hızlı ayırt edilebilmesine yardımcı olur.
Telefon ekranındaki sınırlı yatay alanı temel kontroller için daha verimli kullanmak amacıyla.
Evet. Kullanılabilir genişlik azaldıkça kolon sayısı düşürülebilir.
Hayır. İçerik korunurken ölçüler ve yerleşim cihaz genişliğine göre yeniden düzenlenir.
Önceki antrasit-turuncu sürümden tamamen farklı ve daha keskin bir görsel karakter oluşturmak amacıyla.
Uzun sayfalarda ziyaretçinin ana navigasyona hızlı biçimde geri dönmesini kolaylaştırabilir.
Hayır. Bu örnekte HTML details ve summary elemanları temel etkileşimi yerleşik olarak sağlayabilir.
Değişken platform veya hizmet bilgilerinin yayımlanmadan önce güncel ve doğrulanabilir kaynaklardan kontrol edilmesi önerilir.