Etkili Bir Mobil Açılış Sayfası Nasıl Oluşturulur

Muhtemelen zaten duyarlı bir WordPress teması seçtiniz. Çoğu modern tema, mobil trafiğin artan önemini hesaba katar. Ama daha ileri gittin mi? Mobil açılış sayfanız için özel bir çaba harcadınız mı?

Bu yazıda, kaliteli bir mobil açılış sayfası oluşturmak için duyarlı tasarımın tek başına yeterli olmadığını iddia edeceğim. Bir adım daha ileri gitmeniz gerekiyor. Bu gönderide, size mobil açılış sayfaları oluşturmak için en iyi uygulamalardan bazılarını vereceğim. Ayrıca daha ileri gideceğim ve bu ipuçlarının birçoğunu Divi ve Divi Builder ile nasıl kolayca uygulayacağınızı göstereceğim.

Mobil Trafiği Neden Önemsemelisiniz?

Hâlâ masaüstü ziyaretçilerinin kral olduğu bir hayal dünyasında yaşıyorsanız, size yaşatacağım şok için özür dilerim…

Hitwise'ın 2016 raporuna göre, Google aramalarının ~%58'i artık mobil cihazlardan yapılıyor. Bu, AdWords'ten aynı şeyi kabul ettikleri (sınırlı pazarlar için olsa da) 2015 tarihli bir blog gönderisiyle örtüşüyor.

Ve bu arama yapanlar web sitenize geldiğinde riskler yüksektir – siteniz mobil uyumlu değilse, bunların ~%40'ı başka bir sonuç seçecektir.

Mobil trafik de düşündüğünüzden daha fazla satın alma odaklıdır. Örneğin, çevrimiçi Black Friday alışverişlerinin %40'ı şaşırtıcı bir şekilde mobil cihazlardan geldi. Gerçek dolar olarak, bu, mobil cihazlardan yapılan satışlarda bir milyarın üzerindeydi.

Bunun gibi sayılarla, cep telefonunu görmezden gelemezsiniz.

Mobil Açılış Sayfasını Farklı Kılan Nedir?

1366 x 768…

Bu, masaüstü bilgisayarlarda en popüler ekran çözünürlüğüdür.

Mobilde ne olduğunu biliyor musun?

• iPhone 7 – 375 x 667
• Google Piksel – 411 x 731
• Samsung Galaxy S7 – 340 x 640

Bu sayıların oldukça farklı olduğunu anlamak için bir matematikçiye gerek yok.

Öncelikle, mobil sadece düz bir şekilde daha küçük bir görünür çözünürlüğe sahiptir. İkincisi, en boy oranı tamamen ters çevrilir.

Farklı dokunma dinamiklerini ekleyin ve mobil açılış sayfası tasarımının masaüstündeki karşılığına mükemmel bir şekilde benzemesini bekleyemezsiniz.

Mobil Açılış Sayfası En İyi Uygulamaları

Bu en iyi uygulamalar için genel açılış sayfası en iyi uygulamalarına fazla değinmeyeceğim. Cihazdan bağımsız olarak tüm açılış sayfaları için geçerli olan kavramlar vardır. Genel ipuçları istiyorsanız, açılış sayfalarında zaten bazı gönderilerimiz var:

• Divi Lead'lerle Sıfırdan Etkili Bir Açılış Sayfası Nasıl Oluşturulur
• Divi Kullanılarak Oluşturulan 5 Yüksek Dönüşümlü Açılış Sayfası
• WordPress Kullanarak Açılış Sayfaları Oluşturun

Mobil açılış sayfalarına özel ipuçları için okumaya devam edin…

Gereksiz Öğeleri Kaldırarak Dikkat Dağınıklığını En Aza İndirin

İster mobil ister masaüstü olsun, açılış sayfanızda asla dikkatinizin dağılmasını istemezsiniz. Ancak bir cep telefonunun küçük ekranında riskler daha yüksektir… ve dikkati dağıtan şeyin tanımı daha geniştir.

Mobil ekranlar küçüktür – bu nedenle başlığınız, alt başlığınız ve CTA'nız muhtemelen görüntülenebilir alanın çoğunu zaten kaplayacaktır. Diğer büyük öğeler, okuyucularınızın CTA'nızı tamamlamasını engelleme riski taşır.

Divi kullanıyorsanız, sitenizin mobil uyumlu sürümünden bazı öğeleri kolayca kaldırmayı seçebilirsiniz.

Nasıl olduğundan emin değil misin?

Divi Builder'a yeni bir modül eklediğinizde, General Settings altındaki Disable on ayarına kaydırmanız yeterlidir:

Telefon öğesinin yanındaki kutuyu işaretlerseniz, söz konusu modül mobil kullanıcılar için görüntülenmez. Modüle bağlı olarak Tablet'i de kontrol etmek isteyebilirsiniz.

Belirli modülleri devre dışı bırakırsanız, bunu özel bir yönetici etiketi kullanarak not etmek iyi bir en iyi uygulamadır. Yönetici Etiketi kutusu ayrıca Genel Ayarlar'ın altındadır:

Böylece mobilde bir modülün devre dışı bırakıldığını hatırlatan bir not oluşturabilirsiniz. Bunun gibi bir şey:

Bu gerekli değildir – ancak daha sonraki bir tarihte sayfanızda değişiklik yapmanız gerekirse oldukça yararlıdır.

Mobilde Başlığınızı Kısaltın

Mobilde daha az görüntülenebilir alanınız olduğundan, başlığınızı cesur ve dikkat çekici tutmak istiyorsanız kısaltmanız gerekir.

Divi kullanıyorsanız, yukarıda özetlediğim konsepti kullanarak başlığınızın farklı versiyonlarını görüntüleyebilirsiniz. Bunun dışında bir ekleme yapmanız gerekecek.

Başlığınızı içeren bir modül yerine iki tane oluşturun. Mobil cihazlarda ve tablette başlığınızın masaüstü sürümünü devre dışı bırakın ve masaüstünde başlığınızın mobil/tablet sürümünü devre dışı bırakın.

Bam! Harici çözümlere başvurmak zorunda kalmadan mobil açılış sayfanızın başlığını kısaltmanın basit bir yolu.

Ziyaretçiler sitenize gittiğinde, yalnızca kendi cihazları için etkinleştirilen başlığı göreceklerdir.

Kopyanızı da Kısaltın

Budanması gereken sadece manşetler değil, aynı zamanda mobil ziyaretçilerin gerçekten takılıp okumasını istiyorsanız metninizi kısaltmanız gerekir. Ortalama mobil oturum uzunluğu, ortalama masaüstü oturumunun süresinin yaklaşık yarısı kadardır.

Bu nedenle, sitenizin masaüstü sürümünde iyi dönüşüm sağlayan aynı uzun biçimli kopya, mobil cihazlarda aynı şeyi yapmayabilir.

Kopyanızı temel gereksinimlere kadar kesin. Şüphe duyduğunuzda, arkadaşlarınıza kopyanızı mobil cihazlarda gösterin. Uzunluk onlar için bunaltıcıysa, muhtemelen ziyaretçilerinizi de bunaltacaktır.

Farklı cihazlar için farklı kopya sürümleri eklemek için yukarıda özetlediğim aynı Divi hilesini kullanabilirsiniz.

Google'ın Mobil Önerilerini Takip Edin

Kullanılabilir açılış sayfaları, iyi açılış sayfalarıdır. Okuyucularınız sayfanızdaki metni okumakta zorlanıyorsa, iyi bir dönüşüm sağlamayacaktır. Kimse sadece neler olduğunu anlamak için yakınlaştırma ve kaydırma yaparak zaman harcamak istemez.

Neyse ki, kullanışlı bir sayfanın ne olduğunu bulmaya çalışmanıza gerek yok. Google, web'deki mobil kullanıcı deneyimini iyileştirme çabalarının bir parçası olarak mobil kullanılabilirlik yönergeleri oluşturmuştur.

Örneğin Google, mobil cihazlarda minimum 16 piksellik bir yazı tipi boyutu kullanmanızı önerir. Bu, normal metninizin 16 piksel olması gerektiği anlamına gelir – başlıklar daha büyük olmalıdır.

Peki ya metin boyutunuzu tüm cihazlar için 16 piksel yapmak istemiyorsanız? Divi kullanıyorsanız, aslında farklı cihazlar için farklı yazı tipi boyutları ayarlayabilirsiniz.

Divi → Tema Özelleştirici'ye gidin . Ardından Mobil Stiller kutusunu bulun ve Telefon'a tıklayın.
Burada, sitenizin mobil sürümü için özel olarak özel metin boyutları yapılandırabilirsiniz:

Google'ın önerilerinin çoğunu Google Arama Konsolundaki Mobil Kullanılabilirlik Raporunda bulabilirsiniz (raporu çalıştırmak için sitenizin Arama Konsolunda Mülk olarak eklenmesi gerekir). Bu, eskiden PageSpeed ​​Insights'ın bir parçası olan raporun aynısıdır.

Telefon Numaralarını Tıklanabilir Yap

Bu büyük bir kişisel evcil hayvan çileği…

Ziyaretçileriniz mobildeyse, kesinlikle sizi aramaya hazırdırlar. Zaten gerekli cihazı ellerinde tutuyorlar!

