5 Kolay Adımda E-posta Tasarımınızı Mobil Uyumlu Hale Getirin
Yayınlanan: 2024-01-17E-posta bültenlerinizin ve pazarlama kampanyalarınızın her cihazda muhteşem görünmesini ister misiniz? Tabii ki. Hiç kimse emeğinin birinin gelen kutusunda okunamaz hale gelmesini istemez. Neyse ki, yalnızca beş adımda e-postalarınızın duyarlı ve aboneleri etkilemeye hazır olduğundan emin olabilirsiniz. O halde biraz içecek, en sevdiğiniz şarkı listesini veya bir içki alın ve bunların her ekranda en iyi şekilde göründüğünden emin olmaya başlayalım.
Sütun genişliklerini piksel olarak değil yüzde olarak ayarlayın
E-posta tasarımınızı duyarlı hale getirmek için sütun genişliklerini sabit piksel değerleri yerine yüzdeleri kullanarak ayarlayın. Bu, sütunların farklı ekran genişliklerine esnek bir şekilde uyum sağlamasına olanak tanır.
Akışkan bir ızgara kullanın
Değişken ızgara yaklaşımı, sütun genişlikleri için yüzdeler kullanır, böylece ekran boyutuna bağlı olarak gerektiği gibi genişleyebilir ve daralabilir. Basit iki sütunlu bir düzen için sol sütunu %60-70, sağ sütunu ise %30-40 genişliğinde yapın. Örneğin:
<tablo>
<tr>
<td width=”65%”>Sütun 1 içeriği burada</td>
<td width=”35%”>Sütun 2 içeriği burada</td>
</tr>
</table>
Bu, Sütun 1'in kullanılabilir alanın %65'ini ve Sütun 2'nin kalan %35'i kaplamasına olanak tanıyacaktır. Büyük bir masaüstü ekranında Sütun 1, 650 piksel genişliğinde olabilirken, küçük bir mobil ekranda yalnızca 200 piksel genişliğinde olabilir. Ancak göreceli oranlar aynı kalacaktır.
Duyarlı kesme noktaları için medya sorguları ekleme
Medya sorguları, ekran genişliğine bağlı olarak farklı stil kuralları uygulamanıza olanak tanır. Bunları, farklı kesme noktalarında akışkan ızgaranızda daha fazla ayarlama yapmak için kullanabilirsiniz. Örneğin:
/* Cep telefonları için: */
@media yalnızca ekran ve (maks. genişlik: 600 piksel) {
tablo, td {
genişlik: %100 !önemli;
}
}
/* Tabletler için: */
@media yalnızca ekran ve (minimum genişlik: 601 piksel) ve (maks. genişlik: 900 piksel) {
tablo, td {
genişlik: %80 !önemli;
}
}
Bu, tablo ve sütunların küçük telefonlarda ekran genişliğinin %100'ünü, tabletlerde ise %80'ini dolduracak şekilde genişlemesini sağlayacak ve tasarımı tamamen duyarlı hale getirecek.
Yeniden boyutlandırılabilen akıcı görüntüler ve medya kullanın
E-posta tasarımınızı mobil uyumlu hale getirmek için görsellerin ve diğer ortamların herhangi bir ekran boyutuna sığacak şekilde akıcı bir şekilde yeniden boyutlandırılması gerekir. Şu ipuçlarını izleyin:
Duyarlı resim boyutlarını kullanın
E-postanıza görsel eklerken duyarlı görsel boyutlandırmayı kullanın. Bu, e-posta istemcisinin görüntülendiği ekran için doğru boyutu seçebilmesi için birden fazla görüntü boyutu sağlamak anlamına gelir.
Örneğin, yalnızca 1000 piksel genişliğinde büyük bir resim eklemek yerine şunları da ekleyin:
- Orta boy (yaklaşık 600 piksel)
- Dar sütunlar için küçük boyut (yaklaşık 400 piksel)
- Küçük mobil ekranlar için küçük boyut (yaklaşık 200 piksel)
E-posta istemcisi, ekran ve bant genişliği için en iyi boyutu otomatik olarak seçecektir. E-postanızda birden fazla resim boyutu belirtmek için <img srcset> özelliğini kullanın.
Medyayı mobil uyumlu hale getirin
Videolar veya GIF'ler gibi diğer medyalar için de birden fazla boyut seçeneği sağlayın. Videolar farklı çözünürlüklerde MP4 kaynaklarına sahip olmalıdır. GIF'ler ve iframe'ler (YouTube yerleştirmeleri gibi), herhangi bir ekrana sığacak şekilde yeniden boyutlandırılabilen genişlik sınırlamalarına sahip olmalıdır.
Bu ipuçlarını aklınızda bulundurun; e-posta görselleriniz, videolarınız ve diğer medyalarınız her cihazda güzel bir şekilde görüntülenecektir. Aboneleriniz, harika görünen ve açtıkları her yerde okunması kolay bir e-postayı takdir edeceklerdir.
Yazı tipini piksel olarak değil, ems olarak boyutlandırın
E-posta tasarımınızı mobil uyumlu hale getirmek için yazı tipini piksel yerine ems olarak boyutlandırmak isteyeceksiniz. Pikseller sabit birimlerdir, dolayısıyla birisi tarayıcısını yakınlaştırırsa metin bozulabilir. Em'ler ise kullanıcının ayarlarına göre ölçeklenen göreceli birimlerdir.
Duyarlı bir e-posta çerçevesi kullanın
Duyarlı bir e-posta çerçevesi, herhangi bir ekran genişliğine göre otomatik olarak yeniden boyutlandırılan önceden oluşturulmuş bileşenlere sahiptir. Bazı popüler seçenekler MJML, Foundation for Emails ve Ink'tir. Bu çerçeveler boyutlandırma için ems kullanır, dolayısıyla dönüşümü kendiniz yapma konusunda endişelenmenize gerek yoktur.
Çerçeve kullanmıyorsanız pikselleri ems'ye dönüştürün
CSS'niz üzerinde tam kontrol sahibi olmak istiyorsanız ve çerçeve kullanmamayı tercih ediyorsanız, tüm piksel boyutlarını ems'ye dönüştürmeniz gerekecektir. İşte nasıl:
- Temel yazı tipi boyutunuzu piksel cinsinden belirleyin. Diyelim ki 16 piksel.
- Bunu ems'ye dönüştürün. 1em = 16px (temel boyutunuz), yani 16px = 1em.
- Kullanmak istediğiniz herhangi bir boyut, 16px'e bölün ve 1em ile çarpın. Örneğin 24px'lik bir başlık için 24px/16px = 1,5em.
- CSS'nizdeki tüm piksel boyutlarını em eşdeğerleriyle değiştirin.
İçeriğinizi duyarlı bir şekilde hizalayın
E-posta tasarımınızı duyarlı hale getirmek için içeriğinizi her ekran boyutunda düzgün görüntülenecek şekilde hizalamanız gerekir. Bu adımları takip et:
Sıvı ölçümlerini kullanın
Sütunlar, resimler ve kapsayıcılar için sabit piksel genişlikleri kullanmak yerine yüzdeleri kullanın. Bu, içeriğinizin ekran genişliğine göre orantılı olarak ölçeklendirilmesine olanak tanır. Örneğin width=”600px” olan bir görsel yerine width=”50%” kullanın.
Ağır şekillendirmelerden kaçının
Bazı e-posta istemcilerinde düzgün görüntülenmeyen özel stil kullanımını sınırlayarak e-postanızı basit tutun. Düzen için temel HTML tablolarına, satır içi stillere ve hizalama özelliğine güvenin. Gerektiğinde öğeleri ortalayın.
Bu pratik adımları takip etmek, okuyucularınızın gelen kutularını açmak için hangi cihazı kullandıklarına bakılmaksızın e-posta içeriğinizin güzel bir şekilde görüntülenmesini sağlayacaktır. Aboneleriniz için harika, duyarlı bir e-posta tasarımı deneyimi oluşturmak çabaya değer.
Test edin, test edin ve biraz daha test edin
Mobil cihazlarda nasıl görüntülendiğini kontrol edin
İnsanların çoğunluğunun e-postalara erişmek için mobil cihazlarını kullandığını hepimiz biliyoruz. E-postanızın mobil uyumlu olduğundan emin olmak için e-postanızı farklı cep telefonlarına göndererek test edin. Bunları Android'lerde, iPhone'larda ve tabletlerde kontrol edin. Resimlerin, düğmelerin ve metnin hem dikey hem de yatay modda nasıl görüntülendiğini kontrol edin.
Büyük e-posta istemcilerinde test yapın
Tüm e-posta istemcileri e-postaları aynı şekilde görüntülemez. Gmail, Outlook, Yahoo Mail ve abonelerinizin yaygın olarak kullandığı diğer önemli e-posta hizmetlerinde testler yapın. Resimlerin, gömülü bağlantıların, düğmelerin veya diğer etkileşimli öğelerin görüntülenme şekliyle ilgili sorunları arayın. Görüntüleme sorunlarını düzeltmek ve istemciler arasında tutarlılık sağlamak için kodunuzda düzenlemeler yapın.
Yedek içeriğin nasıl göründüğünü kontrol edin
E-posta istemcilerinde görselleri devre dışı bırakan aboneler için yedek içeriğiniz görsellerin yerine görünecektir. Tüm alternatif metinlerin, resim başlıklarının ve resim açıklamalarının kendi başlarına anlamlı olup olmadığını ve e-posta içeriğiniz için bağlam sağlayıp sağlamadığını bir kez daha kontrol edin. Yedek içerik, görseller olmasa bile yine de iyi bir okuyucu deneyimi sunmalıdır.
Bir e-posta oluşturma hizmetini inceleyin
E-posta tasarımınızın çok çeşitli e-posta istemcileri ve cihazlarda aynı anda nasıl işlendiğini görmek için Litmus, Email on acid veya Mosaico gibi ücretsiz bir e-posta oluşturma test hizmetini kullanın. E-postanızın yanıt verme hızını artırmak için ele alınması gereken sorunları vurgulayan raporlar sağlarlar. Raporlar temiz çıkana kadar kodunuzda değişiklikler yapın ve test e-postalarını yeniden yükleyin.
Bağlantıları ve etkileşimli öğeleri bir kez daha kontrol edin
E-postanızdaki yerleşik bağlantılar, düğmeler ve diğer etkileşimli bileşenlerin tüm platformlarda düzgün çalışması gerekir. Bağlantıların amaçlanan hedefe gittiğini ve tüm düğmelerin veya formların beklendiği gibi çalışıp çalışmadığını bir kez daha kontrol edin. Kampanyanızı başlatmadan önce bozuk bağlantı veya çalışmayan öğe olmadığından emin olmak için bunları birden çok kez test edin.
E-postanızın duyarlı tasarımını mükemmelleştirmek için sürekli test ve ince ayar yapılması gerekir. Ancak çabayı önceden göstermek, tüm abonelerinizin cihazlarında ve e-posta istemcilerinde geniş erişime ve yüksek etkileşime sahip bir e-postayla sonuçlanacaktır.
Yaygın yanıt veren e-posta sorunlarını giderme
Mobilde içerik taşması
- Tek sütun düzenlerini kullanın. Birden çok sütun, e-postada nadiren iyi yanıt verir.
- Paragrafları ve bölümleri kısa ve öz tutun. Uzun metin bloklarının küçük ekranlarda okunması zordur.
- Mümkün olduğunda madde işaretleri ve numaralı listeler kullanın. Paragraflardan daha az yer kaplarlar.
- Küçük ekranlarda ikincil içeriği gizleyin. İçeriği ekran genişliğine göre göstermek/gizlemek için medya sorgularını kullanabilirsiniz.
E-posta genişliği sorunları
Bazı eski e-posta istemcilerinde yanıt veren e-posta genişlikleriyle ilgili sorunlar vardır. Bunu düzeltmek için:
- E-posta kapsayıcınızda bir maksimum genişlik ayarlayın. Çoğu e-posta için 600 piksel öneririz.
- Bazı e-posta istemcisi CSS'lerini geçersiz kılmak için genişlik bildirimlerinden sonra !important ekleyin. Örneğin:
- Outlook 2007-2013 için geri dönüş kodunu ekleyin. Bu eski sürümlerin ayrı bir stile ihtiyacı vardır:
Bu sorun giderme ipuçlarını takip etmek, en yaygın yanıt veren e-posta sorunlarını çözecektir. Başka sorularınız varsa bana bildirin!
Çözüm
Bunlar, e-postalarınızın duyarlı olmasını sağlamanın bazı basit yollarıdır. Günümüzde e-postaların %50'sinden fazlasının mobil cihazlar aracılığıyla açıldığını, dolayısıyla daha küçük ekran boyutları için optimizasyonun hayati önem taşıdığını unutmayın. E-posta için tüm şablonlarınızı inceleyin ve yazı tipi boyutunun yanı sıra görsel boyutu ve aralıkta da gerekli değişiklikleri yapın. Alıcılarınız, hangi cihazı kullanıyor olursa olsun okuyabilecekleri ve etkileşim kurabilecekleri bir e-posta almaktan memnun kalacaklardır.