Duyarlı Açılış Sayfası
Duyarlı açılış sayfası, düzeni her ekran boyutuna otomatik uyum sağlayan bir dönüşüm sayfasıdır; böylece masaüstü, tablet ve telefonlarda iyi görüntülenir ve çalışır.
Önemli noktalar
- Tek belge düzen kurallarını söyler; düzeni her görüntü alanı için tarayıcı hesaplar.
- Kırılma noktalarını güncel cihaz genişliklerine değil, içeriğin bozulduğu yere koyun.
- Mobilde gizlenen bölümler yine indirilir; yeniden akış tek başına ağırlık azaltmaz.
- Form, açılır menü ve yanıt düğmeleri, akış hatalarının önce gönderime mal olduğu yerlerdir.
- Bir ekrana sığmak, o ekranın kullanıldığı bağlama uygun olmakla aynı şey değildir.
Derinlemesine
Duyarlı sayfa, düzeni göreli terimlerle ifade edilmiş tek bir belgedir. Genişlikler yüzde veya ızgara payıdır, yazı ve boşluklar görüntü alanıyla ölçeklenir, görseller tarayıcının boyut seçebilmesi için birden çok kaynak taşır ve birkaç kırılma noktası, mevcut dizilim yetmez olduğunda düzeni değiştirir. Düzeni tarayıcı hesaplar; sayfa yalnızca kuralları söyler. Cihaz başına hiçbir şey çoğaltılmadığı için bir metin değişikliği veya izleme etiketi her yerde aynı anda geçerli olur.
Kırılma noktaları popüler cihazların bulunduğu yere değil, içeriğin bozulduğu yere konmalıdır; çünkü cihaz listesi eskir, içerik eskimez. Çok az kırılma noktası ara genişliklerde sıkışma yaratır; çok fazlası her değişikliğin daha çok yerde doğrulanmasını gerektirir. Temel ödünleşme şudur: tek belge her bağlamı karşılamak zorundadır, bu yüzden telefon indirip gizlediği işaretlemeyi taşır ve mobil sürüm, masaüstünün boş görünmeden ne gösterebileceğini sınırlar.
Uygulamada duyarlılık varsayılmaz, doğrulanır. Tarayıcıyı geniş genişlikten dara doğru yavaşça daraltın ve bir şeyin üst üste bindiği, tablonun taştığı veya düğmenin görüş alanından çıktığı genişliği izleyin; gerçek kırılma noktaları bunlardır. Önce formu ve quizi kontrol edin; etiketler, açılır menüler ve yanıt düğmeleri, yeniden akış hatalarının doğrudan gönderime mal olduğu yerlerdir. Pivix quizinde her soru kendi ekranı olarak çıkar, bu da akıştaki riski büyük ölçüde kaldırır.
Duyarlı olmak sayfanın sığması demektir, uygun olması değil. Bir düzen kusursuz akabilir ve yine de trendeki birinden teklife ulaşmadan bin kelime okumasını isteyebilir. Duyarlılık ağırlık hakkında da bir şey söylemez: mobilde üç bölümü gizleyen sayfa onları yine indirir ve CSS ile küçültülen bir kahraman görseli, kaynaklar aksini söylemedikçe tam dosyadır. Tıkla-ara düğmesi gibi bağlama özgü ihtiyaçlar, akıştan değil bilinçli kararlardan doğar.
Pratikte örnek
Nasıl ölçülür
Her sayfa metriğini okumadan önce cihaz sınıfına göre bölümlendirin. Telefon, tablet ve masaüstüne ayrılmış dönüşüm oranı, form tamamlanması ve sayfada geçen süre, harmanlanmış ortalamanın gizlediği düzen kusurunu ortaya çıkarır. Aynı trafik kaynağında telefon oranı masaüstünün belirgin biçimde altındaysa, aksi kanıtlanana dek bu bir düzen sorunudur; kitle aynıdır, yalnızca render farklıdır.
İki teknik kontrol ekleyin. Kümülatif düzen kayması, görseller ve yazı tipleri yüklenirken zıplayan ögeleri yakalar; nihai düzen doğru olsa bile bu bozukluk gibi okunur. Dar genişliklerde yatay kaydırma kontrolü, tüm sayfayı yana iten tek taşan ögeyi bulur. İkisi de her yayında otomatikleştirilmesi ucuz kontrollerdir ve duyarlılık gerilemelerinin çoğunu ziyaretçiden önce yakalar.
Sık yapılan hatalar
Rutin hata, üç sabit genişlikte test edip işi bitmiş saymaktır. Kusurlar hazır ayarların arasında yaşar: tablet genişliğinde sıkışan iki sütunlu kart ızgarası, kötü bir boyutta dört satıra bölünen bir başlık, alçak bir yatay ekranda düğmeyi örten yapışkan çubuk. Bunun yerine pencereyi tüm aralık boyunca yavaşça sürükleyin ve en az bir kez gerçek bir telefonda test edin; öykünücüler klavye ve yazı ölçekleme davranışını kaçırır.
İkinci hata, içeriği yeniden düşünmek yerine gizlemektir. Sığmayan bölüme bir görünürlük kuralı verilir ve telefonlarda kaybolur; böylece mobil ziyaretçi masaüstündekinden zayıf bir argümanla kalır, sayfa ise o işaretlemenin bedelini yine öder. Bölüm önemliyse akordeon ya da kısa liste gibi derli toplu bir biçimini bulun. Önemli değilse yalnızca küçük ekrandan değil, tüm kırılma noktalarından silin.
Sıkça sorulan sorular
Duyarlı açılış sayfası dönüşümler için neden önemlidir?
Trafiğin çoğu artık mobil cihazlardan geldiğinden, küçük ekranlarda bozulan veya kullanımı zor bir sayfa müşteri adaylarını anında kaybeder. Duyarlı bir düzen, form ve quizleri her yerde kullanılabilir tutarak dönüşüm oranınızı korur.
Duyarlı açılış sayfası ile mobil açılış sayfası aynı mıdır?
Tam olarak değil; duyarlı sayfa her ekrana uyum sağlayan tek bir tasarımken, ayrı bir mobil sayfa yalnızca telefonlar için kurulmuş farklı bir sürümdür. İçeriği ve izlemeyi birleşik tuttuğu için genellikle duyarlı tasarım tercih edilir.
Açılış sayfamın gerçekten duyarlı olup olmadığını nasıl test ederim?
Oluşturucunuzda masaüstü, tablet ve telefon kırılma noktalarında önizleyin ve dokunma hedefleri ile form kullanılabilirliği için gerçek cihazlarda test edin. Tarayıcı geliştirici araçları ve Google'ın mobil uyumluluk testi, düzenin doğru uyum sağladığını doğrulayabilir.
Bir açılış sayfası kaç kırılma noktası gerektirir?
Kampanya sayfası için genelde iki ya da üç yeterlidir: çok sütunlu düzenin tek sütuna döndüğü bir nokta, içerik aksi hâlde fazla yayılacaksa büyük ekranlar için bir nokta ve ara sıra ikisinin arasında bir nokta. Yeni bir kırılma noktasını ancak gerçekten bir şeyin bozulduğu genişliği gösterebiliyorsanız ekleyin ve düzeni artık değiştirmeyenleri kaldırın.
Duyarlı tasarım ile uyarlanabilir tasarım arasındaki fark nedir?
Duyarlı tasarım akışkan kurallar kullanır ve düzen her genişlikte kesintisiz ayarlanır. Uyarlanabilir tasarım, algılanan cihaza veya genişliğe göre birkaç sabit düzenden birini sunar; hazır ayarlar arasındaki genişlikler en yakınına düşer. Ekran boyutlarının aralığı uçsuz bucaksız olduğu için bugün varsayılan duyarlı tasarımdır; uyarlanabilir yaklaşım birkaç düzeni birden sürdürmeyi gerektirir.
Duyarlı sayfa mobilde daha hızlı yüklenir mi?
Kendi başına hayır. Her cihaza aynı belge gönderilir; farklı görsel kaynakları sunmadıkça ve kritik olmayan kodu ertelemedikçe gizlenen bölümler, gereğinden büyük görseller ve kullanılmayan betikler yine indirilir. Duyarlılık bir düzen özelliğidir; hız ise gönderdiğiniz şeyden gelir. Yeniden akışın azalttığını varsaymak yerine mobil yükü doğrudan ölçün.
Mobil sürüm masaüstüyle aynı içeriği göstermeli mi?
Argümanı taşıyan her şey için evet: teklif, kanıt ve form her ekranda bulunmalıdır. Sunum farklılaşabilir; uzun liste yerine akordeon, ızgara yerine karusel olabilir. Ancak mobilde bir faydayı veya referansı kaldırmak, küçük ekrandaki ziyaretçiye dönüşmek için daha zayıf bir gerekçe bırakır.
Duyarlı bir açılış sayfasını doğru şekilde nasıl test ederim?
Hazır ayarları kontrol etmek yerine genişliği kesintisiz tarayın, sonra en az bir gerçek telefon ve bir tablette doğrulayın. Yatay moda döndürün; alçak görüntü alanları yapışkan ögeleri bozar. Formu açıp klavyenin çıkmasını bekleyin, çünkü görünen alanı küçültür ve çoğu zaman gönder düğmesini gizler. Son olarak yazı tipi boyutunu büyüterek kontrol edin.
Sayfam telefonda neden yana kayıyor?
Neredeyse her zaman görüntü alanından geniş tek bir öge yüzünden: max-width'i olmayan bir görsel, bir tablo, uzun ve bölünmeyen bir URL ya da sabit piksel genişliğinde bir bölüm. Tarayıcıyı daraltıp geliştirici araçlarında hangi ögenin kenarı aştığına bakarak bulun. Onu sınırlayın, içeriğin satır kırmasına izin verin ya da o bloğa kendi yatay kaydırma kabını verin.