Kısa Cevap: Çoğu Zaman Yeniden Tasarlamak Daha Hızlı
Eski bir siteyi mobil uyumlu yapmanın üç yolu var: mevcut siteyi CSS ile uyarlamak, site WordPress gibi bir sistemdeyse mobil uyumlu bir temaya geçmek ya da siteyi yeniden yapmak. Çoğu zaman eski kodu düzeltmek yerine siteyi mobil uyumlu olarak yeniden tasarlamak daha hızlı ve sağlıklıdır; özellikle sayfa düzeni tablolarla ya da sabit genişlikle kurulmuşsa veya sitenin altyapısı artık güncellenemiyorsa. Düzeni CSS ile kurulmuş küçük bir sitede uyarlama yeterli olabilir.
Beklemenin de bir bedeli var: Google siteleri artık telefon sürümlerine göre dizine ekliyor (Google Search Central, 31 Ekim 2023). Telefonda okunamayan bir sayfa ziyaretçiyi de kaçırır.
Siteniz Mobil Uyumlu mu? 2 Dakikalık Kontrol
Sitenizi kendi telefonunuzda açın ve şunlara bakın:
Mobil uyumsuzluğun belirtileri:
- Yazıyı okumak için ekranı yakınlaştırmanız gerekiyor.
- Sayfa yana kayıyor ya da görseller ve tablolar ekrandan taşıyor.
- Bağlantılar ve düğmeler parmakla basılamayacak kadar küçük ya da birbirine yakın.
- Menü açılmıyor ya da ekranı kaplayıp kapanmıyor.
- İletişim formu telefonda doldurulamıyor.
Bilgisayardan da bakabilirsiniz: Chrome'da sayfayı açıp F12, ardından Ctrl + Shift + M ile telefon görünümüne geçin. PageSpeed Insights ise sayfanın telefonda ne kadar hızlı açıldığını gösterir.
Bazı yazılar hâlâ Google'ın "Mobil Uyumluluk Testi"ni öneriyor; bu araç 1 Aralık 2023'te kaldırıldı.
Üç Yol: Uyarla, Temayı Değiştir, Yeniden Yap
| Yol | Ne zaman uygun? | Dikkat |
|---|---|---|
| Mevcut siteyi CSS ile uyarlamak | Sayfa sayısı az, düzen CSS ile kurulmuş, içerik güncel. | Eski kod karışıksa iş uzar; her sayfa tek tek denenmeli. |
| Mobil uyumlu temaya geçmek | Site WordPress gibi bir sistemde ve sistem güncel. | Eklentiler ve sayfa düzenleri yeni temada bozulabilir; önce bir kopyada deneyin. |
| Yeniden yapmak | Düzen tablolarla kurulmuş, altyapı güncellenemiyor, tasarım ve içerik de eskimiş. | Eski adresler korunmalı ya da yönlendirilmeli (4. bölüm). |
Uyarlamanın ilk adımı her sayfanın <head> bölümündeki tek satırlık etikettir. Bu etiket yoksa telefon sayfayı bilgisayar genişliğinde çizip küçültür:
Viewport etiketi:
<meta name="viewport" content="width=device-width, initial-scale=1">Etiket tek başına yetmez: sabit piksel genişlikler esnek hâle getirilmeli, menü ve tablolar telefona göre yeniden düzenlenmelidir. Teknik ayrıntıları Responsive Web Tasarım: Mobil Uyumlu Site Nasıl Yapılır? yazımızda anlattık.
Hangi Durumda Yeniden Yapmak Daha Mantıklı?
Şu işaretlerden biri varsa uyarlama, yeniden yapım kadar iş çıkarabilir:
Tablolu ya da Çerçeveli Düzen
Sayfa iskeleti tablolar ya da çerçevelerle (frame) kurulduysa her sayfanın düzeni baştan yazılır.
Flash ve Eski Eklentiler
Flash ile yapılmış bölümler güncel tarayıcıların hiçbirinde çalışmaz; yerine yenisi yapılmalıdır.
Güncellenemeyen Altyapı
Site eski bir PHP sürümüne ya da artık güncellenmeyen bir sisteme bağlıysa, yapılan iş güvenlik açığı olan bir altyapının üstüne yapılmış olur.
İçerik de Eskidiyse
Metinler, fotoğraflar ve hizmetler de değişecekse iki işi birlikte yapmak daha az uğraştırır.
Geçişte Google Sıralamanızı Korumak
Dört kural:
- Adresleri koruyun. Değişen her eski adresi kalıcı (301) yönlendirmeyle yeni adresine gönderin; yoksa Google'daki sayfalar 404 verir.
- Ayrı mobil site kurmayın. Google, tek adresle her ekrana uyan responsive tasarımı öneriyor;
m.ile başlayan ikinci bir site bakım yükünü ikiye katlar (Google Search Central). - Telefonda içeriği kısaltmayın. Google'a göre telefon sürümü bilgisayar sürümüyle aynı içeriği taşımalı; telefonda kaldırılan metin aramada da değerlendirilmeyebilir.
- Yayından sonra izleyin. Search Console'da sayfaların dizine eklenme durumuna ve 404 hatalarına ilk haftalarda bakın.
Maliyeti Neye Bağlı?
Tek bir fiyat yok; teklifi şunlar belirler:
Fiyatı belirleyenler:
- Sayfa sayısı ve farklı sayfa düzenleri: aynı düzendeki 20 sayfa, birbirinden farklı 20 sayfadan az iş çıkarır.
- Altyapı: düz HTML, WordPress ya da özel yazılım.
- İçerik: metinler ve görseller olduğu gibi mi taşınacak, yenilenecek mi?
- Özellikler: form, ürün listesi, rezervasyon gibi bölümler telefona ayrıca uyarlanır.
Küçük ve düzenli bir sitede uyarlama yeniden yapımdan ucuz olabilir; kod karışıksa fark kapanır. Genel fiyat kalemlerini Web Sitesi Fiyatları Neye Göre Değişir? yazımızda anlattık.
Sık Sorulan Sorular
Eski siteyi mobil uyumlu yapmak için baştan yapmak gerekir mi?
Her zaman gerekmez, ama çoğu zaman daha hızlıdır. Düzeni CSS ile kurulmuş, sayfa sayısı az bir site uyarlanabilir; tablolu düzen, Flash ya da güncellenemeyen bir altyapı varsa yeniden yapmak daha mantıklıdır.
Sadece viewport etiketi eklemek yeterli mi?
Hayır. Etiket telefonun sayfayı doğru genişlikte çizmesini sağlar; ama sabit genişlikli bölümler, tablolar ve menü uyarlanmazsa sayfa yine taşar.
WordPress sitemi nasıl mobil uyumlu yaparım?
En kısa yol mobil uyumlu (responsive) bir temaya geçmektir. Önce sitenin yedeğini alın ve yeni temayı bir kopyada deneyin; eklentiler ve sayfa düzenleri yeni temada farklı görünebilir.
Önce Telefonda Bakın, Sonra Karar Verin
Sitenizi telefonda açıp yukarıdaki belirtilere bakın. Sorun birkaç sayfada ve düzen sağlamsa uyarlamak yeterlidir; altyapı eskiyse yeniden yapmak uzun vadede daha az uğraştırır. Hangi yolu seçerseniz seçin, eski adresleri koruyun.
Web tasarım işlerimizde eski siteleri uyarlıyor ya da yeniden yapıyoruz; yayından sonrası için web sitesi bakımı da veriyoruz.
Sitenize Birlikte Bakalım
Sitenizin adresini gönderin; telefonda nasıl göründüğüne bakıp uyarlamanın mı yeniden yapımın mı uygun olduğunu söyleyelim.
Ücretsiz Ön Görüşme