Büyük Ekranlar İçin Tasarım: Genişliği Doldurmak Değil Sınırlamak

Ekranlar büyüdü, okuma alışkanlığı büyümedi. 2560 piksel genişliğe yayılmış bir metin sütunu, aynı metnin 1024'lük ekrandaki halinden daha kötü okunur. Geniş ekranın getirdiği iş, boşluğu doldurmak değil; içeriğin nereye kadar yayılacağına karar vermek.

Analitikteki çözünürlük yanıltıyor

Raporda gördüğünüz 1920x1080 ekranın çözünürlüğü. Düzeni belirleyen şey tarayıcı penceresinin genişliği. Büyük monitör kullananların önemli bir bölümü pencereyi tam ekran yapmaz, yanına ikinci bir pencere alır. Sonuçta "kullanıcılarımın çoğu 1920" cümlesi, sitenin 900 piksellik bir alanda açıldığı gerçeğini gizler.

Ölçmek zahmetli değil. window.innerWidth değerini oturum başına bir kez özel bir olay olarak gönderin, bir hafta bekleyin, kırılım noktalarını ondan sonra koyun. Çoğu projede geniş ekran kitlesi sanılandan küçük çıkar.

Satır uzunluğunu serbest bırakmayın

Rahat okuma için satır başına yaklaşık 45 ila 75 karakter aralığı yerleşik bir kabul. Bunun üstüne çıkıldığında göz satır sonundan bir sonraki satırın başına dönerken hedefi kaçırmaya başlar, okuyucu aynı satırı iki kez okur.

Sütun genişliğini genelde piksel yerine ch birimiyle kurarım; max-width: 68ch gibi bir değer, font ailesi ya da punto değiştiğinde kendini toplar, pikselle kurulan sınır ise her tipografi değişikliğinde elden geçmek zorunda kalır. Sınırı sayfanın tamamına değil metin sütununa koyun. Sayfa geniş kalabilir, okunan blok dar durur.

Kırılım noktası sayısını düşürün

Üç kırılım noktası dört ayrı düzen demek. Dört düzen, dört ayrı tasarım kararı, dört ayrı test turu ve hata çıktığında dört ayrı yerde arama. Bakım maliyeti buradan büyüyor.

Çoğu durumda bu sayı ikiye, hatta bire inebilir. Tipografiyi clamp() ile akışkan tanımlayın. Kart ve liste ızgaralarını repeat(auto-fit, minmax(280px, 1fr)) kalıbıyla kurun, sütun sayısını tarayıcı hesaplasın. Bileşen kendi genişliğine göre şekil değiştirecekse, sayfa genişliğini dinleyen medya sorgusu yerine container query kullanın; aynı bileşen dar bir kenar çubuğunda da geniş bir ana alanda da doğru davranır.

Görselde mesele boyut değil piksel yoğunluğu

Büyük ekran otomatik olarak büyük görsel istemez. İsteyen şey yüksek piksel yoğunluğu, yani 2x ve 3x cihazlar. Herkese tek bir 3000 piksellik dosya göndermek bunu çözmez, sadece faturayı kullanıcının bağlantısına keser.

srcset ile birkaç boy sunun ve sizes değerini gerçek CSS genişliğiyle eşleştirin. En sık görülen hata sizes değerini 100vw bırakmak: görsel 68 karakterlik bir sütunda görünürken tarayıcı ekran genişliğine göre aday seçer ve gereğinden iki kat büyük dosyayı indirir. Bu satırı düzeltmek beş dakika sürer, sayfa ağırlığında karşılığı hemen görünür.

Geniş alan nerede işe yarar

Metin için genişlik bir kazanç değil. Veri için öyle. Karşılaştırma tabloları, filtre ile sonucun yan yana durduğu ekranlar, takvimler, kod farkları, çok sütunlu panolar. Bu içerikler dar ekranda parçalanmak zorunda kaldığı için kullanıcıya bağlam kaybettirir, geniş ekranda ise tek bakışta okunur.

Ultra geniş oranlarda ise tek sütunu yaymak yerine ikiye bölün. Liste solda, seçilen kaydın detayı sağda. Kullanıcı gözünü 21:9 boyunca gezdirmek zorunda kalmaz, üstelik iki panel arasında geçiş yaparken yerini kaybetmez.

Geniş ekran bir fırsattan çok bir kısıt. Ekran ne kadar büyükse, neyin nerede duracağına dair kararı o kadar sizin vermeniz gerekiyor, çünkü tarayıcı sizin yerinize sadece esnetir.