Ayrı Mobil Sitelerden Responsive Tasarıma Nasıl Geçilir?

Günümüzde mobil uyumluluk söz konusu olduğunda üç farklı tasarım seçeneği öne çıkıyor; Esnek (Responsive Design), Dinamik (Dynamic Serving) ve ayrıştırılmış mobil tasarım (Seperate Mobile Design).

Google 2018 yılında mobil öncelikli indekslemeye geçeceğini belirtiyor ve ısrarla responsive tasarıma geçmenizi öneriyor. Bu yazımızda mobil sitesinin tasarımını responsive’e dönüştürmek isteyenler için bir yol haritası sunuyoruz.

Ayrıştırılmış Mobil Siteniz var ve Esnek Mobil Tasarıma geçmeyi mi planlıyorsunuz? Örneğin yıllar önce mobil sitenizi ayrıştırılmış olarak tasarladınız ve adresi https://m.example.com olsun. Fakat günümüzde tercihinizi değiştirmeye karar verdiniz ve mobil sitenizin de https://example.com olarak açılmasını istiyorsunuz. Bu durumda nasıl bir çalışma yürütmeniz gerekecek ve nelere dikkat etmeniz gerekiyor?

1. İlk olarak bilmeniz gereken, esnek mobil tasarımın her mobil cihaz çözünürlüğüne uygun bir yapıda olmasıdır.
2. İkinci en önemli nokta ise, gerçekleşecek olan URL değişikliklerinin çok dikkatli şekilde takip edilmesidir.
   1. URL değişikliği yapıldıktan sonra, özel duruma sahip olmayan her URL’nin kendisine rel=canonical etiketi eklemenizi tavsiye ederiz.
   2. Eğer ihtiyaç duyuyorsanız AMP (Accelerated Mobile Pages) uygulamasını da kullanmayı düşünebilirsiniz.

Bildiğiniz gibi piyasadaki akıllı telefonların standart bir ekran boyutu ve ekran çözünürlüğü yok. Bu sebeple bir Web sitesinin mobil cihazlarda sağlıklı görüntülenmesini sağlamak için dikkatli bir planlama yapmanız gerekiyor. Web sitesi akıllı telefonlarda ve tabletlerde görüntülenirken, çözünürlük farkı gözetmeksizin aynı kullanışlılığa sahip olmalıdır.

Çözünürlükle ilgili uyumluluk yakalandıktan sonra biraz daha zorlayıcı bir noktaya geliyoruz. Ayrıştırılmış tasarımdaki mobil URL’lerin normal URL’ye dönüştürülmesi ve hepsinin asıl URL’lere 301 kalıcı yönlendirme ile yönlendirilmesi, dikkat edilmesi gereken en önemli nokta olarak karşımıza çıkıyor. Örneğin;

• https://m.example.com/haber/  -> https://example.com/haber/
• https://m.example.com/haber/gundem/  -> https://example.com/haber/gundem
• https://m.example.com/haber/gundem/mobil-uyumluluk-guncellemesi-v2  -> https://m.example.com/haber/gundem/mobil-uyumluluk-guncellemesi-v2

Yukarıdaki örneklere uygun olacak şekilde yapılan 301 yönlendirmeleri, mobil sitenizin işleyişini sağlıklı şekilde devam ettirebilmenizi sağlayacaktır.

Ayrıştırılmış tasarımdan dinamik tasarıma geçmek isterseniz, yine aynı şekilde bu yönlendirmeleri yapmanızı tavsiye ederiz. Dinamik tasarımdan esnek tasarıma geçmek istiyorsanız, böyle bir yönlendirme yapmanız gerekmiyor.

Özetlemek gerekirse, Ayrıştırılmış tasarımdan dinamik veya esnek tasarıma geçmek istiyorsanız, mobil tasarımı tamamladıktan sonra eski URL’leri yenilerine 301 ile yönlendirmeniz yeterli olacaktır. Özel duruma sahip olmayan her URL’nin kendisine rel=canonical etiketi ekleyebilirsiniz. Özel durumdan kastımız: Söz konusu sayfaya “noindex” etiketi eklenmişse veya o sayfa robots.txt içerisinde yer alan engellenmiş bir dizinde yer alıyorsa, özel duruma sahip demektir.

Mobil Sitenizde Neden Esnek Tasarımı Tercih Etmelisiniz?

Açıkçası günümüzde mobil cihazlarda en rahat görüntülenebilen tasarım seçimi, esnek tasarımdır. Esnek tasarım uzun vadede bakım, analiz ve raporlama maliyetlerini düşürür. Ayrıca esnek tasarım arama motoru dostudur ve SEO projenizi başarıyla yürütmenize olanak sağlar.

Esnek tasarım doğru uygulandığında her türlü mobil cihazda (akıllı telefonlar, tabletler) sağlıklı şekilde çalışmaktadır. WordPress gibi popüler CMS uygulamalarında sunulan hazır temalar da esnek tasarımla üretilmiştir.

Ek olarak esnek tasarım, AMP, yapısal veri kullanımı gibi teknolojileri de desteklemektedir, böylece uygulama sürecinde sorun yaşama ihtimalinizi oldukça düşürecektir.

Konuyla ilgili daha fazla bilgi almak isterseniz, Google’ın da fikrini almayı düşünebilirsiniz: Ayrı mobil sitelerden, responsive web tasarımına geçiş