Beklemek. E-postama az önce ne oldu? Web Semineri Kaydı

Neredeyse her tasarımcı ve geliştirici, isteseler de istemeseler de kariyerlerinin bir noktasında e-postalar oluşturmak zorundadır. Ancak, her birinin kendi işleme sorunları olan çok sayıda e-posta istemcisi, birçoğunun e-posta tasarım sorunlarının saldırısı karşısında şaşkına dönmesine neden olur.

Bu tür birçok senaryo yaşadıktan sonra, e-posta kullanmaya yeni başlayan kişilerin karşılaştığı en yaygın sorunlara ve daha da önemlisi bu sorunlara bazı çözümlere ışık tutmak için Sendwithus'tan Alex Mohr ile güçlerimizi birleştirdik.

Web seminerine katılma şansınız olmadıysa, “Bekleyin. E-postama ne oldu?”, merak etmeyin. Slaytları indirebilir ve aşağıdaki kayda göz atabilirsiniz.

Slaytları ve kaydı görüntüler →

Ne kadar denesek de, web semineri sırasında sorulan her soruya ulaşamadık. Ve bazı harika olanlar vardı. Bu nedenle, bu fırsatı, e-posta pazarlaması ve tasarımına yeni başlayanlar tarafından daha sık sorulan bazı soruları yanıtlamak için kullanıyorum.

Google ve Microsoft e-posta oluşturmada neden bu kadar kötü?

Tüm e-posta istemcileri, e-posta kampanyalarını kodlamak için kullanılan iki dil olan bazı HTML ve CSS'yi oluşturmakta sorun yaşar. Bunun nedeni, hepsinin farklı işleme motorları kullanmasıdır. İşleme motorları, ekrana hangi kodun işlendiğini ve gerçekte nasıl işlendiğini belirleyen e-posta uygulamasının temel parçalarıdır.

Google'ın Gmail'i söz konusu olduğunda, güvenlik nedeniyle kodun belirli kısımlarını bir e-postadan çıkarmak için bir ön işlemci kullanılır. Neredeyse tüm diğer web posta istemcileri bunu şimdiye kadar çözmüş olsa da, Gmail esasen bir e-postanın < head > kısmındaki gömülü CSS stillerini çıkarır. Ve birçok tasarımcı, kampanyalarının nasıl görüneceğini belirlemek için bu stilleri kullandığından, bu e-postalar Gmail'de sorun yaşar.

Medya sorguları (geleneksel duyarlı tasarımda kullanılan CSS tetikleyicileri) bu bölümde bulunduğundan, bu özellikle Gmail'in mobil istemcilerinde fark edilebilir. Bu nedenle, Gmail'in zayıf oluşturma yeteneklerine doğrudan bir çözüm olarak hibrit (veya süngerimsi) kodlama gibi teknikler geliştirildi.

Microsoft'un Outlook istemcileri söz konusu olduğunda sorun, Outlook'un işleme motoru olarak Microsoft Word'ü kullanması gerçeğinde yatmaktadır. Bu doğru, hem öğrenciler hem de iş adamları tarafından kullanılan zengin metin düzenleyici, HTML ve CSS kodunu oluşturmak için kullanılır (veya en azından dener). Outlook'un eski sürümleri, e-posta kodunu oluşturmak için Microsoft'un web tarayıcısının yüklü sürümünü, Internet Explorer'ı kullanırken, Outlook 2007'den itibaren, Outlook kullanıcıları için zengin metin düzenlemeyi kolaylaştırmak için Word kullanılmıştır.

Ne yazık ki, e-posta tasarımcıları için Word, web'de ve e-posta kampanyalarında yaygın olarak kullanılan HTML ve CSS için çok sınırlı bir desteğe sahiptir. Web standartları için bu sınırlı destek, Outlook'ta bozuk görünen e-posta kampanyalarıyla sonuçlanır. Bu desteği anlamak, e-postaların Outlook'ta veya herhangi bir e-posta istemcisinde bu konuda iyi görünmesini sağlamanın ilk adımıdır.

