"Mobil uyumlu" ibaresi birçok sitede görülür; ancak gerçekte yalnızca küçültülmüş masaüstü görünümü sunan projeler de bu etiketi taşır. Gerçek mobil uyumluluk, responsive tasarım prensipleriyle her ekran boyutunda okunabilir, kullanılabilir ve performanslı bir deneyim sunmaktır. Bu yazıda responsive tasarımın ne olduğunu, mobile-first yaklaşımını ve uygulama kurallarını ele alıyoruz.
Mobil Uyumlu ≠ Responsive
Mobil uyumlu site, telefonda açılabilen sitedir; responsive site ise layout'un ekrana uyum sağlamasıdır. Aşağıdaki tablo farkı netleştirir:
| Özellik | Sahte mobil uyum | Gerçek responsive |
|---|---|---|
| Layout | Sabit genişlik, yatay kaydırma | Esnek grid; içerik ekrana sığar |
| Tipografi | Okunması zor küçük metin | Ölçeklenen font ve satır aralığı |
| Navigasyon | Hover menü, küçük linkler | Hamburger veya alt tab; büyük dokunma alanı |
| Görseller | Taşan, kırpılmayan img | max-width: 100% veya responsive image |
| Performans | Masaüstü boyutlu asset yükler | Mobil için optimize boyut ve lazy load |
Responsive Tasarım Nedir?
Responsive tasarım; CSS media query, esnek birimler (%, rem, fr) ve fluid grid kullanarak arayüzün tablet, telefon ve geniş monitörde otomatik uyum sağlamasıdır. Tek bir kod tabanı tüm cihazları hedefler; ayrı mobil site (m.example.com) gerekmez.
Mobile-First Yaklaşımı
Önce mobil ekran için tasarlayıp, daha geniş breakpoint'lerde layout'u genişletmek mobile-first'tür. Veltstack projelerinde Tailwind CSS ile bu yaklaşımı benimsiyoruz: varsayılan stiller mobil, md: ve lg: prefix'leri ile masaüstü katmanları eklenir.
Breakpoint planı
640px (sm), 768px (md), 1024px (lg), 1280px (xl) yaygın kırılım noktalarıdır. İçeriğe göre özelleştirin; cihaz listesi kovalamayın.
Esnek grid
CSS Grid ve Flexbox ile sütun sayısı ekrana göre 1 → 2 → 3 olarak değişir. Sabit piksel genişliklerden kaçının.
Fluid tipografi
clamp() ile minimum ve maksimum font arasında akıcı ölçekleme sağlayın. Başlıklar mobilde taşmamalı.
Viewport meta
<meta name="viewport" content="width=device-width, initial-scale=1"> olmadan mobil tarayıcı sayfayı zoom'lu gösterir.
Temel Uygulama Kuralları
- Dokunma hedefleri: Buton ve linkler en az 44×44px; parmakla rahat tıklanmalı.
- Yatay kaydırma yok:
overflow-x: hiddensemptomu değil, kök nedeni düzeltin. - Okunabilir metin: Gövde metni 16px ve üzeri; kontrast WCAG AA standardına uygun olmalı.
- Responsive görseller: Next.js
Imagebileşeni vesizesprop'u ile doğru boyut sunun. - Form alanları: Input yüksekliği yeterli; mobil klavye açıldığında alan görünür kalmalı.
Pratik ipucu
Chrome DevTools'ta cihaz simülasyonu başlangıç noktıdır; gerçek iPhone ve Android cihazlarda test etmeden canlıya almayın. Safari ve Chrome render farkları yaşanabilir.
Performans ve SEO
Google mobil-first indexing kullanır; yani sıralama öncelikle mobil sürüme göre yapılır. Yavaş mobil site hem kullanıcı kaybına hem SEO düşüşüne yol açar. Core Web Vitals (LCP, INP, CLS) mobilde de hedeflenmelidir. Gereksiz JavaScript, büyük hero görselleri ve render-blocking kaynaklar mobil skorları düşürür.
SEO rehberimizde teknik optimizasyon adımlarını SEO yazımızda detaylandırdık.
Test Checklist
- 320px, 375px ve 414px genişliklerde layout kontrolü
- Dikey ve yatay (landscape) mod
- Menü, modal ve dropdown'ların dokunmatik kullanımı
- Form gönderimi ve ödeme akışı mobilde
- Lighthouse mobil raporu (Performance, Accessibility)
- Gerçek cihazda 3G/4G hız simülasyonu
Sık Yapılan Hatalar
- Masaüstü tasarımı küçültüp "mobil uyumlu" demek
- Hover-only etkileşimler; dokunmatik ekranda çalışmaz
- Sabit piksel genişlikli container (
width: 1200px) - Mobilde gizlenen kritik içerik (SEO ve erişilebilirlik riski)
- Ayrı mobil subdomain; bakım maliyeti ve duplicate content
- Popup ve interstitial'ların ekranın tamamını kaplaması
Responsive Tasarımda Veltstack Yaklaşımı
Tüm web projelerimizde mobile-first Tailwind CSS, erişilebilir bileşenler (shadcn/ui) ve gerçek cihaz testleri standart sürecimizin parçasıdır. Yazıcı Ticaret, Gardossi ve kurumsal katalog projelerinde mobil dönüşüm oranlarını artırmak için responsive layout ve performans optimizasyonunu birlikte ele aldık.
Sonuç
Gerçek mobil uyumluluk, responsive tasarım disiplini ve test kültürüyle gelir. Mobile-first düşünün, esnek layout kullanın, dokunma ve okuma deneyimini önceliklendirin. Web sitenizin mobilde gerçekten güçlü olmasını istiyorsanız bizimle iletişime geçin.
