Sitenizi masaüstünde açıp “güzel görünüyor” demek, mobil uyumlu olduğunu göstermez. Ziyaretçilerinizin büyük kısmı sitenize telefondan girer ve orada bambaşka bir deneyim yaşar: yatay kaydırma çıkan bir sayfa, parmağın isabet etmediği küçük bir bağlantı, klavyenin kapattığı bir form ya da içeriği örten sabit bir düğme. Bu sorunların çoğu tasarım dosyasında değil, gerçek ekranda ortaya çıkar.
Bu yazıda mobil uyumlu bir web sitesini nasıl test edeceğinizi on iki kontrol noktasıyla anlatıyoruz. Hangi genişliklerde, hangi araçlarla bakacağınızı, neyin neden önemli olduğunu ve bulduğunuz sorunları nasıl önceliklendireceğinizi göreceksiniz. Kavramsal çerçeve için responsive web tasarım yazımıza göz atabilirsiniz; burada konu pratik kontrol listesidir.
Mobil Test Neden Gerçek Cihaz Olmadan Eksik Kalır?
Tarayıcıda pencereyi daraltmak iyi bir başlangıçtır ama iki şeyi taklit edemez. Birincisi dokunma davranışı: parmak bir fare imleci kadar hassas değildir, bir bağlantıya dokunurken yanındakine isabet etmek çok kolaydır. İkincisi ekran klavyesi ve tarayıcı çubukları: telefonda adres çubuğu kayarken sayfanın görünür yüksekliği değişir, klavye açıldığında form alanı örtülebilir ve bu davranış masaüstü tarayıcıda görünmez.
Bu yüzden iyi bir mobil test iki katmanlıdır. Önce masaüstü tarayıcıdaki cihaz moduyla hızlı ve yinelenebilir bir tarama yaparsınız; sonra en az bir iPhone ve bir Android telefonda gerçek dokunma testi yaparsınız. İlk katman çoğu yerleşim hatasını yakalar; ikinci katman kullanılabilirlik sorunlarını.
Bir not: Google’ın eskiden bağımsız olarak sunduğu “Mobil Uyumluluk Testi” aracı 2023’te kaldırıldı. Bugün aynı işi Chrome’un kendi araçları, Lighthouse ve PageSpeed Insights görüyor; ayrıca Search Console’daki sayfa deneyimi ve Core Web Vitals raporları gerçek kullanıcı verisini gösteriyor. Bu kavramları Core Web Vitals nedir yazısında anlattık.
Hazırlık: Hangi Genişliklerde ve Hangi Araçlarla Test Edilir?
Tüm telefonları test edemezsiniz, ama birkaç temsilci genişlik çoğu sorunu yakalar. Pratik bir set şöyledir:
- 320 piksel: Çok küçük ve eski telefonlar; en dar sınırdır. Burada çalışıyorsa sorun yok demektir.
- 360 ve 375 piksel: Yaygın Android ve iPhone genişlikleri. Ana test genişlikleriniz bunlar olsun.
- 390-430 piksel: Daha yeni ve büyük telefonlar.
- 768 piksel: Tablet dikey. Mobil ile masaüstü arasındaki geçiş noktası burada sorun çıkarır.
- Yatay (landscape) konum: Telefonu yan çevirdiğinizde yerleşim bozuluyor mu?
Araç olarak Chrome DevTools’taki cihaz modunu (Ctrl+Shift+M ya da Cmd+Shift+M) kullanın. Üstteki genişlik kutusuna istediğiniz değeri yazabilir, ağ hızını sınırlayarak yavaş bağlantıyı deneyebilirsiniz. Safari’de benzeri “Duyarlı Tasarım Modu”dur. Gerçek cihaz için en az bir iPhone’daki Safari ve bir Android’deki Chrome ile sitenizi baştan sona gezin.
Bir de hızlı bir komut: tarayıcı konsoluna document.documentElement.scrollWidth > window.innerWidth yazın. Sonuç true ise sayfada yatay taşma vardır; bu, mobil sorunların en yaygın göstergesidir.
Görünüm Kontrolleri: Ölçek, Taşma, Yazı ve Görsel
İlk beş kontrol sayfanın nasıl göründüğüne bakar.
1. Viewport etiketi. Sayfanın <head> bölümünde width=device-width, initial-scale=1 içeren bir viewport meta etiketi bulunmalı. Eksikse telefon sayfayı masaüstü genişliğinde çizip küçültür. Yakınlaştırmayı engelleyen ayarlar (user-scalable=no) kullanmayın; görme zorluğu çeken ziyaretçilerin yakınlaştırma hakkı vardır.
2. Yatay kaydırma yok. 320, 360 ve 375 piksel genişliklerinde sayfayı sağa sola kaydırmak mümkün olmamalı. Taşmanın tipik sebepleri sabit genişlikli görseller, geniş tablolar, uzun adres metinleri ve kenarlardan taşan dekoratif öğelerdir.
3. Yazı boyutu ve okunabilirlik. Gövde metni telefonda en az 16 piksel civarında olmalı; küçük yazı ziyaretçiyi yakınlaştırmaya zorlar. Satırlar ekranın kenarına yapışmasın, yanlarda boşluk olsun. Başlıkların satır sayısı da makul kalmalı; üç satıra yayılan bir başlık ilk ekranı yer.
4. Görseller. Hiçbir görsel ekran genişliğini aşmamalı, metnin üzerine taşmamalı. Görsellerin genişlik ve yükseklikleri yazılı olmalı ki yüklenirken sayfa kaymasın. Büyük görsellerin mobil için küçültülmüş sürümleri sunulmalı; hız konusunda detay için web sitesi hızlandırma yazısına bakın.
5. Tablolar ve geniş içerik. Karşılaştırma tabloları, kod blokları ve uzun bağlantılar küçük ekranda kutusundan taşar. Çözüm; tabloyu yatay kaydırılabilir bir kutuya almak, uzun metinlerin satır sonunda bölünmesini sağlamak ya da içeriği mobil için kart düzenine çevirmektir.
Etkileşim Kontrolleri: Dokunma, Menü, Form ve Sabit Öğeler
Sonraki dört kontrol sayfanın nasıl kullanıldığına bakar.
6. Dokunma hedefleri. Düğme ve bağlantılar parmakla rahat isabet edilecek büyüklükte olmalı. Platform kılavuzları genelde 44 ila 48 piksel civarında bir hedef önerir; erişilebilirlik standardı (WCAG 2.2) ise en azından 24 piksel hedef ve yeterli boşluk ister. Yan yana duran iki küçük bağlantı arasındaki boşluğa özellikle bakın; yanlış dokunma sinir bozucudur. Standardın ayrıntıları için web sitesi erişilebilirliği (WCAG) yazısını okuyabilirsiniz.
7. Menü ve gezinme. Mobil menü açılıyor mu, kapanıyor mu? Açıkken sayfa arkada kayıyor mu? Alt menüler dokunmayla ulaşılabilir mi? Menü kapatma düğmesi kolay görünür mü? Ana sayfaya dönmek için logoya dokunmak çalışıyor mu? Bunların hepsini gerçek telefonda deneyin.
8. Formlar. Form alanlarına dokununca doğru klavye gelmeli: telefon için sayısal, e-posta için @ içeren klavye. Alan etiketleri görünür olmalı, klavye açıldığında aktif alan ekranda kalmalı, hata mesajı alanın yanında çıkmalı. Alan yazısının 16 pikselden küçük olması bazı telefonlarda alan seçildiğinde sayfanın istenmeden yakınlaşmasına yol açar. Formu uçtan uca gönderin ve sonucu görün.
9. Sabit öğeler. Alt çubuk, WhatsApp düğmesi, çerez bandı ve yapışkan üst menü küçük ekranda içeriğin yarısını örtebilir. Sayfanın son satırının sabit bir düğmenin arkasında kalmadığından, form gönder düğmesinin klavye ve alt çubuk arasında sıkışmadığından emin olun. Sabit öğelerin toplam yüksekliği ekranın dörtte birini geçmemeli.
İletişim, Yön ve Hız Kontrolleri
Son üç kontrol, mobil ziyaretçinin asıl yapmak istediği işe bakar.
10. İletişim eylemleri. Mobil ziyaretçi çoğu zaman aramak, WhatsApp’tan yazmak ya da yol tarifi almak ister. Telefon numarası tel: bağlantısı olmalı ve tek dokunuşla arama başlatmalı; WhatsApp bağlantısı hazır bir mesajla açılabilir; adres harita uygulamasına gitmeli. Bu eylemlerin sayfada her zaman erişilebilir olması, dönüşüm açısından en değerli mobil iyileştirmelerden biridir.
11. Yatay konum ve küçük ekran. Telefon yan çevrildiğinde yerleşim bozuluyor mu, içerik yükseklikte sıkışıyor mu? 320 piksel genişlikte bir düğme taşıyor ya da metin kesiliyor mu? Küçük ekranlar kötü yazılmış CSS’in ilk ortaya çıktığı yerdir.
12. Mobil hız ve gerçek cihaz. Lighthouse’u mobil modda çalıştırın ve ağı yavaşlatarak sayfayı gezin. Büyük görsellerin, ağır betiklerin ve geç gelen yazı tiplerinin etkisi telefonda masaüstünden çok daha belirgindir. Gerçek bir telefonda mobil veriyle siteyi açın; bir sayfa açılırken saniyeleri sayıyorsanız ziyaretçi de sayıyordur.
Kendi Sitemizde Bulduğumuz Mobil Sorunlar
Teorik bir liste vermek yerine kendi deneyimimizi paylaşalım. Büyük bir değişiklikten sonra sitemizin sayfalarını 375 piksel genişlikte tarıyor ve sayfa genişliğinin ekran genişliğini aşıp aşmadığını ölçüyoruz. Son taramada otuz araç sayfasından ikisinde yatay taşma bulduk. Birinde sorun, dar ekranda satır sonunda bölünmeyen uzun bir adres metnindi; diğerinde yan yana sığması gereken üç sütunlu bir form satırı, dar ekranda küçülemiyordu. İkisi de masaüstünde hiç görünmüyordu.
Daha önce de bir hizmet sayfamızda ekran okuyuculara özel gizli metinlerin, kaydırılabilir bir tablonun dışına taşarak sayfayı 375 piksel yerine yaklaşık 509 piksel genişliğe çıkardığını yakalamıştık. Üç sorunun ortak noktası, hiçbirinin tasarım aşamasında görünmemesi ve ancak dar genişlikte ölçüm yapınca ortaya çıkmasıydı. Bu yüzden mobil testi tek seferlik değil, her büyük değişiklikten sonra tekrarlanan bir adım olarak yapıyoruz.
12 Maddelik Mobil Test Listesi
- Viewport meta etiketi var, yakınlaştırma engellenmemiş.
- 320, 360 ve 375 pikselde yatay kaydırma yok.
- Gövde metni okunaklı boyutta ve satırlar kenara yapışmıyor.
- Görseller ekrana sığıyor ve boyutları tanımlı.
- Tablolar ve uzun metinler taşmıyor ya da kaydırılabiliyor.
- Düğme ve bağlantılar rahat dokunulabilir büyüklükte, aralarında boşluk var.
- Mobil menü açılıp kapanıyor, alt menülere ulaşılıyor.
- Form alanları doğru klavyeyi açıyor, etiket ve hata mesajı görünür.
- Sabit öğeler içeriği ve gönder düğmesini örtmüyor.
- Telefon, WhatsApp ve harita bağlantıları tek dokunuşla çalışıyor.
- Yatay konumda ve 320 pikselde sayfa bozulmuyor.
- Lighthouse mobil modda sorunsuz, gerçek telefonda hızlı açılıyor.
Sorun Bulursanız: Önceliklendirme
Tüm sorunları aynı anda çözemezsiniz. Önce dönüşümü engelleyenlere bakın: açılmayan menü, gönderilemeyen form, telefon numarasının tıklanamaması, içeriği örten sabit öğe. Sonra yerleşim sorunlarını (taşma, kesilen metin), en sona kozmetik olanları bırakın. Her düzeltmeden sonra aynı genişlikte yeniden ölçüm yapın.
Sorunların kaynağı çoğu zaman tek bir yerde toplanır: bir tablo, bir sabit çubuk, bir sabit genişlikli bileşen. Bu yüzden bir hatayı bulunca benzer bileşenleri de tarayın. Mobil deneyimin genel tasarım kararlarıyla ilişkisi için web tasarımda UX/UI ve SEO ve kullanıcı deneyimi yazılarına bakabilirsiniz.
Soft Ajans Mobil Uyumu Nasıl Ele Alıyor?
Web tasarım hizmetimizde site telefon, tablet ve masaüstü ekranlara uyumlu biçimde geliştirilir ve yayın öncesinde cihaz ve tarayıcı testleri yapılır. Mobil uyum, tasarım aşamasında başlar: sayfaların telefondaki hali masaüstüyle birlikte düşünülür ve önemli eylemler (arama, WhatsApp, form) mobilde öne çıkarılır. Sitenizin mobil durumunu bir gözle görmek isterseniz ücretsiz ön analiz talep edebilirsiniz.
Yeni bir site planlıyorsanız hangi sayfaların olması gerektiğini kurumsal web sitesinde olması gereken sayfalar yazısında listeledik.
Sık Sorulan Sorular
Web sitemin mobil uyumlu olup olmadığını nasıl anlarım?
Telefonda açıp yatay kaydırma olup olmadığına, yazıların rahat okunup okunmadığına, düğmelere kolay dokunulup dokunulmadığına ve formun çalışıp çalışmadığına bakın. Ardından Chrome’da Lighthouse’u mobil modda çalıştırın ve sonuçları not edin.
Responsive ile mobil uyumlu arasında fark var mı?
Responsive tasarım, sayfanın ekran genişliğine göre yerleşimini değiştirmesi tekniğidir. Mobil uyumlu ise bunun sonucunda kullanıcının telefonda rahatça gezinebilmesidir. Teknik olarak responsive olan bir site, kötü tasarlandığında yine de mobilde kullanışsız olabilir.
Dokunma hedefleri en az kaç piksel olmalı?
Yaygın platform önerileri 44-48 piksel civarındadır. WCAG 2.2 erişilebilirlik ölçütü en az 24 piksel hedef ve yeterli boşluk ister. Uygulamada mümkünse daha büyük, özellikle birbirine yakın bağlantılar için bol boşluklu hedefler tercih edin.
Mobil için ayrı bir site yaptırmak gerekir mi?
Hayır. Günümüzde tek bir responsive site hem telefonda hem masaüstünde çalışır ve ayrı mobil site (m. alt alanı) gerektirmez. Ayrı site, içerik tutarsızlığına ve bakım yüküne yol açar.
Mobil uyum SEO’yu etkiler mi?
Google, sayfaların mobil sürümünü esas alarak indeksler. Mobilde içeriği eksik, yavaş ya da kullanılmaz bir site hem kullanıcıyı hem de arama görünürlüğünü olumsuz etkileyebilir. Mobil deneyimi masaüstüyle eşit önemde tutmak güvenli yaklaşımdır.
Testi ne sıklıkla tekrarlamalıyım?
Her büyük tasarım değişikliğinden ve yeni bir bileşen eklendikten sonra hızlı bir tarama yapın. Düzenli bakımda ayda bir, en çok ziyaret alan sayfalarda genişlik kontrolü ve form testi yapmak yeterlidir.
