Responsive Tasarım: Temeller ve Hâlâ Aynı Yerde Yapılan Hatalar

Akışkan grid, medya sorguları, mobil öncelikli çalışma. Responsive tasarımın mekanizmaları on yılı aşkın süredir yerinde ve kimse artık bunları tartışmıyor. Buna rağmen her denetimde aynı üç yerde tökezleniyor: breakpoint seçimi, görsel yükü ve zoom. Aşağısı temellerin özeti, bir de o üç yerin nedeni.

Mekanizma üç parçadan ibaret

Responsive tasarımın teknik tarafı sanıldığı kadar geniş değil. Üç şey yapar:

• Akışkan grid. Ölçüler pikselle değil oranla tanımlanır, düzen kabın genişliğine göre yayılır.
• Akışkan görsel. Görsel bulunduğu alanı taşmaz, oranını koruyarak küçülür.
• Medya sorguları. Belirli genişliklerde düzen kuralları değişir.

Hepsi bu. Geri kalan her şey bu üçünün nasıl kullanıldığıyla ilgili, ki asıl işin zor kısmı da orada.

Breakpoint'i cihazdan değil içerikten seçin

En yaygın hata, kırılım noktalarını popüler telefon ve tablet genişliklerinden almak. Bu liste her yıl değişiyor ve hiçbir zaman tamamlanmıyor; katlanabilir ekranlar çıktığında herkesin tablosu bir gecede eskidi.

Doğrusu daha basit: tarayıcı penceresini yavaşça daraltın ve düzenin nerede çirkinleştiğine bakın. Satır uzunluğu okunamayacak kadar uzadığı, kartlar birbirine girdiği, menü sığmadığı yerde breakpoint vardır. Cihazın adı önemli değil, içeriğin bozulduğu genişlik önemli.

Bu yaklaşımın yan faydası da var: genelde tahmin ettiğinizden az breakpoint çıkıyor. Üç ekran boyutu için ayrı ayrı kural yazmak yerine iki iyi seçilmiş kırılım çoğu düzeni taşır.

Mobil öncelikli çalışmak bir ritüel değil

Mobil öncelikli yaklaşım, "önce küçük ekranı çiz" demek değil; küçük ekranın zorunlu kıldığı önceliklendirmeyi baştan yapmak demek. Dar bir ekranda her şey alt alta gelir ve sıra kaçınılmaz olarak bir önem sıralamasına dönüşür. Bu sıralamayı masaüstünde vermezsiniz, çünkü orada her şey yan yana sığar ve karar ertelenir.

Sırayı mobilde belirleyip masaüstünde genişletmek, o yüzden işe yarıyor. Tersini yapan ekipler mobil sürümde neyi gizleyeceğini tartışmaya başlıyor, ki bu da genellikle bir içerik sorununun tasarımla kapatılması oluyor.

Asıl yük görsellerde

Düzen mobilde düzgün görünüyor diye site mobilde iyi çalışıyor sanılıyor. Çoğu zaman çalışmıyor, çünkü telefona masaüstü boyutunda görsel iniyor. CSS ile küçülttüğünüz görsel yine tam boyutuyla indiriliyor.

• Simge, logo ve diyagramlar için SVG kullanın; her çözünürlükte keskin kalır ve dosya olarak küçüktür.
• Fotoğraflarda srcset ile birden fazla boyut sunun, tarayıcı uygun olanı indirsin.
• İlk ekranın altındaki görselleri gecikmeli yükleyin.

Bunlar tasarımcının değil geliştiricinin işi gibi görünüyor ama karar tasarımda veriliyor. Her bölüme tam genişlik kapak görseli koyan bir tasarım, ne yaparsanız yapın mobilde ağır kalır.

Zoom, unutulan responsive senaryosu

Responsive tasarım küçük ekran meselesi olarak anlatılıyor, oysa aynı mekanizma gözü iyi görmeyen kullanıcı için de çalışıyor. Biri masaüstünde sayfayı yüzde dört yüz büyüttüğünde ortaya çıkan düzen, dar ekran düzeninin ta kendisidir.

WCAG'nin reflow ölçütü tam olarak bunu istiyor: içerik o büyütmede yatay kaydırma gerektirmeden okunabilmeli. Sabit genişlikli kaplar, yan yana kilitlenmiş sütunlar ve px ile sabitlenmiş yazı boyutları bu noktada dağılıyor.

İyi haber şu ki ekstra iş değil. Akışkan grid'i düzgün kurduysanız, ölçüleri göreli birimlerle yazdıysanız ve breakpoint'leri içerikten seçtiyseniz reflow zaten sağlanmış oluyor. Responsive tasarımı cihaz uyumu olarak değil de "içerik kabına uysun" kuralı olarak düşünmenin karşılığı burada çıkıyor: erişilebilirlik ayrı bir madde olmaktan çıkıp aynı işin sonucu haline geliyor.