Mobil Uyumlu Web Sitesi Tasarımı: Neden Zorunlu, Nasıl Yapılır?

Türkiye’de internet kullanıcılarının yüzde 85’i web’e mobil cihazlardan erişiyor. Google, 2019’dan bu yana mobile-first indexing kullanıyor; yani sitenizin mobil versiyonunu temel alarak indeksliyor ve sıralıyor. Mobil uyumlu olmayan bir site, hem kullanıcılarını hem de sıralamasını kaybeder.

Ama “mobil uyumluluk” sadece sitenin telefonda açılması anlamına gelmiyor. Dokunmatik arayüz kuralları, sayfa hızı, görsel optimizasyon, navigasyon ve form tasarımı; tüm bu unsurlar birlikte çalıştığında gerçek anlamda mobil uyumlu bir deneyim ortaya çıkar.

Bu rehberde responsive tasarımın temellerinden Core Web Vitals optimizasyonuna, mobil UX prensiplerinden yaygın hatalara kadar her şeyi ele alacağız.

Pratikte mobil deneyim en çok reklam trafiği, teklif formları ve ürün inceleme akışlarında kendini belli eder. Yani konu yalnız tasarım değildir; landing page dönüşümü, düzenli site bakım disiplini ve teknik performans birlikte düşünülmelidir. Bu alanlarda doğrudan destek gerekiyorsa mobil uyumlu web hizmetimiz kapsamlı bir iyileştirme çerçevesi sunar.

Responsive Tasarım Nedir?

Responsive (duyarlı) tasarım, web sitesinin ekran boyutuna göre otomatik olarak düzen ve boyut ayarlaması yapmasıdır. Masaüstü, tablet ve akıllı telefon arasında geçiş yaparken içerik yeniden düzenlenir; ayrı bir “mobil site” oluşturmak yerine tek bir site tüm cihazlara uyum sağlar.

Bu yaklaşımın alternatifi olan “m.siteadi.com” gibi ayrı mobil siteler artık geçerliliğini yitirdi. İki ayrı siteyi yönetmek, güncellemek ve SEO uyumlu tutmak pratik olarak sürdürülebilir değildir. Google da tek URL yapısını tercih eder.

Responsive tasarımın yapı taşları

Esnek grid sistemi. Sabit piksel yerine yüzde veya fr (fraction) tabanlı genişlikler kullanılır. CSS Grid ve Flexbox bu yapının temelidir. Bir kart grid’i masaüstünde 4 sütun, tablette 2 sütun, telefonda 1 sütun olarak yeniden düzenlenir.

Esnek görseller ve medya. Görseller kapsayıcı öğeye göre boyutlanır (max-width: 100%). Ama bundan daha önemlisi, farklı ekran boyutlarına farklı boyutlarda görsel sunmaktır. HTML’in srcset ve sizes attribute’ları veya <picture> elementi ile telefona küçük, masaüstüne büyük görsel yükleyebilirsiniz. Bu hem bant genişliği hem de performans açısından kritiktir.

CSS media queries. Farklı ekran genişliklerinde farklı stiller uygulamanın temelidir. Yaygın breakpoint’ler: 480px (küçük telefon), 768px (tablet), 1024px (küçük masaüstü), 1280px (geniş masaüstü). Ama sabit breakpoint’lere takılmayın; içeriğinizin kırıldığı noktada breakpoint ekleyin.

Container queries. CSS’in yeni özelliklerinden biri. Media query’ler viewport genişliğine bakarken, container query’ler bir bileşenin kapsayıcısının genişliğine bakar. Sidebar’dan ana alana taşınan bir kart bileşeni, kapsayıcısına göre otomatik uyum sağlar. Modern tarayıcılarda desteklenir ve component tabanlı tasarım için büyük avantaj sunar.

Mobile-First Yaklaşım

Geleneksel web geliştirmede masaüstü tasarım yapılır, sonra mobil için küçültülür. Mobile-first bu mantığı tersine çevirir: önce mobil deneyim tasarlanır, sonra daha geniş ekranlara ölçeklenir.

Bu sadece teknik bir sıralama değil; düşünce biçimini değiştirir.

Neden mobile-first?

Önceliklendirme. 375 piksel genişliğindeki bir ekrana her şeyi sığdıramazsınız. Bu kısıtlama sizi en önemli içeriği ve aksiyonları belirlemeye zorlar. Kullanıcı mobilde neyi görmeli? Hangi butona basmalı? Bu sorulara cevap verdiğinizde masaüstü tasarımı daha odaklı hale gelir.

