WordPress Sitenizi Nasıl Mobil Dostu Hale Getirirsiniz?

Mobil uyumlu WordPress sitelerinin yeni norm olduğu bir sır değil, ancak ne kadar yaygın görünseler de, güzel ve duyarlı bir site oluşturmak için biraz çalışma gerekebilir. Bu kılavuz, mobil cihazlara uygun bir siteye sahip olmanın neden önemli olduğunu, WordPress'te nasıl site oluşturulacağını anlamanıza yardımcı olacak ve duyarlı bir site oluşturmak için en iyi araçları size tanıtacaktır.

WordPress sitenizi mobil uyumlu hale getirmek için yapmanız gerekenler:

1. Duyarlı web tasarımının neden önemli olduğunu anlayın
2. Google Mobil Uyumluluk Testini yapın
3. Duyarlı bir WordPress teması kullanın (veya kendinizinkini oluşturun)
4. Mobil uyumlu WordPress eklentilerini düşünün
5. Mobil uyumlu etkinleştirmeleri kullanın
6. Duyarlı medya açısından düşünün
7. Site performansına öncelik verin

Hazır? Haydi dalalım!

1. Mobil Uyumlu Siteler Neden Önemlidir?

2019'un 4. çeyreğinde, Google aramalarının %61'i bir mobil cihazda gerçekleşti. Bu, nüfusun yarısından fazlasının geleneksel masaüstü cihazlar yerine telefonlara ve tabletlere yöneldiği anlamına gelir; bu nedenle, onlara ayak uydurmak için web sitenizin herhangi bir ekran boyutunda görüntülenmeye hazır olması gerekir. Mobil uyumlu tasarım, olumlu bir kullanıcı deneyimi sağlar ve kullanıcılarınızın hareket halindeyken aradıklarını bulmalarına yardımcı olur.

UX'in yanı sıra sitenizin mobil uyumlu olması için önemli bir neden daha var: Google. 2015'ten ("Mobilegeddon" yılı) başlayarak, Google, "mobil uyumlu" olarak kabul edilen siteleri ödüllendirmek için arama algoritmasında büyük bir revizyon gerçekleştirdi. Değişiklik, önemli bir veri noktasına geldi: web sitenizin duyarlı olup olmadığı.

Bu, siteniz mobil cihazlarda iyi okunursa, arama sonuçlarında okumayan sitelere göre daha iyi performans göstereceği anlamına gelir. Mobil cihazlara uygun bir site oluşturmak için gerekli çalışmaları yaptıysanız, bu oldukça tatlı bir avantaj! Ancak, daha küçük ekranlarda görüntüleme görevine tam olarak uygun değilse, sitenizin trafiğine de zarar verebilir.

Neyse ki, WordPress siteniz henüz mobil uyumlu değilse, hızlanmanıza ve tam işlevli, duyarlı bir site oluşturmanıza yardımcı olacak pek çok araç vardır. İlk adım? Mevcut tasarımınızı kıyaslayın.

2. Mobil Uyumluluk Testini Yapın

Web siteniz tek bir mobil cihazda harika görünebilir (kendi kişisel cep telefonunuz gibi), ancak gerçekten yanıt verip vermediğini anlamak için çok çeşitli ekran boyutlarında test etmeniz gerekir. Etrafta bir sürü eski telefon olsa bile, onu her ekranda test etmek zaman alan bir süreç olabilir.

İşleri basitleştirmek için Google, sitenizin "mobil uyumlu" olup olmadığını size söyleyecek ücretsiz bir mobil uyumlu test aracı hediye etti. Sitenizin mobil tasarımının hızlı bir şekilde değerlendirilmesi için sitenizin URL'sini girmeniz yeterlidir. Web siteniz tamamen mobil cihazlar için optimize edilmişse, şuna benzeyen coşkulu, küçük bir başarı mesajı alırsınız:

Kırmızı görüyorsanız, yapacak biraz işiniz var demektir. (Buna birazdan geleceğiz!)

Oldukça temiz küçük alet, değil mi? Daha da iyi oluyor.

