Görsel boyut rezervasyonu.
Boyut rezervasyonu, bir kaynak yüklenmeden önce kaplayacağı alanın tarayıcıya bildirilmesidir ve düzen kaymasının en yaygın kaynağını tek adımda kapatır.
Düzen kayması sebeplerinin listesinde birinci sırada boyutsuz görseller var ve çözümü diğerlerinden belirgin biçimde ucuz: görsele genişlik ve yükseklik yazmak. Tek satırlık bir düzeltme, çoğu sitede kaymanın büyük kısmını ortadan kaldırıyor.
Buna rağmen atlanmasının sebebi tarihsel: duyarlı tasarım yaygınlaştığında, sabit boyut bildirmenin duyarlılığı bozacağı düşünüldü ve öznitelikler kaldırıldı. Bu, o dönemde kısmen doğruydu; bugün tamamen yanlış.
Modern tarayıcılar oranı hesaplıyor
Bugünün tarayıcıları, genişlik ve yükseklik özniteliklerinden en-boy oranını hesaplıyor ve o oranı duyarlı düzende koruyor. Yani öznitelikleri yazmak, görselin sabit boyutta görüneceği anlamına gelmiyor — yalnız oranının bilindiği anlamına geliyor.
Pratikte şu oluyor: görsel yüzde yüz genişlikte esniyor, ama yüksekliği orantılı olarak hesaplanıp yer önceden ayrılıyor. Kaynak geldiğinde ayrılmış yere oturuyor ve hiçbir şey kaymıyor.
Yazılacak değerler görselin GERÇEK piksel boyutları olmalı — ekranda görüneceği boyut değil. Oran o iki sayıdan çıkıyor ve görüntülenen boyut CSS tarafından belirleniyor.
Duyarlı görsellerde
Farklı genişlikler için farklı dosyalar sunulduğunda bir soru doğuyor: hangi dosyanın boyutu yazılacak? Cevap, dosyaların aynı en-boy oranını taşıması gerektiğidir — o zaman hangisi yazılırsa yazılsın oran aynı çıkar.
Oranlar farklıysa — örneğin mobilde kare, masaüstünde geniş bir kırpma kullanılıyorsa — öznitelikler yetmez ve CSS tarafında kırılım başına oran tanımlanması gerekir. Bu, sanat yönetimi gerektiren görsellerde tipik bir durumdur.
- Aynı oranlı türevler — genişlik ve yükseklik özniteliği yeterli.
- Farklı oranlı kırpmalar — kırılım başına oran tanımı gerekir.
- Bilinmeyen boyutlu içerik — en kötü durum için asgari yükseklik ayrılır.
- Gömülü çerçeveler — kapsayıcıya oran verilir; öznitelik çalışmaz.
- Reklam alanları — sabit yükseklikli bir kapsayıcı; reklam gelmezse boşluk kalır ama kayma olmaz.
Son madde bir ödünleşim içeriyor ve bilinçli verilmesi gerekiyor: yer ayırmak, kaynak gelmediğinde boş bir alan bırakır. Kayma ile boşluk arasında seçim yapılıyor ve neredeyse her durumda boşluk daha iyi — çünkü kullanıcı boşluğu görür ve devam eder, kaymayı ise yaşar.
Bu sitedeki uygulama
Bu sitede rezervasyon disiplini her görsel türü için ayrı ayrı kurulu ve ölçülüyor. Vitrin kadrajlarının boyutu rezerve ediliyor ve doğrulama süiti dört ayrı rotada görselin gerçekten yüklendiğini, formatının modern olduğunu ve boyutunun rezerve edildiğini ölçüyor.
Canlı önizleme videolarında ise rezervasyon poster karesiyle yapılıyor: video yüklenmeden önce aynı orandaki bir görsel yerini tutuyor. Hareket azaltma tercihi açıkken video hiç yüklenmiyor ve poster kalıcı hâle geliyor — süit o durumda posterin gerçekten yüklendiğini ayrıca ölçüyor.
Ölçülen sonuç, bu sitenin ve yönettiği üç projenin düzen kaymasının 0,001 olması. Google'ın iyi eşiği 0,1; yani ölçülen değer eşiğin yüzde biri. Bu bir optimizasyon başarısı değil, baştan konmuş bir kuralın doğal sonucu.
Kayma ile boşluk arasında seçim yapılırken boşluk kazanır — kullanıcı boşluğu görür ve devam eder, kaymayı yaşar.
Görsel dışındaki rezervasyon
Boyut rezervasyonu kavramı yalnız görsellerle sınırlı değil; sonradan gelen ya da sonradan boyutlanan her şey için geçerli. Reklam alanları, gömülü sosyal medya kutuları, harita bileşenleri, video oynatıcılar ve kullanıcı verisine göre uzunluğu değişen listeler — hepsi rezervasyon gerektiriyor.
Yöntem türüne göre değişiyor. Sabit oranlı içerikler için bir kapsayıcıya oran verilebiliyor. Yüksekliği bilinmeyen içerikler için asgari bir yükseklik ayrılıyor — kaynak gelmezse boşluk kalır ama kayma olmaz.
- Sabit oranlı — kapsayıcıya oran verilir; içerik geldiğinde tam oturur.
- Bilinmeyen yükseklik — asgari yükseklik ayrılır; en yaygın durum için ölçülmüş bir değer.
- Değişken liste — iskelet ekranlar; içerik gelene kadar aynı yükseklikte yer tutucu.
- Reklam alanı — sabit yükseklikli kapsayıcı; boş kalması kaymadan iyidir.
- Bildirim çubuğu — akışa girmemeli; ya baştan yer ayrılmalı ya da üstte katman olarak durmalı.
Beşinci madde en yıkıcı kayma kaynaklarından biri ve en kolay düzeltileni. Sayfanın en üstüne sonradan eklenen bir çubuk, altındaki HER ŞEYİ aşağı itiyor — yani kayma değeri neredeyse azami çıkıyor. Aynı çubuk üstte katman olarak durduğunda hiçbir şey kaydırmıyor.
Genel ilke şu: sonradan gelen içerik, mevcut içeriğin akışını değiştirmemeli. Ya yeri baştan ayrılmalı ya da akışın dışında bir katmanda yaşamalı. Üçüncü bir seçenek yok — ve iki seçenekten biri seçilmediğinde varsayılan davranış kayma üretiyor.
Pratik kontrol listesi
Bu sayfanın anlattıklarını bir denetim adımına çevirmek gerekirse, boyut rezervasyonunu için bakılacaklar şunlar. Liste kısa tutuldu çünkü uzun listeler yürünmüyor; altı madde bir oturumda tamamlanabilir.
- Her görselde genişlik ve yükseklik var mı?
- Değerler gerçek piksel boyutları mı — görünen boyut değil.
- Duyarlı türevler aynı oranda mı?
- Gömülü çerçevelerin kapsayıcısına oran verilmiş mi?
- Sonradan gelen içerik akışa mı giriyor, katman mı?
- Yavaşlatılmış ağda test edildi mi — hızlı bağlantıda kaymalar görünmez.
Son madde ölçümün ön koşulu: hızlı bir makinede her şey neredeyse aynı anda geldiği için kaymalar hiç görünmez. Yavaşlatılmış ortamda ise sıralı olarak ortaya çıkarlar ve kaynağı tek tek işaretlenebilir.
Kayma ile boşluk arasında seçim yaparken boşluk kazanır — kullanıcı boşluğu görür, kaymayı yaşar.
Kapanışta bir çerçeve: boyut rezervasyonu, performans çalışmasının en yüksek getiri oranına sahip kalemlerinden biri. Maliyeti neredeyse sıfır — çoğu durumda iki öznitelik yazmak — ve karşılığında düzen kaymasının en yaygın kaynağı tamamen kapanıyor. Buna rağmen atlanmasının tek sebebi alışkanlık: duyarlı tasarımın ilk yıllarında öznitelikleri kaldırmak doğruydu ve o alışkanlık, tarayıcılar oranı hesaplamaya başladıktan sonra da sürdü. Bugün geçerliliği kalmamış bir alışkanlık.