Web sitesi · 8 dk okuma · Güncellendi: 2026-10-26

Mobil uyumlu web sitesi nedir? Responsive tasarım ve mobil site testi

Müşterilerinizin çoğu sitenizi telefondan açar. Telefonda yazısı okunmayan, düğmesine basılamayan ya da yavaş açılan bir site, ne kadar güzel tasarlanmış olursa olsun müşteri kaybettirir.

Kısaca

• Mobil uyumlu web sitesi, telefon, tablet ve bilgisayarda aynı içeriği ekran boyutuna göre yeniden düzenleyerek rahat okunur ve kullanılır şekilde gösteren sitedir.
• Bugün en yaygın yöntem responsive tasarımdır: tek site, tek adres ve ekran genişliğine göre değişen yerleşim.
• Google siteleri dizine eklerken ve sıralarken öncelikle sayfaların mobil sürümünü kullanır; mobilde eksik kalan içerik aramada da eksik kalır.
• Mobil site testi için gerçek bir telefonda gezinmek, tarayıcının cihaz modunu kullanmak ve PageSpeed Insights'ın mobil sonucuna bakmak yeterli bir başlangıçtır.
• Heyşirket temaları responsive çalışır; Özelleştir ekranında siteyi telefon ve tablet görünümünde önizleyebilir, Profesyonel pakette SEO › Hız ekranında telefon hız puanını izleyebilirsiniz.

Sitenizi bilgisayarda açtığınızda her şey yerli yerinde. Bir müşteri ise aynı sayfayı telefonundan açıyor: menü ekrana sığmamış, yazılar küçük, telefon numarasına dokununca hiçbir şey olmuyor. İki saniye sonra geri tuşuna basıyor ve aramadaki bir sonraki sonuca geçiyor.

Bu yazıda mobil uyumlu web sitesinin ne olduğunu, responsive tasarımın temel kurallarını, adım adım mobil site testini ve telefonda en sık görülen sorunların çözümünü anlatıyoruz. Son bölümde Heyşirket ile kurulan sitelerde mobil uyumun nasıl sağlandığını açıkça yazdık.

İyi haber şu: mobil uyum için siteyi baştan yaptırmak çoğu zaman gerekmez. Sorunların büyük kısmı birkaç kuralın atlanmasından doğar ve yarım saatlik bir testle bulunur. Bu yazıdaki kontrol listesini bir kez uygulamanız, sitenizin telefondaki halini büyük ölçüde netleştirir.

Bölüm 1 · Tanım Mobil uyumlu web sitesi nedir?

Mobil uyumlu web sitesi, telefon, tablet ve bilgisayarda aynı içeriği, ekranın boyutuna göre yeniden düzenleyerek gösteren sitedir. Telefonda yazılar yakınlaştırmadan okunur, düğmelere parmakla rahatça basılır, sayfa yana kaymaz ve görseller ekrana sığar.

Bunu sağlamanın üç yolu vardır. Günümüzde neredeyse tüm yeni siteler ilkini kullanır:

Responsive tasarımda içerik bir kez yazılır. Bilgisayarda üç sütun olan bir hizmet listesi tablette iki, telefonda tek sütuna iner. Menü dar ekranda bir düğmenin arkasına toplanır. Böylece güncellemeyi tek yerden yaparsınız ve hiçbir cihazda eksik içerik kalmaz.

Bölüm 2 · Neden Mobil uyum neden bu kadar önemli?

İlk neden müşteridir. Yerel bir işletmeyi arayan kişi çoğu zaman yoldadır ve elinde telefonu vardır: adres, çalışma saati, telefon numarası ya da randevu arar. Bu bilgilere telefonda iki dokunuşta ulaşamıyorsa başka bir siteye geçer.

İkinci neden aramadır. Google siteleri dizine eklerken ve sıralarken öncelikle sayfaların mobil sürümünü kullanır. Bilgisayar sürümünde olup telefonda gizlenen bir metin ya da bölüm, Google açısından da büyük ölçüde yok sayılabilir. Mobil uyum artık ayrı bir sıralama hilesi değil, sitenin temel bir şartıdır.

Üçüncü neden hızdır. Telefonlar çoğu zaman bilgisayardan daha yavaş bir bağlantıyla çalışır. Bilgisayarda hızlı açılan bir sayfa, büyük görseller yüzünden telefonda birkaç saniye bekletebilir. Hızın nasıl ölçüldüğünü site hızı nasıl ölçülür yazısında ayrıntılı anlattık.

Bölüm 3 · Kurallar Responsive tasarımın temel kuralları nelerdir?

Responsive bir site kurmak için kod yazmanız gerekmez; ama hazır bir tema kullanırken bile aşağıdaki kurallara uyup uymadığına bakmak işe yarar.

Responsive tasarım kontrol listesi

• Sayfanın başında ekran genişliğini cihaza göre ayarlayan viewport etiketi var.
• Yerleşim sabit piksel genişliğiyle değil, ekrana göre esneyen ızgarayla kurulmuş; sayfa yana kaymıyor.
• Gövde metni telefonda yakınlaştırmadan okunuyor; 16 px civarı iyi bir başlangıçtır.
• Düğme ve bağlantılar parmakla rahat basılacak büyüklükte ve birbirine yapışık değil.
• Görseller ekran genişliğine göre farklı boyutta yükleniyor; telefona dev bir fotoğraf gönderilmiyor.
• Görsellerin genişlik ve yüksekliği tanımlı; sayfa yüklenirken içerik zıplamıyor.
• Telefon numarası dokununca aranıyor, e-posta adresi dokununca e-posta uygulamasını açıyor.
• Formlarda doğru klavye açılıyor (telefon alanında rakam, e-posta alanında @ işaretli klavye).
• Sayfayı açar açmaz ekranı kaplayan ve kapatması zor açılır pencereler yok.

