"Önce mobil", web sitesi uzmanları tarafından yaygın olarak kullanılan bir terimdir, ancak bu gerçekten ne anlama geliyor? Esasen, masaüstü deneyiminden ziyade mobil deneyiminiz olan bir web sitesi (veya yazılım) tasarladığınız zamandır. Cep telefonlarında web'e göz atan kişilerin sayısı son birkaç yılda önemli ölçüde arttı ve daha da büyüyeceği tahmin ediliyor . Bu nedenle mobil cihazlarda güzel bir web sitesi potansiyel ziyaretçileri çekmek ve mobil cihazlarda hemen çıkma oranınızı en aza indirmek için çok önemlidir. Bazı insanlar, web sitelerinin masaüstünde harika göründüğünü varsayarlar, bu nedenle mobil cihazlarda harika, mini bir sürüm gibi görünecektir, ancak durum böyle değildir. Web sitenizin trafiğinin büyük bir kısmı mobil sayfa görüntülemelerinden geliyorsa (bunu İstatistiklerinizden kontrol edebilirsiniz) o zaman kesinlikle web sitenizi mobil cihazlar için optimize etmelisiniz. Bu yüzden bazı yaygın mobil web sitesi tasarım tuzaklarını ve bunlardan nasıl kaçınacağımızı bir araya getirdik! Mobil cihazlara uygun bir web sitesi oluşturma konusunda adım adım açıklamalı eğiticimize de göz atın . 1. Hata: Mobil bir duyarlı şablonunuz yok Muhtemelen birkaç yıl önce web sitenizi oluşturdunuz ve şimdi nihayet istediğiniz şekilde görünüyor (masaüstünüzde). Şablonunuzu iyi bir süre içinde değiştirmediyseniz, eski şablonlarımızdan birini hala kullanma şansınız vardır. Eski şablonların şehir adı yerine bir kodu vardır (örn. F4242), "mobil uyumludur" ancak modern "duyarlı" şablonlar kadar iyi görünmezler (bir şehirden sonra adlandırılır). Peki, nasıl daha iyi yanıt verebiliriz? Web siteniz, ziyaretçinizin kullandığı cihazın boyutuna otomatik olarak "yanıt verir". Çözünürlük, görüntüler ve menü, tablet, masaüstü veya akıllı telefon kullansalar da mükemmel görünür. Ayrıca Google sizi daha kolay bulabildiğinden SEO'nuz için daha iyidir . Belki web sitenizi henüz bir mobil / tablette kontrol etme şansınız olmadı mı? Yoksa şablonunuzu güncellemek ve tüm web sitenizi yeniden çalışmaktan rahatsız olmaz mısınız? Nereden geldiğinizi tamamen anlıyoruz. Ama çevrenizdeki tüm insanlara toplu taşıma araçlarında göz gezdirirken bir göz atın. Hepsi bir hafta boyunca her gün fazladan bir saatlik çalışma için kazanabileceğiniz potansiyel ziyaretçilerdir. Yanıt vermeyen bir şablon örneği. İletişim formu sayfadan çıkar. Mobil cihazlarda duyarlı şablon Yeni duyarlı şablon mükemmel görünüyor. Çözüm: Geçerli şablonunuzu görmek için menünüzü açın ve Tasarım> Ana> Şablonlar'ı seçin. Mevcut şablonunuz sol üst köşede görünecektir. Jimdo şablonunuzun bir şehrin adı olduğundan emin olun (örn. Stockholm). Değilse, duyarlı değildir ve şablon tasarımınızı daha modern bir şeye değiştirmenizi önemle tavsiye ederiz . Şunları yapabilirsiniz Bu aracı kullanmak web sitesi her cihazda nasıl göründüğünü kontrol etmek! Web sitenizi oluşturun 2. Hata: Resimleriniz veya videonuz web sitenizi yavaşlatıyor Web sitenizi bir mobil cihazdan arayın ve “1-2-3…” yüklemesinin ne kadar sürdüğünü sayın. 3 saniye veya daha uzun sürdüyse sayfanıza göz atmanız ve neyi yavaşlattığınızı anlamanız gerekir. Asıl şüpheliler herhangi bir video, animasyon veya ekstra eklenti olma eğilimindedir. Bunların web sitenize gerçekten değer katıp katmadığını ve sayfa yükleme süresindeki artışa değip değmeyeceğini düşünün (mobil veri tüketiminden bahsetmiyoruz!). Google, web sitenizdeki birçok mobil sorunu teşhis etmenin basit ve ücretsiz bir yolunu sunar . Web sitenizin URL'sini yazmanız yeterlidir ve size mobil web siteniz için önerilen bazı iyileştirmeler sunulur. Harici JavaScripts'e dayanan widget'ların veya sosyal paylaşım düğmelerinin yükleme sürenizi yavaşlatacağını unutmayın. Daha hızlı yükleme süresi için 2-4 sosyal medya kanalına öncelik verin veya yerleşik Jimdo paylaşım düğmelerini kullanın. İyi bir uygulama, web sitenizdeki resimleri optimize etmektir. Bu, gerekirse bir görüntüyü yeniden boyutlandırmak ve dosya boyutunu küçültmek anlamına gelir. Orada araçlar bol herhangi bir kalite kaybı olmadan, bir görüntüyü sıkıştırmak yardımcı olabilir orada. Görüntü yoğun bir sayfadaki veya arka plan resmindeki dosya boyutunda küçük bir azalma bile gözle görülür bir etki yaratabilir. Sayfa yükleme sürelerinin Google tarafından bir SEO faktörü olarak kullanıldığını unutmayın, böylece sayfanızın yüklenmesi biraz zaman alırsa sıralamanızı olumsuz etkileyebilir. Çözüm: Web sitenizin mobil cihazlara yüklenmesi ne kadar sürdüğünü kontrol edin, ardından web sitenizi yavaşlatabilecek öğeleri kaldırmak veya optimize etmek için web sitenizi denetleyin. Hata 3: Görsel hiyerarşi yok Çok fazla şey oluyor ve gözünüz Logo, Başlık veya Harekete Geçirici Mesaj'a odaklanıp odaklanmayacağını bilmiyor. Mobil bir web sitesinden geçmek zaman alıcıdır, bu nedenle içeriği mantıksal olarak bölümlere ayırarak kullanıcı deneyimini çok daha kolay hale getirin. Ardından H1, H2 ve H3 etiketlerini kullanarak her bölüm için ayrı Başlıklar oluşturun . Sezgisel bir kullanıcı deneyimi sunmak, kullanıcıları daha uzun süre meşgul edecek ve web sitenizde satın alma şansını artıracaktır. Ziyaretçileriniz için önemli bilgiler web sitenizin üstünde olmalıdır. Ardından daha ayrıntılı bilgilere geçin. Ziyaretçinin 5 W'ları görmeyi ve cevaplamayı beklediğini düşünün: Kim? Ne? Neden? Ne zaman? Nerede? Ardından, web sitenizde önemli satış noktalarını veya mesajı görüp göremeyeceğinizi kendinize sorun. Mobil web sitesi tasarımında görsel hiyerarşi Net bir yapıya ve görsel hiyerarşiye sahip bir web sitesi örneği Çözüm: Bir site planı yapın. Bu, gereksiz ekstraları kırpabilmeniz için web sitenizin bir taslağını oluşturmanıza ve kategoriler oluşturmanıza yardımcı olur. 4. Hata: Web sitenizi okumak zor Dünyanın en büyük içeriğine sahip olabilirsiniz, ancak kimse gözlerini kısarsa ve okumak için bir metni sıkıştırmak veya yakınlaştırmak zorunda kaldığında okumaz. Bu sorun, ekran boyutundan dolayı akıllı telefonlarda tabletlerden daha da belirgindir. Bu süslü serif yazı tipi bir masaüstünde harika görünmüş olabilir, ancak şimdi bir mobil cihazda okumak biraz zor. Açık Sans veya Roboto gibi okunması kolay bir sans serif yazı tipini deneyin, ardından yazı tipi boyutunuzun yeterince büyük olup olmadığını kontrol edin. Genel bir kural, gövde metninizi en az 16pt tutmak, ancak bu sayının kullandığınız yazı tipine bağlı olduğunu unutmayın. Bazı arka plan resimleri, dışarıdayken okunabilirliği azaltarak metninizin okunmasını zorlaştırabilir. Bu yüzden birbirinizi tamamlayan basit bir arka plan rengine ve metin rengine sadık kalın. Arka planınız ve metniniz arasındaki kontrastın, metnin okunması kolay olacak kadar güçlü olduğundan emin olun Çözüm: Web sitenizi her zaman Görüntüleme Modunda kontrol edin . Bu özellik web sitenizi masaüstünde görüntülemenizi ve mobil / tablet kullanıcıları için nasıl görüneceğini önizlemenizi sağlar. Arkadaşlarınızdan ve ailenizden cihazlarında web sitenize göz atmalarını istemeye değer. Metninizi okumada sorun yaşıyorlarsa, belki de web sitenizin görünümünü basitleştirmenin zamanı gelmiştir. Pop yapmak için bazı renk bloklarıyla düz beyaz bir arka plan sıkıcı olmak zorunda değil! Fail 5: Web siteniz kalabalık görünüyor Daha küçük bir ekranda beyaz alan bırakmak daha da önemlidir, böylece parmaklarınız harekete geçirici mesaj gibi bir düğmeye dokunabilir. Mobil cihazları kullanan kişilerin bir web sitesini rahatça kullanabilmeleri için beklediğiniz daha büyük metin ve düğmelere ihtiyacı vardır. Harekete geçirici mesajların (CTA) en az 30-40 piksel boyutunda olması gerekir. Mobil müşteriler dürtü alıcı olma eğilimindedir, bu nedenle web sitesinde gezinmek ve dokunmak zor değilse, işlemden ayrılmak için bir neden olabilir. Bu nedenle CTA'yı tanımanın ve etkinleştirmenin kolay olduğunu kontrol ettiğinizden emin olun. Çok sayıda öğe, resim ve renk web sitenizin darmadağın görünmesini ve ziyaretçilerinizi korkutmasını sağlayabilir. Bu durumda, paragraflar, metinler ve diğer öğeler arasında biraz boşluk bırakmanın zamanı geldi. Beyaz boşluk, sitenizin gezinmesini ve önemli olanı okumasını kolaylaştırır. Otobüsteki bir web sitesinde (benim gibi) ilerliyorsanız, muhtemelen okumaya devam edersiniz. Bu da ihtiyacınız olan bilgileri açıkça ortaya koymak istediğiniz anlamına gelir. Etrafta koşmak, örneğin cep telefonunda büyük metin yığınlarını okumak için fazla zaman bırakmaz. Metninizin kısa, taranabilir ve paragraflar arasında yeterince boşluk bırakılmış bir noktada olduğundan emin olun. Çözüm: Ziyaretçilerin bilgi konusunda bunalmış hissetmemesi için öğelerinizde ve metninizde yeterli boşluk olduğundan emin olun. Ayrıca, dokunmayı kolaylaştırmak amacıyla önemli içerik için metin içi bağlantı yerine bir düğme kullanmayı da deneyebilirsiniz. Web sitenizi oluşturun Hata 6: Form veya pop-up'ları olan insanları aşırı yüklüyorsunuz Havaalanında ücretsiz wifi almak için çevrimiçi bir form doldurmak zorunda olduğunuzu fark edince rahatsızlık hissi biliyor musunuz? Dokunmatik yüzeye yazmayı gerektiren pop-up'lar eklemeyi düşünün. Mobil bir cihazda navigasyon, bir dokunmatik yüzeye yazma zorluğu olmadan yeterince zor olabilir. Mümkün olan en az eylemle her şeyi mümkün olduğunca basitleştirmeye çalışın. Örneğin, bir memnuniyet anketi eklemeniz gerekiyorsa, bir gülen yüzle oy vermeyi kolaylaştırın ve ek yorumlarınız için bir metin kutusu ekleyin. Bir bülten aboneliği ise, mümkün olduğunca kolaylaştırmak için yalnızca önemli ayrıntıları veya açılır listeleri eklemeyi deneyin. Çözüm: JotForm tarafından sunulan çok çeşitli formlara göz atın veya örneğin Pure Chat ile bir sohbet penceresi ekleyin . Aşağıdaki örnekte de görebileceğiniz gibi, sayfanın altındaki konuşma balonu gibi göze batmayan bir eklenti bulabilirsiniz. Bu, kullanıcı deneyiminizi kesintiye uğratmaz ve ziyaretçilerinizin buna dokunma olasılığı daha yüksektir. Bunun ayrıca bir eklenti olduğunu unutmayın, böylece yükleme sürenizi yavaşlatabilir. blackyeti.com beyaz alanın ve net harekete geçirici mesajın önemini göstermektedir. Sayfanın altındaki konuşma balonuna dikkat edin. Bu canlı bir destek sohbet eklentisidir. Yalnızca üzerine dokunduğunuzda açılan gizli canlı sohbet desteği eklentisi. Mobil web tasarımının anahtarı sadeliktir. Daha küçük bir ekranda daha azı kesinlikle daha fazladır. Bir dokunmatik yüzeyin kullanıcı deneyimine getirebileceği zorlukları akılda tutmak önemlidir. Bu yüzden hile, sayfanızın parmaklar için tasarımını düşünmek, özelliklerin dokunmasını veya kaydırmasını kolaylaştırmaktır. Ziyaretçilerinizin en önemli bilgileri hemen bulabildiğinden emin olun ve ardından yukarıda sunulan ipuçlarına sadık kalın ve iyi olacaksınız! Gerçekten emin değilseniz, müşteriler veya arkadaşlarınızla her zaman kullanılabilirlik testlerini deneyebilirsiniz . Ücretsiz uygulamamızı henüz denemediyseniz, şimdi denemek için harika bir zaman. Masanızdan uzakta olduğunuzda bir mobil veya tabletten web sitenizi takip etmenin mükemmel bir yoludur.