HTML ve CSS için e-posta istemcisi desteğini daha iyi anlamaya başlamanıza yardımcı olacak birkaç kaynak:

• Campaign Monitor'ün En İyi CSS Rehberi
• Gmail ve CSS'yi Anlama: 1. Bölüm ve 2. Bölüm
• Microsoft Outlook İstemcilerinde Farklılıkları Oluşturma Kılavuzu
• Cihazlar, İşletim Sistemleri, Uygulamalar ve Motorlar Oluşturmayı Nasıl Etkiler?
• Masaüstü Oluşturma Sorunları? İlk Testi Birkaç İşleme Motorunda Odaklayın
• Webmail Rendering Açıklaması: Ön İşlemciler Neden Düşmandır?

Web yazı tiplerini kullanırken Outlook'un uygun yazı tiplerini göstermemesiyle nasıl başa çıkıyorsunuz?

Web yazı tiplerinin, yani kullanıcının cihazına yüklenmek yerine web üzerinden sunulan yazı tiplerinin popülaritesi artıyor. Şirketlerin tipografileriyle markada kalmalarına ve canlı metni teşvik etmelerine izin verdikleri için e-posta pazarlamacıları için ideal bir araçtır. Ne yazık ki, tüm e-posta istemcileri tarafından desteklenmezler. Ve Outlook söz konusu olduğunda, destek eksikliği, HTML'nizde bildirilen herhangi bir yedek yazı tipi yerine Times New Roman'ın görüntülendiği durumlara yol açar.

Etkilenen metinde bir HTML sınıfı ve bazı Outlook'a özgü CSS gerektiren bir çözümle bu sorunu daha önce ele almıştık. Bu çözüm hala iyi çalışıyor olsa da, daha temiz ve bakımı daha kolay bir çözüm ilgi görüyor. İlk olarak Action Rocket'tekiler tarafından önerilen bu çözüm, yazı tiplerini sunmak için @font-face kurallarının kullanılmasını ve bunları e-postanızın başında bir medya sorgusuna sarmayı gerektirir.

 <style type="text/css"> @media screen { @font-face { font-family: 'Family Name'; font-style: normal; font-weight: 400; src: local(), local(), url() format(); } } </style>

Bu çözüm, Outlook'un beyan edilen yazı tipi yığınınıza geri dönmesini sağlarken kodunuzu kirleten HTML sınıfı nitelikleri gerektirmediğinden mükemmel bir yaklaşımdır. Teknik hakkında daha fazla bilgi edinmek için Action Rocket'ın orijinal makalesine göz atın.

Mobil cihazlarda mavi bağlantıların oluşmasını nasıl engellersiniz?

Mobil cihazlar kullanışlı araçlardır. Bunları daha da kullanışlı hale getirmek için Apple gibi şirketler, e-posta istemcilerine, kullanıcıların kişilerine, takvimlerine veya harita uygulamalarına hızla bilgi eklemesine olanak tanıyan bir özellik ekledi. Bir e-postada buna benzer bir şey görmüş olma ihtimaliniz yüksektir:

Metin benzeri belirli adresler, tarihler, saatler ve telefon numaraları, etkileşime girebileceklerini göstermek için mavi, altı çizili bağlantılar olarak vurgulanır. Ne yazık ki, bu mavi bağlantılar bazen hem tasarım açısından hem de erişilebilirlik açısından sorunlara neden olmaktadır. Koyu bir arka plan üzerindeki açık renkli metin maviye döndüğünde, etkileşim bir yana, bu bağlantıların okunması (imkansız değilse bile) artık zordur.

Bu soruna, o metin üzerinde stilleri korumanıza izin veren bir çözüm hakkında daha önce yazmıştık, ancak yine, daha yeni bir çözüm popülerlik kazanıyor. Aşağıdaki pasajı dahil etmenin, HTML'nizde ek işaretlemeye gerek kalmadan iOS'taki mavi bağlantıları öldürdüğü ortaya çıktı. Sadece e-postanızın başına ekleyin ve gönderin.

 a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important; }