Telefonda iletişim ve formlar

Telefondan gelen ziyaretçinin amacı çoğu zaman bir işlem yapmaktır: aramak, yol tarifi almak, randevu ya da teklif istemek. Bu yüzden iletişim bilgileri sayfanın en altında bir metin olarak değil, dokunulabilir bağlantılar olarak durmalıdır. Telefon numarası tel:, e-posta mailto: bağlantısıyla verildiğinde tek dokunuşla arama ya da e-posta başlar.

Formlar telefonda en çok terk edilen yerlerdir. Alan sayısını en aza indirin: ad, telefon ve kısa bir mesaj çoğu iş için yeterlidir. Zorunlu olmayan alanları kaldırın, hata mesajlarını alanın hemen altında gösterin ve gönder düğmesini klavye açıkken de görünür tutun. Telefon numarası alanında rakam klavyesinin açılması küçük bir ayrıntı gibi görünür ama formu dolduranların işini belirgin şekilde kolaylaştırır.

Bölüm 4 · Test Mobil site testi nasıl yapılır?

Google'ın eski “Mobil Uyumluluk Testi” aracı ve Search Console'daki “Mobil kullanılabilirlik” raporu Aralık 2023'te kaldırıldı. Bugün mobil site testi için tek bir “uyumlu / değil” düğmesi yok; birkaç basit yöntemi birlikte kullanırsınız.

Beş adımda mobil site testi

1. Gerçek telefonda gezinin

   Sitenizi kendi telefonunuzda açın; ana sayfa, bir hizmet sayfası, iletişim ve form sayfasında gezinin. Menüyü açın, telefon numarasına dokunun, formu bir kez doldurup gönderin.

2. Farklı bir cihazda tekrarlayın

   Mümkünse ekranı küçük bir telefonda ve bir tablette de bakın. Sorunların çoğu en küçük ekranda ortaya çıkar.

3. Tarayıcının cihaz modunu kullanın

   Bilgisayarda Chrome'da sağ tık › İncele ile geliştirici araçlarını açıp cihaz simgesine basın. Farklı telefon genişliklerini tek ekranda deneyebilirsiniz.

4. PageSpeed Insights'ta mobil sonuca bakın

   pagespeed.web.dev adresinde sayfanızı test edin ve önce Mobil sekmesine bakın. Performans puanının yanında erişilebilirlik ve en iyi uygulamalar bölümleri, küçük yazı ya da birbirine yakın düğme gibi sorunları da listeler.

5. Search Console'u izleyin

   Search Console'daki Core Web Vitals raporu, gerçek kullanıcıların telefonda yaşadığı hız ve kayma sorunlarını sayfa gruplarına göre gösterir.

Ölçüm ayrıntılarına ve puanların nasıl okunacağına web.dev üzerindeki Core Web Vitals açıklamalarından ve site hızı nasıl ölçülür yazımızdan bakabilirsiniz.

Bölüm 5 · Sorunlar Telefonda en sık görülen sorunlar ve çözümleri

Bölüm 6 · Uygulama Heyşirket ile kurulan site mobil uyumlu mu?

Evet. Heyşirket temaları responsive çalışır ve yukarıdaki kuralların teknik kısmı temanın içinde hazır gelir: sayfalar viewport etiketiyle yayınlanır, ızgaralar dar ekranda tek sütuna iner, menü dar ekranda en az 44 piksellik bir menü düğmesinin arkasına toplanır. Görseller ekran genişliğine göre farklı boyutlarda sunulur, genişlik ve yükseklikleri her zaman yazılır; sayfadaki ilk görsel öncelikli, diğerleri ekrana yaklaştıkça yüklenir.

• Telefon önizlemesi: Tasarım › Özelleştir ekranında önizlemenin üstünden Masaüstü, Tablet ve Telefon görünümleri arasında geçersiniz. Yaptığınız her değişikliği yayınlamadan önce telefonda nasıl göründüğüne bakabilirsiniz.
• Görsel boyutu: Medya kütüphanesine fotoğrafları 2000 pikselden büyük yüklememeniz önerilir; eski görseller için Mevcut görseller için boyut üret ile küçük boyutlar oluşturulur.
• Cihaza göre ayar (Profesyonel): Ana sayfa bölümlerini belirli bir cihazda gizleyebilir, sayfa oluşturucuda bileşen ayarlarını önizlemedeki cihaza göre değiştirebilirsiniz.
• Hız raporu (Profesyonel): SEO › Hız ekranında telefon ve bilgisayar için performans, erişilebilirlik, en iyi uygulamalar ve SEO puanlarını, Core Web Vitals değerlerini, puan geçmişini ve en çok kazandıracak önerileri görürsünüz.

Panelde adım adım anlatım: Yardım › Hız raporu ve Core Web Vitals. Özelleştir ekranının kullanımı için özelleştirici ile site tasarımı yazısına, paketlerdeki SEO araçlarının tamamı için SEO araçları sayfasına bakabilirsiniz.

Tema mobil uyumu sağlar; içeriği ise siz eklersiniz. Telefonda okunması zor uzun paragraflar, çok büyük yüklenmiş fotoğraflar ya da ekranı kaplayan bir açılır pencere, iyi bir temada bile mobil deneyimi bozar. Sitenizi düzenli aralıklarla telefonda gözden geçirmeyi web sitesi bakımı rutininize ekleyin.

Sitenizi telefon görünümünde açın Özelleştir ekranında Telefon görünümüne geçin, menüyü, yazıları ve düğmeleri yayınlamadan önce kontrol edin. Özelleştir'i aç

Yazar: Heyşirket Editör Ekibi