WordPress sitenizi nasıl mobil uyumlu 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, duyarlı bir site oluşturmak için biraz çalışma gerektirebilir. Bu kılavuz, mobil uyumlu 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 size en iyi araçları 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 Testine katılın
3. Duyarlı bir WordPress teması kullanın (veya kendinizinkini oluşturun)
4. Mobil uyumlu WordPress eklentilerini düşünün
5. Mobil uyumlu tercihleri ​​kullanın
6. Duyarlı medya açısından düşünün
7. Site performansına öncelik verin

Hazır? Hadi 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 üzerinden telefon ve tabletlere yöneldiği anlamına geliyor, bu nedenle bunlara ayak uydurabilmek için web sitenizin herhangi bir ekran boyutunda görüntülenmeye hazır olması gerekiyor. 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, çok önemli bir veri noktasına geldi: web sitenizin duyarlı olup olmadığı.

Bu, siteniz mobil cihazlarda iyi okunursa, aramayan sitelere göre arama sonuçlarında daha iyi performans göstereceği anlamına gelir. Mobil uyumlu bir site oluşturma işini yaptıysanız, bu oldukça hoş 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 birçok araç vardır. İlk adım? Mevcut tasarımınızı kıyaslayın.

2. Mobil uyumluluk testi yapın

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

İşleri basitleştirmek için Google, sitenizin "mobil uyumlu" olup olmadığını size söyleyecek ücretsiz, mobil uyumlu bir test aracı hediye etti. Sitenizin mobil tasarımının hızlı bir değerlendirmesi için sitenizin URL'sini girmeniz yeterlidir. Web siteniz mobil cihazlar için tamamen 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. (Buna birazdan geleceğiz!)

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

Google, tüm geliştiriciler için, URL'leri otomatik araçlarla test etmenize olanak tanıyan bir Mobil Dostu Test API'sı da yayınladı. Bunun yararı, daha fazla sayfayı hızlı bir şekilde test edebilmenizdir, ancak sitenizdeki en önemli sayfaları da her zaman manuel olarak tarayıcı aracına dönmek zorunda kalmadan izleyebilirsiniz. Puan!

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 sorun yaşamama ihtimaliniz 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. Oradaki her tema için konuşamam, ancak bazı güncellemeler mobil uyumlu öğeler içerecek ve sorunlarınızı çözmeye yeterli olabilir. Örneğin, WordPress 4.4, duyarlı görüntüler için gerçekten düzgün 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.

En iyi mobil uyumlu WordPress temaları

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

Gördüklerinden memnunsan, git! Ama bir şey doğru görünmüyorsa, uzak durun. 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 işe yarayacak başka bir tane bulacağınızı garanti ederim.

Ücretsiz temalara bakıyorsanız, kendi içeriğinizle nasıl göründüğünü gördüğünüzden emin olun - bildiğinizden emin olduğum gibi, işler her zaman tamamen aynı görünmüyor, bu yüzden içeriğinizi en iyi şekilde gösterdiğinden emin olun. mobilde istediğiniz şekilde.

Nereden başlayacağınızdan emin değil misiniz? WordPress sitenizi Flywheel'de barındırdığınızda, planınızla birlikte 30'dan fazla premium StudioPress temasına (Genesis Framework dahil!) ücretsiz olarak erişebilirsiniz. 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 "bir" 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 tercih ediyorsanız, sıfırdan veya bir test ortamında başladığınızdan emin olun - canlı sitenizde asla böyle büyük değişiklikler yapmamalısınız.

Doğrudan makinenizde yerel bir WordPress sitesini başlatmak için Yerel'i kullanmanızı öneririm. Bu ücretsiz uygulama, mevcut sitenizi asla bozmadan kalbinizin içeriğini denemenize izin verecektir (bu, yeniden tasarımdan geçerken çok önemlidir ). Hatta mevcut sitenizi Yerel'e 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 telefonunuza ç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şlıyor ve 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.

Kendinize 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 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, böylece her zaman ön uca görsel olarak 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 veya en azından size daha küçük ekran boyutlarında devre dışı bırakma seçeneği sunduğundan emin olun.

Örneğin, bir kenar çubuğu widget'ı bir masaüstü sitesine harika bir ektir, ancak mobil tasarıma hakimse veya ölçeği küçültmezse, çok harika 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. Ve ne zaman yeni bir eklenti etkinleştirirseniz, ekran boyutları arasında doğru şekilde ölçeklendiğinden emin olmak için sitenizin hızlı bir kalite kontrolünü 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 açılır pencere eklemekten kaçının

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

Bununla birlikte, açılır pencereler farklı bir canavardır. Google, müdahaleci geçiş reklamları, yani bir sitenin içeriğini kapsayan tercihler içeren siteleri cezalandırmaya başladı. Buna pop-up'lar (ister bir kullanıcı sitede bir süre kaldıktan hemen sonra veya sonra görüntülenirler) ve bir kullanıcının sayfadaki içeriğe erişmeden önce kapatması gereken diğer her tür katılım dahildir. 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 açılır pencerelerden kaçının. Bunu nasıl yapacağınız, tercihlerinizi 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, bir günlük 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ü bilgisayarda harika görünebilir, ancak doğru şekilde ölçeklenmezse tüm bağlamı kaybedebilir ve telefonda zor bir görüntüleme deneyimine yol açabilir. Duyarlı medya için bir numaralı kural mı? İşlerin nasıl ölçeklendiğini düşünün.

Ölçekleme siteniz için gerçekten 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 tutmanız gerekir. Bu sadece mobil deneyimi iyileştirmekle kalmayacak, aynı zamanda masaüstü yükleme süresini de iyileştirecek! Medya dosyaları genellikle bir web sitesindeki en büyük dosyalardan biridir ve bu da onları yükleme çubuklarının ve uzun bekleme sürelerinin nedeni yapar. Sitenizi düzene sokmaya 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 itibariyle, artık mobil sıralamalar için de durum böyle. İnternet aramalarının %60'ından fazlasının mobil cihazlar kullandığı ve sitenizin performansının (her cihazda) artık her zamankinden daha önemli olduğu şeklindeki yukarıdaki istatistikle eşleştirin.

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

Kodunuz söz konusu olduğunda, küçültme gibi işlemleri düşünün (ö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, önbelleğe alma teknolojisi, CDN ve Google Cloud Platform gibi güvenilir sağlayıcılar tarafından desteklenen altyapı gibi hizmetleri içeren kaliteli bir ortak kullandığınızdan emin olun. Sitenizi Flywheel'de barındırıyorsanız, tüm bu alanlarda hazırsınız demektir. Ayrıca, sitenizin her cihazda en iyi performansı gösterdiğinden emin olmak için sorun gidermede bir adım daha ileri gitmenize yardımcı olacak Performance Insights Eklentimizi bile sunuyoruz.

Gittikçe 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ına göre ayarlanması 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!) StudioPress temasına erişin

Flywheel ile ev sahipliği yaparak ve StudioPress temalarına ve Genesis Çerçevesine erişerek kendinize biraz zaman (ve paradan!) tasarruf edin. Temalar tamamen duyarlıdır ve özelleştirilmesi kolaydır, mobil uyumlu bir site oluşturmaya çalışırken size zaman kazandırır. Artı Flywheel'in güçlü platformu, sitenizin performansının uçmasını sağlayarak bu sayfa hızlarının yüksek kalmasına ve sitenizin iyi bir sıralamaya sahip olmasına yardımcı olur.

Bu makale ilk olarak 22-17-2017 tarihinde yayınlandı. En son 10-2-2020 güncellendi.