Bazı web semineri katılımcıları, yukarıdaki CSS'nin özellikle Apple cihazlarını hedeflediğini zekice belirtti. Son testlerim, mavi bağlantıların Android'de bir sorun olmadığını gösterse de, bazı Litmus Topluluğu üyeleri, Android ve Gmail'in telefon numaraları gibi şeyleri bağlamasıyla ilgili sorunlarla karşılaştı. Akıllı geçici çözümlerden bazılarını görmek için Topluluk tartışmasına göz atın.

Duyarlı görüntüleri işlemenin en iyi yolu nedir? Retina görüntüleri nasıl?

Daha fazla insan duyarlı e-posta tasarımını benimserken, duyarlı resimlere olan ihtiyaç arttı. Duyarlı görüntüleri işlemek için en iyi tavsiyem, harika E-posta Geliştirme Bülteninin arkasındaki geliştirici Julie Ng için aldığım bir tekniktir.

Temel olarak, görüntü boyutlarınızı img etiketinizde çeşitli şekillerde bildirirsiniz. Bazı e-posta istemcilerinin daha büyük retina görüntülerini tam boyutlarında görüntülemesini önlemek için, width özniteliğini kullanarak genişliği bildirirsiniz. Bu, piksel cinsinden iyi bir taban çizgisi genişliği sağlar. Duyarlı e-postalar için görüntünün genişliğini, maksimum genişliğini ve minimum genişliğini satır içi CSS olarak bildirirsiniz. İşte bir örnek:

 <img alt="Hello" src="http://example.com/image.png" width="600" border="0">

Doğal olarak, resimler devre dışı bırakıldığında bazı ALT metinleri sağlamak ve display:block; bildirmek isteyeceksiniz. görüntünün etrafında gereksiz boşluk oluşmasını önlemek için. Resim üzerinde ek kontrole ihtiyacınız varsa, onu e-postanızın başında bir sınıf ve CSS ile hedefleyebilirsiniz. Unutmayın, gömülü CSS her yerde desteklenmez.

Retina görüntüleri söz konusu olduğunda, en iyi seçeneğiniz, görüntülerinizi e-postanızdaki görüntü için amaçlanan görüntüleme boyutunun iki katı olacak şekilde oluşturmaktır. Örneğin, 600px x 200px bir resminiz varsa, onu 1200px x 400px bir resim olarak oluşturup kaydedersiniz. Normal olarak e-postanıza ekleyin. Daha önce bahsettiğim genişlik özelliği, Outlook gibi istemcilerde saçma bir şekilde büyük bir görüntü olarak görüntülenmesini engelleyecek ve görüntüleriniz retina ekranlı cihazlarda güzel ve net görünecek.

Bir e-postada animasyonlu GIF kullanmak isteyen birine tavsiyeniz var mı?

Göreyim seni! Animasyonlu GIF'ler, e-posta kampanyalarınıza hareket ve ilgi katmanın harika bir yoludur. Tekniği o kadar çok seviyoruz ki, e-postada animasyonlu GIF'leri kullanmak için kapsamlı bir kılavuz yazdık.

Yalnızca animasyonun ilk karesini görüntüleyen Microsoft Outlook'ta en dikkat çekici olan, her yerde desteklenmediklerini anlayarak başlayın. GIF'teki herhangi bir görüntünün, abonelere hayati bilgileri iletmek için değil, örnekleme amacıyla kullanıldığından emin olmak iyi bir fikirdir. Bu tür bilgiler her zaman e-postada canlı metin olarak görüntülenmelidir, böylece aboneler GIF'ler ve resimler gibi şeyler devre dışı bırakıldığında bile okuyabilir.