Bu yüzden aramalarını zorlaştırma. Numaranızı hatırlamaya veya kopyalayıp yapıştırmaya zorlamak yerine, sizi hemen aramaları için numaranıza tıklamalarına izin verin.

Hem Divi'ye hem de diğer WordPress sitelerine tıkla ve ara işlevini nasıl ekleyebileceğinize dair bir yazımız var.

CTA'nızı Kolay Tıklanabilir Bir Konumda Yerleştirin

Bir bilgisayar ekranında, ziyaretçiler ekranınızdaki hemen hemen her yere kolaylıkla tıklayabilirler. Ancak cep telefonlarında işler o kadar esnek değil.

UX Matters'ın araştırması, telefon tutmanın en yaygın yöntemleri için tıklanabilir alanları gösterir. Örneğin, okuyucularınız bir eliyle bir telefon tutuyorsa, tıklanabilir alanları aşağıdakilerden birine çok benzer:

Resim Kaynağı: UX Önemlidir

Tam UX Matters makalesi, tüm yaygın el pozisyonları için bu tür örnekleri içerir.

İyi bir genel kural, CTA'nızı ekranın sol alt çeyreğine koymaktır. Telefonlarını nasıl tutarlarsa tutsunlar, çoğu sağ elini kullanan kullanıcılar için tıklaması kolay olmalıdır.

Mümkünse Form Boylarını Kısaltın

Kullanıcılarınızdan açılış sayfanızda bir form doldurmalarını istiyorsanız, örneğin bir katılım, bu formun ne kadar uzun olduğunun farkında olmanız gerekir. Kullanıcılarınızın mobil klavyede yazdığını unutmayın – formunuz çok uzunsa veya çok fazla can sıkıcı onay kutusu içeriyorsa, ziyaretçileriniz formu tamamen silebilir.

Daha kısa formlar genellikle daha iyi dönüştürülür.

Ek olarak, ziyaretçilerin dokunmatik dokunuşları kullanması için form alanları arasında yeterli boşluk olduğundan emin olmanız gerekir. Parmaklar, fare ile aynı kesinlik doğruluğuna sahip değildir, bu nedenle mümkünse form alanları arasında biraz daha fazla arabelleğe ihtiyacınız vardır.

Sayfa Yükleme Süreleri Her zamankinden Daha Önemli

Açıkçası, bu kesinlikle mobil değil. Sayfa yükleme süreleri, web sitenizin her bir sürümü için önemlidir.

Ancak, ziyaretçiler (genellikle) daha hızlı ev bağlantıları yerine mobil veri kullanıyorsa, yavaş yüklenen bir mobil sitenin sonuçları daha da feci olabilir.

Aslında, mobil ziyaretçilerin %74'ünün yüklenmesi 5 saniyeden uzun süren bir web sitesini terk etmesi muhtemeldir.

Dolayısıyla, mobil açılış sayfanız yavaş yükleniyorsa, yalnızca kullanıcı deneyiminizi düşürmekle kalmıyorsunuz… onları tamamen uzaklaştırıyorsunuz.

Yukarıda bahsettiğim "dikkat dağıtıcı unsurları en aza indir" adımını tamamladıysanız, umarım sitenizin mobil versiyonundan bazı gereksiz öğeleri kaldırmışsınızdır. Büyük resimleri ve videoları kaldırmak, mobil açılış sayfanızın sayfa yükleme süresini iyileştirmede uzun bir yol kat edecektir.

Sayfa yükleme sürelerini iyileştirmeye yönelik diğer ipuçlarımızı takip etmek, ziyaretçileriniz ister mobilde ister masaüstünde olsun, büyük bir fark yaratacaktır.

Eşyaları Sarmak

Masaüstü açılış sayfaları için geçerli olan aynı genel dönüşüm ilkelerinin çoğu, mobil açılış sayfalarına taşınsa da hepsi aynı değildir.

Genel olarak, mobil açılış sayfanız için kesinlikle göz önünde bulundurmanız gereken iki husus şunlardır:

• Büyük ölçüde azaltılmış görünür çözünürlük. Daha az gayrimenkul ile daha özlü ve minimalist olmanız gerekir.
• Dokunmanın eksiklikleri. Ziyaretçilerinizin faresi olmadığını her zaman hatırlayın – gezinmenin basit olması gerekir.

Bu iki ilke her şey olmasa da, onları aklınızda tutarsanız (ve diğer ipuçlarımı takip ederseniz), rekabetin çoğundan önde olacaksınız.

Siteniz için özel bir mobil açılış sayfası oluşturmak için Divi'yi kullandınız mı? Bunu yapmak için ek ipuçlarınız varsa, onları duymayı çok isterim.

Makale küçük resmi inspiron.dell.vector / Shutterstock.com