Bir deney yapalım. Telefonunuzu sadece bir elinizle tutun. Sadece başparmağınızı kullanarak kendi sitenizi açın, telefon numaranızı bulun ve arayın. Kaç saniye sürdü? Ekranı büyütmek zorunda kaldınız mı? Yanlış bir yere dokundunuz mu? Bir menünün açılmasını beklediniz mi?
Bu basit deney, mobil uyumlu site kavramının özeti. Mobil uyum, sitenin telefonda "görünmesi" değil, telefonda "kullanılabilmesi" demek. Ve bugün müşterilerinizin büyük çoğunluğu sizi tam olarak böyle, tek elle, hareket halindeyken, sabırsızca arıyor.
Önce Rakamların Söylediği: Masa Başı Değil, Avuç İçi
Türkiye'de internet kullanımının büyük bölümü artık mobil cihazlardan gerçekleşiyor. Yerel hizmet aramalarında bu oran daha da belirgin. Birinin kombisi bozulduğunda, arabası yolda kaldığında ya da akşam yemeği için restoran aradığında, bilgisayarın başına geçmesini beklemiyoruz. Telefonu cebinden çıkarıyor.
Yönettiğimiz kampanyalarda ve tasarladığımız sitelerde de tablo aynı. Analiz raporlarını açtığımızda mobil trafiğin masaüstünü açık ara geçtiğini görüyoruz. Özellikle akşam saatlerinde ve hafta sonları bu fark daha da açılıyor. Kendi sitenizin durumunu görmek isterseniz, Google Analytics'te "Teknoloji" raporundaki cihaz kategorisine bakmanız yeterli. Büyük ihtimalle siz de benzer bir tabloyla karşılaşacaksınız.
Google Artık Sitenizi Telefondan Okuyor
Bu bölüm biraz teknik, ama çok önemli. Google birkaç yıl önce "mobil öncelikli dizinleme" adını verdiği bir değişikliği tamamladı. Basitçe anlatmak gerekirse: Google artık sitenizi değerlendirirken öncelikle mobil sürümüne bakıyor. Masaüstünde ne kadar güzel olursa olsun, telefonda eksik, bozuk ya da yavaş olan bir site, Google'ın gözünde de eksik, bozuk ve yavaş.
Bunun pratik bir sonucu var. Bazı siteler mobilde içeriğin bir kısmını gizliyor ya da "mobil için sadeleştiriyoruz" diyerek önemli metinleri kaldırıyor. Bu, Google'ın o içeriği daha az önemsemesine yol açabiliyor. Biz bu yüzden mobil sürümde içeriği kırpmıyor, düzenliyoruz. Aynı bilgi, telefon ekranına uygun şekilde sunuluyor.
Başparmak Bölgesi: Tasarımın Görünmeyen Haritası
Telefonu tek elle tutarken başparmağınız ekranın her yerine aynı kolaylıkla ulaşamaz. Alt kısım rahat, orta kısım idare eder, üst köşeler ise zor. Tasarımcılar buna "başparmak bölgesi" diyor. Masaüstünde fare ekranın her yerine aynı hızla gider, ama telefonda durum farklı.
Bu bilgiyi tasarımda nasıl kullanıyoruz? En önemli eylemleri, yani arama ve WhatsApp butonlarını, ekranın altına, başparmağın doğal olarak durduğu yere yerleştiriyoruz. Menü butonunu ise üstte bırakıyoruz, çünkü menü sık kullanılan bir şey değil. Ziyaretçinin en çok yapmasını istediğimiz şeyi, en kolay ulaşacağı yere koyuyoruz. Basit, ama çoğu sitede tam tersi yapılıyor: Telefon numarası en üst köşede, küçük bir yazıyla duruyor.
Mobil Uyumun Dört Katmanı
"Sitemiz responsive" cümlesini çok duyuyoruz. Responsive tasarım, yani ekran boyutuna göre şekil değiştiren tasarım, mobil uyumun sadece ilk katmanı. Gerçek mobil uyum dört katmandan oluşuyor:
1. Görünüm: Her Şey Ekrana Sığıyor mu?
En temel katman. Yazılar ekrandan taşmıyor, görseller kenardan kesilmiyor, yatay kaydırma gerekmiyor. Bugün çoğu site bu katmanı geçiyor. Ama bu, sitenin mobil uyumlu olduğu anlamına gelmiyor. Sadece "kırık" olmadığı anlamına geliyor.
2. Okunabilirlik: Gözünüzü Kısmadan Okuyabiliyor musunuz?
Yazı boyutu yeterince büyük mü? Satır aralığı nefes aldırıyor mu? Paragraflar ekranda bir duvar gibi mi görünüyor? Masaüstünde dört satırlık bir paragraf, telefonda on iki satır olabiliyor. Bu yüzden mobilde paragrafları kısa tutuyor, ara başlıkları sıklaştırıyor, yazı boyutunu rahat okunacak seviyede belirliyoruz.
3. Dokunulabilirlik: Parmağınız Doğru Yere Basıyor mu?
Butonlar parmakla basılabilecek büyüklükte mi? İki link birbirine o kadar yakın mı ki birine basmak isterken diğerine basıyorsunuz? Form alanları kolayca seçilebiliyor mu? Telefon numarası alanına dokunduğunuzda rakam klavyesi mi açılıyor, harf klavyesi mi? Bu küçük detaylar, ziyaretçinin sinirlenip sinirlenmemesini belirliyor.
4. Hız: Mobil Bağlantıda Ne Kadar Sürede Açılıyor?
Ofiste hızlı Wi-Fi ile test ettiğiniz site, otobüste zayıf bir mobil bağlantıda bambaşka davranabilir. Ağır görseller, çok sayıda eklenti ve büyük yazı tipi dosyaları mobilde çok daha belirgin bir yavaşlık yaratıyor. Biz siteleri test ederken bilinçli olarak yavaş bağlantıları da simüle ediyoruz. Hızın etkisini kurumsal site açılış hızı yazımızda uzun uzun anlattık.
Mobil Ziyaretçi Farklı Düşünür
Mobil uyum sadece teknik bir konu değil, aynı zamanda bir psikoloji konusu. Telefondan gelen ziyaretçi ile bilgisayardan gelen ziyaretçinin ruh hali farklı.
- Daha sabırsız: Hareket halinde, dikkati dağınık, zamanı kısıtlı. Uzun açıklamaları okumak yerine hemen sonuca ulaşmak istiyor.
- Daha eyleme yakın: Yerel aramalarda telefondan gelen ziyaretçi genelde bir ihtiyacı hemen çözmek istiyor. Bu yüzden arama ve yol tarifi butonları çok değerli.
- Daha az yazmak istiyor: Telefonda uzun form doldurmak zahmetli. Az alan, otomatik doldurma ve tek dokunuşla iletişim seçenekleri tercih ediliyor.
- Konuşmayı tercih ediyor: Türkiye'de WhatsApp neredeyse herkesin telefonunda. Ziyaretçi yazmak yerine doğrudan mesaj atmak ya da aramak istiyor.
Bu farkları bildiğimiz için mobil sürümü masaüstünün küçültülmüş hali olarak değil, kendi başına bir deneyim olarak tasarlıyoruz. Bunun en net örneği, mobilde ekranın altına sabitlediğimiz arama ve WhatsApp şeridi. Masaüstünde buna gerek yok, ama telefonda müşterinin elinin altında olması çok şey değiştiriyor.
Bir Akşamın Hikâyesi: İki Site, Bir Kombi
Teoriyi bir kenara bırakıp bir hikâye anlatalım. Ocak ayında soğuk bir akşam. Saat dokuz buçuk. Evdeki kombi arıza veriyor, ekranda bir hata kodu yanıp sönüyor. Evin sahibi telefonunu alıyor ve Google'a "kombi servisi" yazıyor. Karşısına iki işletme çıkıyor.
Birinci işletmenin sitesi açılmak için birkaç saniye bekletiyor. Açıldığında ekranı bir kampanya penceresi kaplıyor. Pencereyi kapatmak için köşedeki minik çarpıyı arıyor, iki kez ıskalıyor. Sonunda içeriğe ulaşıyor, ama yazılar küçük. Telefon numarası sayfanın en üstünde, bir görselin içinde. Dokunduğunda bir şey olmuyor. Numarayı aklında tutup arama ekranına yazmaya çalışıyor. Bu sırada sabrı tükeniyor ve geri dönüyor.
İkinci işletmenin sitesi hemen açılıyor. En üstte "Aynı gün kombi servisi, akşam saatlerinde de ulaşabilirsiniz" yazıyor. Ekranın altında yeşil bir şerit var: "Hemen Ara" ve "WhatsApp". Başparmağı zaten oradaydı. Dokunuyor ve telefon çalmaya başlıyor. Toplam süre: On saniyeden az.
İki işletmenin ustaları belki aynı derecede yetenekli. Belki birincisi daha bile tecrübeli. Ama o akşam işi ikinci işletme aldı. Çünkü o akşam müşteriyle ilk konuşan şey usta değil, siteydi. Mobil uyumun gerçek değeri, raporlarda değil, bu tür akşamlarda ortaya çıkıyor.
Mobil SEO İçin Gözden Kaçan Teknik Detaylar
Mobil uyumun görünür tarafını konuştuk. Bir de Google'ın baktığı, ziyaretçinin fark etmediği teknik detaylar var. Tasarladığımız sitelerde bunları standart olarak kontrol ediyoruz:
- Görünüm alanı etiketi: Sayfanın telefon ekranına göre ölçeklenmesini sağlayan küçük bir kod satırı. Eksikse site telefonda masaüstü gibi küçülmüş görünüyor.
- Aynı içerik, iki ekran: Mobil ve masaüstü sürümlerde başlıklar, metinler ve yapılandırılmış veri aynı olmalı. Google mobil sürümü esas aldığı için, mobilde eksik olan bilgi Google için de eksik.
- Görsellerin doğru boyutlanması: Telefon ekranına küçük bir görsel, masaüstüne büyük bir görsel gönderiliyor. Böylece mobil ziyaretçi gereksiz yere büyük dosya indirmiyor.
- Düzen kayması: Sayfa yüklenirken içeriğin yer değiştirmesi, ziyaretçinin yanlış yere dokunmasına yol açıyor. Görsellere boyut vererek ve geç yüklenen öğelere yer ayırarak bunu önlüyoruz.
- Yazı tipleri: Yazı tipi dosyalarını sitenin kendi sunucusundan, sadece gereken karakter setleriyle yüklüyoruz. Böylece metin hızlıca görünüyor.
- Dokunma hedefleri: Butonlar ve linkler arasında yeterli boşluk bırakıyoruz. Google'ın kullanılabilirlik değerlendirmeleri de bu konuya dikkat ediyor.
Mobil Uyumsuzluğun Görünmeyen Faturası
Mobil uyumsuz bir sitenin bedeli doğrudan bir faturaya yansımıyor, bu yüzden çoğu işletme fark etmiyor. Ama bedel var ve birkaç yerden ödeniyor:
- Kaybolan müşteriler: Sitenize gelip zorlanan ve rakibinize geçen ziyaretçiler. Onları hiç tanımıyorsunuz, çünkü sizi hiç aramadılar.
- Pahalanan reklamlar: Google Ads'te açılış sayfası deneyimi kalite puanını etkiliyor. Mobilde kötü bir deneyim, daha yüksek tıklama maliyeti anlamına gelebiliyor. Detaylar kalite puanı yazımızda.
- Gerileyen sıralamalar: Mobil öncelikli dizinleme nedeniyle, mobil deneyimi zayıf siteler organik aramalarda dezavantajlı olabiliyor.
- Zedelenen güven: Telefonda bozuk görünen bir site, ziyaretçiye "bu işletme pek ilgilenmiyor" mesajı veriyor. İlk izlenim, ikinci şansı olmayan bir şey.
Kendi Sitenizi 10 Dakikada Test Edin
Bir uzman olmanıza gerek yok. Şu basit kontrol listesiyle sitenizin mobil durumu hakkında iyi bir fikir edinebilirsiniz:
- Telefonunuzdan, Wi-Fi'ı kapatıp mobil veriyle sitenizi açın. Ne kadar sürede açıldı?
- Yazıları ekranı büyütmeden okuyabiliyor musunuz?
- Yatay kaydırma yapmak zorunda kaldınız mı?
- Telefon numaranıza tek dokunuşla arama yapabiliyor musunuz?
- WhatsApp butonu var mı, basınca doğrudan sohbet açılıyor mu?
- İletişim formunu tek elle doldurabildiniz mi? Telefon alanında rakam klavyesi açıldı mı?
- Menü kolayca açılıp kapanıyor mu?
- Açılır pencereler ekranı kaplayıp içeriği engelliyor mu?
- Görseller net mi, yoksa bulanık ya da çok mu büyük?
- Sitenizi bir de telefonu yan çevirerek deneyin. Düzen bozuluyor mu?
Daha teknik bir analiz için Google'ın ücretsiz PageSpeed Insights aracını kullanabilirsiniz. Sitenizin adresini yazdığınızda size mobil performans puanı ve iyileştirme önerileri sunuyor. Puanı bir sınav notu gibi değil, bir yol haritası gibi okuyun.
Sık Gördüğümüz Mobil Hatalar
- Telefon numarası resim olarak eklenmiş: Görselin içindeki numaraya dokunarak arama yapılamaz. Numara mutlaka metin ve tıklanabilir bir link olmalı.
- Tam ekran açılır pencereler: Siteye girer girmez ekranı kaplayan kampanya pencereleri, mobilde hem ziyaretçiyi hem Google'ı rahatsız ediyor.
- Küçük ve sıkışık linkler: Özellikle alt bilgi alanında yan yana dizilmiş minik linkler, doğru olana dokunmayı imkânsız hale getiriyor.
- Masaüstü için büyük görseller: Ekranda küçük görünen ama arka planda devasa boyutta yüklenen görseller, mobil veriyi ve sabrı tüketiyor.
- Otomatik oynayan videolar: Hem veri harcıyor hem de sayfayı yavaşlatıyor.
- Gizlenmiş içerik: Mobilde "yer kaplamasın" diye önemli metinlerin kaldırılması, hem ziyaretçiyi bilgisiz bırakıyor hem de Google'ın içeriği değerlendirmesini zorlaştırıyor.
Sektöre Göre Mobilde Ne Öne Çıkmalı?
Her sektörün mobil ziyaretçisi farklı bir şey arıyor. Bu yüzden mobil ekranın en değerli alanını, yani ilk ekranı ve alt şeridi, sektöre göre farklı dolduruyoruz:
| Sektör | Mobil ziyaretçinin ilk sorusu | İlk ekranda ne olmalı? |
|---|---|---|
| Acil servis (tesisat, çilingir) | Hemen gelebilir misiniz? | Büyük arama butonu, hizmet bölgesi |
| Restoran, kafe | Açık mı, nerede, menü ne? | Çalışma saati, yol tarifi, menü linki |
| Klinik, sağlık | Randevu alabilir miyim? | Randevu butonu, uzmanlık alanları |
| Hurda, tamir, tadilat | Fiyat ne kadar tutar? | Fotoğraf gönder + WhatsApp butonu |
| Avukat, danışman | Bu konuda uzman mısınız? | Uzmanlık başlığı, görüşme talebi |
| Üretim, B2B | İhtiyacımı karşılar mı? | Ürün grupları, teklif formu |
Tablodaki her satır, o sektördeki ziyaretçinin telefonu eline aldığında aklından geçen ilk soruyu gösteriyor. Mobil tasarımda başarının sırrı, bu soruyu kaydırma yaptırmadan cevaplamak.
Biz Nasıl Çalışıyoruz?
Tasarladığımız her sitede süreç telefon ekranıyla başlıyor. İlk taslağı müşterimize telefonda gösteriyoruz. Butonların yerini başparmak bölgesine göre belirliyoruz. Metinleri mobilde okunacak uzunlukta yazıyoruz. Görselleri farklı ekran boyutlarına göre ayrı ayrı hazırlıyoruz. Yayına almadan önce siteyi farklı telefonlarda, farklı tarayıcılarda ve yavaş bağlantılarda test ediyoruz.
Bu yaklaşımın sonucunu en net, reklam verdiğimiz müşterilerimizde görüyoruz. Mobilde rahat kullanılan bir site, reklamdan gelen her tıklamanın müşteriye dönüşme ihtimalini artırıyor. Aynı bütçe, daha çok telefon. Web tasarım yaklaşımımızın tamamını web tasarım hizmeti sayfamızda anlattık.
Sıkça Sorulan Sorular
Responsive tasarım ile mobil uyumlu tasarım aynı şey mi?
Responsive tasarım, mobil uyumun teknik temeli. Ama tek başına yeterli değil. Bir site responsive olup yine de mobilde yavaş, okunması zor ya da kullanışsız olabilir. Gerçek mobil uyum, görünüm, okunabilirlik, dokunulabilirlik ve hız katmanlarının hepsini kapsıyor.
Ayrı bir mobil site yapmak mantıklı mı?
Eskiden bazı işletmeler "m.siteniz.com" gibi ayrı mobil siteler kullanıyordu. Bugün bunu önermiyoruz. Tek bir sitenin her ekrana uyum sağlaması hem bakım hem SEO açısından çok daha sağlıklı.
Mobil uygulama yaptırmalı mıyım?
Çoğu yerel işletme için hayır. İnsanlar bir kombi servisi için uygulama indirmez. İyi tasarlanmış, hızlı bir mobil site, çoğu işletmenin ihtiyacını fazlasıyla karşılıyor.
Tablet için ayrı bir tasarım gerekir mi?
Genelde hayır. İyi kurulmuş bir yapı, telefon ile masaüstü arasındaki tüm ekran boyutlarına kendiliğinden uyum sağlıyor. Yine de test sürecinde tabletleri de ayrıca kontrol ediyoruz, çünkü bazı düzenler bu ara boyutlarda beklenmedik şekilde davranabiliyor.
Mobilde hangi görselleri kullanmalıyım?
Az ve anlamlı olanları. Telefonda her görsel hem yer hem süre demek. İşinizi gerçekten anlatan, sizin çektiğiniz gerçek fotoğrafları tercih edin. Dekoratif ve stok görselleri mobilde azaltmak, hem hızı artırır hem de mesajı netleştirir.
Mevcut sitemi mobil uyumlu hale getirebilir misiniz?
Duruma göre. Bazen birkaç düzeltme yeterli oluyor, bazen sitenin altyapısı buna izin vermiyor ve yeniden yapmak daha mantıklı hale geliyor. Önce sitenizi inceleyip size dürüst bir değerlendirme sunuyoruz.
Son Söz
Mobil uyum bugün bir artı değil, bir ön koşul. Müşterileriniz sizi avuçlarının içinde, tek elle, hareket halindeyken arıyor. Onlara başparmaklarıyla kolayca kullanabilecekleri, hızlı açılan, rahat okunan ve tek dokunuşla iletişim kurulabilen bir site sunduğunuzda, gerisi kendiliğinden geliyor. Başta yaptığımız deneyi bir kez daha yapın: Telefon tek elde, başparmak hazır. Siteniz bu testi geçiyor mu? Geçmiyorsa, birlikte bakalım.
Son bir not: Mobil uyum bir kere yapılıp biten bir iş değil. Yeni telefonlar, yeni ekran boyutları ve yeni tarayıcı sürümleri sürekli çıkıyor. Sitenize yeni bir sayfa, yeni bir görsel ya da yeni bir bölüm eklediğinizde onu da telefonda kontrol etmeyi alışkanlık haline getirin. Küçük bir kontrol, büyük bir kaybı önler.