HTML E-posta İçin Eksiksiz Bir Kılavuz

İçindekiler

Aşağıda, ihtiyaç duyabileceğiniz belirli bileşenlere hızlı atlamalar bulacaksınız. Genel bir bakış için aşağı kaydırın. Veya içindekileri atlayın.

• ulaşılabilirlik
• böcekler
• karanlık mod
• editörler ve IDE'ler
• özellik desteği
• çerçeveler
• başlarken
• kılavuzlar ve kaynaklar
• satır içi CSS
• esin
• mailto bağlantı oluşturucu
• mailto seçim istemi
• pazarlama
• meta-diller
• önizlemeler
• verimlilik
• kullanılmayan CSS'yi kaldır
• hedef e-posta istemcileri
• şablonlar
• izleme engelleyici
• HTML'yi dönüştür

HTML E-postaya Başlarken

Tuhaf bir HTML e-posta dünyasının perde arkasında olan her şeyi anlamaya çalışıyorsanız, Caity G. O'Connor e-posta kodlamaya nasıl başlayacağınız konusunda harika bir kılavuz yayınladı. Makale, e-posta oluştururken ve tasarlarken akılda tutulması gereken kurslar, öğreticiler, makaleler ve yalnızca genel yönergeleri içerir - tümü tek sayfalık kapsamlı bir kılavuzda. SmashingMag'de Lee Munroe, HTML e-postaları oluşturmak ve göndermek için de ayrıntılı bir kılavuz yayınladı.

Alternatif olarak, Herhangi Bir Cihaz için HTML E-postaları Nasıl Kodlanır, güvenilir bir HTML e-posta şablonu oluşturma ve bunun nasıl test edileceği konusunda çok kapsamlı bir kılavuzdur - sıfırdan bir bülten şablonu oluşturmaya yönelik uygulamalı bir örnek. Genel olarak, doğru bir başlangıç ​​yapmak için bilmeniz gereken her şeye çok sağlam bir genel bakış.

Jason Rodriguez, erişilebilirlikten sorun gidermeye, iş akışlarına ve araçlara kadar onlar hakkında bilinmesi gereken hemen hemen her şeyi içeren HTML E-posta (ücretsiz değil) hakkında ayrıntılı bir video kursuna sahiptir.

Ve kendinizi bir e-posta sorunuyla uğraşırken bulursanız veya yalnızca bir topluluktan yardım beklerseniz, #emailgeeks harika bir başlangıç ​​noktasıdır. Kod, tasarım, iş ilanları, etkinlikler ve yeni araçlar ve kaynakları tartışmak için çok sayıda kanalı olan, yalnızca davetli bir Slack topluluğudur. Twitter'da #emailgeeks hashtag'i ile paylaşılan birçok kaynağa da ulaşabilirsiniz.

HTML E-posta Dilleri ve Çerçeveleri

Tüm popüler e-posta istemcilerinde sağlam bir deneyim sağlayan temiz, duyarlı e-postaları kodlamak zaman alıcı bir zorluk olabilir. HEML bunu değiştirmek için burada. Açık kaynaklı biçimlendirme dili , tüm e-posta tuhaflıklarıyla uğraşmak zorunda kalmadan size HTML'nin yerel gücünü verir. Uzmanlaşmak için özel kurallar veya stil paradigmaları yoktur, bu nedenle HTML ve CSS biliyorsanız başlamaya hazırsınız.

MJML, duyarlı e-posta oluşturma sürecini basitleştirme fikrine dayanmaktadır. İşaretleme dili, açık kaynaklı bir motor ağır işleri üstlenirken ve yazdığınız MJML'yi duyarlı HTML'ye çevirirken süreci basitleştiren anlamsal bir sözdizimine dayanır. MJML aracılığıyla adım adım bir eğitimle başlayabilirsiniz.

