Mobil Uyumlu Web Sitesi Nedir, Nasıl Test Edilir?

01Mobil Uyumlu Web Sitesi Nedir?

Bir siteyi telefondan açtığınızda yazıyı okumak için iki parmakla büyütmek, yana kaydırmak ya da küçük bağlantılara isabet ettirmeye çalışmak zorunda kalıyorsanız, o site mobil uyumlu değildir. Mobil uyumlu web sitesi bu sorunları ortadan kaldırır: metin okunur boyuttadır, menü tek dokunuşla açılır, butonlar parmak boyutundadır.

Mobil uyum, masaüstü sitesinin küçültülmüş bir kopyası değildir. İçeriğin önceliği, menünün yapısı ve formların uzunluğu küçük ekranın koşullarına göre yeniden düşünülür. Telefon kullanıcısı genellikle hareket hâlindedir, bağlantısı değişkendir ve aradığı bilgiye hızla ulaşmak ister.

Arama motorları da bu gerçeği dikkate alır. Google, sitelerin dizine eklenmesinde ve sıralanmasında öncelikli olarak mobil sürümü kullanır. Yani telefonda eksik ya da bozuk görünen bir sayfa, masaüstünde ne kadar iyi olursa olsun arama performansını zayıflatabilir.

02Responsive Tasarım Nedir?

Responsive (duyarlı) tasarım, tek bir HTML yapısının farklı ekran genişliklerinde farklı düzenlerde gösterilmesidir. Ayrı bir mobil site (m.alanadi.com gibi) yerine aynı adres ve aynı içerik kullanılır; değişen yalnızca yerleşimdir.

Bu yaklaşımın üç temel taşı vardır: esnek ızgara (yüzde ya da kesirli birimlerle tanımlanan sütunlar), esnek görseller (kapsayıcısından taşmayan resimler) ve medya sorguları (belirli ekran genişliklerinde devreye giren CSS kuralları).

<meta name="viewport" content="width=device-width, initial-scale=1">

