Sayfanın spor odaklı içerik dağılımını, mobil cihazlardaki yerleşim davranışını ve bilgi mimarisini yeni metinlerle değerlendiren bağımsız arayüz incelemesi.
Açılış ekranında marka alanı, kısa navigasyon ve genel içeriği özetleyen bir hero bölümü yer alır. Amaç, ziyaretçinin ayrıntılı metinlere geçmeden önce sayfanın ana konusunu anlayabilmesidir.
Hero alanından sonra gelen kısa özellik şeridi ise teknik ve görsel özellikleri birkaç kelimelik ifadelerle özetler. Böylece kullanıcı uzun metni okumadan önce sayfanın genel yaklaşımı hakkında fikir edinir.
Ana açıklamalar daha dar bir merkez kolonunda devam eder. Bu düzen, özellikle büyük monitörlerde metin satırlarının gereğinden fazla uzamasını sınırlar.
İlk bölüm genel arayüz davranışını açıklarken sonraki bölümler spor organizasyonu, mobil ekran ve teknik mimari gibi daha spesifik başlıklara geçer.
Bu sıralama, ziyaretçinin önce büyük resmi görmesini ve daha sonra ayrıntılı konulara ilerlemesini amaçlayan doğal bir okuma rotası oluşturur.
Bir spor sayfasında farklı kategorilerin açık biçimde sınıflandırılması ziyaretçinin aradığı bölümü daha hızlı tanımasına yardımcı olur. Ana branşlar daha güçlü tipografiyle gösterilirken yardımcı bilgiler daha düşük görsel ağırlıkta tutulabilir.
Bu ayrım, sayfa içerisinde çok sayıda içerik bulunduğunda özellikle önem kazanır. Her öğenin aynı büyüklükte ve renkte sunulması ekranın olduğundan daha yoğun görünmesine neden olabilir.
Kısa kartlar, sayfadaki ana özellikleri birkaç saniyede tarayabilmek için kullanılabilir. Daha ayrıntılı bilgiler ise normal paragraf düzeninde devam eder.
Böylece kartlar uzun metnin kopyası haline gelmez; yalnızca içerik haritasının hızlı bir özeti olarak görev yapar.
Kategori sayısı arttıkça sayfa içi bağlantıların anlamlı isimlerle etiketlenmesi önemlidir. Navigasyon ifadelerinin kısa tutulması hem masaüstünde hem telefon ekranında daha kontrollü bir yerleşim sağlar.
Telefon ekranında yatay alan sınırlı olduğundan masaüstünde yan yana kullanılan bileşenler dikey sıraya geçirilir. Bu yaklaşım içerik genişliğini artırırken yatay kaydırma ihtiyacını azaltır.
Aynı zamanda hero alanındaki büyük başlıklar ve navigasyon öğeleri küçük ekranlara göre yeniden ölçeklendirilir.
Geniş ekranda bütün bağlantıların görünür olması sorun oluşturmazken telefon ekranında fazla sayıda menü öğesi sıkışıklık yaratabilir. Bu nedenle ikincil bağlantıların gizlenmesi ve temel yönlendirmelerin korunması daha dengeli bir sonuç verebilir.
| Alan | Masaüstü Sunumu | Mobil Sunumu |
|---|---|---|
| Marka Alanı | Logo ve tam navigasyon | Logo ve temel bağlantılar |
| Açılış Bölümü | Geniş başlık ve açıklama | Daha kısa görsel yükseklik |
| Bilgi Kartları | Birden fazla sütun | Dikey veya dar grid |
| Metin Alanı | 920px sınırına kadar | Ekrana göre daralan padding |
| Alt Bölümler | Geniş dikey boşluklar | Daha kompakt mesafeler |
Başlıklar yalnızca metni büyütmek için değil, uzun sayfa içerisinde konum belirlemeye yardımcı olmak için de kullanılır. H2 seviyeleri ana bölüm sınırlarını, H3 seviyeleri ise bu bölümlerdeki alt başlıkları tanımlar.
Bu yapı özellikle sayfa içi bağlantılar kullanıldığında ziyaretçinin hangi bilgi alanında bulunduğunu daha rahat anlamasını sağlar.
Bu yeni varyasyonda vurgu rengi olarak koyu turkuaz kullanılmıştır. Ana okuma yüzeyi beyaz bırakılırken turkuaz tonları yalnızca bağlantı, buton, küçük etiket ve tablo başlıklarında kullanılır.
Böylece renk bir dekorasyon öğesinden çok arayüz yönlendirme aracı olarak görev yapar.
Uzun sayfalarda her bölümün kartlarla doldurulması yerine yalnızca hızlı özet ihtiyacı olan alanlarda kart kullanılması daha temiz bir görünüm oluşturabilir.
Mobil yerleşim, tablo davranışı ve açılır içerik sistemi hakkındaki kısa açıklamalar aşağıdaki soru-cevap alanında devam ediyor.
Teknik SSS'ye GeçKart kolonlarının ekran genişliğine göre otomatik biçimde azalması, aynı HTML yapısının masaüstü ve mobil cihazlarda kullanılabilmesini sağlar.
Tablo gibi geniş yapılar küçük ekranda taşabileceğinden kapsayıcıya overflow özelliği eklenmesi sayfanın genel genişliğinin bozulmasını önler.
FAQ alanında details ve summary elemanları kullanıldığında basit açılır içerik yapısı için ek JavaScript koduna ihtiyaç duyulmaz.
Ana içeriğin ekranın çok aşağısında başlamasını önlemek ve ziyaretçiye konuyu hızlı biçimde göstermek için kompakt bir hero alanı kullanılmıştır.
Çok uzun satırların okunması zorlaşabileceği için metin alanı kontrollü maksimum genişlik içerisinde merkezlenmektedir.
Masaüstünde yan yana bulunan kategori alanları küçük ekranlarda tek sütun veya daha dar bir grid düzenine geçirilebilir.
Hayır. Marka ve temel yönlendirmeler korunurken yalnızca ikincil bağlantılar alan kazanmak amacıyla gizlenebilir.
Büyük masaüstü başlıklarının telefon ekranında çok fazla satıra bölünmesini önlemek için tipografik ölçek azaltılmaktadır.
Hayır. Kartlar yalnızca kısa özetlerin faydalı olduğu bölümlerde kullanılır; ayrıntılı açıklamalar normal metin yapısında devam eder.
Yatay taşma kontrol edilmezse bozabilir. Bu nedenle tablo bir overflow-x:auto kapsayıcısında tutulmaktadır.
Önceki mavi, mor ve turuncu varyasyonlardan ayrılması için bu sürümde koyu turkuaz tabanlı yeni bir vurgu sistemi kullanılmıştır.
Kısa teknik açıklamaları ana içerik akışını uzatmadan açılır satırlar içerisinde sunmaya yardımcı olur.
Platform veya hizmetlerle ilgili değişken bilgiler yayımlanmadan önce güncel ve doğrulanabilir kaynaklardan ayrıca kontrol edilmelidir.