Standart bileşenlerden oluşan bir kitaplık size ekstra zaman kazandırır ve e-posta kod tabanınızı hafifletir. Ve kendinizinkini oluşturmak istiyorsanız, Modüler Şablon Sistem Kılavuzu da yardımcı olabilir.

Zaman tasarrufundan bahsetmişken: HTML e-postasının düzgün çalışması için tablolar üzerine tablolar gerektirdiğini ve bunları oluşturmanın ne kadar sıkıcı olabileceğini hepimiz biliyoruz. İşte burada Inky devreye giriyor. Şablonlama dili, <row> ve <columns> gibi basit HTML etiketlerini karmaşık tablo HTML'sine dönüştürür, böylece uğraşmanıza gerek kalmaz.

Tailwind CSS'ye Dayalı HTML E-posta Çerçevesi

Bir HTML e-postasının e-posta istemcileri arasında çalışmasını sağlamak kolay bir iş değildir. Neyse ki, işinizi kolaylaştıracak çok sayıda güvenilir araç, şablon ve çerçeve var. Örneğin Maizzle, Tailwind CSS ve gelişmiş, e-postaya özel post-processing ile hızlı bir şekilde HTML e-postaları oluşturmanıza yardımcı olan bir çerçevedir. Ayrıca, hemen başlayabileceğiniz birkaç hazır proje (Maizzle Starters) sağlar.

Maizzle, tasarımcıların ve geliştiricilerin HTML ve CSS ile e-postaları kolayca prototip haline getirmelerini sağlamak için Tailwind CSS çerçevesini kullanır. Ayrıca, her e-postayı sıfırdan geliştirmek istemiyorsanız güzel şablonlarla birlikte gelir. Alternatif olarak, MJML'yi de düşünmek isteyebilirsiniz.

Sass Tabanlı HTML E-posta Çerçevesi

E-posta Vakfı, Outlook dahil tüm büyük e-posta istemcileriyle iyi çalışan duyarlı HTML e-postaları oluşturmanıza yardımcı olur. Izgara tabanlı bir yaklaşım, e-postanızın herhangi bir cihazda çalışmasını sağlar, UI kalıpları ve bir CSS iç astarı, e-postayı hızlı bir şekilde şekillendirir ve Sass size genel stiller üzerinde kontrol sağlar. Ne oluşturuyor olursanız olun, işlemsel e-postalardan damla kampanyalarına ve haber bültenlerine kadar her şey için bir dizi duyarlı şablon, bunun yerine kopyalama veya dönüşüm hunileriniz için harcayabileceğiniz zamandan tasarruf etmenizi sağlar.

Kurşun Geçirmez HTML E-posta Şablonları

Cerberus ve HTML Email, Gmail, Outlook, Yahoo, AOL ve diğerleri dahil olmak üzere 50'den fazla e-posta istemcisinde iyi test edilmiş, duyarlı HTML e-postaları için güvenilir, sağlam şablonlardan oluşan küçük koleksiyonlar sağlar. EmailFrame.work, 60'tan fazla e-posta istemcisinde desteklenen, önceden oluşturulmuş ızgara seçenekleri ve temel bileşenlerle duyarlı HTML e-posta şablonları oluşturmanıza olanak tanır.

Codedmails, tümü MJML'de yazılmış ve uyumluluk açısından test edilmiş 60 e-posta şablonu ve teması içerir. Kodun tamamı Github'da mevcuttur ve şablonlar ticari olmayan projeler için ücretsizdir, MJML kaynak dosyaları ise ek bir ücret karşılığında sağlanır.

Stripo, Chamaileon, Postcards, Topol.io, GoodEmailCode, Pixelbuddha ve Bee Free'nin tümü çok sayıda ücretsiz HTML e-posta şablonu içerir, Litmus haber bültenleri, ürün güncellemeleri ve makbuzlar için Duyarlı E-posta Şablonları sağlar ve CampaignMonitor'da sürükleme özelliğine sahip ücretsiz bir HTML e-posta şablonu oluşturucu vardır. n'drop işlevi. Göz önünde bulundurmaya değer başka bir sürükle ve bırak düzenleyicisi Unlayer'dır. Kodlama gerektirmeden yalnızca birkaç tıklamayla mobil kullanıma hazır HTML e-posta şablonları oluşturmanıza yardımcı olur.