Performans. Mobil için yazılan CSS ve JavaScript doğal olarak hafiftir. Masaüstü için min-width media query’ler ile özellik eklersiniz; mobil sürüm gereksiz kod yüklemez. Tersi yaklaşımda (desktop-first) mobil cihaz masaüstü için yazılmış ağır kodu indirip sonra gizler; bu performans kaybıdır.

SEO uyumu. Google’ın mobile-first indexing’i, sitenizin mobil versiyonunu esas alır. Masaüstünde mevcut olan bir içerik mobilde yoksa, Google o içeriği indekslemeyebilir. Mobile-first geliştirme bu riski ortadan kaldırır.

İstatistiksel gerçek. E-ticaret sitelerinde trafiğin yüzde 70-80’i mobilden gelir ama dönüşüm oranı masaüstünün gerisindedir. Bu, mobil deneyimin iyi tasarlanmadığının göstergesidir. Mobile-first yaklaşım bu farkı kapatmayı hedefler.

Dokunmatik Ekran için UX Kuralları

Mobil kullanıcılar fare yerine parmak kullanır. İmleç hassasiyeti ile parmak hassasiyeti arasındaki fark devasa. Bu temel fark, tasarım kararlarını doğrudan etkiler.

Dokunma hedefleri (Tap Targets)

Apple Human Interface Guidelines en az 44×44 piksel, Google Material Design ise 48×48 piksel dokunma hedefi önerir. Bu kuralı ihlal eden küçük butonlar, linkler ve form alanları kullanıcıyı hayal kırıklığına uğratır. Google Search Console “tıklama hedefleri çok yakın” uyarısı verdiğinde bu kuralı kontrol edin.

Pratik uygulama: Butonun görsel boyutu küçük olabilir ama tıklanabilir alanı (padding dahil) minimum boyutun altına düşmemelidir. Link gruplarında (navigasyon, footer linkleri) linkler arasında yeterli dikey mesafe bırakın.

Başparmak bölgesi (Thumb Zone)

Kullanıcılar telefonlarını genellikle tek elle tutar ve başparmaklarıyla kullanır. Ekranın alt yarısı kolay erişilebilir alandır; üst sol köşe ise en zor erişilen bölgedir. Kritik aksiyonlar (CTA butonları, navigasyon) alt bölgede konumlandırılmalıdır.

Bu yüzden birçok modern uygulama ve web sitesi navigasyonu ekranın altına taşıdı. Hamburger menüsü üstte kaldığında kullanıcı tek elle ulaşamaz; altta konumlandırıldığında erişim kolaylaşır.

Kaydırma ve swipe

Mobilde dikey kaydırma doğaldır. Uzun içerik sorun değildir; kullanıcı kaydırmaya alışıktır. Ama yatay kaydırma yalnızca galeriler, kart carousellar ve benzer alışkın olunan bağlamlarda kullanılmalıdır. Beklenmeyen yatay kaydırma kafa karıştırır.

Swipe (kaydırma) gestleri içerik arasında geçişi kolaylaştırır ama her zaman alternatif bir navigasyon (ok butonları, sayfa noktaları) da sunun; tüm kullanıcılar swipe’ı keşfetmez.

Form tasarımı

Mobilde form doldurmak masaüstüne göre çok daha zahmetlidir. Form optimizasyonu dönüşüm oranını doğrudan etkiler:

• Input type kullanın. Telefon numarası için type="tel" (sayısal klavye açar), e-posta için type="email" (@ tuşu hemen görünür), URL için type="url".
• Autocomplete destekleyin. autocomplete="name", autocomplete="email" attribute’ları tarayıcının otomatik doldurma önerisini tetikler.
• Label’lar her zaman görünür olsun. Placeholder text input’a tıkladığında kaybolur; kullanıcı ne yazması gerektiğini unutur. Floating label veya sabit label kullanın.
• Alan sayısını minimumda tutun. Her fazladan alan form terk oranını artırır. Gerçekten ihtiyacınız olan bilgiyi sorun.
• Hata mesajlarını anında gösterin. Kullanıcı formu gönderdikten sonra en üstte kırmızı bir uyarı görmek yerine, hatalı alanın hemen altında anlık geri bildirim alsın.

Mobil Navigasyon Tasarımı

Masaüstünde yatay menü çubuğuna sığan 8-10 menü öğesi mobilde çalışmaz. Mobil navigasyon farklı düşünme gerektirir.

Hamburger menü

Üç yatay çizgi (hamburger ikonu) ardındaki gizli menü en yaygın çözümdür. Avantajı: ekran alanı tasarrufu. Dezavantajı: kullanıcılar gizli menüyü açmayabilir; keşfedilebilirlik düşer.

