Spor başlıklarının sayfa içerisinde nasıl katmanlandığını, mobil ekranlarda yerleşimin nasıl yeniden şekillendiğini ve uzun içeriklerde daha düzenli bir görsel akışın nasıl kurulduğunu ele alan yeni çalışma.
Açılış alanı ziyaretçiye tüm ayrıntıları tek seferde vermek yerine sayfanın hangi konulara odaklandığını kısa biçimde gösterir. Marka, menü, ana başlık ve temel yönlendirmeler ilk ekranda bir araya gelir.
Detaylı açıklamalar ise ayrı bir içerik kolonunda devam eder. Böylece açılış alanı tanıtım, ana gövde ise derinlemesine açıklama görevi üstlenir.
Bu yaklaşım mobil cihazlarda da ilk ekranın gereksiz biçimde uzamasını önleyebilir.
Genel içerik düzeni, spor grupları, mobil davranış ve görsel planlama farklı ana bölümlerde değerlendirilir.
Bu sayede sayfanın her kısmı ayrı bir konuyu işler ve içerik tekrarları azaltılır.
Çok sayıda spor kategorisinin bulunduğu bir sayfada ana başlıkların daha güçlü tipografiyle gösterilmesi ziyaretçinin ilgili bölümü daha hızlı bulmasına yardımcı olabilir.
Yardımcı açıklamaların daha nötr görünmesi ise ekran üzerindeki görsel yoğunluğu azaltır.
Kart alanları uzun paragraf içeriklerinin tekrarlandığı yerler yerine temel özelliklerin hızlı biçimde tarandığı özet alanlar olarak kullanılabilir.
Daha kapsamlı açıklamaların normal metin akışında kalması sayfanın daha açık ve dengeli görünmesini sağlar.
Kategori değişse bile aynı başlık, kenarlık ve boşluk sisteminin korunması sayfanın farklı bölümlerini ortak bir görsel yapıda birleştirir.
Dar ekranlarda bütün bağlantıların aynı anda görünür olması marka ve temel kontroller için kullanılabilir yatay alanı azaltabilir.
Bu nedenle ikincil bağlantılar gizlenip öncelikli bölüm geçişleri korunabilir.
Masaüstündeki merkez kolon telefon ekranında kullanılabilir genişliğe daha fazla yaklaşabilir.
Kart kolonlarının azaltılması da her kartın metin için daha rahat bir satır alanına sahip olmasını sağlar.
| Yapı | Masaüstü | Mobil |
|---|---|---|
| Üst Menü | Geniş bağlantı listesi | Öncelikli yönlendirmeler |
| Hero Alanı | Büyük başlık ölçeği | Kompakt görünüm |
| Bilgi Kartları | Çoklu kolon | Azaltılmış kolon |
| Ana Metin | Merkezde sınırlandırılmış | Ekranı daha fazla kullanır |
| SSS Satırları | Standart kontrol alanı | Dokunmaya uygun yükseklik |
Bu varyasyonda koyu petrol ana arayüz rengini oluştururken açık mint tonları etiket, ikon ve küçük bağlantı alanlarında kullanılır.
Ana metin alanlarının beyaz ve açık gri yüzeylerde kalması uzun okumalarda daha sakin bir görünüm sağlar.
Ana başlıklar arasındaki geniş mesafe yeni bir konuya geçildiğini, paragraflar arasındaki daha küçük boşluklar ise aynı bölüm içerisindeki fikir değişimini gösterir.
Kartların her metin bloğunda kullanılmaması sayfanın gereksiz biçimde kutulara ayrılmasını önler ve daha doğal bir içerik akışı oluşturur.
Responsive grid, sticky header ve açılır soru-cevap yapısı hakkındaki ek bilgiler aşağıdaki bölümde devam ediyor.
Teknik SSS'ye GeçKartlarda minimum genişlik kullanılması, mevcut alan arttığında daha fazla ve azaldığında daha az kolon kullanılmasını sağlayabilir.
Sticky header ziyaretçi aşağıdaki içerik alanlarına ilerlediğinde bile ana navigasyon seçeneklerinin görünür kalmasına yardımcı olur.
details ve summary elemanları temel soru-cevap etkileşimini ek JavaScript olmadan sağlayabilir.
Kullanıcının ana konuyu hızlı biçimde anlamasını ve detaylı içeriğe daha erken ulaşmasını sağlamak amacıyla.
Büyük ekranlarda aşırı uzun satırları azaltarak daha dengeli bir okuma alanı oluşturmak için.
Ana ve yardımcı bilgi gruplarının daha kolay ayırt edilmesine yardımcı olur.
Her zaman değil. Daha düşük öncelikli bağlantılar ekran alanı kazanmak için gizlenebilir.
Her kart için daha geniş bir okuma alanı oluşturarak metin sıkışıklığını azaltmak için.
Hayır. Ana içerik korunur; temel değişiklikler ölçü, boşluk ve yerleşimde yapılır.
Önceki lacivert-turkuaz, bordo-mercan ve diğer varyasyonlardan farklı yeni bir görsel karakter oluşturmak amacıyla.
Uzun sayfalarda ana navigasyon bağlantılarına erişimin korunmasına yardımcı olur.
Evet. HTML details ve summary elemanları temel açılır-kapanır davranışını yerleşik olarak 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.