Spor kategorilerinin bilgi yoğunluğunu, mobil cihazlarda değişen ekran düzenini ve uzun içerik sayfalarında kullanılan görsel hiyerarşiyi yeniden yazılmış metinlerle ele alan yeni çalışma.
Açılış alanında marka, temel navigasyon ve sayfanın konusunu özetleyen kısa bir açıklama bulunur. Bu bölümün amacı bütün ayrıntıları aynı anda göstermek değil, ziyaretçinin sayfa içerisindeki ana yönleri hızlıca anlayabilmesini sağlamaktır.
İki temel buton kullanılması da kullanıcıya uzun içerikte farklı başlangıç seçenekleri sunar. Biri genel incelemeye yönelirken diğeri daha kısa soru-cevap alanına geçiş sağlar.
Hero bölümünün altında yer alan kısa bilgi şeridi ise sayfanın temel özelliklerini birkaç kelimelik ifadelerle özetler.
Uzun bir sayfada yalnızca paragraf aralıklarına güvenmek farklı konuların birbirinden ayrılmasını zorlaştırabilir. Bu nedenle ana bölümler belirgin H2 başlıkları altında toplanır.
Alt konuların H3 seviyesinde devam etmesi ziyaretçinin bölümün genel çerçevesini kaybetmeden daha ayrıntılı açıklamalara geçmesini sağlar.
Birden fazla spor kategorisinin aynı bölümde bulunması arayüzü karmaşık hale getirmek zorunda değildir. Branş isimleri arasında tutarlı boşluklar ve belirgin tipografi kullanılması içerik gruplarının daha rahat ayrılmasını sağlar.
Ana kategorilerin öne çıkarılması, yardımcı metinlerin ise daha nötr renklerde gösterilmesi sayfa üzerindeki bilgi önceliğini daha açık hale getirir.
Kartlar, ziyaretçinin bütün açıklamaları okumadan önce bir bölümün temel özelliklerini hızlıca anlamasına yardımcı olabilir.
Ancak aynı bilgilerin uzun paragraf ve kart içerisinde birebir tekrar edilmesi yerine iki yapının farklı görevlerde kullanılması daha temiz bir içerik mimarisi oluşturur.
Masaüstünde birkaç kategori yan yana gösterilebilirken telefon ekranında aynı yapı daha az kolonla veya tamamen dikey biçimde sunulabilir.
Bu değişim küçük ekranlarda kart metinlerinin sıkışmasını ve yatay kaydırma ihtiyacını azaltır.
Responsive tasarımda masaüstü sayfasındaki bütün öğelerin oranlı biçimde küçültülmesi yeterli değildir. Ekran alanı değiştikçe içerik öncelikleri de yeniden ele alınmalıdır.
Telefon ekranında temel navigasyon ve ana metin korunurken ikincil bağlantılar gizlenebilir. Kartlar ise daha az kolon kullanarak ekrana uyarlanır.
Buton ve açılır soru satırlarının yeterli yüksekliğe sahip olması, dokunmatik cihazlarda yanlış seçimi azaltmaya yardımcı olabilir.
Bu nedenle mobil tasarımda yalnızca metin değil, etkileşimli bileşenlerin çevresindeki boşluklar da önem taşır.
| Bileşen | Masaüstü Yaklaşımı | Mobil Yaklaşımı |
|---|---|---|
| Header Menüsü | Birden fazla bağlantı | Öncelikli seçenekler |
| Hero Alanı | Geniş başlık ve açıklama | Daha kısa ve kompakt yapı |
| Bilgi Kartları | Çok kolonlu görünüm | Azaltılmış kolon düzeni |
| Paragraf Kolonu | Sınırlı maksimum genişlik | Telefon alanına göre genişler |
| SSS Alanı | Fare ile açılır | Dokunmatik satırlar |
Bu sürümde indigo-mor tonları yalnızca buton, küçük etiket, bağlantı ve tablo başlığı gibi dikkat gerektiren alanlarda kullanılır.
Uzun metin bölümlerinin nötr renklerde bırakılması, vurgu noktalarının sayfa boyunca kaybolmasını engeller.
H2 başlıklarının altında kullanılan çizgi yeni bir ana bölüme geçildiğini görsel olarak belirtir. Bu küçük detay özellikle uzun içeriklerde sayfanın daha düzenli algılanmasına yardımcı olur.
Kartlar hızlı özetlerde yararlı olsa da bütün metinlerin kutular içerisine alınması uzun sayfalarda gereksiz görsel yoğunluk yaratabilir.
Bu nedenle ana açıklamalar normal metin düzeninde, yalnızca özet alanlar ise kart biçiminde sunulmuştur.
Mobil kolon davranışı, açılır SSS sistemi ve içerik genişliği hakkındaki kısa açıklamalar aşağıdaki bölümde devam ediyor.
Soru-Cevap Alanına GeçKart alanında kullanılan otomatik grid yaklaşımı yeterli yatay alan olduğunda birden fazla kolon, ekran daraldığında ise daha az kolon oluşturabilir.
Sticky header kullanıldığında anchor bağlantılarının hedef başlığı kapatmaması için başlıklarda scroll-margin-top uygulanabilir.
FAQ bölümünde details ve summary elemanlarının kullanılması temel etkileşimin ek JavaScript yazılmadan çalışmasına imkân verir.
İlk ekranda gereksiz bilgi yoğunluğu yaratmadan ana konuyu tanıtmak ve kullanıcıyı detaylı bölümlere yönlendirmek için.
H2 ana konu bölümlerini, H3 ise aynı bölüm içerisindeki daha küçük alt konuları ayırmak için kullanılmaktadır.
Zorunlu değildir; ancak kart metinlerinin benzer uzunlukta tutulması grid görünümünün daha dengeli algılanmasına yardımcı olabilir.
Sınırlı yatay alanı daha verimli kullanmak ve temel kontrollerin sıkışmasını önlemek amacıyla.
Masaüstündeki büyük yan boşluklara küçük ekranlarda ihtiyaç olmadığı için metin alanı ekranın kullanılabilir genişliğine yaklaşabilir.
Çok küçük veya birbirine yakın etkileşim alanları mobil cihazlarda yanlış dokunma ihtimalini artırabilir.
Önceki kehribar, gül-kırmızı ve diğer renk varyasyonlarından ayrılan yeni bir görsel kimlik oluşturmak amacıyla.
Bu örnekte hayır. details ve summary etiketleri tarayıcı tarafından yerleşik olarak desteklenen temel açılır-kapanır davranışı sağlar.
Hedef başlık header altında kalabilir; scroll-margin-top kullanılması bu sorunu azaltmak için uygulanabilir.
Zaman içerisinde değişme ihtimali bulunan platform veya hizmet bilgileri yayımlanmadan önce güncel ve doğrulanabilir kaynaklardan kontrol edilmelidir.