Duyarlı Web Tasarımı: Kırılma Noktaları, Görseller ve Gerçek Cihaz Testi

Bir sayfanın telefonda düzgün görünmesi artık ayrı bir iş kalemi değil, işin kendisi. Ama duyarlı tasarım denince akla hâlâ ekran daraldıkça küçülen bir düzen geliyor. Oysa sonucu belirleyen üç karar var: kırılma noktasını nereye koyduğunuz, görseli hangi boyutta gönderdiğiniz ve testi nerede yaptığınız.

Esneklik varsayılan olsun, kırılma noktası istisna

Duyarlı bir düzenin büyük kısmı tek bir medya sorgusu yazmadan kurulur. Kapsayıcılara sabit piksel yerine yüzde ya da max-width verirsiniz, görsellere max-width: 100%; height: auto koyarsınız, satır uzunluğunu ch ile sınırlarsınız. Bu üçü yerindeyse sayfa zaten 320 pikselden 1600 piksele kadar bozulmadan gider.

Medya sorgusu bu esnekliğin yetmediği yerde devreye girer. Yan yana duran üç kart artık okunmaz hale geldiğinde, menü tek satıra sığmadığında, tablo taşmaya başladığında. Kural şu: önce esnek yaz, sonra nerede kırıldığını gör, sadece orayı düzelt.

Kırılma noktasını cihaz değil içerik belirler

Popüler telefon genişliklerinin listesini bulup her birine ayrı bir @media bloğu yazmak yaygın bir alışkanlık. Bu liste her yıl değişiyor ve hiçbir zaman tam olmuyor. Bunun yerine tarayıcı penceresini yavaşça daraltın; düzen ilk nerede rahatsız edici hale geliyorsa kırılma noktanız orasıdır. Çıkan sayı 768 olmayabilir, 640 ya da 910 çıkabilir, sorun değil.

Sayının az olmasının pratik bir gerekçesi de var. Dört kırılma noktası beş genişlik aralığı demektir; bunu üç tarayıcıda kontrol etmek on beş geçiş eder. Beşinci kırılma noktasını eklediğinizde sayı on sekize çıkar. Her yeni nokta, test yükünü tarayıcı sayısı kadar artırır ve bu yük hiç azalmaz, çünkü her düzen değişikliğinde baştan yapılır. "Her cihaza özel düzen" tavsiyesi kulağa titiz gelir, uygulamada bakımı en önce bırakılan şeydir.

Ağırlık düzende değil, görsellerde

Mobilde yavaş açılan sayfaların çoğunda sorun CSS değil, masaüstü için hazırlanmış 2000 piksellik görsellerin telefona olduğu gibi gönderilmesidir. Çözüm srcset ve sizes: aynı görselin birkaç boyutunu üretip seçimi tarayıcıya bırakırsınız. İlk ekranın altında kalan görsellere loading="lazy" eklemek de tek satırlık bir kazanç.

Sık yapılan bir hata, mobilde göstermek istemediğiniz görseli display: none ile gizlemek. Öğe ekrandan kalkar ama img etiketiyse dosya yine indirilir. Gerçekten indirilmesini istemiyorsanız ya işaretlemeden çıkarmanız ya da görseli CSS arka planı olarak tanımlayıp medya sorgusuyla yönetmeniz gerekir.

Mobil menü sadeleştirmedir, küçültme değil

Masaüstü menüsünü olduğu gibi alıp yazı boyutunu düşürmek işe yaramaz. Parmak fare kadar isabetli değil: dokunulabilir alanlar için Apple 44 punto, Google 48 dp öneriyor ve bu iki sayı pratikte aynı yere düşüyor. Bağlantıları alt alta dizerken aralarına en az bu kadar boşluk bırakın.

Hamburger menü kullanacaksanız açılan panelde odak sırasının doğru çalıştığını, panel kapandığında odağın düğmeye döndüğünü kontrol edin. Klavyeyle gezen bir kullanıcı için bu, görsel düzenin kendisi kadar belirleyici.

Framework mü, birkaç satır CSS mi

Bootstrap, Foundation ve benzerleri on yıl önce ciddi bir boşluğu dolduruyordu; float tabanlı ızgarayı elle yazmak gerçekten zahmetliydi. O boşluk kapandı. Bugün display: grid ve repeat(auto-fit, minmax(240px, 1fr)) ile yazacağınız iki satır, medya sorgusuna bile ihtiyaç duymadan kart ızgarasını halleder.

Framework yine de mantıklı olabilir, ama ızgara için değil: hazır bileşen setine, tutarlı form görünümüne ve ekibin ortak diline ihtiyaç duyduğunuzda. Sadece kolon sistemi için 200 kilobaytlık bir CSS dosyası yüklüyorsanız yanlış sebeple yüklüyorsunuz demektir.

Simülatörde geliştirin, gerçek cihazda doğrulayın

Chrome geliştirici araçlarının cihaz modu geliştirme sırasında hızlı ve yeterli. Ama gerçek bir telefonda yapılan beş dakikalık gezinmeyi, o modda geçirilen yarım saatten daha güvenilir bulurum. Simülatör ekran genişliğini taklit eder, geri kalanını etmez: parmağın isabet payını, mobil ağın gecikmesini, kaydırırken beliren ve kaybolan tarayıcı çubuğunu.

Bu çubuk klasik bir tuzaktır. height: 100vh verdiğiniz bölüm masaüstünde ve simülatörde tam ekranı kaplar, gerçek telefonda adres çubuğu yüzünden taşar. Yeni birimler (svh, dvh) bunu çözüyor, ama sorunu görmenin tek yolu cihazı elinize almak.

Elinizde çok sayıda cihaz yoksa BrowserStack gibi servisler boşluğu doldurur. Yine de tek bir orta segment Android telefonu masanızda tutmanın, uzaktan test aboneliğinden daha çok hata yakalattığını göreceksiniz.