Spor bilgilerinin sayfa boyunca nasıl yönlendirildiğini, mobil ekranlarda hangi içerik parçalarının yeniden ölçeklendiğini ve uzun sayfalarda daha rahat takip edilen bir bilgi sisteminin nasıl kurulduğunu ele alan yeni sürüm.
Sayfanın açılış bölümü ziyaretçiye tüm ayrıntıları sunmak yerine içeriğin hangi yöne ilerlediğini açıklayan kısa bir başlangıç alanıdır. Marka, navigasyon, ana başlık ve temel geçişler bu bölümde birlikte yer alır.
Detaylı metinlerin daha aşağıdaki ana içerik alanında başlaması ilk ekranın daha rahat taranmasını ve önemli yönlendirmelerin daha kolay fark edilmesini sağlar.
Bu yaklaşım küçük ekranlarda hero bölümünün gereğinden fazla yükseklik oluşturmasını da azaltabilir.
Sayfa spor yapısı, mobil davranış, görsel sistem ve teknik yerleşim gibi farklı konuları ayrı başlıklar altında işler.
Her ana bölümün bağımsız bir konuya sahip olması ziyaretçinin sayfayı baştan sona okumadan da ilgili içeriğe ulaşmasını kolaylaştırır.
Bir spor sayfasındaki kategori sayısı arttığında bütün başlıkların aynı ölçüde öne çıkarılması ekranın karmaşık görünmesine neden olabilir.
Ana branşlara daha güçlü tipografi verilmesi ve yardımcı metinlerin daha nötr tutulması ziyaretçiye daha anlaşılır bir bilgi sırası sunar.
Kartlar uzun açıklamaların tekrarlandığı bölümler olmaktan çok temel özelliklerin birkaç saniyede görülebileceği kısa özet alanlarıdır.
Daha kapsamlı içeriklerin normal paragraf düzeninde devam etmesi kart ve metin bloklarının farklı görevler üstlenmesini sağlar.
Başlık ölçüsü, kart kenarlığı ve boşluk değerlerinin bütün kategorilerde tutarlı olması sayfanın görsel bütünlüğünü güçlendirir.
Telefon ekranında bütün navigasyon bağlantılarının görünür kalması üst bölümde gereksiz yatay sıkışıklık oluşturabilir.
Daha düşük öncelikli bağlantıların gizlenmesi temel menü ve marka alanının daha rahat kullanılmasına yardımcı olur.
Masaüstünde merkezde sınırlandırılan paragraf alanı mobilde kullanılabilir genişliğin daha büyük bölümünü kullanabilir.
Kart kolonlarının azalması ise her özet kutusu için daha geniş bir metin alanı oluşturur.
| Arayüz Öğesi | Geniş Görünüm | Dar Görünüm |
|---|---|---|
| Üst Menü | Tam bağlantı dizisi | Öncelikli seçenekler |
| Ana Başlık | Geniş ölçek | Kompakt tipografi |
| Özet Kartları | Birden fazla kolon | Azaltılmış kolon |
| Metin Alanı | Sınırlı merkez kolon | Ekrana daha yakın genişlik |
| SSS Satırları | Standart tıklama alanı | Dokunmaya uygun yükseklik |
Bu varyasyonda koyu indigo ana arayüz yönünü belirlerken parlak pembe etiket, ikon ve önemli bağlantılarda yardımcı vurgu olarak kullanılır.
Uzun metin bölümlerinin açık sis grisi ve beyaz yüzeylerde kalması renk yoğunluğunu azaltarak daha sakin bir okuma deneyimi oluşturur.
Ana başlıklardan önce kullanılan daha geniş mesafe yeni bir konu başladığını görsel biçimde anlatır.
Paragraf aralıkları ise aynı konu içerisindeki fikirleri daha küçük ölçekli bölümlere ayırır.
Her metin alanının bir kutuya dönüştürülmemesi sayfanın daha açık ve daha doğal görünmesini sağlar. Kartlar yalnızca hızlı özet gereken alanlarda kullanılır.
Responsive kolonlar, sabit navigasyon ve açılır soru alanlarıyla ilgili kısa teknik açıklamalar aşağıdaki bölümde devam ediyor.
Teknik Sorulara GeçMinimum kart genişliği kullanılan grid sisteminde ekran büyüdükçe daha fazla, küçüldükçe daha az kolon oluşabilir.
Sticky header uzun içeriklerde ana bölüm bağlantılarının sayfanın üst kısmında erişilebilir kalmasına yardımcı olur.
details ve summary elemanları temel soru-cevap davranışını ek JavaScript ihtiyacı olmadan sağlayabilir.
Kullanıcının ana konuyu daha hızlı anlamasını ve uzun içerik alanına gereksiz kaydırma yapmadan ulaşmasını sağlayabilir.
Çok geniş ekranlarda aşırı uzun satırların oluşmasını önleyerek paragrafların daha rahat takip edilmesine yardımcı olmak için.
Ana ve yardımcı bilgi seviyelerinin daha kolay ayırt edilmesini sağlar.
Hayır. Düşük öncelikli bağlantılar küçük ekranda alan kazanmak amacıyla gizlenebilir.
Daha az kolon kullanılması kartlara daha geniş içerik alanı kazandırarak metin sıkışıklığını azaltabilir.
Evet. Temel içerik korunurken tipografi, boşluk ve kolon sistemi değişebilir.
Önceki grafit-cyan, gece mavisi ve petrol tonlu sürümlerden ayrılan yeni bir görsel karakter oluşturmak amacıyla.
Uzun sayfalarda kullanıcının ana bölüm bağlantılarına kolayca geri ulaşması gerektiğinde yararlı olabilir.
Evet. HTML details ve summary etiketleri temel açılır-kapanır davranışını tarayıcının kendi özellikleriyle sağlayabilir.
Zamanla değişebilecek platform veya hizmet bilgileri yayımlanmadan önce güncel ve doğrulanabilir kaynaklardan ayrıca kontrol edilmelidir.