Mobil öncelikli tasarım "ekranı küçültmek" değil, kararları en dar ekrandan başlatıp yukarı doğru genişletmektir. Sitenizde mobilin ağırlığını tahmin etmeyin: Analytics ya da Search Console'da cihaz kırılımına bakın, mobil oturum payını ve mobil dönüşüm oranını masaüstüyle karşılaştırın. Aradaki fark, aşağıdaki on kuralın hangisinden başlamanız gerektiğini de söyler.
Düzen: dar ekranda neyi koruyacaksınız?
1. Tasarıma 360 piksel genişlikten başlayın
Yaygın Android cihazların mantıksal (CSS) genişliği tipik olarak 360-430 piksel arasındadır. Tasarımı 1440 pikselde çizip sonra sıkıştırmak yerine 360 pikselde çizin. Bu genişlikte ayakta kalan bir düzen geniş ekranda da ayakta kalır; tersi garanti değildir.
2. İlk ekranda tek bir iş olsun
Telefonda kaydırma yapmadan görülen alan kabaca 360x600 pikseldir. Buraya logo, tek cümlelik değer önerisi ve tek bir eylem düğmesi sığdırın. "Teklif Al", "WhatsApp'tan Yaz" ve "Kataloğu İndir" düğmelerini yan yana koyduğunuzda ziyaretçi hangisinin asıl adım olduğunu ayırt edemez; ikincil eylemleri metin bağlantısı olarak aşağı alın.
3. Tek sütun varsayılanınız olsun
Mobilde iki sütunlu metin bloğu neredeyse her zaman hatadır. Kart ızgaralarını 600 pikselin altında tek sütuna indirin. Yalnızca ürün listeleri gibi görsel ağırlıklı akışlarda iki sütuna izin verin; o zaman da kart başlıklarını iki satırla sınırlayın ki kartlar aynı yükseklikte kalsın.
4. Kırılma noktalarını cihaza göre değil içeriğe göre seçin
"iPhone kırılımı" diye bir şey yok; cihaz listesi her yıl değişir, içeriğinizin bozulma noktası değişmez. Satır uzunluğu bozulduğu, kart aşırı daraldığı veya menü sığmadığı yerde kırın. Kurumsal bir site için 600, 900 ve 1200 piksel civarında üç kırılma noktası çoğu zaman yeter; fazlası bakım maliyetidir.
Etkileşim: parmak fare değildir
5. Dokunma hedeflerini küçültmeyin
Platform rehberleri burada birbirine yakın: Apple'ın arayüz kılavuzu en az 44x44 punto, Google'ın Material rehberi en az 48x48 dp önerir; WCAG 2.2'nin "Target Size (Minimum)" ölçütü ise AA düzeyinde 24x24 CSS pikseli zorunlu tutar. Pratik kural olarak 44-48 piksellik bir dokunma alanı hedefleyin ve iki hedef arasında en az 8 piksel boşluk bırakın. Altbilgideki sosyal medya ikonları ile tablo içindeki "Düzenle / Sil" bağlantıları en sık hata yapılan yerlerdir.
6. Kritik eylemleri başparmağın ulaştığı yere koyun
Tek elle tutulan telefonda ekranın üst köşeleri en zor bölgedir. Uzun sayfalarda birincil eylemi alta sabitleyin, geri ve kapat gibi ikincil eylemleri üstte bırakın. Rezervasyon ve sipariş akışlarında "Devam Et" düğmesini formun sonunda da tekrarlayın.
7. Hover'a bağlı hiçbir bilgi bırakmayın
Dokunmatik ekranda "üzerine gelme" yoktur. Fiyat detayı, alt menü veya ipucu balonu yalnızca hover ile açılıyorsa mobilde görünmez olur. Alt menüleri tıklamayla açılan akordeona çevirin, ipuçlarını doğrudan metnin içine yazın.
Hız, form ve sabit öğeler
8. Hızı mobil şartlarda ölçün
Ölçümü ofis Wi-Fi'sinde masaüstü tarayıcıda yapmak yanıltıcıdır. Tarayıcının geliştirici araçlarında yavaşlatılmış CPU (4x kısıtlama) ve yavaş 4G simülasyonuyla test edin; mümkünse PageSpeed Insights'ın gerçek kullanıcı verisi (CrUX) bölümüne de bakın.
| Ölçüt | İyi | Geliştirilmeli | Zayıf |
|---|---|---|---|
| LCP (en büyük içeriğin boyanması) | 2,5 sn ve altı | 2,5-4 sn | 4 sn üzeri |
| INP (dokunma sonrası tepki) | 200 ms ve altı | 200-500 ms | 500 ms üzeri |
| CLS (düzen kayması) | 0,1 ve altı | 0,1-0,25 | 0,25 üzeri |
Bu eşikler Google'ın Core Web Vitals için yayımladığı sınıflandırmadır ve saha verisinde ziyaretçilerin yüzde 75'i için sağlanması beklenir.
9. Formu kısaltın, doğru klavyeyi açtırın
Mobilde her ek alan bir tuşa daha basmak demektir. Teklif formunda ad, telefon ve tek satırlık mesaj çoğu iş için yeterlidir; sektör, bütçe, "bizi nereden duydunuz" gibi alanları ilk temasta değil, geri dönüşte sorun. Telefon alanına tel, e-postaya email tipini verin; ad, telefon ve e-posta alanlarına autocomplete değerleri ekleyin ki tarayıcı otomatik doldurabilsin. Zorunlu alanları yalnızca yıldızla değil, "zorunlu" yazısıyla belirtin. Hata mesajını alanın hemen altına, kırmızı renge ek olarak metinle yazın.
10. Aynı anda tek bir sabit öğe kalsın
Üstte yapışkan menü, altta çerez bandı, ortada bülten penceresi... Üçü aynı anda açıkken 600 piksellik görünür alanın yarısı kaplanır. Bir ekranda tek bir yapışkan öğe bırakın; çerez bandını tek satıra sığdırın ve "reddet" seçeneğini "kabul et" ile aynı boyutta verin. Bülten penceresini girişte değil, sayfanın yüzde 50'si kaydırıldıktan sonra gösterin.
Hızlı kontrol listesi
- 360 piksel genişlikte yatay kaydırma çubuğu çıkıyor mu? Çıkıyorsa taşan öğeyi bulun; genellikle geniş bir tablo ya da sabit genişlikli bir görseldir.
- Gövde metni en az 16 piksel mi? Yer açmak için puntoyu değil, metni kısaltın.
- Menü tek elle açılıp kapanıyor mu, kapatma düğmesi parmak menzilinde mi?
- Telefon numarası ve WhatsApp bağlantısı tek dokunuşla aramayı veya sohbeti açıyor mu?
- Tablolar kaydırılabilir bir kapsayıcı içinde mi, yoksa sayfanın düzenini mi bozuyor?
- Görsellerin genişlik ve yükseklik değerleri yazılı mı? Yoksa yükleme sırasında içerik zıplar ve CLS bozulur.
- Form gönderildikten sonraki teşekkür mesajı ekranda görünüyor mu, yoksa sayfanın yukarısında mı kalıyor?
Sık yapılan hatalar
- Önce masaüstü tasarımı onaylatmak. Masaüstü görseli onaylandıktan sonra mobil hep "sonra bakarız" olur ve olmaz.
- Mobil menüye on iki madde koymak. Beş-yedi ana başlığın üstü aramayı zorunlu kılar; gerisini alt gruplara taşıyın.
- Metni görselin içine gömmek. Kampanya afişindeki yazı mobilde okunmaz, aranmaz, kopyalanmaz.
- Punto düşürerek yer kazanmak. Kazandığınız yer, kaybettiğiniz okumaya değmez.
- Sadece emülatörde test etmek. Ofisteki iki gerçek telefonda yapılan beş dakikalık gezinti, hataların çoğunu yakalar.
Bugün uygulayabileceğiniz özet
- Sitenizi 360 piksel genişlikte açın, yatay taşma yapan her öğeyi listeleyin ve düzeltin.
- İlk ekrandaki eylem düğmesi sayısını bire indirin, diğerlerini metin bağlantısına çevirin.
- Tüm düğme ve bağlantıları 44-48 piksellik dokunma alanına yükseltin, aralarına en az 8 piksel boşluk koyun.
- İletişim formundaki alan sayısını üçe indirin, alan tiplerini ve otomatik doldurma etiketlerini düzeltin.
- Yavaş ağ ve yavaş CPU simülasyonuyla ana sayfayı ve en çok ziyaret edilen iç sayfayı ölçün, LCP/INP/CLS değerlerini not edin; iki hafta sonra aynı ölçümü tekrarlayıp farkı kaydedin.