Google, siz geliştiricilerin hepsi için, URL'leri otomatik araçlarla test etmenize olanak tanıyan bir Mobil Uyumlu Test API'si de yayınladı. Bunun avantajı, daha fazla sayfayı hızlı bir şekilde test edebilmeniz, ancak aynı zamanda sitenizdeki en önemli sayfaları her zaman tarayıcı aracını manuel olarak açmak zorunda kalmadan izleyebilmenizdir. Gol!

Sitenizi kıyaslamak için Google'ın mobil uyumlu aracını kullandıktan sonra, iyileştirmeler yapmaya başlamanın zamanı geldi. WordPress temanızla başlayalım.

3. Duyarlı Bir WordPress Teması Kullanın (veya Oluşturun)

Yakın zamanda yeni bir WordPress teması yüklediyseniz, bu bölümde iyi olma şansınız oldukça yüksektir. Temanız bir süredir ortalıktaysa, küçük bir güncelleme zamanı gelmiş olabilir.

Her şeyden önce: WordPress sürümünüzü ve mevcut tema sürümünüzü iki kez kontrol edin. Bekleyen güncellemeler varsa, bunlarla başlayın. Her tema için konuşamam ama bazı güncellemeler mobil uyumlu öğeler içerecek ve sorunlarınızı çözmeye yetebilir. Örneğin, WordPress 4.4, duyarlı görüntüler için gerçekten harika bazı işlevler ekledi (bununla ilgili her şeyi buradan okuyabilirsiniz).

Güncellemeler işe yaramazsa, muhtemelen yeni bir tema aramanın veya kendi temanızı oluşturmayı düşünmenin zamanı gelmiştir. Her iki seçeneği de inceleyelim.

Mobil Uyumlu En İyi WordPress Temaları

Gerçekçi olmak gerekirse, bugünlerde pek çok WordPress teması duyarlıdır - bir temanın mobil uyumlu olmaması muhtemelen daha nadirdir. Bununla birlikte, bir tema satın almadan önce, herhangi bir ekran boyutunda iyi görünüp görünmediğini iki kez kontrol edin. Demo sitesini test edin, tarayıcı pencerenizi ölçeklendirin ve gerçek kullanıcıların deneyimlerini aramak için bulabileceğiniz tüm incelemeleri okuyun.

Gördüklerinden memnunsan, devam et! Ancak bir şey doğru görünmüyorsa, uzaklaşın. Bunun mükemmel bir eşleşme olduğunu düşünseniz bile, aralarından seçim yapabileceğiniz o kadar çok WordPress teması var ki, siteniz için çalışacak başka bir tane bulacağınızı garanti ederim.

Ücretsiz temalara bakıyorsanız, kendi içeriğiniz yerindeyken nasıl göründüğüne dikkat edin – eminim bildiğiniz gibi, her şey her zaman aynı görünmeyebilir, bu nedenle içeriğinizin aynı şekilde görüntülendiğinden emin olun. mobil cihazlarda istediğiniz şekilde.

Nereden başlayacağınızdan emin değil misiniz? WordPress sitenizi WP Engine'de barındırdığınızda, planınızla birlikte StudioPress temalarına (Genesis Framework dahil!) ücretsiz olarak erişebileceksiniz. Bu temalar tamamen duyarlıdır, bu nedenle herhangi bir cihazda harika görünürler, ayrıca bunlar arasında kolayca geçiş yapabilirsiniz (satın almaya karar verdiğiniz "tek" premium temaya takılıp kalmak yerine).

Kendi Duyarlı WordPress Temanızı Nasıl Oluşturabilirsiniz?

Mobil uyumlu bir site oluşturmak için Kendin Yap yolunu izlemeyi tercih ederseniz, sıfırdan veya bir test ortamında başladığınızdan emin olun; canlı sitenizde asla bu tür ciddi değişiklikler yapmamalısınız.

Yerel bir WordPress sitesini doğrudan makinenizde döndürmek için Yerel'i kullanmanızı öneririm. Bu ücretsiz uygulama, mevcut sitenizi asla bozmadan (yeniden tasarımdan geçerken çok önemlidir ) kalbinizin içeriğini denemenize olanak tanır. Mevcut sitenizi Yerel'e bile aktarabilirsiniz, böylece isterseniz yalnızca sıfırdan başlamanız gerekir.