En iyi uygulama: Hamburger menüyü kullanın ama en kritik 2-3 aksiyonu (ana sayfa, iletişim, arama) her zaman görünür tutun. Menü açıldığında tam ekran overlay kullanın; yarım ekran menüler erişim sorunları yaratır.

Tab bar (Alt navigasyon)

Instagram, YouTube ve birçok başarılı uygulamanın tercih ettiği model. 4-5 ana bölüm ekranın altında sürekli görünür. Keşfedilebilirlik yüksektir ve başparmak bölgesindedir.

Arama önceliği

Geniş ürün/içerik kataloğu olan sitelerde arama butonu navigasyonun en önemli öğesidir. Mobilde her zaman kolay erişilebilir olmalıdır. Arama deneyimini optimize edin: otomatik tamamlama, öneri ve filtreler mobil aramayı hızlandırır.

Core Web Vitals ve Mobil Performans

Google’ın Core Web Vitals metrikleri mobilde daha da kritiktir. Mobil ağlar masaüstüne göre daha yavaştır; 4G bağlantı bile gecikme (latency) açısından kablolu bağlantının gerisindedir. Türkiye’de özellikle kırsal bölgelerde ve toplu taşımada bağlantı kalitesi düşer.

LCP (Largest Contentful Paint)

En büyük görsel içerik öğesinin yüklenmesi 2,5 saniyenin altında olmalıdır. Mobilde bunu sağlamak için:

Görsel optimizasyonu. Hero görseli masaüstü için 1920px genişliğinde ise mobilde aynı görseli yüklemek gereksiz bant genişliği tüketir. srcset ile telefon için 640px, tablet için 1024px genişliğinde versiyonlar sunun. WebP formatı JPEG’e göre yüzde 25-35 daha küçüktür. AVIF formatı desteği de artıyor.

Critical CSS. Mobilde ilk görünüm alanının (above-the-fold) CSS’ini HTML içinde satır içi (inline) yapın. Geri kalan CSS’i asenkron yükleyin. Bu, tarayıcının ayrı CSS dosyasını beklemeden sayfayı çizmesini sağlar.

Font yükleme. font-display: swap kullanarak fontlar yüklenirken sistem fontunu gösterin. Font dosya boyutlarını kontrol edin; yalnızca kullandığınız karakter setini (Latin, Türkçe karakterler) dahil edin. Gereksiz font ağırlıklarını (light, semi-bold gibi) yüklemeyin.

Preload kritik kaynaklar. <link rel="preload"> ile hero görseli ve kritik fontları önceden yükleyerek LCP’yi iyileştirin.

INP (Interaction to Next Paint)

Kullanıcının bir öğeye dokunması ile tarayıcının görsel yanıt vermesi arasındaki süre 200 ms altında olmalıdır. Ağır JavaScript kodu bu metriği bozar.

JavaScript optimizasyonu. Sayfa yüklenirken çalışan JavaScript miktarını minimize edin. Üçüncü parti scriptleri (analytics, chat widget, reklam) defer veya async ile yükleyin. Ana iş parçacığını (main thread) bloke eden uzun görevleri (long tasks) parçalayın. Kullanılmayan JavaScript’i kaldırın veya dinamik import ile ihtiyaç duyulduğunda yükleyin.

Event handler’lar. Scroll ve touch event’lerine bağlı karmaşık hesaplamalar INP’yi bozar. requestAnimationFrame ve IntersectionObserver kullanarak gereksiz hesaplamalardan kaçının.

CLS (Cumulative Layout Shift)

Sayfa yüklenirken öğelerin kayması kullanıcıyı rahatsız eder. Bir butona dokunmak üzereyken üstten banner kayıp gelirse yanlış yere dokunursunuz. Bu deneyim güven kırar.

Boyut atama zorunluluğu. Tüm görsel ve iframe öğelerine genişlik (width) ve yükseklik (height) atayın. CSS aspect-ratio özelliği ile responsive görsellerin yer ayırmasını sağlayın.

Geç yüklenen içerik. Reklam, embed ve dinamik olarak eklenen içerikler CLS’nin en büyük kaynağıdır. Bu içerikler için sabit yükseklikte yer tutucu (placeholder) kullanın.

Font swap. Özel font yüklenirken sistem fontundan özel fonta geçiş layout shift yaratabilir. font-display: optional kullanarak shift’i tamamen ortadan kaldırabilirsiniz ama bu özel fontun nadiren yükleneceği anlamına gelir. Alternatif olarak font dosyasını preload yapın.

Mobil Görseller ve Medya Stratejisi