.kartlar {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

img {
  max-width: 100%;
  height: auto;
}

@media (min-width: 768px) {
  .kartlar { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1200px) {
  .kartlar { grid-template-columns: repeat(3, 1fr); }
}

03Mobile First Tasarım Yaklaşımı

Mobile first, tasarıma en küçük ekrandan başlayıp büyük ekranlara doğru genişletmek demektir. Yukarıdaki CSS örneği de bu mantıkla yazılmıştır: varsayılan düzen tek sütundur, ekran genişledikçe sütun eklenir.

Bu yaklaşımın faydası yalnızca teknik değildir. Küçük ekranda yer kısıtlı olduğu için ekip, hangi bilginin gerçekten önemli olduğuna karar vermek zorunda kalır. Sonuçta daha sade, odaklı ve hızlı sayfalar ortaya çıkar; masaüstü sürümü de bu netlikten faydalanır.

Mobil öncelikli düşünmenin arayüz tarafındaki ayrıntılarını UI ve UX farkı yazımızda, kurumsal sitelerde nasıl uygulandığını ise mobil uyumlu tasarım hizmet sayfamızda anlatıyoruz.

04Mobil Uyumluluk Testi Nasıl Yapılır?

Bir sitenin mobil uyumunu kontrol etmek için pahalı araçlara ihtiyaç yoktur. Aşağıdaki yöntemleri birlikte kullandığınızda sorunların büyük bölümünü yakalarsınız.

Tarayıcının cihaz modu

Chrome, Edge ya da Firefox’ta sayfayı açıp geliştirici araçlarını açın (Windows’ta F12, macOS’ta Cmd+Option+I). Cihaz araç çubuğunu etkinleştirerek farklı telefon boyutlarında sayfayı görebilir, ekranı daraltıp genişleterek düzenin nerede bozulduğunu izleyebilirsiniz.

Lighthouse ve PageSpeed Insights

Chrome geliştirici araçlarındaki Lighthouse sekmesi ve PageSpeed Insights sayfanızı mobil cihaz koşullarında analiz eder. Performans, erişilebilirlik ve en iyi uygulamalar raporları; küçük dokunma alanlarını, okunaksız yazıları ve viewport eksikliğini ayrı ayrı listeler.

Search Console raporları

Google Search Console, sitenizin gerçek kullanıcı verisine dayalı Core Web Vitals raporunu mobil ve masaüstü olarak ayrı gösterir. Google’ın eski bağımsız mobil uyumluluk testi aracı kullanımdan kaldırıldığı için bugün bu rapor ile Lighthouse birlikte kullanılır.

Gerçek cihazda deneme

Simülasyon her şeyi göstermez. Siteyi en az bir Android ve bir iPhone’da, farklı tarayıcılarda açın. Formu doldurun, menüyü açıp kapatın, telefon numarasına dokunarak aramanın başladığını kontrol edin. Gerçek cihaz testi, klavyenin formu kapatması gibi sorunları ancak bu şekilde ortaya çıkarır.

05Site Telefonda Bozuk Görünüyor: Sık Nedenler

Mobilde düzeni bozulan sitelerde genellikle aynı birkaç neden karşımıza çıkar. Aşağıdaki tablo, belirtiden yola çıkarak çözümü bulmanıza yardım eder.

06Mobil Hız Neden Ayrıca Önemlidir?

Telefon kullanıcısı çoğu zaman masaüstüne göre daha yavaş ya da değişken bir bağlantıdadır ve cihazın işlemcisi daha sınırlıdır. Masaüstünde hızlı açılan bir sayfa, ağır görseller ve büyük JavaScript dosyaları yüzünden mobilde saniyelerce bekletebilir.

Google’ın Core Web Vitals metrikleri bu deneyimi ölçer: en büyük içeriğin yüklenme süresi (LCP) için 2,5 saniye, etkileşime yanıt süresi (INP) için 200 milisaniye ve görsel kayma (CLS) için 0,1 “iyi” eşik kabul edilir. Görselleri modern formatlarda sunmak, yalnız gereken kodu yüklemek ve önbelleği doğru ayarlamak bu değerleri iyileştirir.

Bu teknik çalışmaları hız ve performans yönetimi başlığında ele alıyoruz. Mobil hız aynı zamanda arama görünürlüğünü de etkilediği için SEO uyumlu web tasarımı ile birlikte planlanmalıdır.

07Mobil Uyum Kontrol Listesi

Sitenizi yayına almadan ya da yeniden değerlendirirken şu maddeleri tek tek işaretleyin:

• Viewport meta etiketi her sayfada var.
• Hiçbir genişlikte yatay kaydırma çıkmıyor.
• Gövde metni yakınlaştırmadan okunuyor, satır aralığı rahat.
• Butonlar ve bağlantılar parmakla rahat dokunulacak boyutta.
• Telefon numaraları tıkla-ara, adresler harita bağlantısı olarak çalışıyor.
• Formlar kısa; doğru klavye tipi (e-posta, telefon, sayı) açılıyor.
• Açılır pencereler içeriği kapatmıyor, kolayca kapatılabiliyor.
• Renk kontrastı güneş altında bile okunacak düzeyde; WCAG’in normal metin için önerdiği 4,5:1 oranı iyi bir ölçüt.
• Mobil Lighthouse raporunda kritik uyarı yok.

08Mobil Uyum Bir Kez Yapılıp Bitmez

Yeni cihazlar, farklı ekran oranları ve tarayıcı güncellemeleri her yıl ortaya çıkar. Siteye eklenen her yeni bölüm, kampanya bandı ya da sohbet aracı mobil düzeni bozabilir. Bu yüzden mobil testleri her büyük güncellemeden sonra tekrarlamak iyi bir alışkanlıktır.

Erişilebilirlik tarafında dikkat edilmesi gerekenleri web erişilebilirlik rehberimizde, kurumsal bir sitede mobil deneyimin nasıl kurgulanacağını ise kurumsal web sitesi nedir yazımızda bulabilirsiniz. Sitenizin mobil görünümü hakkında bir değerlendirme isterseniz bize yazın.