01Türkiye'de Mobil Gerçekliği: Görmezden Gelemeyeceğiniz Rakamlar

Türkiye mobil-öncelikli bir ülkedir. Mobil-dostu değil, mobil-isteğe bağlı değil - mobil-öncelikli. Web siteniz bir akıllı telefonda kusursuz çalışmıyorsa, sadece geride kalmıyorsunuz; her gün aktif olarak iş kaybediyorsunuz.

İşte önemli rakamlar:

Türkiye'deki internet kullanıcılarının %76'sı web'e ağırlıklı olarak mobil cihazlardan erişiyor
Türk yetişkinlerin %93'ü akıllı telefon sahibi
Türkiye'de 65 milyonun üzerinde mobil internet abonesi var
Ortalama Türk kullanıcısı günde 7,5 saatini online geçiriyor, bunun 4 saatten fazlası mobilde
Türkiye'deki online alışverişlerin %62'si mobil cihazlardan yapılıyor
Google 2021'den beri mobil-öncelikli dizinleme kullanıyor - yani arama sıralamalarınızı masaüstü siteniz değil, mobil siteniz belirliyor

Bunlar gelecek tahminleri değil. Şu anda böyle. Ve web siteniz mobil duyarlılık temel bir prensip olarak düşünülmeden yapıldıysa, trafik, müşteri ve para kaybediyorsunuz.

Responsive (Duyarlı) Web Tasarım Nedir?

Duyarlı web tasarım, bir web sitesinin düzenini, görsellerini ve işlevselliğini kullanılan cihazın ekran boyutuna otomatik olarak uyarlayan bir yaklaşımdır. Müşteriniz ister 6,7 inçlik bir Samsung Galaxy'de, ister 12,9 inçlik bir iPad'de, isterse 27 inçlik bir masaüstü monitörde olsun, web sitesi optimum bir deneyim sunar.

Bu şu yöntemlerle sağlanır:

Sabit piksel genişlikleri yerine yüzde tabanlı genişlikler kullanan akışkan ızgaralar
Kapsayıcıları içinde ölçeklenen esnek görseller
Ekran boyutuna göre farklı stiller uygulayan CSS medya sorguları
Duyarlı düzenleri daha basit ve daha güvenilir yapan Flexbox ve Grid gibi modern CSS özellikleri

Gerçekten duyarlı bir web sitesi, masaüstü sitenin sadece küçültülmüş bir versiyonu değildir. İnsanların telefonlarını nasıl kullandığını düşünerek tasarlanmış bir deneyimdir - tek elle, hareket halinde, değişen bağlantı hızlarıyla ve fare tıklamaları yerine dokunarak.

Duyarlı Tasarım mı, Ayrı Mobil Site mi?

Mobil web'in ilk günlerinde, bazı işletmeler ayrı mobil web siteleri oluşturdu (m.ornek.com). Bu yaklaşımın önemli dezavantajları vardır:

Ayrı Mobil Site Sorunları:

Bakım ve güncelleme gerektiren iki web sitesi
Sürümler arasında içerik tutarsızlıkları
İki URL arasında bölünmüş SEO otoritesi
Daha yüksek geliştirme ve bakım maliyetleri
Google'dan kopya içerik cezası riski
Yönlendirmeler kullanıcı deneyimini yavaşlatabilir

Duyarlı Tasarım Avantajları:

Bir web sitesi, bir URL, bir kod tabanı
Tüm cihazlarda tutarlı içerik ve marka
Tüm SEO otoritesi tek bir alan adında birleştirilmiş
Daha düşük uzun vadeli bakım maliyetleri
Yönlendirme olmadan daha iyi kullanıcı deneyimi
Yeni cihaz boyutları ortaya çıktıkça geleceğe hazır

Sektör konsensüsü açık: duyarlı tasarım standarttır. Google bunu açıkça önermektedir.

Google'ın Mobil-Öncelikli Dizinlemesi: Sizin İçin Ne Anlama Geliyor

Google mobil-öncelikli dizinlemeye tamamen geçtiğinden beri, arama sıralamalarınızı belirlemek için web sitenizin mobil sürümü kullanılıyor. Bunun derin sonuçları var:

Masaüstünde görünen ama mobilde gizli olan içerik, Google tarafından dizinlenmeyebilir
Mobil siteniz yavaş yükleniyorsa, masaüstü siteniz hızlı olsa bile sıralamalarınız düşer
Mobil sitenizin kullanılabilirliği kötüyse, arama görünürlüğünüz azalır
Sadece masaüstünde görünen içeriğiniz varsa, Google bunu esasen yok sayar

Bu, mobil deneyiminizin ikincil bir endişe olmadığı anlamına gelir - SEO için BİRİNCİL endişedir.