Görseller mobil sayfaların en ağır parçasıdır. Ortalama bir web sayfasının ağırlığının yarısından fazlası görsellerdir.

Lazy loading. Ekranın dışında kalan görselleri sayfa yüklenir yüklenmez indirmeyin. loading="lazy" attribute’ı ile kullanıcı scroll ettikçe görseller yüklensin. İlk görünüm alanındaki (above-the-fold) görsellere lazy loading uygulamayın; bunlar hemen yüklenmelidir.

Art direction. Bazen aynı görseli küçültmek yeterli değildir. Masaüstünde geniş bir manzara görseli telefonda anlamsız kalabilir. <picture> elementi ile mobilde kırpılmış, odaklanmış bir versiyon sunabilirsiniz.

Video optimizasyonu. Arka plan videoları mobilde büyük veri tüketir. Mobilde videoyu poster görselle değiştirin veya kullanıcı oynatma butonuna bastığında yükleyin. Otomatik oynatılan videoların sessiz olmasını sağlayın.

Sık Yapılan Mobil Tasarım Hataları

Pop-up ve interstitial

Google, sayfanın büyük kısmını kaplayan pop-up kullanan mobil sayfaları sıralamalarda cezalandırır. Özellikle sayfa yüklenir yüklenmez açılan tam ekran pop-up’lar ciddi sıralama etkisi yaratır. Yasal zorunluluklar (KVKK, çerez onayı) istisnadır ama bunlar bile mümkün olduğunca az yer kaplamalıdır.

Alternatif: Banner şeklinde küçük bildirimler, sayfa sonunda kayan (slide-in) çağrılar veya belirli bir scroll derinliğinden sonra tetiklenen küçük modallar.

Küçük yazı boyutu

Mobilde minimum 16px gövde metni önerilir. 14px ve altı kullanıcıyı zoom yapmaya zorlar. Ayrıca satır uzunluğu (line-length) da önemlidir; bir satırda 70-80 karakterden fazla olmayın. Mobilde doğal genişlikte bu sorun genellikle oluşmaz ama ekstra padding ile okunabilirliği artırabilirsiniz.

Yatay taşma

İçeriğin ekran genişliğini aşması ve yatay kaydırma çubuğu oluşturması mobilde en sık karşılaşılan hatadır. Sebepleri: sabit genişlikli tablo, taşan görsel, absolute konumlu element veya geniş bir pre/code bloğu. CSS’te overflow-x: hidden ile gizlemek geçici çözümdür; asıl sorun responsive olmayan içeriktir.

Tablo çözümü: Mobilde geniş tabloları yatay scroll container içine aldığınızda kullanıcı tabloyu kaydırabilir. Alternatif olarak tabloyu kart formatına dönüştürün; her satır ayrı bir kart olarak dikey listelenir.

Tıklanamayan iletişim bilgileri

Mobilde telefon numarası tel: bağlantısıyla tıklanabilir olmalıdır. E-posta adresi mailto: ile tıklanabilir olmalıdır. Adres Google Maps bağlantısıyla açılabilir olmalıdır. Bu detaylar küçük görünür ama kurumsal web siteleri için dönüşüm kaybının sık görülen nedenlerindendir.

Yavaş üçüncü parti scriptler

Canlı sohbet widget’ları, sosyal medya butonları, analitik scriptleri ve reklam kodları sayfayı ağırlaştırır. Her eklenen script mobil performansı düşürür. Gerçekten gerekli mi sorusunu sorun. Gerekli olanları defer veya kullanıcı etkileşimi sonrasında (interaction-based loading) yükleyin.

Mobil Uyumluluğu Test Etmek

Google Search Console

Mobil kullanılabilirlik raporu, siteniz genelindeki mobil sorunları gösterir: metin çok küçük, tıklama hedefleri çok yakın, içerik viewport genişliğini aşıyor. Bu raporu en az ayda bir inceleyin.

Chrome DevTools ve Lighthouse

Chrome DevTools’un cihaz emülatörü farklı ekran boyutlarını simüle eder. Lighthouse aracı performans, erişilebilirlik, SEO ve en iyi uygulamalar puanlarını ölçer. Mobil performans puanını 90’ın üzerinde tutmayı hedefleyin.

Performans throttling. DevTools’ta CPU ve ağ hızını yavaşlatarak (throttle) gerçek mobil koşulları simüle edin. Geliştirici bilgisayarında hızlı çalışan site, düşük-orta segment telefonda çok farklı davranır.

Gerçek cihaz testi

Emülatörler yeterli değildir. Gerçek cihazlarda test etmenin yerini hiçbir şey tutmaz. Özellikle:

• Farklı ekran boyutları (küçük telefon: iPhone SE, büyük: Samsung S seri)
• Farklı işletim sistemleri (iOS Safari, Android Chrome)
• Farklı bağlantı kaliteleri (Wi-Fi, 4G, 3G)

BrowserStack veya LambdaTest gibi araçlar bulut üzerinden gerçek cihaz testi yapmanızı sağlar.

WebPageTest

Farklı lokasyonlardan ve cihazlardan gerçek performans testi yapabilirsiniz. Waterfall analizi hangi kaynağın ne kadar sürede yüklendiğini detaylıca gösterir. Türkiye lokasyonundan test yaparak gerçek kullanıcı deneyimini ölçün.

Mobil SEO Kontrol Listesi

Mobil uyumluluk ile SEO birbirinden ayrılamaz. İşte mobil SEO kontrol listesi:

• Viewport meta tag’i doğru ayarlanmış: <meta name="viewport" content="width=device-width, initial-scale=1">
• Mobil ve masaüstü sürümde aynı içerik mevcut (mobile-first indexing uyumu)
• Yapılandırılmış veri (schema) mobil sayfada da mevcut
• Robots.txt Googlebot-Mobile’ı engellememiş
• Canonical URL masaüstü ve mobilde aynı
• Hreflang tag’leri (varsa) mobil sayfada da mevcut
• Core Web Vitals mobilde geçiyor (LCP < 2.5s, INP < 200ms, CLS < 0.1)
• Görsellerin alt text’leri mobilde de render ediliyor
• İç bağlantılar mobilde dokunulabilir boyutta

Sıkça Sorulan Sorular

Mobil uyumlu olmayan sitem Google’da sıralama kaybeder mi?

Evet. Google 2019’dan beri mobile-first indexing kullanıyor. Sitenizin mobil versiyonu temel indeksleme kaynağıdır. Mobil uyumlu olmayan site hem doğrudan sıralama sinyali kaybeder hem de kötü kullanıcı deneyimi nedeniyle dolaylı olarak düşer (yüksek bounce rate, düşük etkileşim).

AMP (Accelerated Mobile Pages) kullanmalı mıyım?

AMP artık Google sıralamasında zorunlu bir faktör değil. Google, Top Stories ve diğer zengin sonuçlarda AMP gereksinimini kaldırdı. İyi optimize edilmiş responsive bir site AMP’siz de mükemmel mobil performans sunabilir. AMP’nin karmaşıklığı ve kısıtlamalarını göz önünde bulundurarak, çoğu site için standart responsive geliştirme yeterlidir.

Ayrı mobil site mi (m.site.com) yoksa responsive mi tercih etmeliyim?

Kesinlikle responsive. Ayrı mobil site iki URL yapısı, iki ayrı SEO yönetimi ve içerik senkronizasyonu sorunu yaratır. Google da tek URL yapısını tercih eder. Mevcut m.site.com varsa responsive siteye geçiş yapın ve eski URL’leri 301 yönlendirmeyle taşıyın.

Mobil performansı iyileştirmenin en hızlı yolu nedir?

Genellikle en büyük kazanımlar görsel optimizasyonundan gelir: görselleri WebP’ye çevirin, boyutlarını küçültün, lazy loading ekleyin. Bunun ardından kullanılmayan JavaScript ve CSS’i kaldırın. Bu iki adım çoğu sitenin mobil performans puanını ciddi ölçüde artırır.

Progressive Web App (PWA) ile mobil uygulama arasındaki fark nedir?

PWA, web teknolojileriyle yapılmış ama uygulama benzeri deneyim sunan sitedir: ana ekrana eklenebilir, çevrimdışı çalışabilir, push bildirim gönderebilir. Mobil uygulama ise App Store/Play Store üzerinden yüklenir ve cihaz donanımına daha derin erişim sağlar. Çoğu işletme için PWA yeterlidir ve uygulama geliştirme maliyetini ortadan kaldırır.

Özetle, mobil başarı yalnız responsive görünümle ölçülmez. Sayfanın hızlı açılması, kullanıcının rahatça ilerlemesi ve kritik aksiyonların küçük ekranda sürtünmesiz tamamlanması gerekir. Özellikle kampanya sayfalarında ve ticari formlarda mobil darboğazları düzenli ölçmek, çoğu zaman doğrudan gelir artışına karşılık gelir.

---

Site bakım süreçleri kapsamında mobil performansı düzenli olarak izlemek ve iyileştirmek, uzun vadeli SEO ve dönüşüm başarısı için zorunludur. Mobil uyumlu web sitesi tasarımı hizmetimiz ve optimizasyonu hakkında bizimle iletişime geçebilirsiniz.