E-postadaki HTML Tabloları: Ne yanlış gidebilir?

Herhangi bir süredir e-posta endüstrisinde bulunduysanız, e-posta kampanyalarınızla ilgili bir takım sorunlar yaşamış olabilirsiniz. Eksik görüntülerden teslim edilebilirlik sorunlarına kadar, e-posta pazarlaması zorluklarla doludur. Yine de, e-postalarınızın temelinde yer alan tablolarda (gerçek kodda) neyin yanlış gidebileceğini düşünmemiş olabilirsiniz.

Ne yazık ki, HTML tablolarında yanlış gidebilecek çok şey var. Bugün, HTML tablolarında görülen en yaygın sorunlardan bazılarını ele almak ve aynı sorunlarla kendi e-postalarınızda karşılaşmamanızı sağlamak için size birkaç ipucu vermek istedik.

Neden tabloları kullanırız

İlk olarak, e-postaları kodlamak için neden HTML tablolarını kullandığımıza dair hızlı bir tazeleme. Geçmişte tartıştığımız gibi, e-posta pazarlama kampanyaları kendi özel kodlama hususlarını gerektirir. Web ve e-posta aynı teknolojiler (HTML ve CSS) üzerine kurulmuş olsa da, e-posta uygulamaları web tarayıcılarıyla aynı standartlara uymaz. Her e-posta uygulamasının, hangi kodun desteklendiğini ve e-postaların nasıl görüntüleneceğini belirleyen kendi oluşturma motoru vardır. Bizim için kötü haber, tüm bu oluşturma motorlarının farklı HTML etiketlerini ve CSS özelliklerini desteklemesidir.

Bu nedenle, web tasarımında kullanılan kodlama ilkelerini büyük ölçüde kullanamıyoruz. E-postaların çoğu e-posta istemcisinde düzgün görüntülenmesini sağlamak için, bir e-posta kampanyasının yapısını oluşturmak için HTML tablolarını kullanmamız gerekir.

Bu, özellikle Gmail'in geçen yılki büyük güncellemesiyle birlikte son zamanlarda değişmesine rağmen, bazı e-posta istemcileri hala çok fazla HTML ve CSS'yi desteklemiyor. En dikkate değer: Microsoft'un, oluşturma motoru olarak Microsoft Word'ü kullanan Outlook e-posta istemcileri ailesi. Outlook hala oldukça popüler olduğundan (şu anda E-posta İstemcisi Pazar Payı izleyicimizde 5. sırada), e-posta tasarımcıları, kampanyalarının aboneler için düzgün bir şekilde görüntülenmesini istiyorlarsa, tabloları yine de belirli bir kapasitede kullanmak zorundalar.

Ve HTML tablolarına güvenmek zorunda kaldığımızda, yanlış gidebilecek birçok şey var…

İşleri karmaşık hale getirmek

Tabloları kullanırken gördüğümüz en yaygın sorunlardan biri aşırı karmaşık düzenlerdir. Bu, özellikle birkaç yıldır güncellenmemiş eski e-posta şablonları için geçerlidir.

Yakın zamana kadar, çoğu e-posta çok sayıda tablodan oluşuyordu. Tablolar içinde tablolar—iç içe yerleştirme olarak bilinen bir uygulama.

Birden çok tabloyu başka bir tablonun içine yerleştirdiğinizde, kodunuz içinde sorunlarla karşılaşmanız olasıdır. Bir şeyleri değiştirirken yanlışlıkla bir tabloyu yanlış yere koymak veya önemli bir HTML etiketinin üzerine yapıştırmak çok kolaydır. Ve bazı istemciler için (size bakarken, Lotus Notes), tabloları çok derine yerleştirdiğinizde e-postaların kötü işlendiğini görebilirsiniz. Bu nedenle, arkadaşımız Brian Graves'in yazdığı gibi, modüler bir yaklaşımla e-postalar oluşturmanızı öneririz. Ve iç içe geçmiş tabloları minimumda tutmaya çalışın. Yerleştirme masaları neredeyse kaçınılmazdır, ancak yuvalama derinliğini maksimum 4-6 masa arasında tutmak herhangi bir sorundan kaçınmanıza yardımcı olacaktır.

Karmaşık iç içe yerleştirmeye benzer şekilde, aşırı karmaşık tasarımlar da sorunlu olabilir. Birden çok sütunlu e-posta görmek alışılmadık bir durum değildir, ancak bir e-postaya çok fazla sütun eklemeye başladığınızda, kendinizi olası bir hataya hazırlıyorsunuz demektir.

Bazı e-posta istemcilerinin temel matematikte bile sorunları vardır. Microsoft Outlook'un belirli sürümlerinin, tablo sütunlarına fazladan boşluk ekleyerek e-posta düzenlerini bozduğu bilinmektedir. %25 genişliğe ayarlanmış dört tablo hücresi kullanmanın mantıklı olduğunu düşünebilirsiniz, ancak Outlook bu hücrelere fazladan boşluk ekleyecek ve yerleşimin %100'den daha geniş olmasına neden olacaktır. Ortaya çıkan e-posta, bu hücrelerin bazılarını kendi sıralarına bırakarak iyi tasarlanmış, mükemmel planlanmış e-posta kampanyanızı mahveder.

