Responsive Tasarımda Düzen Küçülürken Deneyim Küçülmesin

Aynı HTML'i her ekrana göndermek, her ekranda iyi bir deneyim ürettiği anlamına gelmiyor. Düzen küçülürken deneyim de küçülüyorsa sorun genelde kırılma noktalarının sayısında değil, içerik önceliklendirmesinde. Mobilde neyin gizlendiği, neyin ertelendiği ve gizlenenin faturasını kimin ödediği birbirinden ayrı kararlar.

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

768 ve 1024 bir zamanlar gerçek cihazlara karşılık geliyordu. Artık gelmiyor. Kırılma noktalarını genelde pencereyi yavaşça daraltarak koyarım: satır uzunluğu okunmaz hale geldiği, tablo taştığı, buton alt alta düştüğü genişlik neresiyse kırılma noktası orası.

Bu yöntemin yan faydası, kırılma noktası sayısını kendiliğinden düşürmesi. Cihaz listesinden yola çıkan ekipler altı yedi kırılma noktasıyla bitirir, içerikten yola çıkanlar çoğu sayfada ikiyle üçte kalır. Her kırılma noktası ayrı bir test yüzeyi; sayı arttıkça hiçbiri düzgün test edilmez.

Gizlemek taşımamak değildir

Mobilde gereksiz görülen unsurları display:none ile kapatmak yaygın çözüm. Çoğu durumda yanlış çözüm, çünkü kaynağı sayfadan kaldırmaz. Tarayıcı, display:none verilmiş bir <img> etiketini yine de indirir; kullanıcı görmediği görselin baytını ödemiş olur. Gizli bir kapsayıcının içindeki CSS arka plan görseli genelde indirilmez, ama iki davranışın farkını ezberlemek yerine ağ sekmesini açıp bakmak daha güvenilir.

Doğru araçlar zaten var. Görselin kendisini ekran genişliğine göre seçmek için srcset ve sizes, ilk ekranın altında kalanlar için loading="lazy". Mobilde gerçekten gerekmeyen bir bölüm varsa onu gizlemeyin, sunucu tarafında hiç göndermeyin.

Sütunları alt alta dizmek önceliklendirme değildir

Masaüstündeki üç sütun mobilde alt alta indiğinde ortaya bir sıra çıkar, ama o sırayı kimse seçmemiştir; kaynak kodun sırası neyse odur. Sonuç, kaydırma uzunluğu artmış bir sayfa.

Karar açık verilmeli: mobilde ilk ekranda hangi tek eylem duruyor. Geri kalan her şey onun altında. Menüyü hamburgere almak da bu kararın parçası, bedava değil; gizlenen gezinme, gezinmeyi ikinci sınıf bir eyleme dönüştürür ve derin site yapılarında bunu ödersiniz.

Ölçmediyseniz bitmemiştir

Tarayıcının cihaz simülatörü düzeni gösterir, dokunmayı göstermez. Parmakla erişilen hedefler için Apple 44 puan, Google Material 48 dp alt sınırını veriyor; simülatörde fare imleciyle tıklanan 24 piksellik bir ikon bu eşiği geçtiği izlenimi bırakır.

İki ölçüm yeter. Gerçek bir orta seviye telefonda, kısıtlanmış bağlantıyla sayfa açılışı; ve aynı cihazda, elde tutularak yapılan kısa bir görev testi. Beş kişiyle yapılan böyle bir test, laboratuvarda masaüstü tarayıcıda yapılan yirmi kişilik testten daha fazla mobil sorunu ortaya çıkarır.