Web Sitenizin Mobil Uyumluluğunu Nasıl Test Edersiniz

Yeniden tasarıma yatırım yapmadan önce, nerede olduğunuzu değerlendirin:

1. Google'ın Mobil Uyumluluk Testi
search.google.com/test/mobile-friendly adresini ziyaret edin ve URL'nizi girin. Google, sitenizin geçip geçmediğini söyleyecek ve belirli sorunları vurgulayacaktır.

2. Google PageSpeed Insights
pagespeed.web.dev adresinde mobil performans puanınızı görebilirsiniz. Mobilde 90+ hedefleyin (sadece masaüstü değil).

3. Chrome DevTools
Chrome'da F12'ye basın, cihaz geçiş simgesine tıklayın ve sitenizi çeşitli telefonlardaymış gibi gezinin. Bu, düzen sorunlarını hızla ortaya çıkarır.

4. Gerçek Cihaz Testi
Gerçek cihazlarda test etmenin yerini hiçbir şey tutmaz. Web sitenizi şunlarda deneyin:

Bir iPhone (Safari, Chrome'dan farklı davranır)
Bir Android telefon (hem Chrome hem Samsung Internet)
Hem dikey hem yatay modda bir tablet

5. Core Web Vitals Raporu
Google Search Console'da mobil Core Web Vitals raporunuzu kontrol edin. Bu, gerçek kullanıcılardan gelen gerçek dünya performans verilerini gösterir.

Sık Karşılaşılan Mobil UX Sorunları (ve Çözümleri)

İstanbul'da onlarca web sitesini denetleme deneyimime dayanarak, en sık karşılaştığım mobil sorunlar şunlardır:

Sorun 1: Küçük, Dokunulamayan Düğmeler ve Bağlantılar

Masaüstünde 12 piksellik bir bağlantı sorun değildir çünkü fare imleci hassastır. Mobilde parmaklar hassas değildir - Apple minimum 44x44 piksel dokunma hedefi önerir. Bağlantılar ve düğmeler çok küçük veya birbirine çok yakın olduğunda, kullanıcılar yanlışlıkla yanlış şeye dokunur, hayal kırıklığına uğrar ve ayrılır.

Çözüm: Tüm etkileşimli öğeleri aralarında yeterli boşluk bırakarak en az 44x44 piksel yapın. Görsel tasarımı değiştirmeden dokunma alanını artırmak için CSS dolgusu kullanın.

Sorun 2: Yatay Kaydırma

İçerik ekrandan daha geniş olduğunda, kullanıcılar yatay kaydırma yapmak zorunda kalır. Bu kafa karıştırıcıdır ve sitenin bozuk hissetmesini sağlar.

Çözüm: Sabit piksel genişlikleri yerine göreli birimler (yüzdeler, vw, rem) kullanın. Uygun bir viewport meta etiketi ayarlayın. Geliştirme sırasında taşma sorunlarını yakalamak için body'de overflow: hidden ile test edin.

Sorun 3: Mobil Ağlarda Yavaş Yükleme

Türkiye'deki mobil bağlantılar büyük farklılıklar gösterir. 5G İstanbul'da genişlerken, birçok kullanıcı hâlâ 4G ve hatta 3G kullanıyor, özellikle kapalı mekanlarda, bodrumlarda veya kalabalık alanlarda. Ofis Wi-Fi'ınızda 2 saniyede yüklenen bir web sitesi, gerçek bir mobil bağlantıda 8 saniye sürebilir.

Çözüm: Görselleri optimize edin (WebP kullanın, lazy loading uygulayın), JavaScript'i minimize edin, verimli framework'ler kullanın. SvelteKit ile geliştirdiğimde, derlenen çıktı React veya Next.js eşdeğerlerinden önemli ölçüde daha küçüktür, bu da doğrudan daha hızlı mobil yüklemeye dönüşür.

Sorun 4: Rahatsız Edici Pop-up'lar ve Geçiş Reklamları

Mobilde kapatılması zor olan tam ekran pop-up'lar sadece sinir bozucu değildir - Google, mobilde rahatsız edici geçiş reklamları için web sitelerini aktif olarak cezalandırır. Çerez onay banner'ları bir istisnadır, ancak bülten pop-up'ları ve tanıtım kaplamaları sıralamalarınıza zarar verebilir.

Çözüm: Tam ekran pop-up'lar yerine küçük, kolayca kapatılabilen banner'lar kullanın. Pop-up kullanmanız gerekiyorsa, geciktirin ve kapatma düğmesini büyük ve kolay dokunulabilir yapın.

Sorun 5: Okunamayan Metin

Okumak için yakınlaştırma gerektiren metin bir mobil başarısızlığıdır. 14px'in altındaki yazı boyutları genellikle rahat mobil okuma için çok küçüktür.

Çözüm: Gövde metni için en az 16px temel yazı boyutu kullanın. Yeterli satır yüksekliği (1,5 veya daha fazla) ve kontrast sağlayın. Parlak güneş ışığı koşullarında okunabilirliği test edin.

Sorun 6: Doldurması Acı Veren Formlar

Küçük giriş alanlarına sahip uzun formlar, mobil dönüşümün düşmanıdır. Her gereksiz alan tamamlama oranınızı düşürür.

Çözüm: Form alanlarını minimize edin (ad, e-posta, mesaj genellikle yeterlidir). Doğru klavyenin görünmesi için uygun giriş türlerini kullanın (email, tel, number). Otomatik tamamlamayı etkinleştirin. Giriş alanlarını kolay dokunulacak kadar yüksek yapın.

Dokunmatik Dostu Tasarım İlkeleri

Dokunmatik için tasarım, fare için tasarımdan temelden farklıdır:

Baş parmak bölgeleri önemlidir - En önemli eylemler baş parmakla erişilebilir olmalıdır. Tek elle kullanımda, ekranın alt ortası en kolay erişilebilir alandır
Kaydırma hareketleri gezinmeyi geliştirebilir ancak bir eylemi gerçekleştirmenin tek yolu olmamalıdır
Dokunmatik ekranda hover durumları yoktur - Önemli bilgileri hover efektlerinin arkasına gizlemeyin
Uzun basma keşfedilemez - Temel işlevsellik için asla uzun basma gerektirmeyin
Dokunmada görsel geri bildirim sağlayın - Kullanıcıların dokunmalarının kaydedildiğinin onayına ihtiyacı vardır

Mobil Dönüşüm Optimizasyonu

Mobil ziyaretçi almak savaşın sadece yarısıdır. Onları dönüştürmek diğer yarısıdır. Mobil dönüşüm oranları genellikle masaüstünden %50 daha düşüktür, ancak iyi tasarımla fark kapanıyor:

Temel Mobil Dönüşüm Taktikleri:

Tek dokunuşla arama düğmeleri - Hizmet işletmeleri için belirgin bir telefon düğmesi en yüksek dönüşüm sağlayan öğeniz olabilir
Basitleştirilmiş gezinme - Hamburger menüleri akıllıca kullanın, ancak en önemli bağlantıları görünür tutun
Sabit CTA'lar - Ekranın altındaki sabit bir harekete geçirici mesaj düğmesi, dönüşümü her zaman bir dokunuş uzakta tutar
Hızlı ödeme - E-ticaret için Apple Pay, Google Pay ve kayıtlı kart bilgilerini destekleyin
Ekranın üst kısmında sosyal kanıt - Puanları, yorum sayılarını veya güven rozetlerini erken gösterin
WhatsApp entegrasyonu - Türkiye'de WhatsApp genellikle e-postaya tercih edilir. Bir WhatsApp sohbet düğmesi sorguları önemli ölçüde artırabilir

AMP 2026'da Hâlâ Geçerli mi?

AMP (Hızlandırılmış Mobil Sayfalar), Google'ın daha hızlı mobil sayfaları zorlamak için başlattığı bir girişimdi. Kısa cevap: AMP artık gerekli değildir ve önemini yitirmektedir.

Google artık arama sonuçlarında AMP sayfalara ayrıcalıklı davranmıyor. Öne Çıkan Haberler karuseli artık sadece AMP değil, herhangi bir hızlı yüklenen sayfayı kabul ediyor. Birçok büyük yayıncı AMP'yi terk etti.

AMP yerine, gerçekten hızlı web siteleri oluşturmaya odaklanın. İyi yapılmış bir SvelteKit sitesi, daha az JavaScript sunduğu ve daha iyi etkileşim puanları elde ettiği için Core Web Vitals'da AMP sayfalarını tutarlı bir şekilde geride bırakır.

Mobil Sayfa Hızı: Teknik Detaylar

Mobil sayfa hızı birçok faktörden etkilenir:

Sunucu Yanıt Süresi (TTFB)

Kitlenize yakın hosting seçin (Türk ziyaretçiler için İstanbul veya Avrupa sunucuları)
Statik varlıklar için CDN (İçerik Dağıtım Ağı) kullanın
Sunucu tarafı önbellekleme uygulayın

Kaynak Yükleme

Tüm görselleri WebP formatına sıkıştırın
Ekranın altındaki görseller için lazy loading uygulayın
Kritik fontları ve ekranın üst kısmındaki görselleri önceden yükleyin
Render-engelleyici CSS ve JavaScript'i minimize edin

JavaScript Etkisi

Her kilobayt JavaScript, kullanıcının cihazında ayrıştırılmalı, derlenmeli ve çalıştırılmalıdır
Bütçe dostu telefonlar, amiral gemisi modellerden önemli ölçüde daha yavaş işlemcilere sahiptir
Türkiye'nin en iyi 100 web sitesindeki ortalama JavaScript yükü 800KB'ın üzerindedir - çok fazla
SvelteKit'in derleyici yaklaşımı, eşdeğer React uygulamalarından %40-60 daha küçük paketler üretir

Önemli Metrikleri Ölçme:

LCP (Largest Contentful Paint): 2,5 saniyenin altında olmalı
FID (First Input Delay): 100 milisaniyenin altında olmalı
CLS (Cumulative Layout Shift): 0,1'in altında olmalı
INP (Interaction to Next Paint): 200 milisaniyenin altında olmalı

Mobil-Öncelikli Tasarım Yaklaşımı

Mobil-öncelikli tasarım, önce en küçük ekran için tasarlamak, ardından daha büyük ekranlar için kademeli olarak geliştirmek anlamına gelir. Bu, tasarımcıların önce masaüstü versiyonunu oluşturup ardından mobil ekrana sıkıştırmaya çalıştığı geleneksel yaklaşımın tam tersidir.

Mobil-öncelikli neden daha iyi çalışır:

1Önceliklendirmeye zorlar - Sınırlı ekran alanı, gerçekten neyin önemli olduğunu belirlemenizi gerektirir
2Daha iyi performans - Küçük başlamak, yüklenecek daha az kod demektir
3Kademeli iyileştirme - Daha büyük ekranlar için özellik eklemek, daha küçük ekranlar için çıkarmaktan daha kolaydır
4Gerçekliği yansıtır - Ziyaretçilerinizin çoğu zaten mobilde
5Daha temiz kod - Mobil-öncelikli CSS daha basit ve bakımı daha kolay olma eğilimindedir

Mobil-öncelikli yaklaşımımı nasıl uyguluyorum:

Her projeye mobil wireframe'lerle başlıyorum
CSS'i min-width medya sorguları ile yazıyorum (önce mobil stiller, sonra tablet, sonra masaüstü)
Geliştirme boyunca mobilde test ediyorum, sadece sonunda değil
SvelteKit'in yerleşik duyarlı yeteneklerini kullanıyorum
Yayın öncesi gerçek cihazlarla doğruluyorum

Web Sitenizin Mobil Deneyimi: Bir Kontrol Listesi

Mevcut web sitenizi değerlendirmek için bu kontrol listesini kullanın:

Tüm metni yakınlaştırmadan okuyabiliyor musunuz?
Tüm düğmeler ve bağlantılar baş parmakla kolayca dokunulabilir mi?
Sayfa 4G'de 3 saniyenin altında yükleniyor mu?
Gezinme mobilde kullanımı kolay mı?
Formlar uygun mobil klavyeleri kullanıyor mu?
Görseller mobil ekranlar için uygun boyutlandırılmış mı?
Yatay kaydırma yok mu?
Telefon numarasını kolayca bulup tek dokunuşla arayabiliyor musunuz?
Site hem dikey hem yatay modda çalışıyor mu?
Pop-up'lar mobilde kolayca kapatılabiliyor mu?

Bunlardan herhangi birine "hayır" yanıtı verdiyseniz, web siteniz mobil ziyaretçi kaybediyor.

02İlgili Okumalar

Etkili bir web sitesi oluşturma hakkında daha fazla bilgi edinmek ister misiniz? İlgili rehberlerimizi okuyun:

Mobilde mükemmel bir web sitesine mi ihtiyacınız var? Hizmetlerimizi inceleyin veya ücretsiz danışmanlık alın.

Web Sitenizi Mobilde Mükemmel Hale Getirmeye Hazır mısınız?

Her cihazda olağanüstü deneyim sunan mobil-öncelikli web siteleri oluşturma konusunda uzmanlaşıyorum. SvelteKit kullanarak yaklaşımım, sitenizin yalnızca duyarlı değil, mobilde son derece hızlı olmasını sağlıyor - Google'ın mobil performans testlerinde tutarlı olarak 95+ puan alıyor.

Mevcut web sitenizin mobil deneyimini analiz ettiğim ve uygulanabilir öneriler sunduğum ücretsiz bir mobil denetim sunuyorum. Tamamen yeniden tasarıma veya hedefli iyileştirmelere ihtiyacınız olsun, şu anda telefonlarında olan Türk internet kullanıcılarının %76'sını nasıl yakalayacağınız hakkında konuşalım.

Mobil Uyumlu Web Sitesi Neden Şart? (2026 Rehberi)