Bir sayfa yayına çıkmadan önce onu en dar genişlikten en genişe doğru yavaşça yeniden boyutlandırır, her durakta tasarımla karşılaştırırım. Responsive hataların çoğu yerleşimi tamamen bozmaz; satır kırılımlarında, hizalamada ve boşluklamada küçük kaymalar yaratır. Tamamlanmış bir tasarımı "neredeyse doğru" gösteren de bu ayrıntılardır. Bunları yakalamak için uyguladığım kontrol listesi bu.
Cihazları değil, breakpoint'leri gez
Cihaz listeleri hızla eskir; breakpoint'ler niyeti anlatır. Dar genişlikten genişe doğru yavaşça ilerler, yerleşimin özenli görünmeyi bıraktığı anları izlerim — kötü satıra kırılan bir başlık, hizasını kaybeden bir satır, nedensiz ikiye katlanan bir boşluk.
- Önce en dar genişlikte tüm başlıkları kontrol et.
- Yalnızca aradaki genişlikleri değil, kuralların değiştiği breakpoint anını da izle.
- Yoğunluğu optimize etmeden önce dokunma hedeflerini rahat tut.
En dar genişlik önce gelir çünkü hataları en az tolere eden genişlik odur. 320 pikselde yetim bir kelime ya da bozuk bir tireleme olmadan ayakta kalan başlık, daha geniş ekranlarda da sorun çıkarmaz.
Garip orta genişliklere dikkat et
Kimsenin özel olarak tasarlamadığı genişlikler, yerleşimlerin kaydığı yerlerdir: tablet ile masaüstü yerleşimleri arasındaki aralık, iki sütunlu bir grid'in teknik olarak doğru ama görsel olarak zayıf kaldığı bölge. Burada en sık üç şey bozulur:
- Satır uzunluğu. Mobilde ve masaüstünde rahat okunan gövde metni, aradaki bir genişlikte satır başına yetmiş karakteri aşabilir. Bir paragraf yorucu geliyorsa sebep genellikle budur.
- Yetim grid öğeleri. Breakpoint'ten hemen önce üç öğeli bir satırın ikisi üstte, biri altta kalabilir. Öğelerin dengeli sarılmasını sağla ya da tek sütunlu düzeni biraz daha uzun koru.
- Üst bölüm boşluğu. Masaüstü için ayarlanmış dikey iç boşluk, orta genişlikte üst bölümü havada bırakır.
clamp()tabanlı boşluklama yardımcı olur, ama yalnızca breakpoint'ler arasındaki genişliklere gerçekten bakarsan.
Hafızayla değil, tasarımla karşılaştır
Son geçişi her zaman tasarımla yan yana yaparım. Tipografi ölçeği, çizgi kalınlıkları ve boşluk ritmi en çok kayan ayrıntılardır — sakin bir yerleşimi tamamlanmış gösteren de bunlardır.
Hafıza cömerttir. 28 piksellik bir aralığı tasarımdaki 32 pikselmiş gibi hatırlar; kenarlığın daha belirgin olması gerektiğini unutur. Yan yana karşılaştırma piksel mükemmelliği aramak değildir. Uygulamaya uzun süre baktığın için artık görmediğin kaymaları yeniden fark etmektir.
Her seferinde aynı kısa listeyi çalıştır
Bu geçiş, tipik bir sayfada yaklaşık on beş dakika sürer. Listeyi kısa tutmak, kontrolün yalnızca büyük sürümlerde değil, her yayından önce uygulanmasını sağlar.
1. önce 320 px: başlıklar, satır kırılımları, dokunma hedefleri
2. yavaşça yeniden boyutlandır: her breakpoint'te dur
3. breakpoint'ler arası: satır uzunluğu, yetim grid öğeleri
4. tasarımla yan yana: tipografi ölçeği, çizgiler, boşluklama
5. gerçek içerik: en uzun başlık, eksik görsel, boş durumSon madde göründüğünden daha önemlidir. Yerleşimler bugün var olan içerikle test edilir, sonradan eklenecek içerikle bozulur. Bulabildiğim en uzun gerçek başlığı yerleştirir, sayfayı bitmiş saymadan önce bir görseli bilerek kaldırırım.
Yeniden kullanılacaklar
- Yavaşça yeniden boyutlandır ve her breakpoint'te tam olarak dur — kuralların değiştiği piksel, hataların ortaya çıktığı yerdir.
- Aradaki genişliklere, tasarlanmış genişliklerle aynı özeni göster; satır uzunluğunu ve tek kalan grid öğelerini orada kontrol et.
- Tasarımla yan yana bitir. Kayma; tipografi ölçeğinde, çizgi kalınlığında ve boşluk ritminde gizlenir.
- Zorlayıcı içerikle test et: en uzun başlık, eksik görsel, boş liste.