HTML E-posta Özellik Desteği: E-posta gönderebilir miyim…?

Kendilerini HTML e-postalarını tartışırken bulan herkesin araç setinde bulunan kullanışlı bir araç - ara sıra veya düzenli olarak - caniemail.com'dur. Caniuse.com'un başarılı konseptinden ilham alan Can I email , 31 e-posta istemcisinde 179 HTML ve CSS özelliği desteğini kontrol etmenizi sağlar.

Ne kadar iyi desteklendiğini görmek için bir özellik girebilir, özellik dizinini kontrol edebilir, e-posta istemcilerini karşılaştırabilir veya e-posta istemcilerini desteklerine göre sıralayan bir e-posta istemcisi destek puan tablosunu görüntüleyebilirsiniz. Tam veriler ayrıca bir JSON dosyası olarak da mevcuttur.

E-posta Hataları İçin Bir Depo

Apple Mail gömülü SVG'leri göstermiyor, Gmail e-postaları tam genişlikte göstermiyor, Outlook animasyonlu Gif'lerin davranışını değiştiriyor - hepimiz e-posta istemcilerinin bazen ne kadar garip davrandığını biliyoruz.

Bunun gibi hatalarla karşılaştığınızda neler olduğunu anlamanıza yardımcı olmak için Remi Parmentier, garip e-posta istemci davranışları için bir GitHub deposu olan Email Bugs'ı korur. Hataları tartışmak için bir yer sağlayarak e-posta tasarımcılarının hayatını kolaylaştırmakla kalmaz, aynı zamanda her bir hatayı ilgili şirkete rapor etmeye ve bunları tamamen düzeltmeye çalışır. Ancak bunun mümkün olmaması durumunda, E-posta İstemcileri Nasıl Hedeflenir, belirli e-posta istemcilerini hedeflemek için geçici çözümlere genel bir bakış sağlar.

Mailto Bağlantı Oluşturucu

İyi eski HTML bağlantıları, genellikle onlara kredi verdiğimizden daha fazlasını yapabilir. mailto: önekine alışmış olabiliriz, ancak aslında kodu oluşturmak oldukça can sıkıcı olabilir. Mailtolink.me bir şey yapar ve bunu iyi yapar: CC, BCC, konu satırı ve gövde metni dahil olmak üzere mailto bağlantıları için snippet oluşturur.

Mailto Seçim İstemi

Bazen bir e-posta adresine tıkladığınızda, müşterilerinizin gerçekten kullanmadığı bir uygulama açılabilir. Bu nedenle, doğrudan bağlantılara tıklamak yerine e-posta adreslerini kopyalayıp yapıştırmak yaygındır. Diğer tarafta hayal kırıklığı yaşamamak için Mailgo ve MailtoUI kullanabiliriz.

Yerel bir e-posta istemcisi açmak yerine, her iki araç da kalıcı bir pencere sorarak kullanıcının tercih edilen hizmetlerden birini seçmesine veya bağlantıyı kopyalayıp yapıştırmasına olanak tanır. Ek olarak, Mailgo tüm tel bağlantılarını da ele alabilir ve Telegram, WhatsApp, Skype'ı açmalarına, varsayılan olarak aramalarına veya telefon numarasını kopyalamalarına izin verir - ve karanlık modu da destekler.

E-posta İlhamı

HTML e-postası oldukça eski ve modası geçmiş olduğu için HTML e-posta ile yapabileceklerimizin olanakları da öyle görünebilir. Ancak, yeni e-posta tekniklerini içeren çok sayıda kaynak, blog ve podcast var - bunlardan bazıları genellikle işlerin çok yaratıcı tarafında yer alıyor!

