WordPress Düzenlerinizi Mobil Trafik için Optimize Etme

Mobil cihazların ve bunları kullanan kişilerin sayısı sürekli artıyor. İnternet trafiğinin yarısından fazlasının mobil olması ve yapılan arama motoru sorgularının çoğunun mobil cihazlarda olması şaşırtıcı değildir. Ayrıca Google, mobil cihazlar için optimize edilmemiş web sitelerini cezalandırır.

WordPress düzenlerinizi mobil trafik için optimize etmek için bir tema yüklemekten çok daha fazlasını yapmanız gerekir. Web sitenizin mobil versiyonuna yalnızca UX açısından değil, aynı zamanda SEO, CRO, Reklamcılık ve performans açısından da yatırım yapmalısınız.

Bu nedenle, bu makalede, WordPress sitenizin mobil trafik için çalışmasını sağlamak ve kullanıcıların web sitesini bir mobil cihaz üzerinden ziyaret ederken mümkün olan en iyi deneyimi elde etmelerini sağlamak için nelere dikkat etmeniz gerektiğini açıklayacağız.

Mobil Trafik Neden Önemlidir?

2016'da ilk kez mobil İnternet trafiği masaüstünü geçti. Buna ayak uydurmak için, WordPress sitenizi her tür cihazdan gelen trafiğe hazırlamalısınız.

Optimizasyon, yalnızca akıllı telefonlarda harika görünmek anlamına gelmez, aynı zamanda işlevsel bir web sitesine sahip olmak anlamına da gelir. Mobil kullanıma hazır bir web sitesine sahip olmak, UX'i geliştirecek ve dönüşüm oranınızı artıracaktır ve gelirlerini reklama dayandıran web siteleri için çok önemlidir.

Gelişmiş bir UX'e ek olarak, mobil uyumlu bir düzen, SEO'nuzu da olumlu yönde etkiler. Google'ın 2015'teki güncellemesinden itibaren, arama motoru algoritmalarında önemli bir revizyon yapıldı. Artık mobil uyumluluk, daha iyi arama sıralaması ve artan web trafiği için önemli faktörlerden biridir.

Statista'nın bu grafiğinde gösterildiği gibi mobil web trafiği sürekli bir artış gösteriyor.

Bu nedenle, web siteniz mobil cihazlarda mükemmel görünüyorsa, SERP'lerde daha iyi sıralanacak ve mobil üzerinden daha fazla satışla sonuçlanacaktır. Walmart Kanada gibi büyük perakendeciler bile, mobil satışlarda% 98 artışla mobil web düzeni optimizasyonlarından daha fazla yararlandı!

Şirket, hedef müşterilerinin neredeyse% 50'sinin tablet kullanan anneler olduğunu öğrendiğinde, mobil deneyimleri hakkında bir şeyler yapmaları gerektiğini fark etti. Mobil düzenleriyle ilgili sorunları başarılı bir şekilde çözmek için aşağıdaki çözümleri uyguladılar:

• Mobil Öncelikli Bir Plan Oluşturma: Ekip, tasarıma dokunmaya odaklı bir yaklaşım benimsemeleri gerektiğine karar verdi ve tabletlerde ve akıllı telefonlarda gerçekten iyi görünmesini sağladı.
• Mobil Tasarım Optimizasyonunu Uygulama: Duyarlı tasarım yaklaşımı, sitelerinin her ekran boyutunda mükemmel çalışmasını sağladı. Ek olarak, ürün sayfalarını mobil web trafiği için de optimize ettiler.

Sonuç: Yukarıda belirtildiği gibi kendi genel dönüşüm oranında% 20'lik bir artış, ve mobil satış% 98 artış.

Google Mobil Web Sitesi Düzenlerini Nasıl Değerlendiriyor?

Google, sitenin bir mobil aramadan trafik alma yeteneğini değerlendirirken aşağıdaki faktörleri dikkate alır:

• Sayfa Düzeni: Google, sayfanızın bir mobil ekranda doğru şekilde görüntülenip görüntülenmediğini inceler.
• Erişilebilirlik: Düğmelerin, medyanın ve metnin, kullanıcıları yakınlaştırmadan kolayca erişilebilecek kadar büyük olup olmadığını kontrol etme.
• Performans: Sayfa hızı, masaüstü ve mobil web deneyimleri için çok önemlidir ve Google, SERP'lerde masaüstü yerine mobil sayfa performanslarına öncelik verir.
• Reklam Yerleşimi: Reklamlarla dolu bir sayfa birçokları için müdahaleci ve Google için de bir sorundur. Bu nedenle, reklamları kullanırken, reklam yerleştirme yönergelerini ihlal etmediğinizden emin olmanız gerekir.

Bazı Testlerle Başlayın

Yapmanız gereken ilk şey, mevcut sitenizin mobil web trafiğine yeterince yanıt verip vermediğini incelemektir. Bu amaçla Google'ın Mobil Uyumluluk Testi aracını kullanabilirsiniz.

Sitenizin mobil duyarlı düzenlerini incelemek için en iyi araçlardan biri olarak Google'ın Mobil Uyumluluk Testi.

Sadece site URL'sini girin ve URL'yi Test Et'i seçin. Analiz birkaç saniyeden fazla sürmez. Web siteniz mobil cihazlarda çalışıyorsa, araç, sitenin bir akıllı telefonda nasıl göründüğüne dair bir ekran görüntüsü ile sizi bilgilendirir. Veya siteniz mobil uyumlu değilse, araç neleri ayarlamanız gerektiğini gösterir.

Mobil uyumluluğunu test etmek için kullanabileceğiniz birkaç yararlı araç vardır, örneğin:

• Varvy Mobil SEO
• W3C Mobil Doğrulayıcı
• Duyarlı Tasarım Denetleyicisi

Aletler harikadır, ancak hiçbir şey ilk elden deneyimi gerçekten yenemez. Her zaman sitenizin her yerine gitmenizi, kullanıcılarınız için öncelikli olduğunu düşündüğünüz eylemler gerçekleştirmenizi (sepete ürün eklemek, form göndermek, sayfaya gitmek, gönderi paylaşmak gibi) öneririz. Süreç boyunca olası sorunlara dikkat edin. Bu, UX testinin en basit şeklidir.

Performansı Test Edin

Hız, her zamankinden daha önemli. Google, hızı en önemli sıralama faktörlerinden biri olarak görüyor ve kullanıcıların% 85'i mobil sitelerin masaüstü sürümlerinden çok daha hızlı yüklenmesini bekliyor.

Web sitenizin hızını test etmek için kullanabileceğiniz bazı araçlar şunlardır:

• PageSpeed ​​Insights
• GTMetrix
• Pingdom

İçeriği mobil cihazlarda hızlandırmak istiyorsanız, CDN, çeşitli konumlardan önbelleğe alma ve dağıtım yoluyla içeriği daha hızlı sunmanıza yardımcı olabilir.

Örneğin, barındırma sunucunuzun San Francisco, CA'da olduğunu ve mobil web ziyaretçinizin Paris'ten olduğunu varsayalım. İçeriğin çaprazlamasını yavaşlatabilen bir mesafedir. Bir CDN, sitenizin bir sürümünü Paris yakınlarındaki bir Fransız sunucusunda depolayabilir ve sonuç olarak içeriğinizi çok daha hızlı sunabilir.

Ek olarak, WordPress web siteniz için güçlü bir Yönetilen barındırma sağlayıcısı seçmeniz gerekir. Paylaşılan bir ana bilgisayar aynı anda yüzlerce web sitesi çalıştırır ve sitelerden biri normal trafik artışından daha fazla yaşarsa, diğer sitelerin hızını azaltacaktır.

