Duyarlı bir HTML E-postası Nasıl Tasarlanır?
Son birkaç yılda, artan mobil kullanım, çevrimiçi kullanıcılara içerik sunma şeklimizde bir evrim ya da devrim olabilir. Nihai amaç, bir akışkan, mobil ve cihaz-agnostik ağdır ve bir düşünce okulu, bu amaçla yaygın olarak kullanılan araçlar olarak ortaya çıkmıştır: duyarlı tasarım. Bununla birlikte, yanıt veren zeitgeist buhar toplarken, e-posta tasarımı ve geliştirme hıza ayak uydurmaya çalıştı.
Bunun sebebi kısmen, HTML e-postalarının geliştiricilerin birlikte çalışması için oldukça zor bir ortam oluşturmasıdır. Arkaik e-posta istemcisi teknolojisi ve standartların eksikliği, modern, semantik kodun kurallarının çoğunu işe yaramaz hale getirmiştir. Ancak e-posta hala göz ardı edilmemesi gereken önemli bir pazarlama kanalı: 2012 yılında altı aylık bir dönemde Litmus, mobil cihazlarda e-postada% 80'lik bir artış olduğunu bildirdi. Aynı yıl, Kampanya İzleyicisi, ilk kez, mobil e-posta açık oranının aslında masaüstü ve web postaları aştığını ortaya koydu.
Mobil optimizasyona yatırım yapma kararını almadan önce kitlenizin doğru analizini yapmak önemlidir. Ancak, iyi tasarlanmış bir yanıt veren e-posta tasarımı, hem masaüstü hem de mobil kullanıcılar için mükemmel bir kullanıcı deneyimi sağlayabilir - ve hemen köşede yaygın olan 4G ile, mobil eğilimi değişmez, dolayısıyla neden geleceğe yönelik değil?
Kare peg, yuvarlak delik
Mobil cihazda sabit genişlikte bir e-posta açmanın talihsizliğini yaşadıysanız, duyarlı e-posta tasarımı ihtiyacını anlayacaksınız. Ekran patlaması, çok sütunlu düzenler, yazı tipi boyutlarının okunaksızlığa düşürülmesi için büyütülmüş olarak görünebilir. Kullanıcılar yakınlaştırabilir, ancak içeriği okumak için yatay olarak soldan sağa ve tekrar kaydırma yapmak için sürekli ve çirkin bir şekilde talepte bulunurlar. Ekranlar, dokunmatik ekranlarda yağ parmaklarına bakılmaksızın küçük ve sıkışık görünüyor. Küçük görüntü alanları üzerindeki düşük kontrastlı tasarımlar, gücünden tasarruf etmek için kısıldıkça, genellikle okunamaz hale geliyor. Açıkçası, mobil optimizasyon önemlidir, ancak bunun için en iyi yolu nedir?
Mobil en iyi uygulama
Tek bir kod satırı yazmadan önce, tasarım özelliklerinin göz önünde bulundurulması, ekran boyutu ne olursa olsun, bunların tavsiye edilen ayrıcalıklar olmasına rağmen, mobil cihaz kullanıcıları için kullanıcı deneyimini büyük ölçüde geliştirebilir.
- Net, özlü içerik: Küçük ekranlar, kullanıcıyı mümkün olduğunca verimli bir şekilde kullanmak için her zamankinden daha önemli olduğu anlamına gelir.
- Tek sütun düzeni: sadelik anahtardır. 640 pikselden daha geniş olmayan düzenler hassas bir şekilde azalır. Tek sütun, yakınlaştırıldığında hiçbir görünümün görünüm dışında görünmeyeceğini garanti eder.
- İlgi çekici bir konu satırı: Bu, e-posta pazarlamacısının aşırı kalabalık bir gelen kutusundaki en etkili silahlarından biridir. Kısa ve çabuk tutun.
- Büyük harekete geçirme eylemi (CTA): şişman parmakları cezalandırma! Apple'ın iOS İnsan Arabirimi Yönergeleri en az 44 × 44 puanlık bir 'atılabilir' hedef alanı tavsiye ediyor.
- Cömert yazı tipi boyutları: İletinizin kolayca okunabileceğinden emin olun.
- Ön başlık: Gelen kutusunda görünürlük söz konusu olduğunda başka bir anahtar alan. 'Tarayıcıda görüntüle' metnini görüntülemekten kaçınmaya çalışın.
- Sola hizalı metin: önemli öğelerin içerik alanının sol tarafına hizalanması için birkaç neden vardır. (Göz izleme araştırmaları, batılı kullanıcıların dikkatlerinin çoğunluğunu e-posta içeriğinin sol tarafına odakladığını göstermektedir. Soldan sağa doğru metin okuduğumuzdan bu pek de şaşırtıcı değildir. Belirli işletim sistemleri, özellikle de android, içeriği sığacak şekilde ölçeklendirmeyecektir. ekran, bu nedenle bir e-postanın sadece sol yarısını görüntülüyor. Ergonomik bir bakış açısıyla, kullanıcıların çoğunluğu el ekranlarının alt sol / ortalarındaki öğelerle etkileşimde bulunmayı en kolay bulacaktır.)
- Dikey hiyerarşi: azalmış ekran gayrimenkulleri, 'katlama' fikriyle her zamankinden daha fazla güvenilirliğe sahiptir. Önemli CTA'lar mümkün olduğunca üst tarafa yerleştirilmelidir; Hemen görülmezlerse, belki de kullanılmayacaktır.
- Görüntüleri dikkatli kullanın: Görüntülerin görüleceğini varsaymayın. iPhone'un yerel e-posta uygulaması varsayılan olarak görüntüleri gösterecek ancak pek çok müşteri bunu yapmayacaktır.
Bu ipuçları, mobil müşteriler için kullanıcı deneyimini geliştirebilir, ancak muhtemelen daha fazla optimize edebilirsiniz. Mobil e-posta istemcileri arasında büyüyen CSS3 desteği sayesinde, yanıt veren e-posta tasarımı artık mümkün.
Başlamak
Daha önce de belirttiğim gibi, HTML e-postaları, standart olmayan bir eksiklikten muzdariptir. Bu durumun ortaya çıkması, web geliştirme sürecinin ilk günlerine kadar geriye kalan bir yolculuk olacaktır. Bazı e-posta istemcilerin tarihli HTML oluşturma motorları nedeniyle düzenler tablolarla düzenlenmeli ve CSS satır içi uygulanmalıdır. Birçok e-posta istemcisi, yapılan tüm stil bildirimlerini tamamen dikkate almaz.
belgenin bölümü.Bazı muhteşem e-posta boilerplan'ları var, Sean Powell'ın mükemmel olmasını öneriyorum HTML Email Boilerplate Bir başlangıç noktası olarak, ama gösteri uğruna, en baştan başlayalım.
Kodla birlikte takip etmek isteyenler için Bu yazı için bir şablon indirebilirsiniz.
Doctype
Hotmail ve Gmail otomatik olarak XHTML 1.0 Strict doctype'ı ekleyecektir. Bu nedenle, bunu kullanmak için kötü bir fikir değildir, ancak e-postanızı bir doktrinle ve doktrinsiz bir şekilde test etmeniz önemlidir; çünkü birçok e-posta istemcisi tamamen tek tek çıkarır.
Acid e-posta e-posta doktrinleri hakkında kapsamlı araştırmalar yaptı İşte.
Medya sorguları
Artık e-postalarımızın mobil cihazlarda doğru bir şekilde görüntülendiğinden emin olmak için bir viewport meta etiketi ekleyebiliriz. Ayrıca içerik türünü ve başlık etiketini belirtmek de iyi bir fikirdir. Bunlar birçok e-posta istemcisi tarafından yok sayılacak, ancak e-postanızın 'tarayıcı sürümüne' bir bağlantı sağlamayı planlıyorsanız iyi bir fikir olacaktır.
İçerik türü büyük olasılıkla dikkate alınmayacağından, e-postanızdaki tüm özel karakterleri HTML öğeleri olarak kodlamanız önerilir.
Ayrıca, e-postamızın platformlar arasında nasıl olmasını istediğimizden emin olmak için birkaç mantıklı stil sıfırlaması ekleyeceğiz.
Email subject or title Viewport meta etiketinin olduğunu unutmayın. Blackberry için olumsuz etkiler.
Şimdi medya sorgularımızı ekleyebiliriz; Her bir cihaza teslim etmek istediğiniz özgüllük seviyesine bağlı. Bu örnekte sadece bir tane kullanacağız - bir ekran boyutu 600px'den daha büyük olmayan cihazların modern, mobil ve dokunmatik ekran olduğu ve mobil cihazlar için optimize edilmiş stillerden faydalanacağı konusunda makul bir varsayım. Dahası, daha önce belirtilen evrensel mobil en iyi uygulama tekniklerini takip ederek, masaüstü yerleşimini alan daha büyük cihazlardaki mobil kullanıcıların büyük bir kullanılabilirlik sorunu yaşamayacağını varsayıyoruz.
Bir web sitesi oluştururken aynı şekilde medya sorguları kullanıyoruz; viewport boyutu medya sorgusunda belirlenen kısıtlamaların içindeyse, o stili uygulayın.
@media only screen and (max-width: 600px) {table[class="hide"], img[class="hide"], td[class="hide"] {display:none!important;}}Yukarıdaki örnekte, gösterilecek bir “gizleme” sınıfı olan bazı öğelere bahsediyoruz: hiçbiri 600 pikselden daha dar olmayan ekranlarda yok. Önemli özellik, satır içi stilin geçersiz kılınmasını sağlar. Bu, duyarlı e-posta tasarımının temel ilkesidir: HTML belgesinde yapılan satır içi stil bildirimlerini geçersiz kılma
bölümü ve bu stili hedefleme, medya sorguları ile belirli ekran boyutlarını geçersiz kılar. Göze çarpan bir istisna, herhangi bir stil bildirimini göz ardı edecek olan gmail uygulamasıdır. Bölüm. Bununla birlikte, içeriğin bilinçli sol hizalanması, posta listenizdeki gmail hayranları için tatmin edici bir kullanıcı deneyimi sağlamalıdır. Açıkçası bu ideal bir çözüm değildir, ancak şu anda yanıt veren e-posta tasarımı, kesme teknikleriyle ilgili olarak ele alınan uzlaşmalarla ilgilidir.Üstesinden gelmek için HTML öğelerini CSS özellik seçicilerine hedef aldığımızı belirtmek gerekir. Yahoo! Posta.
Dolayısıyla, medya sorgularının içeriği seçici bir şekilde görüntülemek için yararlı bir araç olduğunu görebiliriz, ancak bunları düzenimizin diğer özelliklerini değiştirmek için de kullanabiliriz. Belki de en önemlisi, e-postamızın sütun genişliğini kısıtlayabiliriz - harika bir mobil deneyimin anahtarı.
@media only screen and (max-width: 600px) {table[class="content_block"] {width: 92%!important;}}Artık medya sorgumuzda, “content_block” sınıfına sahip tüm tabloların, ekran boyutu 600 piksele kadar olan cihazlarda% 92 genişliğe kadar ölçeklenmesi gerektiğini belirttik. Şimdi tek yapmamız gereken, content_block sınıfı olan herhangi bir tablo için satır içi (600px) bir genişlik niteliği belirtmektir ve daha sonra belirli bir boyuttaki ekranlarda orantılı olarak ölçeklenen sabit genişlikli bir konteynere sahibiz. Bu kabın alt öğelerinin genişlik özelliklerinin tümü yüzde olarak belirtilmişse, bu temel bir yanıt veren e-posta şablonudır.
Vücut etiketi üzerindeki web seti otomatik metin boyutu ayarını devre dışı bırakırken dikkatli olun, başparmak kuralına göre font boyutlarını en az 12 pikselin üzerinde tutmaya çalışın.
Düğmeler
Harekete geçirici mesajlar (CTA'lar) genellikle bir pazarlama e-postasının en önemli parçasıdır. Göz alıcı, iyi yerleştirilmiş ve hepsinden öte, kullanışlı olmalılar. Büyük bir CTA için kriterler, bir imleç veya parmakla seçilip seçilmeyeceğine bağlı olarak farklıdır. Bu, yanıt veren e-postanın güçlü bir işlevidir; Görüntü engelleyicileri tarafından etkilenmeyen, parmakla uyumlu düğmelerle kullanıcılara daha küçük dokunmatik ekranlı cihazlar sunmak.
Maalesef, bazı masaüstü e-posta istemcilerinde desteklenmeyen dolgu özelliklerine bağlı oldukları için, bu düğmeler evrensel olarak görüntülenemez.
@media only screen and (max-width:600) {a[class="button"]{display: block;padding: 7px 8px 6px 8px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;color: #fff!important;background: #f46f62;text-align: center;text-decoration: none!important;}}Yukarıdaki stil bildirimleri, etiket ekranı genişliği 600 pikselden daha büyük olmadığı sürece, etiketler, aşağıdaki gibi bir "düğme" sınıfıyla, içerik alanının genişliğini kapsayan büyük, ilgi çekici, renkli düğmelere dönüştürecektir. CSS3 desteği, hedeflediğimiz mobil teknolojinin makul modern olduğunu varsaydığımızdan dolayı bir sorun olmamalı.