Litmus Blog, CampaignMonitor blog ve HTML Email, HTML e-postayla ilgili en iyi uygulamaları, ipuçlarını, kaynakları ve hatta podcast'leri içeren çok sayıda makale ve podcast içerir. Ve sektöre göre sıralanmış son e-postalar için biraz ilhama ihtiyacınız varsa, Gerçekten İyi E-postalar ve EmailLove da arkanızda.

• HTML e-posta tasarımı ilhamını bulmak için kendi e-posta gelen kutunuzu taramanız gerekmez. Email Love, en iyi şirketlerden harika bir ilham verici e-posta seçkisi hazırladı.
• Gerçekten İyi E-postalar, HTML e-posta ilhamını aramayı kolaylaştırır. Koleksiyonu kronolojik olarak keşfetme seçeneğine sahipsiniz veya ne tür bir e-posta olduğuna (örneğin kupon, ücretsiz deneme), amacın ne olduğuna (örneğin müşteri ödülleri, teşekkür ederim), şirket adına veya kategorisine göre sonuçları daraltabilirsiniz. ve bunun gibi.
• Yeterli değil? Ayrıca HTML E-posta Tasarımları ve HTML E-posta Galerisi de vardır.

Erişilebilir E-postalar

E-posta ile erişilebilirlik açısından neredeyiz? E-postaları ekran okuyuculara doğru şekilde duyuruyor muyuz? Peki ya karanlık mod? Erişilebilir E-posta deposu, yalnızca e-posta için değil, özellikle e-posta için erişilebilirlikle ilgili bir dizi makale, araç, sunum ve kaynağı vurgular.

Accessible-Email.org ile gönderilen kampanyaları analiz edebilir ve erişilebilirlik iyileştirmelerini kontrol edebilirsiniz. E-posta Simülatörü için Karanlık Mod ile e-postanızın karanlık modda nasıl göründüğünü kontrol edebilirsiniz.

Satır İçi CSS ve HTML E-postalarını Dönüştürme

HTML ve CSS'nizi dönüştürmek için ihtiyacınız olan tek şey temiz bir alansa, Alter.Email güvenilir bir seçenektir. Araçla, birkaç "dönüştürücü" seçebilirsiniz - örneğin satır içi CSS ve kodu temizleyin , kullanılmayan CSS'yi kaldırın, ayrıca HTML'yi biçimlendirin ve hatta dul kelimeleri önleyin. Alternatif olarak, CSS'yi küçültmenize ve satır içi yapmanıza ve ayrıca bir test e-postası göndermenize olanak tanıyan Postdrop'u da kullanabilirsiniz.

Kullanılmayan CSS'yi E-posta Şablonlarından Kaldırın

Her yere !important ve satır içi stiller serpiştirilmiş HTML E-posta ile CSS yazmak özellikle heyecan verici bir iş değildir. Kullanılmayan CSS'yi e-posta şablonlarından kaldırmak için Email Comb vardır. Araç, yoksaymak istediğiniz sınıfları ve kimlikleri eklemenize, küçültmek ve yorumları kaldırmak isteyip istemediğinizi seçmenize olanak tanır ve tam olarak neyi kaldırdığını gösterir.

E-posta İstemcilerini Hedeflemek İçin Hile Sayfası

E-posta istemcileri, HTML ve CSS'nizin bir kısmını genellikle acımasızca değiştirir ve kaldırır. E-posta istemcilerinden biri beklendiği gibi davranmazsa, ayrı olarak ele almak isteyebilirsiniz. E-posta istemcilerini hedeflemek için bir hile sayfası, bir hedef e-posta istemcisi seçmenize ve en azından onu doğrudan ele almaya çalışmanıza olanak tanır. E-posta istemcileri sürekli değiştiği için her zaman çalışmayabilir, ancak denemeye değer bir şey.