Pagely gibi bir WordPress barındırmaya yükseltme, önemli performans iyileştirmeleri sağlayabilir. Pagely, web sitenizi anında hızlandıracak bir sunucu altyapısı kullanır. Ayrıca en son PHP 7 sürümünü kullanırlar ve site varlıklarınızı fırlatabilecek bir CDN içerirler.

Sadeliği Koruyun

Akıllı telefonlar, masaüstü düzenlerine göre çok daha küçük ekrana sahip olduğundan, kullanıcılara gösterebileceğiniz öğe miktarı daha düşüktür. Bu nedenle, çok sayıda içerik görüntülemek istiyorsanız, kullanıcı deneyimini engellemiş olursunuz.

Örneğin, Toyota'nın Brezilya şubesinin web sitesine bir göz atalım. Bir dizüstü bilgisayarda gerçekten sağlam görünüyor.

İyi görünümlü bir masaüstü web sitesi, mobil düzenin uygun olacağı anlamına gelmez. Resim kaynağı: Toyota Brezilya

Ama ya onların araçlarına akıllı telefonunuzda göz atmak isterseniz.

Dağınık bir mobil web düzeni, daha az trafiğe ve daha düşük bir dönüşüm oranına yol açar. Resim kaynağı: Toyota Brezilya

O kadar da kötü değil, ancak yine, üst çubuk ve ana menü biraz fazla, tüm deneyimi modası geçmiş ve karmaşık hale getiriyor.

Tasarımınızla işleri basitleştirmek, mobil kullanıcı arayüzünü iyileştirir ve kullanıcılar sayfalarınızda daha verimli bir şekilde gezinebilir. Ek olarak, basit düzenler mobil sayfa hız puanınızı artırır, çünkü bir tarayıcının ne kadar az öğe yüklemesi gerekiyorsa sayfa o kadar hızlı olur.

Swell'den mobil cihazlar için basit bir WordPress Düzeni

Bir mobil düzen tasarlarken, sayfada daha fazla kaydırmayı teşvik etmek için tek sütunlu bir sayfa düzenine odaklanmak en iyisidir. Bir düşünün - Facebook ve Instagram mobil platformlar kadar neden bu kadar başarılı?

Kullanıcılar doğal olarak dikey olarak kaydırır. Resim kaynağı: Giphy

Ayrıca, basit mobil web tasarımı için "hamburger menüsü" gibi diğer kabul edilebilir özellikleri göz önünde bulundurmanız gerekir.

Sol üstte bir Hamburger Menü düğmesi. Resim kaynağı: AMC

Artık mobil web tasarımında standart bir bileşendir ve kullanıcılar başka bir sayfaya göz atmak istediklerinde sayfa düzeninin üst kısmında arama yaparlar. Kapsamlı açılır menüler kullanmayın. Akıllı telefonlarda gezinmek zordur ve bazen masaüstü web sitelerinin kullanılabilirliğini bile engellerler.

Gereksiz İçeriği Hariç Tutun

Gereksiz öğeleri kaldırarak sayfanın mobil cihazlara geçişini kolaylaştırmanın yanı sıra, fazladan içeriği de kaldırabilirsiniz. Elbette, dönüşüm oranınızı artıran içeriği asla silmemelisiniz. Ancak, sitenizin mobil versiyonu için gerekli olmayan bazı içerikler vardır.

Sayfada hangi içeriğin görünmesi gerektiğini incelerken kendinize şunları sorun:

• Bu içerik sayfa için ne kadar alakalı?
• İçerik, kullanıcı yolculuğu için çok önemli mi?
• Bu içeriği eklememiz gerekirse, bunu mobil cihazlar için nasıl basitleştirebiliriz?
• Mobil cihazlardan kaldırabilirsek, yine de masaüstünde gerekli mi?

Gereksiz içeriği ortadan kaldırmak, kullanıcı deneyimini ve dönüşüm oranlarını artıracaktır. Mobil web ziyaretçileriniz için yalnızca en önemli içeriği kaydedin. İçeriğinizi olabildiğince basitleştirin, ancak kullanıcıları ürününüzü seçmeye ikna edebilecek herhangi bir önemli içeriği ortadan kaldırmayın.

