# Galericiler İçin Mobil Uyumlu Web Tasarım

> Mobil öncelikli tasarım süreci: neyi önce kurgulamalı, hangi kararlar mobilde değişir ve test nasıl yapılır? Galeri siteleri için uygulama rehberi.

**Kaynak:** https://datadeger.com/galericiler-icin-mobil-uyumlu-web-tasarim/
**Yayın:** 22 Ağustos 2025 · **Okuma:** 2 dk · **Konu:** Web & SEO
**Yayıncı:** Data Değer — https://datadeger.com/

---

"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, srcset ile sunulur

- Modern format: WebP/AVIF

- Kapak fotoğrafı öncelikli: fetchpriority="high" , geciktirilmez

- Diğerleri geciktirilir: loading="lazy"

- Boyut belirtilir: width / height ile 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ıralamak**tır. Her sayfa için birincil eylemi belirleyin, navigasyonu yeniden kurgulayın, dokunma ergonomisine uyun ve gerçek cihazda test edin.

## Sıkça Sorulan Sorular

### Önce masaüstü tasarlayıp mobile uyarlasam olmaz mı?

Olur ama sonuç genelde daha kötüdür: masaüstünde tasarlanan yapı mobile sıkıştırıldığında öncelikler karışır ve önemli eylemler ekranın altında kaybolur. Önce dar ekran için tasarlayıp genişletmek, hangi öğenin gerçekten gerekli olduğunu da netleştirir.

### Tabletleri de ayrı düşünmeli miyim?

Genelde hayır. Mobil ve masaüstü için doğru kurgulanmış bir düzen, tablette de sorunsuz çalışır. Ayrı bir tablet tasarımı yapmak, bakım yükünü artırır ve nadiren ek fayda sağlar.

### Hızı nasıl ölçerim?

Ücretsiz araçlarla mobil moddan ve yavaş bağlantı simülasyonuyla ölçün; Core Web Vitals metriklerine (LCP, CLS, INP) bakın. Ayrıca her yeni fotoğraf partisi veya eklenti sonrası tekrar ölçün — hız zamanla bozulur.