Web ve E-posta Tasarımı Neden Farklıdır?

E-posta pazarlama bir çok özelliği içinde barındırır: harika bir yatırım aracıdır, kişiselleştirilebilir, iyi tasarlanması zordur ve en önemlisi, her işletme için olağanüstü bir etkiye sahiptir. E-postanın güzelliği ve gücünün arkasında farklı etkenler vardır. Kampanya tasarlamaya ve oluşturmaya yeni başlayanlar için e-posta kullanımı zorlayıcı ve kafa karıştırıcı olabilir.

Web ve E-posta Tasarımı Neden Farklı?

Birçok tasarımcı, e-postanın web – HTML ve CSS ile aynı teknolojiyi kullanması nedeniyle aynı şekilde oluşturulabileceğini varsaymaktadır. Ne yazık ki, onlarca popüler e-posta uygulamasının güvenlik kısıtlamaları nedeniyle, e-posta kendi tasarımına ve kodlama paradigmalarına sahiptir. E-posta pazarlaması ve tasarımının gücünden tam olarak yararlanmak için, öncelikle e-posta tasarımının web tasarımından ne kadar farklı olduğunun anlaşılması gerekir.

WEB TASARIMI

İlk defa e-posta tasarımı ile ilgilenecek olan tasarımcıların çoğu, şirketleri için e-posta pazarlamasını uygulamakla görevli web tasarımcılarıdır. HTML ve CSS kullanarak web siteleri tasarlar ve oluştururlar.

Web dünyasından gelenler, tipik web standartları yaklaşımını kullanarak web siteleri oluşturmaya alışkınlardır. Bunlar:

-Semantik öğeler kullanarak içeriği HTML ile oluşturmak
-Stil içeriğini, genellikle harici bir stil sayfası aracılığıyla CSS ile oluşturmak
-Etkileşimler ve dinamik öğelerle geliştirmek için JavaScript kullanmak gibi.

Bir sayfada içerik düzenlerken, uygun HTML ve CSS kullanabilirsiniz. Anlamsal(Semantik) öğeler – section, header, footer, article, headings, paragraph tagleri gibi – içindeki içeriğe anlam katar. Harici CSS daha sonra bu içeriğe yapı ve stil sağlamak için kullanılır.

İçerik ve sunumun bu şekilde ayrılması, web tasarımcılarının web için güzel ve sürdürülebilir deneyimler geliştirmelerine olanak sağlar.

Tüm bunları mümkün kılan araç ise web tarayıcılarıdır. Birçok tasarımcı, eski Internet Explorer sürümleriyle ilgilenme deneyimine sahip olsa da, modern web tarayıcıları bu web standartları etrafında oluşturulurlar. Birkaç farklılığa rağmen, hepsi HTML ve CSS’yi son derece iyi destekler. Ayrıca, farklılıklar yalnızca birkaç tarayıcıya yayılmıştır.

Bunun aksine, e-posta uygulamalarının şu andaki durumuna göre e-posta tasarımının neden tamamen farklı bir kulvar olduğunu anlamaya başlayabiliriz…

E-POSTA UYGULAMALARI VE GÖRSELLEŞTİRME MOTORLARI

İnternet trafiğini işleyen birkaç tarayıcıya sahip olan web’in aksine, e-postalar çok çeşitli e-posta uygulamalarında veya istemcilerinde okunur.

E-posta tasarımıyla ilgili en önemli sorun, e-posta uygulamalarının hepsinin farklı HTML ve CSS alt kümelerini desteklemesidir. Ve destek farklarının çoğu zaman aşılması zor olabilir. E-posta uygulamaları bir e-postanın içeriğini görüntülemek için görüntü oluşturma motorlarını kullanır. Ne yazık ki, masaüstü, web postası ve mobil uygulamalarının tümü farklı görüntüleme motorları kullanır.

