Responsive Web Tasarım: Mobilde Küçültmek Yerine Neyi Yeniden Düzenlemeli?

Responsive web tasarım, sayfanın farklı ekran genişliklerine uyum sağlamasıdır. Masaüstü tasarımını orantılı küçültmek yeterli değildir. Okuma sırası, gezinme ve etkileşim alanları dar ekranda yeniden değerlendirilmelidir. Amaç yalnız taşmayı önlemek değil, aynı görevin telefonda da yapılabilmesidir.

Mobilde ilk ihtiyaç ne?

Bir hizmet sitesine gelen kişi kapsamı öğrenmek veya iletişime geçmek isteyebilir. Masaüstünde yan yana duran uzun tanıtımlar telefonda ana bilgiyi çok aşağı itebilir. İçeriği yok etmek yerine sıralamayı ve sunum biçimini gözden geçirin.

Örneğin bir katalog indirme alanında dosyanın ne olduğu, dili ve indirme bağlantısı görünür kalmalıdır. Büyük dekoratif görsel bu bilgilerin önüne geçiyorsa mobil yerleşimde farklı kırpma veya daha kısa bir alan düşünülebilir.

Menü ve tabloyu ayrı çözün

Uzun menü dar ekranda erişilebilir bir açılır yapıya ihtiyaç duyabilir. Açma ve kapatma davranışı, odak ve sayfa kaydırması birlikte değerlendirilmelidir. Ekranın üzerinde kalan sabit alanların içeriği kapatmadığını kontrol edin.

Bir karşılaştırma tablosunda her sütunu küçültmek yazıları okunmaz yapabilir. Hangi sütunların birlikte karşılaştırılacağına göre yatay kaydırma, özet görünüm veya ayrıntı açma seçenekleri düşünülür. Doğru çözüm verinin anlamına bağlıdır.

Görselin önemli parçası nerede?

Yatay bir görsel dar alana kırpıldığında ürün veya yüz kadrajdan çıkabilir. Kart ve hero görselleri için odak noktasını belirleyin. Metni görselin içine gömmek, farklı ekranlarda okunabilirliği ve erişilebilirliği ayrıca zorlaştırabilir.

Yalnız iki ekran görüntüsüyle yetinmeyin

Küçük telefon ve büyük masaüstü arasında farklı genişlikler bulunur. Uzun başlık, açılan klavye ve büyük metin gibi durumları da kontrol edin. Tasarım dosyasında kırılma noktalarının nedenlerini geliştiriciye açıklayın; yalnız iki sabit ölçü göndermek aradaki davranışı tarif etmeyebilir.

Selçuk Aker ile mobil web tasarımı çalışmasında öncelikli kullanıcı görevlerini ve içerik sırasını birlikte belirleyebilirsiniz.

Grid, video ve galeri tercihini içeriğe göre yapın

Her proje için zorunlu tek bir kolon sayısı yoktur. Kartlar, metin ve karşılaştırma alanları kendi içerik ihtiyacına göre düzenlenebilir. Geniş ekrandaki kolonların mobilde hangi sıraya geçeceği de tasarım kararının parçasıdır.

Açılışta video veya kayan görsel kullanmadan önce bunun hangi bilgiyi taşıdığını sorun. Kullanıcı kontrolünü, metnin okunabilirliğini ve yükleme etkisini değerlendirin. Ürün galerisinde küçük görselden ayrıntıya geçiş varsa kapatma, geri dönme ve klavyeyle kullanım da düşünülmelidir. Hareketli sunum, temel bilgiye ulaşmanın tek yolu olmamalıdır.