"Mobil uyumlu" ile "mobil öncelikli" farklı şeylerdir. Birincisi masaüstü için tasarlanmış bir sitenin telefonda bozulmamasıdır; ikincisi önce telefon için tasarlayıp masaüstünü ona eklemektir.
Galeri sitelerinde ziyaretin büyük bölümü mobilden geldiği için ikincisi doğru yaklaşımdır. Bu yazıda süreci ele alıyoruz.
Adım 1: Ekran önceliklerini belirleyin
Telefon ekranı dardır; her şey sığmaz. Önce şu soruyu cevaplayın: ziyaretçi bu sayfada ne yapmalı?
| Sayfa | Birincil eylem | Ekranın üstünde olması gereken |
|---|---|---|
| Anasayfa | Araç aramaya başlamak | Arama/filtre girişi + değerleme daveti |
| Stok listesi | Aracı bulmak | Filtre butonu + sonuç sayısı |
| Araç detayı | İletişime geçmek | Fotoğraf, fiyat, "Ara / WhatsApp" |
| Değerleme | Formu tamamlamak | İlk soru — açıklama metni değil |
Bu tabloyu doldurduktan sonra tasarım kararları kendiliğinden netleşir.
Adım 2: Navigasyonu yeniden kurgulayın
Masaüstündeki yatay menü telefona sığmaz. Seçenekler:
- Hamburger menü — standart, ama tıklama gerektirir
- Alt sabit çubuk — en sık kullanılan 3–4 eylem için (Ara, WhatsApp, Stok, Değerleme)
- Alttan açılan panel — filtreler için
Galeri sitesinde en etkili kombinasyon: üstte hamburger menü, altta sabit iletişim çubuğu.
Adım 3: Dokunma ergonomisi
- Butonlar en az 44×44 piksel
- Bitişik butonlar arasında en az 8 piksel boşluk
- Önemli eylemler ekranın alt yarısında — başparmak oraya rahat ulaşır
- Yazı boyutu 16 pikselin altına inmesin
- Küçük metin bağlantıları yerine buton kullanın
Adım 4: Form deneyimi
Telefonda yazmak zordur. Her alan için doğru klavyeyi açın:
| Alan | Doğru ayar |
|---|---|
| Telefon | type="tel" inputmode="tel" |
| E-posta | type="email" |
| Kilometre | inputmode="numeric" |
| Marka / model | Yazdırmak yerine seçtirin |
| Tüm alanlar | autocomplete nitelikleri eksiksiz |
Ayrıca alan sayısını en aza indirin — mobilde her ek alan, terk oranını masaüstünden daha fazla artırır.
Adım 5: Görsel stratejisi
Galeri siteleri fotoğraf ağırlıklıdır; mobilde bu bir risktir:
- Responsive setler: Her görselden 400/800/1200 piksellik sürümler,
srcsetile sunulur - Modern format: WebP/AVIF
- Kapak fotoğrafı öncelikli:
fetchpriority="high", geciktirilmez - Diğerleri geciktirilir:
loading="lazy" - Boyut belirtilir:
width/heightile düzen kayması önlenir
Görsel optimizasyonu mobil hız için en yüksek getirili tek müdahaledir. Çoğu galeri sitesinde sayfa ağırlığının büyük kısmı optimize edilmemiş fotoğraflardan gelir.
Adım 6: Gerçek cihazda test
Tarayıcı emülatörü yeterli değildir — dokunma ergonomisini ve gerçek ağ hızını göstermez.
- Kendi telefonunuzu alın, wifi’yi kapatın
- Ana sayfadan başlayıp bir araç bulun
- Fotoğraflara bakın, fiyatı okuyun
- WhatsApp butonuna basın
- Geri dönüp değerleme formunu doldurun
Takıldığınız her nokta, ziyaretçinin de takıldığı noktadır. Bunu farklı yaş grubundan birine de yaptırın — kendi sitenizde siz nereye basacağınızı zaten biliyorsunuz.
Sık yapılan hatalar
- Masaüstü tasarımı küçültüp "mobil uyumlu" saymak
- Yan filtre panelini olduğu gibi bırakmak
- Kapatılamayan açılır pencereler
- Telefon numarasını tıklanamaz metin olarak koymak
- Yatay kaydırma gerektiren tablolar
- Fotoğraf galerisinin parmakla kaydırılamaması
Özetle
Mobil öncelikli tasarım, ekran küçültmek değil öncelik sıralamaktır. Her sayfa için birincil eylemi belirleyin, navigasyonu yeniden kurgulayın, dokunma ergonomisine uyun ve gerçek cihazda test edin.