Yerel siteye paylaşılabilir bir URL oluşturan Canlı Bağlantılar adlı bir özellik de vardır. Bu, bir müşteriye göndermenize veya telefonunuzdan çekmenize olanak tanır, böylece sitenin bir mobil cihazda nasıl göründüğünü kolayca test edebilirsiniz.

Duyarlı bir ana temaya dayalı bir alt tema oluşturursanız, oldukça iyi durumda olacaksınız. Tamamen boş bir sayfadan başlayıp kendi temanızı oluşturuyorsanız, tasarımın sınırlarını belirlemek için medya sorgularını kullandığınızdan emin olun ve öğeleri birer birer düşünün.

Resimlerin nasıl ölçeklenmesi gerektiğini, navigasyonun nasıl görünmesi gerektiğini ve herhangi bir içeriğin bir mobil cihazda gizlenip gizlenmeyeceğini kendinize sorun. İşte size yardımcı olabilecek birkaç öğretici:

• WordPress'te duyarlı bir gezinme menüsü nasıl oluşturulur?
• Duyarlı web tasarımı için en iyi 7 uygulama ipucu
• WordPress'te duyarlı görüntülerle çalışma

4. Duyarlı Eklentiler Kullanın

Eklentiler, WordPress sitenize işlevsellik katar, bu nedenle ön uca görsel olarak her zaman bir şey eklemezler. Ancak sitenize fiziksel bir öğe eklemeleri durumunda (bir widget veya CTA düğmesi gibi), tüm ekran boyutlarında iyi ölçeklendiğinden emin olun veya en azından size daha küçük ekran boyutlarında devre dışı bırakma seçeneği sunar.

Örneğin, bir kenar çubuğu widget'ı bir masaüstü sitesine harika bir ektir, ancak mobil tasarıma hakimse veya ölçeği küçültmüyorsa, çok iyi bir kullanıcı deneyimi sağlamayacaktır.

Temalar gibi, bir eklentinin özelliklerine dikkat edin ve satın almadan önce incelemeleri okumaya veya bir demo bulmaya çalışın. Ayrıca, yeni bir eklentiyi her etkinleştirdiğinizde, ekran boyutlarında doğru şekilde ölçeklendiğinden emin olmak için sitenizde hızlı bir kalite kontrolü yapmayı unutmayın.

Duyarlı bir temanız ve mobil cihazlarda iyi çalışan eklentileriniz olduğu sürece, siteniz daha küçük ekranlarda görüntülenmek için gerçekten iyi durumda olacaktır.

5. Mobil cihazlara pop-up eklemekten kaçının

WordPress sitenizle bir e-posta listesi oluşturmaya çalışıyorsanız, sitenizde çeşitli tercihler olduğunu tahmin ediyorum. Çoğu e-posta katılım formu, mobil cihazlarda gayet iyi çalışır (ölçeklendikleri ve kullanımlarının kolay olduğu varsayılırsa).

Ancak pop-up'lar farklı bir canavardır. Google, araya giren geçiş reklamları olan siteleri, yani bir sitenin içeriğini kapsayan katılımları cezalandırmaya başladı. Bu, pop-up'ları (ister hemen ister bir kullanıcı sitede bir süre kaldıktan sonra gösterilsin) ve kullanıcının sayfadaki içeriğe erişmeden önce reddetmesi gereken diğer tüm katılım türlerini içerir. Google'ın konuyla ilgili duruşuyla ilgili her şeyi buradan okuyabilirsiniz.

WordPress sitenizi mobil uyumlu tutmak ve en iyi uygulamaları takip etmek için mobil tasarımınızda pop-up'lardan kaçının. Bunu nasıl yapacağınız, aboneliklerinizi destekleyen hizmete bağlı olacaktır, ancak çoğu sağlayıcının mobil cihazlarda araya giren açılır pencereleri devre dışı bırakma seçeneği olmalıdır.

6. Duyarlı Medya için Strateji Oluşturun