BuildFire mobil web sitesinden basit bir kullanıcı arayüzü.

Tıklanabilir Alanları Sınırlandırın

İnsanlar mobil cihazlarda web sitelerini ziyaret ettiklerinde, tıklamak için çok fazla seçenek istemiyorlar. Bu çok zor olabilir ve çalıştırılabilir bir mobil UX sağlamada başarısız olursunuz. Bunun yerine, sayfalarınızdaki en önemli harekete geçirici mesajları ve tıklanabilir alanları vurgulamanız gerekir.

Todoist'te sadece harekete geçirme ifadesi ve bazı güzel grafikler var.

Akıllı telefonda bir web sitesine göz atmanın oklarla işaret etmek yerine parmaklarınızla dokunmatik ekrana bakıp tıklamaktan ibaret olduğunu unutmayın. Bu nedenle, sınırlı sayıda bağlantı eklemek ve bunları uygun şekilde yerleştirmek, mobil cihaz kullanıcılarının gezinebileceği erişilebilir bir sayfaya sahip olmanızı sağlayacaktır.

Quicksprout mobil web sitesinde büyük tıklanabilir alanlar vardır.

Bu çok önemlidir çünkü tıklanabilir alanlar bir mobil ekrana yakınsa, insanlar yanlış bağlantıya tıklayabilir. Ayrıca Google, sitenizi mobil kullanıcılar için dostça olmayan bir şekilde işaretleyebilir ve çok sayıda potansiyel organik arama trafiğini kaçırırsınız.

Harness Duyarlı Tasarım

Web sitenizi masaüstü ve mobil cihazlarda düzgün bir şekilde görüntülemek istiyorsanız, onu duyarlı hale getirmelisiniz. Duyarlı bir web sitesi, masaüstü ve mobil sürümler için aynı sayfa öğelerini kullanır. Cihaza göre tasarım ekrana sığacak şekilde yeniden şekilleniyor.

Mobil cihazlarda web ziyaretçileriniz için geliştirilmiş UX'in yanı sıra, duyarlı tasarım sitenize aşağıdaki avantajları da sağlar:

• Esneklik: Duyarlı tasarımla, iki web sitesindeki tasarımı değiştirmeyi düşünmenize gerek yok. Öğeleri yalnızca bir kez düzeltmeniz veya eklemeniz gerekir ve bunu hem mobil hem de masaüstü sürümleri için yaparsınız.
• Maliyet Etkinliği: Bir masaüstü ve mobil site çalıştırmak pahalı olabilir. Duyarlı tasarımı kullanarak bu gereksiz maliyetleri ortadan kaldırırsınız.
• SEO Faydaları: Duyarlı tasarım, arama sıralamanız için faydalıdır çünkü Google, makalenin başında tartışıldığı gibi, SERP'lerde mobil uyumlu sitelere öncelik verir.

Ancak dikkatli olmalısınız. Çoğu duyarlı web sitesi yalnızca üç sütun masaüstü içeriği tek bir sütuna dönüştürür.

Duyarlı bir site, her ekrana uyan sitedir. Aynı verileri masaüstünden mobil sürüme yükler. Örneğin, 300 piksellik bir mobil ekranda 1.200 piksellik bir masaüstü fotoğrafı göstermek istiyorsanız, 1.200 pikselin tamamı yüklenir ve yalnızca daha küçük oluşturulur.

Resim Kaynağı: Giphy

Görsellerle ilgili olarak, WordPress daha iyi bir deneyime doğru şimdiden önemli ilerleme kaydetmiştir. 4.4 sürümünden bu yana, CMS, srcset HTML özelliği aracılığıyla en büyük görüntüleri bile otomatik olarak ölçeklendirir.

PNG ve JPEG en yaygın görüntü dosyası formatlarıdır. Ancak, en son teknoloji ve dijital görüntü gelişmeleriyle birlikte WebP ve SVG formatları giderek daha fazla mevcut hale geliyor.

