Sayfa Foldu: Üst Bölümde Ne Durmalı, Neye Göre Karar Verilir

Üst bölüm tartışması genelde yanlış yerden başlar: fold'un tam olarak nerede bittiğini kimse bilmiyor. Tarayıcı çubukları, cihaz yüksekliği, yakınlaştırma oranı ve ekranın çevrilmesi o çizgiyi her ziyaretçide başka bir yere koyuyor. O yüzden doğru soru "fold'un üstüne ne sığar" değil, "kaydırma yapmayan bir ziyaretçi hangi bilgiyi mutlaka okumuş olmalı" sorusu.

Fold nerede bitiyor

Görünür alanın yüksekliği tek bir sayı değil, bir aralık. 390 piksel genişliğindeki bir telefonda adres çubuğu ve alt bar yerini aldıktan sonra elinizde aşağı yukarı 600 ile 670 piksel arası bir yükseklik kalır. Aynı sayfa 1440x900 bir dizüstünde 750 pikselin üzerini görür, harici bir monitörde bin pikseli aşar. Yani üst bölümü tek bir ekran görüntüsüne göre kurarsanız, ziyaretçilerin büyük kısmı sizin tasarladığınız kadrajı hiç görmez.

Bunun kodda karşılığı da var. height: 100vh mobil tarayıcılarda adres çubuğunu hesaba katmaz, dolayısıyla gerçek görünür alandan büyük bir kutu üretir ve alt kenarınız ekranın dışına taşar. svh ve dvh birimleri tam bu yüzden eklendi. Üst bölümü sabit yükseklikle kilitlemek yerine içeriğin kendi yüksekliğiyle akmasına izin vermek, çoğu durumda daha güvenli.

İlk ekranda hangi bilgi durmalı

Sıralamayı yaparken tek bir ölçüt işe yarıyor: ziyaretçi burada durup ayrılsa, hangi bilgiyi eksik götürmüş olur. Bu ölçütle bakıldığında üst bölümün yükü üç parçaya iner.

• Sayfanın ne olduğu. Marka sloganı değil, sayfanın konusu: "İstanbul içi aynı gün kurye" gibi.
• Bir sonraki adım. Tek bir eylem, görünür ve tıklanabilir halde.
• O adımı atmak için gereken kanıt kırıntısı: fiyat aralığı, teslim süresi, kimlerin kullandığı.

Hero görseli bu listede yok, çünkü sıralamada en sonda geliyor. Dekoratif bir görselin ilk ekranın yarısını yemesi yaygın bir alışkanlık ama savunulması zor bir alışkanlık; aynı alan fiyatı ya da teslim süresini taşıyabilecekken yerini soyut bir fotoğrafa veriyor.

Tam ekran üst bölüm kaydırmayı öldürebilir

Kaynak metinlerin çoğu iki şeyi birlikte söylüyor: önemli olan her şeyi üste koyun, ayrıca aşağıda devamı olduğunu sezdirin. Bu ikisi aynı anda tutmuyor. Üst bölüm ekranı tam dolduruyor ve düzgün bir yatay kenarla bitiyorsa, ziyaretçi o kenarı sayfanın sonu sanır. Yanlış dip (false bottom) denen bu durumda aşağıda ne olduğu fark etmez, kimse oraya gitmez.

Çözüm ok işareti eklemek değil, kesmeyi bozmak. Sonraki bölümün ilk satırı ya da bir kartın üst kenarı ekranın içine girsin, göz yarım kalmış bir şey görsün. Bir projede altındaki fiyat tablosunu kullanıcı testinde kimsenin açmadığını izledim; metni hiç değiştirmedik, bölümün alt kenarını seksen piksel yukarı aldık ve tablo görülmeye başladı.

Üst bölüm ve yüklenme süresi aynı bütçeden harcıyor

Bu, fold tartışmasının en çok atlanan tarafı. Largest Contentful Paint, adı gereği görünür alandaki en büyük öğeyi ölçer, o öğe de neredeyse her zaman üst bölümdeki görsel ya da başlıktır. Dolayısıyla "en etkileyici görseli en üste koy" tavsiyesi, doğrudan LCP'yi büyüten şeyi yapmanızı istiyor. Ziyaretçi ilk ekranı beklerken ayrılıyorsa, o ekranın kompozisyonu üzerinde harcanan saatlerin karşılığı da yok.

Pratikte sıralama şöyle kuruluyor: metin ilk gelir, görsel arkadan yetişir. Başlık ve eylem düğmesi sistem fontuyla ya da font-display: swap ile hemen okunur hale gelir. Üst bölümdeki görsele asla loading="lazy" verilmez, çünkü o görsel geciktirilmek istenen görsel değil, beklenen görseldir. Genişlik ve yükseklik niteliklerini yazmak da zorunlu, yoksa görsel indiğinde yerleşim zıplar ve okunmaya başlanmış metin kayar.

Yakınlaştırma foldu yeniden böler

Masaüstünde özenle kurulmuş bir üst bölüm, ziyaretçi yüzde 200 yakınlaştırdığında iki ekrana, yüzde 400'de daha fazlasına dağılır. WCAG'ın reflow ölçütü içeriğin 320 piksel genişliğinde, yatay kaydırma olmadan kullanılabilir olmasını ister (1.4.10 Reflow), ve 1280 piksellik bir ekranda yüzde 400 yakınlaştırma tam olarak o 320 piksele denk gelir. Bu ölçütü karşılayan bir sayfada üst bölüm zaten yatay değil dikey akar.

Test etmesi kolay: tarayıcıyı yüzde 200'e alın, sayfayı yenileyin, ilk ekranda hâlâ sayfanın ne olduğu ve ne yapılacağı duruyor mu diye bakın. Duruyorsa fold ile ilgili işinizin çoğu bitmiştir. Durmuyorsa sorun yakınlaştırmada değil, ilk ekrana fazla şey yüklenmiş olmasında.