Kampanya Monitörü’nün CSS’ye İlişkin Son Kılavuzuna bakınca, e-posta uygulamaları arasında ne kadar destek olduğunu görebilirsiniz. En dikkat çekici destek eksikliği, Microsoft’un desteklediği Microsoft’un Outlook’un masaüstü sürümlerinden geliyor.

Box Model and Positioning & Display bölümlerine baktığımızda, e-postaları düzenlemenin neden bu kadar sorunlu olduğunu anlamaya başlayabiliriz.

Web tasarımcıları, web sayfalarını yapılandırmak için display, float, width, height, margin, and padding gibi CSS özelliklerine güvenir. Bu özellikler çoğu HTML öğesine uygulanabilse de, web tarayıcılarında desteklenir ve içeriği yerleştirmeyi nispeten kolaylaştırır.

Ne yazık ki, Outlook’un çoğu sürümünün tüm özellikler için çok az desteği vardır veya hiç yoktur. Ayrıca, Outlook hala saygın bir pazar payına sahip olduğundan, çoğu tasarımcının kampanyalarının Outlook’ta görüntülendiği şekilde görüntülenmesini sağlaması gerekir.

Öyleyse, e-posta tasarımcıları tipik web tasarım yaklaşımlarına güvenemiyorsa, sağlam e-posta kampanyaları nasıl tasarlayabiliriz?

ÇÖZÜM TABLO KULLANIMINDA

Özetle, e-posta tasarımcılarının 1990’ların sonlarına doğru web tasarım el kitabından bir sayfa çıkarmaları gerekiyor. Web tarayıcıları, web standartları hareketini bile duymadığında, tasarımcılar web sayfalarını yapılandırmak için HTML tablolarına güvendiler. Tablolar her yerde çalıştığından, fiili standartlardı.

HTML tabloları da her büyük e-posta uygulaması tarafından desteklenir. E-posta tasarımı söz konusu olduğunda, evrensel olarak desteklenen tek şeydir. Bu nedenle, e-posta kampanyalarının e-posta istemcileri arasında nispeten iyi görünmesini istiyorsak, kampanyalarımızı düzenlemek için HTML tabloları kullanmamız gerekir.

Modern web siteleri oluşturmaktan geliyorsanız tabloları kullanmak zor olabilir, ancak e-postaları kodlarken aşağıdakilere uyursanız, doğru başlangıçtasınız.

Bunun bir e-postada nasıl göründüğünü merak ediyor musunuz? Her şeyi şekillendirmek için içeriği ve CSS’yi yapılandırmak için HTML tablolarını nasıl doğru kullanacağınızı öğrenmek için bu örnek şablona bakın.

Standart HTML ve CSS için bu destek eksikliği, sizi harika e-postalar tasarlamaktan alıkoymamalı. Daha önce de belirttiğimiz gibi, tablo tabanlı tasarımlarınızı aşamalı olarak artırarak HTML5 ve CSS3’ü kullanarak bile e-postadaki bazı şaşırtıcı şeyleri kaldırabilirsiniz.

Her zaman tasarımlarınızı test edin

Tablolar e-posta kampanyaları tasarlamak için kesinlikle gerekli olsa da, yanlış gidebilecek birçok şey var. E-posta uygulamaları ve görselleştirme motorları arasındaki çeşitli düzeylerde destek, birçok görüntü sorununa neden olur, bu nedenle göndermeden önce e-posta kampanyalarınızı sürekli olarak test etmeniz gerekir.

İletişim Makinesi E-posta Önizlemeleri, masaüstü, web posta ve mobil istemciler de dahil olmak üzere 50’den fazla e-posta uygulamasında herhangi bir kampanyayı kolayca test etmenize olanak sağlar. İletişim Makinesi’nin e-posta pazarlama servisini 1 ay boyunca ücretsiz deneyin ve kampanyalarınızın her yerde iyi görünmesini sağlayın… Outlook’ta bile.