E-posta ve HTML: Kaçınılması gereken 10 hata

HTML koduyla yakından ilgili olanlardan, hassas görsel konusuyla ilgili olanlara kadar, e-posta oluştururken yapabileceğiniz en büyük hataların bir listesi.

Cep telefonları için etkili ve mükemmel şekilde optimize edilmiş e-postalar oluşturmak, web tasarımcılarının ve kodlayıcıların bir ayrıcalığı mı? Artık değil, bizim için kodu yazan modern sürükle ve bırak editörlerinin gelişi sayesinde. Ancak bazı temel HTML ve CSS bilgisine sahip olmak, e-posta pazarlamacılığı yapanlar için temel bir beceridir.

Bu nedenle, e-posta dünyasının daha teknik bazı yönlerine odaklanmak istedik. Genellikle karanlıkta kalan, ancak bir stratejinin başarısı için temel öneme sahip olanları inceleyeceğiz.

#1 Aşırı ayrıntılı kod kullanma

Bazı açılardan HTML ve CSS etiketleri aynı işlevi görür. Hem HTML hem de CSS'de bir tablonun arka plan rengini belirleyen pratik bir örneğe bakalım.

Turuncu arka plan için iki noktada tanımlanmıştır :

• bgcolor=”#e75c00” (etiket tablosunda);
• arka plan rengi (CSS'de).

Bu iki öznitelik aynı şeyi yapar : turuncu bir arka plana komut verir. Aynı işlevi yerine getiren gereksiz özelliklerle e-postayı ağırlaştırarak örtüşürler.

Önerilerimiz:

• Kodu olabildiğince temiz tutun
• Gereksiz tekrarlardan kaçının
• Girinti yoluyla kodu mümkün olduğunca sıralı tutmaya çalışın (bunu yapan HTMLformatter veya Clean CSS gibi birkaç çevrimiçi hizmet vardır), iletişimin yapısına genel bir bakış elde edebilmek için
• Şablonda yapılan makro değişikliklerin geçmişini takip edin.

#2 Kod hakkında aşırı yorum yapmak

Çoğu dilde olduğu gibi, yazılı koda “ hizmet iletişimleri ” eklemek için HTML'ye yorumlar eklemek veya neyin tamamlanması veya iyileştirilmesi gerektiğine dair “ notlar ” eklemek de mümkündür.

Yorumlar faydalı olabilir, ancak bunları kötüye kullanmamayı unutmayın : e-posta alıcısı bunları görmese de, yorum iletişimde kalır ve ağırlığı azaltır.

#3 E-postanın içeriğini tanımlamamak

Bir e-posta tasarlarken, kodu yazmadan önce bile, sonraki iletişimler için kılavuz görevi görecek ve uygulama aşamasında değiştirilmemesi gereken bazı parametreleri tanımlamayı daima unutmayın.

Bazı parametreleri görelim:

• E-posta genişliği
• Görüntü boyutu
• Görüntü sayısı
• Başlıkta kullanılan yazı tipi boyutu
• Ana metnin yazı tipi boyutu.

Bruce Lee'den alıntı yapmak için: “ İçerik su gibidir, bir bardağa su koyarsanız bardak olur; şişeye su koyarsan şişe olur”.

Bu nedenle metin, görüntü veya eylem çağrısı yapıya uyum sağlamalı, tersi değil .

Önerilerimiz:

• Şablonun tüm bölümlerini tanımlayın
• İletişimin farklı bölümleri arasında tutarlı kalın
• Kendinize koyduğunuz kurallara saygı gösterin
• Kurallar çiğnenebilir, ancak bu tam bir farkındalıkla yapılmalıdır.
• Şablon ihtiyaçlarınızı karşılamıyorsa, yeni bir tane tanımlamayı düşünün.

#4 Telefon numaralarını ve etkileşimli adresleri yanlış alma

Bildiğiniz gibi birçok firma altbilgi kısmında bazı iletişim bilgilerine yer vermektedir. Bir adres ve telefon numarası söz konusu olduğunda, özellikle mobil cihazlarda bunlar kritik unsurlardır. Niye ya?

• Eyleme geçirilebilir bilgi: tek yapmanız gereken verileri (takvim, telefon, navigasyon cihazı) yönetecek bir uygulamayı açmak için bir tıklamadır.
• Ekran alanı azalır .

Sorun genellikle, göze hoş gelmeyen mavi bağlantılar ve rastgele alt çizgi arasındaki grafik oluşturmadır .

HTML koduyla bazı kuralları çiğneyerek bu grafik farklılıklarının üstesinden gelmek için küçük geçici çözümlerle müdahale edebilirsiniz.

Telefon numarası söz konusu olduğunda, basittir: Bağlantı etiketi, href özelliğinde tel kullanarak bir telefon numarası tanımlamanıza izin verdiğinden, telefon numarasını boşluk veya satır ayırmadan ekleyin.

Bunun yerine bir adres veya tarih farklı şekilde ele alınmalıdır. Bunlar için, rengi istemciye otomatik olarak eklemek için bağlantı etiketini uygulayan bir sınıf (adres) tanımlamanız gerekir (color: #ffffff;). Her şeyden önce, her bağlantının varsayılan özelliği olan alt çizgiyi kaldırmalıdır (metin-dekorasyon:yok;). Adres sınıfının her iki özniteliğinin de, özellikten bağımsız olarak istemci tarafından uygulanması gereken !important değerine sahip olduğuna dikkat edin. Onsuz, geçici çözümün işini yapacağının garantisi yoktur.

#5 Terk edilmiş veya boş etiketleri temizlememek

E-postanın toplam ağırlığını minimumda tutmaya çalışmak amacıyla devam ederek , mevcut kodun artık içeriği olmayan bölümlerine dikkat edin . Bir örneğe mi ihtiyacınız var? Herhangi bir metin içermeyen, belki bir dizi satır içi stili olan bir <font> etiketi. E-postada hiçbir şey okunmaz, ancak etiket var olmaya devam eder ve e-postayı gereksiz yere ağırlaştırır.

#6 Doğrulanmamış HTML kullanma

Kod doğrulama, tasarımcıların ve geliştiricilerin basamaklı stil sayfalarını (CSS) kontrol etmesine yardımcı olmak için W3C tarafından oluşturulan ücretsiz bir uygulamadır.

W3C, hataları göstererek ve düzeltmeler önererek bize yardımcı olur. Bu araç sayesinde daha büyük yapısal hataları tespit etmek ve düzeltmek mümkündür.

W3C standardına mümkün olduğunca yakın temiz koda sahip olmak mantıklı olsa da, bu her zaman mümkün değildir ve şirketler genellikle katı yapıya bir dizi geçici çözüm eklemek zorunda kalırlar. mümkün olduğu kadar çok müşteriye doğru görüntüleme.

#7 Çok ağır görseller kullanmak

E-postalarda grafiklerin nasıl görüntülendiği ve alıcıları nasıl etkileyeceği konusunda hepimiz dikkatliyiz. Ancak, ortam, yani e-posta dikkate alınmazsa, tüm bu özen geçersiz kılınabilir.

Özellikle bant genişliği sonsuz olmadığı için: bu nedenle aşırı ağır görüntülerin eklenmesinden kaçınmak önemlidir.

Birkaç tavsiye:

• Yaklaşık 50 KB maksimum ağırlığı koruyun
• Görüntü çözünürlüğünün 72 dpi olduğundan emin olun
• Görüntüleri JPG, GIF, PNG formatında kaydedin

#8 Aşırı ağır e-postalar

Pazarlamacılar genellikle başka bir amaç veya başka bir destek (reklam kampanyası, web sitesi vb.) için oluşturulmuş görüntüleri bir e-postaya ekler. Belirli önlemler alınmadan, bu resimlerin yüksekliği ve genişliği e-posta içinde çalışmayacaktır.

HTML etiketi img bir görüntünün yüksekliğini ve genişliğini tanımlamamıza izin vererek onları optimize etmeye yardımcı olur. Örneğin, aşağıdaki kod satırı, yüksekliği 123 piksele ve genişliği 456 piksele ayarlar.

<img src=”[percorsoImmagine]” height=”123″ width=”456″>

Parametreler ayarlandıktan sonra, gerçek boyuttan bağımsız olarak, görüntü tarayıcıda belirtilen yükseklik ve genişlikte görüntülenecektir .

#9 Optimize edilmemiş animasyonlu GIF'ler ekleme

Hareketli GIF'ler kesinlikle bir mesaja çok fazla vurgu katar: Dikkat çekmenin son derece etkili bir yoludur. Ayrıca, bunları e-postaya eklemek çok basittir.

Ancak animasyonlu bir GIF'in boyutunun hem animasyonun kare sayısına hem de boyutlarına bağlı olarak hızla arttığını göz önünde bulundurarak çok dikkatli olmalısınız.

Ancak hepsinden önemlisi, bazı istemciler animasyonu hiç görmedikleri için: Outlook 2007-2013 yalnızca ilk kareyi görüntüler. O zaman ne yapmalıyız? Animasyon etkinleştirilmese bile mesajın anlaşılabilir olması için ilk karenin kapsamlı ve eksiksiz olduğundan emin olun.

#10 Görsellerin alternatif metnini unutmak

Bildiğiniz gibi, varsayılan olarak bazı e-posta istemcileri görüntüleri göstermez , ancak hepsi bu kadar değil, çünkü birçok kullanıcı bunları devre dışı bırakmayı tercih ediyor (çeşitli nedenlerle).

Bu durumlar nasıl tamponlanır? Birkaç kod özelliği ile :

• fare işaretçisi görüntü alanının üzerine getirildiğinde (fare üzerinde) bir görüntünün içeriğinin görüntülenmesini sağlayan başlık .
• alt , resim yüklenmediğinde gösterilecek metni tanımlar (alt metin).

Önerilerimiz:

• Resimlerin her zaman alt ve başlık niteliklerinin ayarlanmış olduğundan emin olun
• Eklenen metni çok uzun yapmayın, çünkü bu iletişim düzenini bozabilir (alt için) veya kullanımı zor olabilir (başlık için)
• Özellikle renkli bir arka planınız varsa, alternatif metnin renginin hem boyut hem de renk açısından kolayca okunabilir olduğundan emin olun.
• Tercihen alternatif metnin altı çizili olarak bir bağlantıyla bırakın, böylece işlevi iletişim içinde kolayca tanınabilir.