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

Evet, mobil uyum artık bir tercih değil, temel koşuldur. Google sitenizi akıllı telefon tarayıcısıyla tarar ve dizine eklerken mobil sürümü esas alır; mobilde eksik kalan içerik aramada da eksik kalır. Mobil uyumlu bir site için tek bir esnek (responsive) tasarım kullanın, dokunma hedeflerini yeterince büyük tutun, metni yakınlaştırmadan okunur yapın ve formları telefonda kolay doldurulacak şekilde kurun.

Mobil öncelikli dizine ekleme ne anlama geliyor?

Google uzun süredir sitelerin mobil sürümünü dizine ekleme ve sıralamada esas alıyor; bugün siteleri büyük ölçüde Googlebot Smartphone ile tarıyor. Mobil cihazdan hiç erişilemeyen içerik artık dizine eklenmeyebilir.

Bunun pratik sonucu şudur: masaüstünde görünen ama mobilde kaldırılmış bir paragraf, tablo ya da yapılandırılmış veri, dizine eklemede hesaba katılmaz. İki sürüm aynı ana içeriği, aynı başlıkları, aynı meta bilgileri ve aynı yapılandırılmış veriyi taşımalıdır. Akordeon veya sekme içine yerleştirilen içerik sorun değildir; ancak kullanıcı kaydırmadan ya da dokunmadan hiç yüklenmeyen içeriği Google göremeyebilir. Ayrıntılar Google'ın mobil öncelikli dizine ekleme en iyi uygulamaları belgesinde yer alıyor.

Arama motoru bir yana, işletmenizi yolda ya da iş arasında arayan kişi de size telefondan ulaşır. Telefonda zor kullanılan bir site o kişiyi bir sonraki sonuca gönderir.

Responsive tasarım mı, ayrı mobil site mi?

Responsive tasarımda tek bir URL ve tek bir HTML vardır; düzeni ekran genişliğine göre CSS belirler. Google bu yöntemi uygulaması ve bakımı en kolay seçenek olarak önerir.

Responsive tasarımın temel ilkeleri nelerdir?

• Viewport etiketi: Sayfanın başında <meta name="viewport" content="width=device-width, initial-scale=1"> bulunmalı. Yakınlaştırmayı kapatan user-scalable=no ayarını kullanmayın; az gören kullanıcıların işini zorlaştırır.
• Önce mobil: CSS'i dar ekran için yazıp ekran genişledikçe düzen ekleyin (min-width medya sorguları). Böylece telefonlar yalnızca ihtiyaç duydukları kurallarla başlar.
• Esnek ölçüler: Sabit piksel genişlikler yerine yüzde, rem ve esnek ızgaralar (CSS Grid, Flexbox) kullanın.
• İçeriğe göre kırılma noktası: Belirli telefon modellerine göre değil, düzenin bozulmaya başladığı genişliğe göre kırılma noktası belirleyin.
• Esnek görseller: Görsellerin kapsayıcısından taşmasını önleyin; srcset ve sizes ile ekrana uygun dosyayı sunun.
• Yatay kaydırma yok: WCAG 2.2'deki yeniden akış (reflow) kriteri, içeriğin 320 CSS piksel genişlikte yatay kaydırma gerektirmeden kullanılabilmesini ister.

Dokunma hedefleri ne kadar büyük olmalı?

Parmak, fare imleci kadar isabetli değildir. WCAG 2.2'nin AA düzeyindeki "Hedef Boyutu (Minimum)" kriteri, dokunulan öğelerin en az 24×24 CSS piksel olmasını ya da çevresinde bu alanı sağlayacak boşluk bulunmasını ister. Bu bir alt sınırdır. Ana düğmelerde 44×44 piksel civarı daha rahat bir hedeftir; WCAG'nin AAA düzeyindeki kriter de bu değeri kullanır, bazı tasarım sistemleri ise daha büyük ölçüler önerir. Kriterin ayrıntıları ve istisnaları için W3C'nin açıklama sayfasına bakabilirsiniz.

Birbirine çok yakın metin linkleri, küçük kapatma (X) düğmeleri ve sıkışık menü öğeleri en sık karşılaşılan sorunlardır. Telefon numarasını tel: bağlantısıyla, adresi harita bağlantısıyla dokunulabilir yapın; menüyü de başparmağın kolay ulaştığı ve kolay kapanan bir yapıda kurun.

Mobilde metin nasıl okunur hale getirilir?

Gövde metni için 16 piksel civarı yaygın ve güvenli bir başlangıçtır; daha küçük yazılar okuyanı yakınlaştırmaya zorlar. Satır aralığını ferah tutun, metni ekran kenarına yapıştırmayın ve metinle arka plan arasında yeterli kontrast bırakın: WCAG AA, normal boyutlu metin için en az 4,5:1 kontrast oranı ister. Kullanıcı telefonunda yazı boyutunu büyüttüğünde düzen bozulmamalı; bunun için yazı boyutlarını rem gibi göreli birimlerle tanımlayın.

Mobilde ekran alanı dardır, ama bu içeriği kırpmak için bir gerekçe değildir. Önemli bilgiyi ve ana eylemi üste alın, uzun bölümleri ara başlıklarla bölün, gerekirse akordeonla katlayın.

