Mobil Öncelikli Açılış Sayfası
Mobil öncelikli açılış sayfası, önce akıllı telefon ekranları için tasarlanıp oluşturulan, sonra tablet ve masaüstüne uyarlanan bir sayfadır.
Önemli noktalar
- Temel stiller dar düzeni tarif eder; min-width sorguları alan açıldıkça sütun ekler.
- Dardan başlamak sayfa sırasını süslemeden önce belirler; asıl kaldıraç sıradır.
- Geniş ekranlar içeriğin miktarını değil dizilimini değiştirmelidir.
- Ana eylemi üst köşeye değil, başparmağın dinlendiği yere koyun.
- Mobil öncelikli sıralama sayfayı hızlandırmaz; yük ayrı bir karardır.
Derinlemesine
Mobil öncelik, kararlar için bir sıralama kuralıdır ve CSS'te bu kural harfiyen geçerlidir: temel stiller dar düzeni tarif eder, min-width sorguları görüntü alanı büyüdükçe sütun ve boşluk ekler. Dardan başlamak, her ögenin kendini tek bir sütuna ve bir başparmağa karşı savunmasını gerektirir; böylece sayfanın sırası, süslemesinden önce belirlenir. Bu elemeden geçen şey, her geniş ekranın devraldığı temel katman olur; masaüstü sürümü de kaynak değil, bir zenginleştirme hâline gelir.
Disiplin çıkarma yoluyla kazandırır ve maliyeti de buradadır. Tek sütun katı bir sıra dayatır; tartışmayı kaybeden içerik aşağı iner ya da kademeli gösterimin arkasına geçer. Aynı içerik geniş bir ekrana yayıldığında masaüstü düzeni cılız görünebilir. Ekipler o zaman büyük görüntü alanları için bölüm ekler ve kaçındıkları ayrımı sessizce geri getirir. Dürüst yaklaşım tek bir içerik kümesi tutar ve geniş ekranların miktarı değil dizilimi değiştirmesine izin verir.
Bir lead sayfasına uygulandığında sıra genelde iddia, tek eylem, sonra kanıttır; form ya da ilk soru uzun bir kaydırma gerektirmeden ulaşılabilir olur. Dokunma hedefleri gerçek boyut alır, ana düğme üst köşe yerine başparmağın dinlendiği yere oturur ve hassas nişan gerektiren her şey değiştirilir. Pivix quizi bu biçime uyar; ekran başına tek soru hiç kaydırma gerektirmez ve yakalama formu ancak katılımcı birkaç dokunuş yatırdıktan sonra çıkar.
Mobil öncelik bir varsayılandır, yasa değil. Masa başında satın alınan bir ürün, uzun bir karşılaştırma tablosu ya da trafiği ezici çoğunlukla masaüstü olan bir kampanya için önce masaüstü geçilmelidir; neredeyse kimsenin kullanmadığı bir ekran için tasarlamak kısıtı boşa harcar. Yöntem sayfayı kendi başına hızlandırmaz da: mobil öncelikli işaretleme yine ağır bir yazı tipi yığını ve üç izleme betiği taşıyabilir. Küçük tuval ayrıca hiyerarşiyi düzleştirebilir.
Pratikte örnek
Nasıl ölçülür
Belirleyici karşılaştırma, aynı kampanya içinde mobil ile masaüstüdür. Her cihaz sınıfı için dönüşüm oranını, ana eyleme kadar kaydırma derinliğini ve quiz ya da form tamamlanmasını izleyin. Mobil öncelikli bir yeniden kurulum masaüstüyle arayı kapatmalıdır; mobil iyileşirken masaüstü düşüyorsa kazanmadınız, takas ettiniz ve geniş kırılma noktası çalışma ister.
İki mobil sinyali işe yarar. Kısıtlı bağlantıda ilk etkileşime kadar geçen süre, dar düzenin gerçekten hafif mi yoksa yalnızca yeniden dizilmiş mi olduğunu gösterir. Dokunma isabeti, yani aynı denetime tekrarlanan dokunuşlar veya hemen yanına düşen dokunuşlar, çok küçük ya da birbirine çok yakın hedefleri işaret eder. Telefonlardaki oturum kayıtları ikisini de her panodan hızlı ortaya çıkarır.
Sık yapılan hatalar
Yaygın hata, telefonda kontrol edildiği için bir masaüstü tasarımına mobil öncelikli demektir. Terimin anlamı kararların sırasıdır; sonradan sıkıştırılan bir düzen, geniş bir görsel etrafında kurulmuş kahraman bölümünü, dört yığılı karta dönüşen dört sütunlu özellik satırını ve en sondaki formu korur. Bir sonraki sayfaya dar görüntü alanında başlayın, önce tek sütunu yazın ve geniş kırılma noktasını ancak ondan sonra açın.
İkinci hata, telefon düzenini telefon klavyesi olmadan tasarlamaktır. Ziyaretçi e-posta alanına dokunana kadar her şey doğru görünür; sonra klavye ekranın yarısını kaplar ve gönder düğmesi altında kalır, ikisini birden görmek imkânsızlaşır. Klavye açıkken test edin, etkin alan ile düğmeyi birlikte görünür tutun, klavyeyle çakışan yapışkan alt çubuklardan kaçının ve doğru tuş takımını çağıran giriş türlerini kullanın.
Sıkça sorulan sorular
Mobil öncelikli ile duyarlı tasarım aynı şey mi?
Hayır. Duyarlı tasarım bir düzeni kırılma noktalarına göre uyarlar; mobil öncelikli ise en küçük ekranı varsayılan alan bir tasarım felsefesidir. Mobil öncelikli olmadan duyarlı olabilirsiniz, ancak mobil öncelikli sayfalar neredeyse her zaman duyarlıdır.
Mobil öncelikli yaklaşım quiz hunilerini nasıl etkiler?
Her soruyu tek dokunuşla anında ilerleyen tam ekran bir adıma dönüştürür. Bu, katılımcıları akışta tutar ve bir scorecard'ın soruları arasındaki terk oranını azaltır.
Mobil dönüşümü en çok ne düşürür?
Ağır görseller ve betiklerden kaynaklanan yavaş yükleme süreleri başlıca sorundur; ardından küçük dokunma alanları ve garip klavyeler açan formlar gelir. Varlıkları sıkıştırın, medyayı geç yükleyin ve düğmeleri başparmağa göre boyutlandırın.
Mobil öncelikli tasarım ile duyarlı tasarım arasındaki fark nedir?
Duyarlılık sonucu tarif eder: her genişliğe uyum sağlayan tek bir düzen. Mobil öncelik ise işin sırasını tarif eder; önce dar durumu tasarlar ve yazar, sonra yukarı doğru zenginleştirirsiniz. Bir sayfa mobil öncelikli olmadan da duyarlı olabilir; bu genelde sığan ama ekran için tasarlanmış hissettirmeyen, sıkıştırılmış masaüstü sayfası gibi görünen bir mobil düzen olarak belli olur.
Açılış sayfasında dokunma hedefleri ne kadar büyük olmalı?
Nişan almadan basılabilecek kadar büyük; pratikte bir parmak ucu boyunda bir düğme ve çevresinde komşu denetimlerin yanlışlıkla basılmasını önleyecek boş alan demektir. Platform kılavuzları uyulmaya değer somut alt sınırlar yayımlar. Asıl risk boyuttan çok aralıktır: doğru boyutlu iki düğme yan yana konduğunda yine yanlış dokunuşlar üretir.
Yine de bir masaüstü sürümü tasarlamalı mıyım?
Evet, ayrı bir tasarım olarak değil, aynı sayfanın zenginleştirmesi olarak. Geniş ekranlar çok sütunlu dizilim, daha büyük görsel ve yan yana karşılaştırma kazanır; ama aynı içeriği aynı sırayla sunmalıdır. Masaüstünü ikinci bir tasarım gibi ele almak, içerik eşitliğinin bozulduğu ve izleme, metin düzenlemesi ve testlerin iki kez yapılmaya başlandığı yoldur.
Mobilde harekete geçirici mesaj nereye konmalı?
Başparmağın erişebileceği yere ve sayfa uzadıkça tekrarlanarak. Zaten ikna olmuş ziyaretçiler için üst kısımda bir örnek ve her kanıt bloğundan sonra bir örnek, geri kaydırmayı gerektiren tek bir düğmeden daha iyi çalışır. Kalıcı bir çubuk yardımcı olabilir, yeter ki içeriği örtmesin ve klavyeyle çakışmasın.
Trafiğimin çoğu masaüstüyse mobil öncelik yine doğru mu?
Otomatik olarak değil. Bir kampanya gerçekten masaüstünde yürüyorsa önce o bağlam için tasarlayın ve telefonu zenginleştirme sayın. Trafik dağılımını site geneli yerine kampanya bazında kontrol edin; ücretli sosyal bir kampanya ile sektörel bir bülten keskin biçimde ayrışabilir. Kısıt disiplini yine de korunmaya değer, çünkü tek ve net bir eylemi zorunlu kılar.
Mobil açılış sayfası ne kadar uzun olmalı?
Kararın gerektirdiği kadar; kaydırmak ucuzdur, aranan şeyi bulamamak değil. Telefon ekran başına daha az gösterir, dolayısıyla masaüstünde tek ekran olacak bir sayfa uzunluğundan bağımsız olarak birkaç ekrana dönüşür. Önemli olan her ekranın argümanı ilerletmesi ve eylemin hiçbir zaman bir iki ekrandan uzakta olmamasıdır.