Her Şey HTML E-posta Kaynakları

Thebetter.email, insanlar, öğrenme siteleri, araçlar, e-posta hizmet sağlayıcıları hakkında ayrıntılar, haber bültenleri, kod ve etkileşimli e-posta kaynakları dahil olmak üzere, büyüyen bir yararlı e-posta pazarlama kaynakları deposu sağlar. Yıllardır sektörde olan ve iyi şeyleri bulmak için bu zamanın çoğunu çamurun içinden geçerek geçiren Jason Rodriguez tarafından özenle seçilmiştir.

E-posta Pazarlama Kaynakları

HTML e-postası, en iyi uygulamalar ve e-posta pazarlamasının derinliklerine dalmanız gerekiyorsa, CampaignMonitor Kılavuzları ve Mailchimp Kılavuzları, başlamak için birçok kaynağa sahiptir. Aslında, bazıları ürüne özel olacak, ancak aynı zamanda e-posta göndermek için en iyi uygulamalar, tasarım kılavuzları, teslimat ipuçları, istenmeyen posta önleme gereksinimleri ve bu satırlardaki birçok başka konu hakkında daha genel kılavuzlardır.

E-posta pazarlamasında devam eden trendler arıyorsanız, Oracle'ın E-posta Pazarlama Trendleri, e-posta teslim edilebilirliği, modüler e-posta mimarisi, e-posta erişilebilirliği ve ayrıca e-posta pazarlaması hakkında çok sayıda video içerir.

Gmail ve Outlook'ta Karanlık Mod

Dışarıdaki birçok uygulamada ve web sitesinde karanlık moda hepimiz alıştık, peki ya HTML e-posta istemcilerinde karanlık mod desteği? Elbette aynı e-postayı tüm abonelere sunabiliriz, ancak işletim sisteminizde karanlık moda alışkınsanız, parlak bir e-posta daha çok verimsiz olabilir ve vazgeçmeyi teşvik edebilir.

E-postada Karanlık Mod için Geliştirici Kılavuzu, HTML e-postanızın karanlık mod sürümünü oluştururken aklınızda bulundurmanız gereken bazı önemli yönergeleri vurgular. Karanlık modun nasıl hedef alınacağını, resimlerle nasıl başa çıkılacağını ve genel tarayıcı desteğini (ki bu oldukça iyi!) açıklıyor.

Remi Parmentier biraz daha derine inerek Gmail'in karanlık mod sorunlarının CSS Karışım Modları ile nasıl düzeltileceğini gösteriyor. Gmail, herhangi bir açık metin renginin koyu metin rengine dönüştürülmesini zorunlu kılar. Düzeltmeniz gerekiyorsa, gerekirse açık metin rengini korumak için Remi, mix-blend-mode yaratıcı bir kullanımını (Gmail'de desteklenir) buldu. E-postalarınızın Outlook.com'un karanlık moduna yanıt verdiğinden emin olmanız gerekiyorsa, Remi sizi de korumuştur.

HTML E-posta Geliştirme IDE'si

HTML e-posta ile biraz zaman harcıyorsanız, özel bir HTML E-posta düzenleyicisi kullanmak isteyebilirsiniz. Parsel tam da bu: e-postaları kodlamak ve tasarlamak için özel olarak oluşturulmuş bir kod düzenleyici . Canlı önizlemeler sağlar, böylece ne inşa ettiğinizi gerçek zamanlı olarak görebilirsiniz ve ayrıca kutudan çıktığı gibi erişilebilirlik özelliklerine sahiptir, böylece e-postayı oluştururken veya tasarlarken erişilebilirlik sorunlarını kontrol edebilirsiniz. Ayrıca araç, ekibinizle işbirliği yapmanıza ve doğrudan araçtan e-posta testleri çalıştırmanıza da olanak tanır.