SVG, bir vektör görüntüsüdür ve herhangi bir ekran boyutuna sığacak şekilde ölçeklenebilir. Genellikle SVG'ler PNG'lerden çok daha küçüktür, bu nedenle yükleme sırasında değerli zaman tasarrufu sağlar.

Ancak yine de dikkatli olmalısınız. Videolar, fotoğraflar ve grafikler gibi görsel öğeler, web siteleri için önemli performans yiyicilerden biri olabilir. Medya dosyası boyutu için kesin olarak tanımlanmış kurallar olmasa da, daha küçük dosyalar daha iyi yükleme süreleri sağlar.

WordPress sitenizin masaüstü sürümündeki aynı görsel öğelerin her zaman mobil tasarımda çalışmayabileceğini unutmayın. Bu nedenle, büyük arka plan görüntülerini ortadan kaldırmak ve mobil cihazlarda UX'i engellemeyen bir görüntüyle değiştirmek çok daha iyi bir seçenek.

Örnek olarak HubSpot'un ana sayfasını alalım. Kahraman bölümündeki grafikler, CRM'nin işleri nasıl hareket ettirdiğini mükemmel bir şekilde gösteriyor. Her pencerede bu kadar çok insan bulunan bir ofis binasının gerçekçi bir görüntüsünü hayal edin. Bu kadar iyi çalışmaz.

Kaynak: HubSpot

Formları Optimize Edin

Bir akıllı telefondaki formları doldurmak, özellikle kullanıcıların çok fazla veri göndermesi ve çok fazla alanda gezinmesi gerekiyorsa zor olabilir. Bu nedenle, mobil formlarınızı basitleştirdiğinizden ve yalnızca en önemli bilgileri topladığınızdan emin olmanız gerekir.

Mobil sayfalarınızın formlarını olabildiğince basit tutun. Kaynak: Copyblogger

WordPress'te, WPForms gibi bir eklenti yükleyebilir ve mobil web ziyaretçilerini dönüştürmenize yardımcı olabilecek hızlı ve kolay yanıt veren formlar oluşturabilirsiniz.

Geliştirici bakış açısından, en fazla esnekliği sağladığı için İletişim Formu 7'yi kullanıyoruz. Her ne kadar kullanıcı arayüzünün, formları için özel bir tasarım isteyen teknik olmayan kullanıcılar için kullanıcı dostu olmadığı unutulmamalıdır.

İletişim Formu 7, geliştirici açısından daha iyi bir form optimizasyon aracıdır.

Sarma

Mobil uyumlu bir WordPress düzenine sahip olmak günümüzde çok önemlidir. Hedef kullanıcılarınızın ve arama motorlarınızın sitenizi kabul etmesi gerekli bir gerekliliktir.

Mobil uyumlu bir WordPress web sitesi, daha fazla organik trafik çekme, yeni potansiyel müşteriler ve müşteriler kazanma gücüne sahiptir.

Artık neyi test edeceğinizi, mobil kullanıcı arayüzü sorunlarını nasıl arayacağınızı ve ek sorunları nasıl belirleyeceğinizi daha iyi anladığınıza göre. WordPress sitenizin mobil UX'inin her zaman yerinde olmasını sağlamak için yukarıda özetlenen tavsiyeleri takip edebilirsiniz.

En iyi CMS'nin arkasındaki kişiler, gelişmiş bir yerel mobil UX'e doğru da büyük ilerleme kaydediyor. Mobil tarayıcılarda görüntüleri ölçeklendirmekten iyileştirilmiş bir arka uca kadar, başka bir CMS kullanan web sitesi sahiplerinin önünde olduğunuzdan emin olabilirsiniz.

Daha fazla sorunuz varsa veya mobil kullanıcı deneyimi sorunları ve cihazlarda modern bir web deneyimi oluşturmak için yardıma ihtiyacınız varsa, iletişime geçmekten çekinmeyin.