Ziyaretçilerinizin çoğu telefondan geliyor ama siteniz masaüstü için tasarlanmış. Yakınlaştırma yapmadan okunmuyor, düğmelere basmak zor ve sayfa yavaş açılıyor.
Bu yazı, mobil uyumluluğun teknik tarafını ele alıyor.
Üç Farklı Katman
Mobil uyum tek bir iş değil, üç ayrı katmanın toplamıdır:
| Katman | Sorumlu |
|---|---|
| Düzen ve görünüm | Tema ve stil dosyaları |
| Sayfa ağırlığı ve hız | Hosting ve içerik |
| Etkileşim ve kullanılabilirlik | Tema ve içerik |
İkinci katman en çok ihmal edilenidir: düzeni mobil uyumlu bir site, ağır olduğu için mobil kullanıcı için hâlâ kötü bir deneyim sunabilir.
Mobil bağlantılar masaüstüne göre daha yavaş ve daha değişkendir. Masaüstünde fark edilmeyen bir gecikme, mobilde terk edilme nedenidir.
Temel Gereklilik
Bir sayfanın mobil uyumlu sayılması için ilk koşul, tarayıcıya genişlik bildirmesidir:
- Görüntü alanı etiketi bulunmalıdır.
- Cihaz genişliğine ayarlanmalıdır.
- Yakınlaştırma engellenmemelidir.
Üçüncü madde bir erişilebilirlik meselesidir: yakınlaştırmayı kapatmak, küçük yazıları okuyamayan kullanıcıları siteden tamamen dışlar.
Bu etiket yoksa mobil tarayıcı sayfayı masaüstü genişliğinde oluşturup küçültür — sonuç, okunamayan bir sayfadır. Tek satırlık bu eksik, tüm mobil uyumu geçersiz kılar.
Mobilde Hız
Sayfa ağırlığını düşürmek mobilde masaüstünden daha kritiktir:
- Görselleri boyutlandırın. Ekranda görünen boyutta sunun.
- Farklı boyutlar sunun. Cihaza göre uygun dosya.
- Ekran dışı görselleri geciktirin.
- Kullanılmayan betikleri kaldırın.
- Yazı tiplerini sınırlayın.
Birinci madde en büyük kazancı verir ve en sık atlanır: telefonda 300 piksel genişliğinde görünen bir görselin 2000 piksellik dosyası indiriliyorsa, boşa giden veri kullanıcının kotasından çıkar.
İkinci madde bunu otomatikleştirir. Aynı görselin farklı boyutlarını sunup tarayıcının seçmesine izin vermek, HTML'de birkaç ek nitelikle sağlanır.
Dokunma Hedefleri
Masaüstünde fare hassasiyeti vardır, mobilde parmak:
- Düğmeler yeterince büyük olmalı.
- Bağlantılar arasında boşluk bırakılmalı.
- Yan yana küçük bağlantılar konmamalı.
- Üzerine gelme efektlerine güvenilmemeli.
Dördüncü madde tasarımı bozan bir varsayımdır: dokunmatik ekranda "üzerine gelme" durumu yoktur — yalnızca fareyle görünen menüler mobilde erişilemez kalır.
Üçüncü madde ise en sık şikayet edilen sorundur. Alt alta sıralanmış küçük bağlantılarda yanlış olana basmak kaçınılmaz hâle gelir.
Form Deneyimi
Mobilde form doldurmak zordur ve küçük ayrıntılar büyük fark yaratır:
| Ayar | Etkisi |
|---|---|
| Alan türünü doğru belirtme | Uygun klavye açılır |
| Otomatik tamamlama ipucu | Tarayıcı bilgileri doldurur |
| Otomatik büyük harfi kapatma | E-posta alanında gerekli |
| Alan sayısını azaltma | Tamamlanma oranı artar |
Birinci satır tek satırlık bir değişiklikle deneyimi belirgin iyileştirir: telefon numarası alanına sayısal klavyenin açılması, kullanıcının klavye değiştirmesini gereksiz kılar.
Üçüncü satır ise sinir bozucu bir hatayı önler. E-posta alanında ilk harfin otomatik büyütülmesi, adresin yanlış girilmesine ve doğrulama hatasına yol açar.
Gerçek Cihazda Test
Tarayıcı simülasyonu yeterli değildir:
- Gerçek bir telefonda açın.
- Mobil veri ile deneyin. Kablosuz ağ gerçeği yansıtmaz.
- Eski bir cihazda test edin.
- Formu baştan sona doldurun.
- Yatay konumda kontrol edin.
İkinci madde en açıklayıcı testtir: ofis kablosuz ağında hızlı açılan bir site, mobil veri üzerinde tamamen farklı davranabilir.
Üçüncü madde ise işlemci gücünü test eder. Yeni bir telefonda akıcı çalışan ağır betikler, birkaç yıllık bir cihazda sayfayı kilitleyebilir.
Hosting Tarafındaki Katkı
Sunucu yapılandırmasıyla mobil deneyime katkı sağlanabilir:
- Sıkıştırma açık olmalı. Mobilde veri tasarrufu.
- Önbellek başlıkları doğru olmalı. Tekrar ziyaretlerde hız.
- Modern protokol etkin olmalı.
- Sunucu yanıt süresi düşük olmalı.
- Yönlendirme zincirleri temizlenmeli.
Beşinci madde mobilde orantısız etki yapar: her yönlendirme adımı bir tur gecikme ekler ve mobil ağlarda bu gecikme masaüstünün birkaç katıdır.
Bu ayarların hangileri kullanılabilir, paket türüne göre değişir — Linux hosting hizmeti paketlerinde sıkıştırma ve önbellek başlıkları genellikle dizin yapılandırma dosyasıyla ayarlanabilir.
Ölçüm ve Takip
Mobil performansı izlemek için bakılacaklar:
| Metrik | Ne gösterir |
|---|---|
| Mobil trafik oranı | Önceliğinizi belirler |
| Mobil hemen çıkma oranı | Deneyim sorunu var mı |
| Cihaz bazlı dönüşüm | Mobilde kayıp var mı |
| Sayfa yükleme süresi | Cihaz türüne göre ayrı |
Üçüncü satır en değerli bulguyu üretir: mobil trafiğiniz yüksek ama mobil dönüşümünüz düşükse, sorun trafikte değil deneyimdedir.
Bu fark genellikle form veya ödeme adımında yoğunlaşır. Hangi adımda kaybettiğinizi bulmak, düzeltmenin ilk adımıdır.
Sonuç
Mobil uyumluluk yalnızca düzen meselesi değildir — düzeni uyumlu ama ağır bir site, mobil kullanıcı için hâlâ kötü bir deneyimdir. En büyük kazanç görselleri gerçek görüntüleme boyutunda sunmaktan gelir. Görüntü alanı etiketini unutmayın ve yakınlaştırmayı kapatmayın. Testi mutlaka gerçek cihazda ve mobil veriyle yapın: ofis kablosuz ağında hızlı açılan bir site, mobil veri üzerinde tamamen farklı davranır.
Sıkça Sorulan Sorular (SSS)
Sitem mobilde küçük görünüyor, neden?
Büyük olasılıkla görüntü alanı etiketi eksik. Bu etiket yoksa mobil tarayıcı sayfayı masaüstü genişliğinde oluşturup küçültür ve sonuç okunamaz bir sayfa olur. Tek satırlık bu eksik, tüm mobil uyumu geçersiz kılar.
Mobilde en büyük hız kazancı nereden gelir?
Görselleri gerçek görüntüleme boyutunda sunmaktan. Telefonda 300 piksel genişliğinde görünen bir görselin 2000 piksellik dosyası indiriliyorsa, boşa giden veri kullanıcının kotasından çıkar. Farklı boyutlar sunup tarayıcının seçmesine izin verin.
Menülerim mobilde açılmıyor?
Üzerine gelme efektine dayanıyor olabilir. Dokunmatik ekranda "üzerine gelme" durumu yoktur — yalnızca fareyle görünen menüler mobilde erişilemez kalır. Menüyü dokunmayla açılacak şekilde yeniden kurgulayın.
Tarayıcı simülasyonu yeterli mi?
Değil. Simülasyon düzeni gösterir ama gerçek ağ hızını ve cihaz işlemci gücünü yansıtmaz. Gerçek bir telefonda, mobil veri üzerinden ve tercihen birkaç yıllık bir cihazda test edin.
