Mobil Uyumlu Site Neden Şart? Başparmağınızı Hesaba Katan Tasarım

Şu an bu yazıyı büyük ihtimalle bir telefondan okuyorsunuz. Belki otobüste, belki sırada beklerken, belki kanepede. Müşterileriniz de sitenize tam olarak böyle geliyor. Mobil uyumlu site neden şart sorusunun cevabı aslında elinizde duruyor. Bu yazıda o cevabı biraz açıyoruz.

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: Telefonu tek elle tutarken ekranın hangi kısmına rahat ulaşılır Başparmak bölgesi: Ekranın neresine rahat ulaşıyoruz? ARA Zor bölgeEkranın üstü. Ulaşmak için telefonu kaydırmak ya da iki el gerekiyor. Orta bölgeBiraz uzanarak ulaşılıyor. Okunacak içerik için uygun. Doğal bölgeBaşparmağın dinlendiği yer. Ana eylem butonları burada olmalı. Bu yüzden arama ve WhatsApp butonlarını ekranın altına sabitliyoruz.
Temsilî bir başparmak haritası. Sağ elle kullanımda doğal bölge ekranın alt ve sağ tarafına kayıyor.

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 uyumun dört katmanı Mobil uyumun dört katmanı 1. Görünüm — ekrana sığıyor mu? (çoğu site burada) 2. Okunabilirlik — rahat okunuyor mu? 3. Dokunulabilirlik — doğru yere basılıyor mu? 4. Hız — mobil bağlantıda açılıyor mu?
Piramidin tabanını geçmek kolay, tepesine çıkmak emek istiyor. Müşteri kazandıran site, dört katmanı birden geçen site.

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ı.

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:

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:

  1. Kaybolan müşteriler: Sitenize gelip zorlanan ve rakibinize geçen ziyaretçiler. Onları hiç tanımıyorsunuz, çünkü sizi hiç aramadılar.
  2. 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.
  3. Gerileyen sıralamalar: Mobil öncelikli dizinleme nedeniyle, mobil deneyimi zayıf siteler organik aramalarda dezavantajlı olabiliyor.
  4. 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:

  1. Telefonunuzdan, Wi-Fi'ı kapatıp mobil veriyle sitenizi açın. Ne kadar sürede açıldı?
  2. Yazıları ekranı büyütmeden okuyabiliyor musunuz?
  3. Yatay kaydırma yapmak zorunda kaldınız mı?
  4. Telefon numaranıza tek dokunuşla arama yapabiliyor musunuz?
  5. WhatsApp butonu var mı, basınca doğrudan sohbet açılıyor mu?
  6. İletişim formunu tek elle doldurabildiniz mi? Telefon alanında rakam klavyesi açıldı mı?
  7. Menü kolayca açılıp kapanıyor mu?
  8. Açılır pencereler ekranı kaplayıp içeriği engelliyor mu?
  9. Görseller net mi, yoksa bulanık ya da çok mu büyük?
  10. 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

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örMobil ziyaretçinin ilk sorusuİlk ekranda ne olmalı?
Acil servis (tesisat, çilingir)Hemen gelebilir misiniz?Büyük arama butonu, hizmet bölgesi
Restoran, kafeAçık mı, nerede, menü ne?Çalışma saati, yol tarifi, menü linki
Klinik, sağlıkRandevu alabilir miyim?Randevu butonu, uzmanlık alanları
Hurda, tamir, tadilatFiyat ne kadar tutar?Fotoğraf gönder + WhatsApp butonu
Avukat, danışmanBu 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.

Sitenizi Telefonda Birlikte Test Edelim

Mevcut sitenizin mobil deneyimini inceleyelim, başparmak testinden geçip geçmediğine birlikte bakalım.