Görev Odaklı Tasarım: Aynı Arayüz Her Cihazda Çalışmaz

Bir arayüzün telefonda çalışması ile telefonda işe yaraması aynı şey değil. Responsive düzen, masaüstü için tasarlanmış bir görevi küçük ekrana sığdırır; kullanıcının o görevi yolda, tek elle, otuz saniyede tamamlayıp tamamlayamayacağını sormaz. Asıl karar düzende değil, hangi görevin hangi cihazda yapıldığında.

Önce hangi görevin nerede yapıldığını yazın

Cihaz listesi çıkarmak kolay kısım. Zor kısım, üründeki her ana görevin karşısına o görevin gerçekten nerede başlayıp nerede bittiğini yazmak. Bunu analitikten çıkarabilirsiniz: görev başına cihaz kırılımı, tamamlanma oranı, ortalama süre. Üç sütunluk bu tablo, ekran boyutuna bakarak yapılan tahminlerin çoğunu çürütür.

Telefonda dikkat birkaç saniyelik pencerelerde geliyor. O yüzden mobilde bölünemeyen uzun görev bırakmayın: form beş adımlıysa ara kayıt koyun, ara kayıt yoksa o görevi mobilde hiç başlatmayın.

Responsive düzeni değiştirir, adaptive kararı

Responsive tasarımda içerik ve işlev sabittir, sadece yerleşim ekrana göre akar. Tek kod tabanı, tek içerik kaynağı, düşük bakım. Adaptive tarafta ise cihaza göre farklı içerik ve farklı işlev seti sunarsınız; mobilde karmaşık ürün karşılaştırma modülünü hiç göndermemek gibi.

Seçim ideolojik değil. Görev her cihazda aynıysa responsive yeter. Görev cihaza göre değişiyorsa responsive size sadece küçültülmüş bir masaüstü verir (bunu mobil uyumluluk saymıyorum).

Gizlenen içerik indirilmeye devam eder

Responsive yaklaşımın en sık atlanan tarafı şu: CSS ile gizlemek göndermemek demek değil. display:none verdiğiniz bloğun HTML'i yine iner, içindeki img etiketleri yine istenir, script yine ayrışır. CSS arka plan görselleri çoğu tarayıcıda bu kuralın dışında kalır, ama işin kolay tarafı orası zaten.

Ölçmesi basit. Ağ sekmesini açın, mobil genişlikte sayfayı yenileyin, aktarılan boyutu ekranda görünen içerikle karşılaştırın. Aradaki fark büyükse sorun tasarımda değil teslim katmanında, çözüm de orada: ağır modülleri sunucu tarafında koşullu üretin ya da kullanıcı etkileşime girene kadar geciktirin. Adaptive tarafa atılan ilk gerçek adım budur, ayrı bir mobil sürüm hazırlamak değil.

Cihazlar arası devamlılık bir yerleşim meselesi değil

Kullanıcı masaüstünde başladığı işi telefonda bitirsin isteniyorsa layout hiçbir şey çözmez. Gereken şey durumun sunucuda tutulması: yarım kalan form verisi, sepet, filtre seçimi, okunan yerin işareti. Bunu oturum çerezine bırakırsanız cihaz değişince kaybolur, çünkü çerez cihaza bağlıdır.

Pratikte iki parça yeter. Kimliği doğrulanmış kullanıcı için sunucuda saklanan bir taslak kaydı, ve kullanıcıyı kaldığı yere döndüren görünür bir giriş noktası. İkincisi olmadan birincisi çalışsa bile kimse fark etmez.

Nereden başlanır

• Ana görevleri listeleyin, her birinin yanına cihaz kırılımını yazın.
• Mobilde tamamlanma oranı düşen görevleri ayırın; sorun genelde ekran değil, adım sayısıdır.
• Mobil genişlikte aktarılan baytla görünen içeriği karşılaştırın, farkı kapatın.
• Cihaz değiştiren kullanıcı için sunucu tarafında taslak saklayın.