Mobil uyumluluk ekrana sığmaktan fazlasıdır
Responsive tasarım yalnızca masaüstü düzenini küçültmek değildir. İçerik önceliği, dokunma alanları, yazı boyutu ve navigasyon davranışı küçük ekran için yeniden düşünülmelidir.
Ziyaretçi telefonda menüyü açmak, formu doldurmak ve ana aksiyona ulaşmak için yakınlaştırma yapmak zorunda kalmamalıdır.
- Okunabilir yazı boyutları
- En az 44 piksele yakın dokunma alanları
- Tek kolona dönüşen kart yapıları
- Ekran dışına taşmayan içerik
Mobilde içerik önceliği
Masaüstünde yan yana gösterilen bilgiler telefonda uzun bir akışa dönüşür. Bu nedenle en önemli mesaj ve aksiyon yukarıda, destekleyici detaylar aşağıda konumlanmalıdır.
Hero başlığı çok uzun satırlara bölünmemeli; butonlar yan yana sığmıyorsa tam genişlikte alt alta geçmelidir.
Mobil tasarım kararı verirken yalnızca ekran görüntüsüne değil, başparmakla kullanım ve kaydırma akışına bakın.
Formlar ve menüler
Mobil form alanları doğru klavye türünü açmalı, hata mesajını alanın yanında göstermeli ve gereksiz bilgi istememelidir. Uzun formlar adımlara ayrılabilir.
Navigasyon açıldığında hangi sayfada olunduğu anlaşılmalı, menü dışına dokunulduğunda kapanmalı ve klavye ile de kullanılabilmelidir.
- E-posta ve telefon için doğru input türü
- Açık etiket ve anlaşılır hata mesajı
- Erişilebilir menü düğmesi
- Menü açıkken net odak ve kapanma davranışı
Gerçek cihaz ve kırılım testi
Sadece tek bir telefon genişliğinde test yapmak yeterli değildir. Dar ekran, büyük telefon, tablet ve yatay görünümde içerik taşmaları kontrol edilmelidir.
Özellikle uzun Türkçe başlıklar, e-posta adresleri, tablolar ve buton grupları beklenmeyen taşmalara neden olabilir.
- 360–390 piksel dar ekran
- Tablet dikey ve yatay görünüm
- Uzun metin ve gerçek içerik testi
- Yavaş bağlantıda yükleme davranışı