E-posta düzenlerinizi basit tutmak, kampanyalarınızla ilgili olası sorunlardan kaçınmanıza yardımcı olur ve abonelerinizi mutlu eder.

Eksik etiketler

E-postalarda genellikle çok sayıda kod bulunur. Ve çoğu e-posta ekibi çok hızlı ve sıkı programlarla çalışır. Bu kombinasyon, bir e-posta kampanyasını mahvedebilecek hatalara yol açabilir.

Hızlı bir tazeleme olarak, HTML'nin nasıl yazıldığına bakalım. HTML, içeriği çevreleyen etiketlerden oluşur. Çoğu durumda, uygun işaretleme hem açılış hem de kapanış etiketi gerektirir. Bu HTML tablosunu örnek alın:

 <table> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> </table>

Üç farklı etiket olduğunu görebilirsiniz: Tablo, tablo satırı ve tablo hücresi. Bu etiketler açılır ve ardından kapatılır (/ sembolü ile gösterilir).

HTML bağışlayıcı bir biçimlendirme dili olmasına rağmen, e-posta istemcileri ve bunların oluşturma motorları, HTML etiketleri eksik olduğunda genellikle boğulur. Ne yazık ki, eksik kapanış etiketleri, e-postalarda çok yaygın bir sorundur. Bu hızlı geri dönüş süreleri, e-posta tasarımcılarının çok hızlı kod yazmalarına ve bir tabloyu, satırı veya hücreyi kapatmayı unutmalarına neden olabilir. Bu, bazı müşterilerde iyi olsa da, diğerlerinde kampanyaların kesintiye uğramasına yol açacaktır.

W3C İşaretleme Doğrulama Hizmeti gibi araçlar, eksik etiketlerin belirlenmesine yardımcı olabilir. Eksik etiketler ve yanlış biçimlendirilmiş işaretlemeler, e-posta oluşturmanıza yardımcı olması için e-posta şablonlarını veya Builder's Partials ve Snippets gibi araçları kullanmanızı önermemizin nedenidir. Yalnızca kodunuzun iyi yazıldığından ve düzgün bir şekilde test edildiğinden emin olmanıza yardımcı olmakla kalmaz, aynı zamanda iş akışınızı hızlandırma avantajına da sahiptir; bu sıkı teslim tarihlerine ulaşmanıza ve ekibinizi mutlu etmenize olanak tanır.

Eksik özellikler

Eksik etiketlerin sorunlara yol açabileceği gibi, tablolardaki eksik HTML nitelikleri de korkak görünümlü tasarımlara yol açabilir.

HTML nitelikleri, HTML etiketlerinde ayarlanabilen ek özelliklerdir. Bu özellikler, eleman genişlikleri ve yükseklikleri, hizalama ve hatta boşluk gibi şeyleri kontrol eder. Tablo hücrelerinin çevresinde beklenmeyen boşluk bırakılması, HTML tablolarında göreceğiniz en yaygın sorunlardan biridir.

Neredeyse tüm e-posta uygulamaları (ve web tarayıcıları) HTML tablolarına kendi stillerini ekler. HTML tabloları geleneksel olarak tablo verilerini görüntülemek için kullanılır ve orijinal olarak içeriği düzenlemek ve tasarlamak için tasarlanmamıştır. Bu nedenle, tabloların düzgün görüntülenmesini sağlamak için tarayıcıların ve e-posta uygulamalarının varsayılan davranışını geçersiz kılmamız gerekiyor.

Tabloya hücre aralığı ve hücre doldurma niteliklerini ekleyerek ve her ikisini de sıfıra ayarlayarak, hiçbir e-posta istemcisinin herhangi bir tablo hücresine veya etrafına fazladan boşluk eklemeyeceğinden emin olabiliriz.

 <table cellpadding="0" cellspacing="0"> </table>

Aynı şekilde, tablo genişlikleri veya tablo içeriğinin hizalanması ile ilgili sorunlarla karşılaşıyorsanız, tablolarda veya tablo hücrelerinde genişlik veya hizalama niteliklerini unutmadığınızdan emin olmalısınız.

Sorun gidermeyi öğrenin

Kendi e-posta kampanyalarınızı nasıl gidereceğinizi ve aboneleriniz için utanç verici sorunlardan nasıl kaçınacağınızı öğrenmek ister misiniz? Bir profesyonel gibi e-posta sorunlarını giderme konusunda eksiksiz bir atölye çalışması için Litmus Live'da bize katılın. En yaygın e-posta tuzaklarını, çözümlerini ve sorun giderme kampanyaları için en iyi yöntemleri gözden geçireceğiz.

Litmus Live biletlerinizi alın! E-postayı bizimle kutlamak için bugün kaydolun! Şimdi kaydolun →