İster bir portföy sitesi, ister günlük bir blog veya bir e-ticaret sitesi ile çalışıyor olun, duyarlı bulmacanın önemli bir parçası, sitenizdeki medyayı dikkate almaktır. Ana sayfanızdaki bu büyük arka plan resmi, bir masaüstü makinede harika görünebilir, ancak doğru şekilde ölçeklenemezse, tüm bağlamını kaybedebilir ve telefonda zor bir görüntüleme deneyimine yol açabilir. Duyarlı medyanın bir numaralı kuralı? İşlerin nasıl ölçeklendiğini düşünün.

Ölçeklendirme aslında siteniz için en iyi çözüm değilse, siteniz bir mobil cihaza yüklendiğinde belirli öğeleri gizlemeyi de düşünebilirsiniz. Bu, deneyimi basitleştirmeye ve kullanıcıları en önemli içeriğe daha hızlı ulaştırmaya yardımcı olur.

Son olarak, sitenize eklediğiniz medyanın dosya boyutunu da aklınızda bulundurmanız gerekir. Bu sadece mobil deneyimi iyileştirmekle kalmayacak, aynı zamanda masaüstü yükleme süresini de iyileştirecektir! Medya dosyaları genellikle bir web sitesindeki en büyük dosyalardan bazılarıdır, bu da onları yükleme çubuklarının ve uzun bekleme sürelerinin nedeni yapar. Sitenizi kolaylaştırmaya ve mobil performansı artırmaya yardımcı olmak için, ihtiyacınız olan kaliteyi korurken mümkün olan en küçük dosya boyutunu kullanarak resimlerinizi optimize etmeye çalışın. (Örneğin, mobil siteniz bir resmin masaüstünden daha küçük bir sürümünü yüklüyor olabilir!)

7. Site Performansına Öncelik Verin

Sayfa hızı, sitenizin Google masaüstü aramalarında nasıl sıralandığı açısından uzun süredir önemliydi ancak Temmuz 2018 itibarıyla artık mobil sıralamalar için de durum böyle. İnternet aramalarının %60'ından fazlasının mobil cihazları kullandığını ve sitenizin performansının (her cihazda) artık her zamankinden daha önemli olduğunu gösteren yukarıdaki istatistikle eşleştirin.

Görüntüler, performans denkleminin büyük bir parçasıdır, ancak kodunuz ve WordPress sunucunuz da büyük bir rol oynar.

Kodunuz söz konusu olduğunda, küçültme gibi eylemleri göz önünde bulundurun (özellikle özel bir temayla çalışıyorsanız). Sitenizde yüklü olan tüm eklentilerin envanterini çıkarın ve artık gerekmeyenleri devre dışı bırakın ve kaldırın. Temel olarak, sitenizi güçlendiren öğeleri ne kadar düzenli tutarsanız, o kadar iyi durumda olursunuz.

WordPress sunucunuza gelince, önbellek teknolojisi, CDN gibi hizmetleri ve Google Cloud Platform gibi güvenilir sağlayıcılar tarafından desteklenen altyapıyı içeren kaliteli bir iş ortağı kullandığınızdan emin olun. Sitenizi WP Engine üzerinde barındırıyorsanız, tüm bu alanlarda hazırsınız demektir.

Giderek daha fazla insan internete erişmek için akıllı telefonlarını veya tabletlerini kullandıkça, site tasarımcılarının bu kullanım kalıplarını ele almak için ayarlama yapması gerekiyor. Peki, siteniz mobil ziyaretçileriniz için hazır mı? Sitenizin hangi yönlerini değiştirmek zorunda kaldınız? Duyarlı bir tasarım oluşturmak için hangi araçları kullandınız? Deneyiminizi yorumlarda paylaşın!

30'dan Fazla Premium (Ve Mobil Uyumlu!) Temaya Erişin

WP Engine tarafından barındırılan WordPress ve StudioPress temalarına ve Genesis Framework'e erişim sağlayarak kendinize biraz zaman (ve para!) kazandırın. Temalar tamamen duyarlıdır ve kolayca özelleştirilebilir, mobil uyumlu bir site oluşturmaya çalışırken size zaman kazandırır. Ayrıca, WP Engine'in güçlü platformu, sitenizin performansını optimize ederek, bu sayfa hızlarının yüksek kalmasına ve sitenizin sıralamasının iyi olmasına yardımcı olur.