Alternatif olarak, görsel ve kod düzenlemeyi tek bir e-posta IDE'sinde birleştiren gelişmiş bir masaüstü uygulaması olan (Windows, macOS ve Linux için) Mail Studio'ya da göz atabilirsiniz.

Uygulama, başlıklardan gezinme çubuklarına ve akordeonlara, birkaç duyarlı e-posta şablonuna, Google Fonts entegrasyonlarına, yerleşik Sass desteğine, komut paletine, işbirliği araçlarına, e-posta önizlemelerine ve hatta aşağıdakiler gibi e-posta servis sağlayıcılarıyla entegrasyona kadar bir bileşen kitaplığı ile birlikte gelir. MailChimp, Kampanya İzleme ve Sendgrid. Figma entegrasyonunun yakında gelmesi bekleniyor.

Tam Sayfa E-posta Önizlemesi Oluşturun

HTML E-postanızın tam sayfa önizlemesine ihtiyacınız varsa, Emailpreview.io tam da ihtiyacınız olan şey olabilir. HTML'yi kopyalayabilir/yapıştırabilir veya yeni aldığınız bir EML dosyasını içe aktarabilirsiniz ve araç, e-postanızın tam olarak işlenmiş bir görüntüsünü verir. Cihaz genişliğini de seçebilirsiniz. Yakında tutmak için yararlı küçük bir araç.

Posta İzleyici Engelleyici

Pazarlama e-postalarının çoğu, HTML e-postasında izleyiciler içerir, böylece müşterilerin e-postaları ne sıklıkta, ne zaman ve nerede açtığını izleyebilirler. MailTrackerBlocker, tarayıcılar için bir reklam engelleyici görevi görür, ancak e-posta istemcileriyle çalışır. Araç, müşterileri kimin izlediğini etiketler ve izleme piksellerini görüntülenmeden önce kaldırır, böylece tüm uzak içeriği yükleyebilir ve davranışlarınızı gizli tutabilirsiniz. Şu anda yalnızca macOS 10.11 - 11.x'te Apple Mail için kullanılabilir ( Jeremy Keith'e sesleniyorum! ).

E-postayı Daha İyi Hale Getirmek

Taşan gelen kutuları, geri bağlantı istekleriyle spam, Cuma öğleden sonra size e-posta gönderen ve Pazartesi sabahı takip eden insanlar - e-postayla uğraşmayı tatsız hale getiren birçok şey var. Ancak, e-postayı aşmak olmadığı için tek bir çözüm var: Durumu birlikte iyileştirelim. Bunu akılda tutarak, Chris Coyier, e-posta üretkenliğiyle ilgili bir site olan “E-posta İyidir”i çalıştırıyor.

"E-posta İyidir", e-postaları sinir bozucu hale getiren şeylere, nasıl daha iyi yapabileceğimize dair ipuçları ve fikirlere ve herkesin ilişki kurabileceği küçük anekdotlara bir göz atıyor. Her birimizin e-postayla nasıl ilgilendiğimizi ve e-posta alışkanlıklarımızın alıcı tarafında tetikleyebileceği tepkileri yansıtmak için harika bir fırsat.

Toplama

Muhtemelen bazı önemli ve değerli teknikleri ve kaynakları kaçırdık! Bu yüzden lütfen bir yorum bırakın ve onlara atıfta bulunun - bu gönderiyi güncellemeyi ve hepimizin geri dönebilmesi ve HTML e-postasını daha iyi ve daha hızlı oluşturabilmesi için güncel tutmayı çok isteriz.

Çarpıcı kalın!

Daha fazla okuma

• CSS Denetim Araçları
• CSS Üreticileri
• SVG Jeneratörleri
• Web Geliştiricileri İçin HTML E-posta Oluşturmaya ve Göndermeye Giriş
• Ayrıca, sonrakileri kaçırmamak için bültenimize abone olun.