El Farklı formatlar nedeniyle duyarlı tasarım bugün hayati önem taşıyor bir kullanıcının tabletinden, cep telefonundan ve hatta bilgisayarından baktığı şey. E-posta pazarlaması ve açılış sayfalarındaki bu duyarlı tasarım, müşterilerimizle çok kanallı iletişim için çok daha önemlidir.
Bu nedenle, farklı şablonlar almayı ciddiye almalısınız. en iyi tasarımla ulaşmak için farklı genişlikler Olası bu haber bültenleri veya gelecekteki müşterilerin Google veya Facebook'taki reklamlarımızdan dönüştürmelerini istediğimiz açılış sayfası.
E-posta pazarlamasında duyarlı tasarım
E-posta ile pazarlama, ürün tekliflerini veya blogumuzda oluşturulan yeni gönderileri duyurmanın yollarından biridir. böylece daha derin bir şekilde daralır tüm takipçilerimizle.
Bu haber bültenlerinin duyarlı olması, bir cep telefonundan mükemmel şekilde görülebilirler, bir tablet veya bilgisayar. Bu nedenle, tüm görsel öğelerin haber bülteninin kolay okunması için yeterince uyumlu olması için gerekli araçlara sahip olmaya çalışmalıyız.
IKEA Bülteni
Duyarlı demek bir sayfanın farklı cihazlarda görüntülenmesi her zaman doğrudur. Bunun için araçlarımız var e-posta pazarlama Bu, farklı formatlarda oluşturulan haber bültenini test etmemize ve böylece dolgu veya kenar boşluğu gibi değerleri değiştirmemize yardımcı olur, böylece tarayıcımızın genişliğini azalttığımızda mükemmel bir şekilde yeniden konumlandırılırlar.
In CSS "Medya Sorguları" ile web tasarımı kullanılmıştır formata göre bir web sitesi tasarlamak. Bir mobil cihaz için 360 piksele kadar, web sitemizi bir tabletten gören tüm kullanıcılar için 360 pikselden 650 piksele kadar değişiklikler yapabilirdik.
E-posta pazarlama bültenlerimizin bazı ilkeleri şunlardır:
- Temiz bir görsel hiyerarşi: Metni paragraf biçiminde bırakmak için H2'de bir başlık.
- İki farklı kaynak: Biri başlık ve diğeri metin için haber bültenimizi daha kolay okunabilir kılar.
- El başlık, metin ve diğer unsurları ayırt etmek için renk kullanımı: giderek koyu griden daha açık renge geçebiliriz.
- Un CTA (Harekete geçirici mesaj) net ve ayırt edilebilir: Şirketimizin logosu kırmızıysa, CTA bu renkte, geri kalanı tamamlayıcı renkte olabilir.
Size harika bir örnek veriyoruz Filmin tarafından gerçekleştirilen bir haber bülteninde duyarlı tasarım ve sağlanan resimde görebileceğiniz. Beyaz renkli net tipografi ve eğer istersek okumaya davet edildiğimiz farklı alanları hızlı bir şekilde görselleştirmemizi sağlayan çok açık gri metin. CTA, başka bir dünyadan olduğu anlamına gelmez, ancak bu oyun ikonuna yardımcı olur ve bizi neyin beklediğini görmemizi sağlar.
Kenar boşluklarında yeterli boşluk, metin için ana renk olarak beyaz ve logoya mükemmel uyan Markanın; onu öne çıkaran o gri ile çevrili. İlk andan itibaren dikkat çeken bir haber bülteninin amacını belirleyen göz alıcı bir resim. Ayrıca, ekranın tüm genişliğinin "yenmemesi" için boşluklar da yanlarda bırakılmıştır.
In masaüstü sürümü bu ilkeleri korur, hatta metinlerde daha fazla yer bırakıp her iki tarafta da büyük bir boşluk bırakarak:
Açılış sayfasında duyarlı tasarım
Jardines de Viveros duyarlı tasarımda aynı ilkeler kullanılabilir açılış sayfasının Şablonu doğru bir şekilde seçmek ve tasarımda bazı kurallara uymak dünyanın her yerinde çok önemlidir:
- Görsel sadelik: CTA'lara odaklanmak için boş alanlar bırakmaktan bahsediyoruz.
- Güzel ve ilgi çekici görüntüler Okuyucuya, çözünürlüğü ve mükemmel göründüklerini unutmadan.
- Rengin önemi ve tekrar vurguladığımızı.
Bir mobil, tablet ve masaüstü için bir açılış sayfasının duyarlı tasarımı üzerinde çalışmalıyız. Al her değişiklikte tekrar tekrar test etmek için gereken süre kendimize güvenebildiğimiz ve CSS'de yapılan bu değişikliklerin mobil cihazlarda korkunç görüneceğini unutabildiğimiz için bu üç formatta görülüyor.
Hotjar Açılış Sayfası
Sıkıcı olabilecek bir iştir, ancak her değişikliği test etmek için zaman ayırmamız çok önemlidir. yan kenar boşluklarının kullanımı ve mümkün olduğunca CTA'lardaki veya işlem düğmelerindeki kuralları kaçırmamaya çalışın:
- O metne ve düğme marjına göre mesafe aşamalı üç formatta da. Ne küçük ne de büyük ve aynı yükseklikte.
- La CTA düğme boyutundaki oran bulunduğu yerin geri kalanı ile birlikte sağlanmalıdır.
Bunun net bir örneği Shopify tarafından açılış sayfanızda yapılan çalışma masaüstünde ve mobil sürümde görebileceğiniz. Renklerin, beyaz boşlukların ve bu metinlerin uygun ölçü ve tipografisiyle kullanımına dikkat:
Sahip olunması gereken bir dizi ipucu işletmeniz veya çevrimiçi mağazanız için daha iyi bir açılış sayfası ve bu haber bültenleri, güncellemeleri ve bu tanıtımları kullanıcılarınıza ulaştırmak için çok önemlidir.