Ekranı kaplayan açılır pencerelerden de kaçının. Ana içeriği kapatan reklam ve abonelik pencereleri telefonda kullanıcıyı sayfadan uzaklaştırır; çerez bildirimi gibi yasal zorunluluklar ise ekranın makul bir bölümünü kullanmalıdır.

Mobilde formlar nasıl kolaylaştırılır?

• Alan sayısını azaltın; yalnızca gerçekten ihtiyaç duyduğunuz bilgiyi isteyin.
• Doğru klavyeyi açtırın: e-posta için type="email", telefon için type="tel", yalnızca rakam gereken alanlar için inputmode="numeric".
• autocomplete özniteliğiyle ad, telefon ve adres gibi alanların otomatik doldurulmasına izin verin.
• Etiketleri alanın üstünde görünür tutun; yer tutucu (placeholder) metin, yazmaya başlayınca kaybolduğu için etiketin yerine geçmez.
• Form alanlarında yazı boyutunu 16 pikselin altına düşürmeyin; iOS'taki Safari daha küçük yazılı bir alana dokunulduğunda sayfayı otomatik yakınlaştırır.
• Hata mesajını ilgili alanın hemen altında, neyin düzeltileceğini söyleyerek gösterin.

Online randevu ya da teklif alan sitelerde form, mobil uyumun en çok sınandığı yerdir. Portföyümüzdeki Uludağ Veteriner gibi randevu odaklı projelerde formu ilk günden telefon ekranına göre tasarlamamızın nedeni budur.

Mobil uyumu nasıl test edersiniz?

Google, Mobil Uyumluluk Testi aracını ve Search Console'daki Mobil Kullanılabilirlik raporunu Aralık 2023'te kullanımdan kaldırdı; eski rehberlerde bu araçlara rastlarsanız artık erişilemediklerini bilin. Bugün en pratik yol, Lighthouse'u (Chrome geliştirici araçlarında ya da PageSpeed Insights içinde) ve Chrome'un cihaz modunu kullanmak, ardından siteyi gerçek telefonlarda denemektir.

1. Siteyi en az bir iOS ve bir Android telefonda, dikey ve yatay konumda açın.
2. Her sayfa şablonunda yatay kaydırma olup olmadığını kontrol edin.
3. Menüyü, düğmeleri ve formları tek elle, başparmakla kullanmayı deneyin.
4. Telefonun yazı boyutunu büyütüp düzenin bozulup bozulmadığına bakın.
5. Mobil ve masaüstü sürümlerde başlıkların, metinlerin ve yapılandırılmış verinin aynı olduğunu doğrulayın.
6. Açılır pencerelerin ana içeriği kapatmadığından emin olun.
7. Lighthouse raporundaki erişilebilirlik ve en iyi uygulama uyarılarını giderin.

Mobilde yükleme hızı ayrı ve geniş bir konu; görsel, önbellek ve JavaScript adımlarını hızlı web sitesi performans rehberimizde ayrıntılı anlattık.

Sık Sorulan Sorular

Mobil uyumlu site ile mobil uygulama aynı şey mi?

Hayır. Mobil uyumlu site tarayıcıda açılır ve aramada bulunur; mobil uygulama ise mağazadan indirilir ve düzenli kullanan müşteriler için anlam taşır. Çoğu işletme için önce mobil uyumlu site gelir; bildirim, sadakat programı veya çevrimdışı kullanım gerekiyorsa mobil uygulama geliştirme ayrıca değerlendirilebilir.

Eski bir siteyi mobil uyumlu hale getirmek mümkün mü?

Mümkün, ama sabit genişlikli eski bir tasarımı sonradan esnetmek çoğu zaman yeniden tasarlamaktan daha zahmetli olur. Kodun yapısına bakıp hangisinin daha mantıklı olduğuna karar verin.

Hamburger menü kullanmak sorun mu?

Sorun değil; dar ekranda menüyü toplamanın yaygın bir yoludur. Menü düğmesinin görünür ve etiketli olduğundan, "Hemen arayın" ya da "Teklif alın" gibi en önemli eylemlerin menü dışında da erişilebilir kaldığından emin olun.

Mobilde içeriği kısaltmak SEO'ya zarar verir mi?

İçeriği mobilde tamamen kaldırırsanız evet, çünkü Google dizine eklerken mobil sürümü esas alır. İçeriği silmek yerine akordeon veya sekmelerle düzenleyin.

Responsive tasarım sitenin hızlı olduğu anlamına gelir mi?

Hayır. Responsive tasarım düzenin ekrana uymasını sağlar; telefona masaüstü boyutunda görsel ve gereksiz kod gönderen bir site yine yavaş kalır. Hızı ayrıca ölçmek gerekir.

Sitenizin telefonda nasıl çalıştığından emin değilseniz birlikte bakalım. Bizimle iletişime geçin; mobil kullanım sorunlarını önceliklendirip mobil öncelikli web tasarımı için bir yol haritası çıkaralım.

Son güncelleme: Ekim 2026