Mobil ilk yaklaşım için e-postalar nasıl tasarlanır?
Yayınlanan: 2015-05-21Sürekli e-posta akışının hiç bitmeyen savaşı olan iyi mücadeleyi veriyoruz. Nereye gidersek gidelim veya yanımızda hangi cihaz olursa olsun, e-postalar bizi her yerde bulabilir. Bu makaleyi okuduktan sonra muhtemelen on e-posta daha alacaksınız. Tasarımcılar olarak, gelen kutusunun her iki tarafındayız: sürekli e-posta alıyoruz, ancak gerçek e-posta tasarımlarını tasarlamaktan ve oluşturmaktan da sorumluyuz.
E-postanızla kimi hedeflediğiniz önemli değil, amaç abonelere, müşterilere ve potansiyel müşterilere e-posta gönderirken en iyi kullanıcı deneyimini sağlamaktır. Ve e-postaların çoğu mobil cihazlarda açıldığı için, e-postaları, açılabilecekleri herhangi bir cihaza uyacak şekilde tasarlamamız gerekiyor.
Duyarlı web tasarımına ve birinci sınıf mobil uygulamalara o kadar alıştık ki, genellikle herhangi bir cihazı alıp kişiye özel bir deneyim tasarlayabileceğimizi kabul ediyoruz. E-posta ile işler o kadar kesin ve kuru değildir. Teknoloji açısından modern web tasarımının ışık yılı geride kaldı. Her e-posta istemcisinde aynı şekilde davranması garanti edilmeyen HTML öznitelikleri, tablo tabanlı düzenler ve satır içi stiller ile tasarlamamız gerekiyor.
Tüm cihazlar için e-posta tasarlama, seçeneklerim nelerdir?
Gitmeden ve CD-ROM koleksiyonunuzun tozunu almadan önce, sınırlamalara rağmen başarılı bir "duyarlı" e-posta tasarlamak için bir umut olduğunu unutmayın. Gerçekten duyarlı bir e-posta oluşturmak kesinlikle bir seçenektir, ancak başarılı mobil ilk tasarım oluştururken bu yaklaşımların üçünü de dikkate almak önemlidir:
- ölçeklenebilir tasarım
- Akışkan tasarımı
- Sorumlu tasarım
İhtiyaçlarınıza en uygun yaklaşımı seçmek için bu üç tasarım biçimi arasındaki farkları ve sınırlamaları anlamak önemlidir. Bir karar vermek, hedef kitleniz ve hangi cihazları ve e-posta istemcilerini kullandıkları hakkında bilgi gerektirir. Tüm e-posta istemcileri aynı CSS desteğini sunmadığından, bu, hangi yaklaşımın kullanıcılarınıza en iyi şekilde hizmet edeceğini belirlemenize yardımcı olur.
ölçeklenebilir tasarım
Ölçeklenebilir e-posta düzenleri, tüm ekran boyutlarında okunabilir ve tıklanabilir oldukları için çok yönlüdür. Kitleniz e-postalarını çeşitli cihazlarda açma eğilimindeyse bu harika bir seçenektir: mobil, tablet ve masaüstü.
<table border="0" cellpadding="0" cellspacing="0" width="100%"> <p>Email content goes here.</p> </table>
Bu seçenek, medya sorguları kullanmadığından ve ayarlanması gereken tablo genişlikleri olmadığından, genellikle uygulanması en kolay olanıdır. Avantajlardan biri, bu tür e-postaları tasarlarken çok büyük bir öğrenme eğrisinin olmamasıdır. Çoğu durumda, mobil e-posta okumak için en yaygın cihazdır ve bu, öncelikle mobil konuların dikkate alınmasını kolaylaştırır. Daha büyük düğmeler, okunması kolay metinler ve net harekete geçirici mesajlar, daha küçük ekran boyutu ihtiyaçlarını karşılamak için mobil cihazlara öncelik verir.
Ölçeklenebilir e-posta tasarımı, tüm cihazlarda iyi çalışması için tek sütun olması gerektiği için sınırlayıcı olabilir. Bunun nedeni, tasarımın birden fazla sütunu olsaydı, bunlar mobil cihazlarda çok küçük olacak ve okunabilirliği etkileyecektir. Ancak, gelen kutunuzda gezinirseniz, çok yaygın oldukları için çok sayıda tek sütun düzeni görürsünüz.
İçerik, herhangi bir e-postanın anahtarıdır, bu nedenle metin boyutu, mobil cihazlarda ve ayrıca daha büyük ekranlarda iyi çalışan bir boyutta olmalıdır. Çoğu e-posta istemcisinde, e-postanın tamamı ekranı doldurur, böylece kullanıcının dikey olarak kaydırması gerekmez. Bununla birlikte, e-postanın ekranı istendiği gibi doldurmaması durumunda, önemli bilgilerin ve harekete geçirici mesajın e-postanın sol üst köşesine yerleştirilmesi önerilir.
Akışkan tasarımı
Web tasarımından “sıvı” mizanpajlara aşina olabilirsiniz. Tasarım bileşenlerinin yüzde genişlikleri vardır ve aynı genişlikleri koruyarak kullanıcının ekran çözünürlüğüne göre ayarlanır. Akışkan e-posta tasarımı aynı fikri kullanır.
Bu e-posta seçeneği, ölçeklenebilir ve gerçekten sorumlu bir seçenek arasındaki boşluğu doldurur. Ölçeklenebilir seçenekten daha fazla ön tasarım yapılmalıdır. Bunun nedeni, yüzdeye dayalı boyutlandırmanın, tabloların ve resimlerin genişliğini, e-postanın görüntülendiği ekran boyutuna göre uyarlamasıdır. Tablolar, düzeni farklı boyutlarda değiştirmez, ancak içerik alanı akar ve doldurur. Bu, metin ağırlıklı e-postalar için harika bir seçenektir, çünkü kopya ve resimlerin birbiriyle nasıl ilişkili olduğu üzerinde daha az kontrol vardır. E-postanın okunabilirliğini birinci öncelik olarak tutmak için düzeni basit, tercihen tek bir tablo düzeni tutmak yine de iyi bir fikirdir.
Bunun sabit ve duyarlı arasındaki boşluğu nasıl kapattığını söylediğimizi hatırlıyor musunuz? Bunun nedeni, daha büyük ekranlar için boyutun sınırlandırılması gerektiğidir. E-posta çok genişlerse, metin satırları görsel olarak çok uzun olur ve okuyucularımızın e-postamızı kolayca okuyabildiğinden emin olmak isteriz. E-postanızın içeriğini sabit genişlikte bir kapsayıcı tabloya sarmak, daha büyük ekran boyutlarında görünüme yardımcı olacaktır. Ardından, yardımcı bir medya sorgusu daha küçük ekran boyutlarını hedefleyecektir.
<table border="0" cellpadding="0" cellspacing="0" width="525" class="wrap"> <tr> <td> <table border="0" cellpadding="0" cellspacing="0" width="100%"> <p>Wrapping table will help on larger screens.</p> </table> </td> </tr> </table>
Mobil cihazlar için medya sorgusu örneği:
@media screen and (max-width: 525px) {
table[class="wrap"]{
width:100% !important;
}
}
Duyarlı e-posta
Ölçeklenebilir ve akıcı e-postalardan bildiklerimizi alalım ve biraz daha kural ekleyelim. Duyarlılık, CSS medya sorgularıyla farklı kesme noktalarında sunulanlar üzerinde daha fazla kontrol sahibi olmanızı sağlar. Bu seçenekle düzenler değiştirilebilir ve diğer öğeler de belirli kesme noktaları için koşullu stillerle özelleştirilebilir.
Duyarlı bir düzen için bir medya sorgusu örneği:
@media only screen and (max-width: 450px) {
td[class="column"] {
display: block;
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
}
Diğer seçeneklerde olduğu gibi tek sütunla ya da basit tasarımlarla sınırlı değilsiniz. E-postalar, düzen ve resim miktarında daha az kısıtlamayla daha karmaşık olabilir. Örneğin, e-posta tasarımları daha büyük cihazlarda birden çok sütun olabilirken, mobil cihazlarda tek bir sütun olabilir. Metin boyutu, resimler ve diğer her şey en iyi deneyim için optimize edilebilir.
Birden fazla medya sorgusu içeren karmaşık tasarımlar oluşturmadan önce, bazı ödünleşimlerden bahsetmek önemlidir. Medya sorguları tüm e-posta istemcilerinde çalışmaz. Aslında, destek oldukça sınırlıdır. Litmus medya sorgusu destek listesine göre, Android Outlook.com uygulaması, Android 4.x yerel istemcisi ve iOS (iPhone/iPad) şu anda bunları desteklemektedir. İzleyicilerinizin çoğunluğu mobil ve tablet kullanıcılarıysa, bunlardan tam potansiyel olarak yararlanılabilir.
Diğer tasarım konuları
E-postanızın tasarımını oluşturmaya başlamadan önce, kullanıcılarınızın hangi e-posta istemcilerini ve cihazlarını belirlemek için analizlere bakmak önemlidir. Bunu sık sık kontrol etmeniz ve işler değiştikçe tasarım yaklaşımınızın gelişmesine izin vermeniz önerilir. Sınırlamalarla bile e-posta gelişiyor, bu nedenle şu anda nelerin desteklendiğini takip etmek önemlidir.
İşte daha fazla okumak için birkaç harika kaynak:
- Mobil Özel CSS
- E-postanın Geleceği
- iPhone ve Android E-postaları
İyi haber şu ki, e-postaların mevcut sınırlamaları ile önce mobil bir yaklaşım mümkün. Tasarım, yalnızca birkaç belirli yüzde ve bazı medya sorguları ile "yanıt veren" en doğru form olmasa bile, hangi cihaz olursa olsun etkileneceğinden emin bir e-posta tasarımı oluşturacaksınız. Çoğu durumda, kullanıcıların çoğu e-postalarını mobil cihazlarda kontrol ediyor, bu nedenle önce mobil yaklaşımını benimsemek e-posta tasarımınız için güçlü bir temel haline geliyor.