Pek çok insan GIF'lerin sadece eğlence amaçlı olduğunu düşünürken, birçok ürün şirketi ürünleriyle etkileşimlerini göstermek için animasyonlu GIF'ler kullanıyor ve esasen insanlara ürünleri onlara dokunmadan önce nasıl kullanacaklarını öğretiyor. İşte MailChimp'ten harika bir örnek:

GIF'ler, her e-posta pazarlamacısının araç kutusuna harika bir ektir. Yine de bir tavsiye kelimesi, onları idareli kullanmak olacaktır. Her kampanya bir sürü GIF içeriyorsa, sürpriz duygularını çabucak kaybederler. Bir kampanyaya veya havalı bir şeyin gösterisine gerçekten dikkat çekmek istediğinizde bunları ara sıra kullanın.

E-postada video kullanımına ne dersiniz?

Tıpkı animasyonlu GIF'ler gibi videolar da bir abonenin dikkatini çekmenin mükemmel bir yolu olabilir. Ne yazık ki, videoların kendileri e-posta istemcileri arasında daha da az desteğe sahiptir. Bir zamanlar bir e-postada video arka planı kullanabilmemize rağmen, bu yalnızca Apple Mail ve Mac için Outlook'ta destekleniyordu.

Yine de bu, videoyu e-postayla birlikte kullanmaktan caydırmamalı. İnsanlar videoları kesinlikle seviyor ve şirketler, kullanıcılarla etkileşimi artırmanın bir yolu olarak video pazarlamayı giderek daha fazla kullanıyor. Videoyu e-postada kullanmanın en iyi yolu, bir açılış sayfasına bağlantı veren e-posta kampanyasına videonun hareketsiz bir görüntüsünü oynat düğmesiyle eklemektir. Kullanıcılar bunun bir video olduğunu hemen anlar ve videoyu açılış sayfasında görüntüleyebilir.

E-postaya gömülü video güzel bir kullanıcı deneyimi sağlarken, Wistia'daki arkadaşlarımız açılış sayfalarının neden daha iyi bir çözüm olduğuna dair bazı iyi noktalara değindi.

• Bir açılış sayfasındaki video başka bir yerde yeniden kullanılabilir. Kalıcı bir içerik kaynağıdır.
• Açılış sayfaları daha fazla etkileşimi kolaylaştırır. Gelen kutunuzda bir video izlemeyi bitirdikten sonra, yapacak ne kaldı?
• İnsanlar videoları açılış sayfalarında daha kolay paylaşabilir.

Bu nedenle, e-posta kampanyalarınızda kesinlikle video kullanın, ancak en azından şimdilik, bunun videoları bir e-postada izlemek anlamına gelmediğini kabul edin.

Önerdiğiniz duyarlı e-posta çerçeveleri var mı?

Web seminerinde daha iyi e-posta kampanyaları oluşturmak için birkaç kaynaktan bahsettik, ancak burada kesinlikle tekrar etmeye ve genişletmeye değer.

Duyarlı e-posta çerçeveleri ve şablonları söz konusu olduğunda, bir dizi kullanılabilir:

• Ted Goas'tan Cerberus
• MailChimp'in E-posta Planları
• E-postalar için Zurb Vakfı
• Mailjet'in MJML'si

Favorilerimizden biri, çeşitli gönderme senaryoları için beş duyarlı şablon içeren kendi Slate'imizdir. Hangi seçeneği seçerseniz seçin, abonelerinizin herhangi bir sürprizle karşılaşmadığından emin olmak için bunları e-posta istemcilerinde test ettiğinizden emin olun.

Slaytları ve kaydı görüntüleyin

"Bekle. E-postama az önce ne oldu?” En yaygın e-posta sorunlarını ve çözümlerini belirlemenin yanı sıra, her e-postayı test etmenin önemine değindik ve hatta Sendwithus ile işlemsel e-postaların nasıl test edileceğine baktık. İlk defa kaçırdıysanız, slaytları indirebilir ve kaydı aşağıdan izleyebilirsiniz.

Slaytları ve kaydı görüntüler →