Skip to content

E-posta (Mail) İmzaları Tasarım Rehberi

E-posta (Mail) İmzaları Tasarım Rehberi

Günlük rutinlerimizin büyük bir bölümü Microsoft Teams, Slack, Whatsapp gibi birbirinden farklı pek çok dijital iletişim aracıyla paralel olarak yürüyor. Elbette tüm bu iletişim araçlarında, kurumsal dünyanın hala vazgeçilmezi e-postalar. Şirketler içindeki iletişim anlık mesajlaşma platformlarına kaymaya devam ederken, şirketler arası iletişim büyük ölçüde e-posta trafiğinde görünüyor. Elbette bu durum tüm e-postaların içerisinde standart olarak yer alan imza bölümünün önemini arttırıyor.

Peki e-posta imzaları nasıl tasarlanmalı? Şirketimizi ve bizi kurumsal bir şekilde temsil etmesini beklediğimiz dijital kartvizitlerimiz alıcılar tarafından nasıl görülüyor?

E-postalarımızı veya günlük kullanımdaki haliyle maillerimizi;

  • Office 365, Exchange, Gmail, Yandex gibi hizmetler aracılığıyla,
  • Windows, iOS, Android gibi farklı işletim sistemlerinde,
  • Mobil veya masaüstü cihazlardan,
  • Outlook, web veya mobil mail uygulamaları ile

görüntülemeye çalıştığımız düşünülürse, tüm bu mecralarda tasarladığımız gibi görünmesini beklediğimiz imzalar nasıl oluşturulmalı, bu yazımızda sizler için derledik.

İMZA TASARIMI YAPARKEN DİKKAT EDİLMESİ GEREKENLER

  • İmza tasarlanırken sade hazırlanmasına dikkat edilmesi gerekmektedir.
  • Arka plan görsel olarak eklenmediği için isim, mail adresi, iletişim bilgileri vb metinlerin arka planına düz renk tercih edilmelidir.
  • Kullanılacak resimler ve ikonlar, görünmesi istediğiniz boyutta kesilmesi gerekmektedir.
  • Ana arka plan renginin beyaz seçilmesi tavsiye edilir.

E-POSTA İMZALARI HTML OLARAK HAZIRLARKEN DİKKAT EDİLMESİ GEREKENLER

  • tag’i (etiketi) yerine

    tag’i kullanılması tavsiye edilir.

  • Kullanılan bölümlerin genişlik (width) değerlerin sabit olarak verilmesi gerekmektedir.
  • Bütün stil özelliklerinin html kod içinde (inline) verilmesi gerekmektedir.
  • Verilecek text kısımlarının tam olarak stil özelliklerinin hepsi için ayrı ayrı olarak verilmesi gerekmektedir. Aksi taktirde mail görüntüleyicileri tarafından farklı görünmelere yol açabilir.
  • Başka bir editörde html yazımı tamamlandıktan sonraiçerisinde yer alan kaynak kodu veya tarayıcı üzerinden görüntülenen tasarım kopyalanarak, uygulama paneli üzerine yapıştırılması gerekmektedir.
  • img tag’lerinde kesinlikle height değeri olmamalı. Outlook Web App (OWA) mobil görünümde içeriği ekrana sığdırabilmek için resimlerin çoğu zaman genişliğinden kısmaktadır. Bu durum yükseklik ölçüsünün değişmemesi nedeniyle orantısız resim görünümlerine sebep olmaktadır. Resimlerde otomatik olarak orantılı gözükmeleri için sadece width değeri sabitlenmeli, height değeri olmamalı.
  • p tag’lerinde mutlaka style=”margin:0px;” şeklinde yada alt üst marjinler verilmek isteniyorsa, style=”margin: 7px;” şeklinde marjin tanımlanmalı. p tag’leri varsayılanda çok fazla margin eklemekte olup görüntünün bozulmasına neden olmaktadır.
  • E-posta imzalarının en sol tarafında bir boşluk bırakılabiliyor, bu durum mobilde istenilmeyen kaymalara sebep olabilir. Sol taraftaki boşluklar mümkün olduğunca bırakılmamalı.
  • Sol logo ve sağ içerik formatlı imzalarda logo ile içerik arasına boşluk bırakılmaya özen gösterilmeli. Özellkle td veya margin tanımları ile boşluk bırakılmadıysa, geniş ekranlarda düzgün görünen imzalarda, mobil’de 1. maddede bahsettiğim sıkıştırmadan kaynaklı logo ve içerik iç içe girmektedir.
  • line-height stilleri outlook uygulamasında görmezden gelinmektedir ama web üzerinden erişildiğinde satır aralıkları farklı gözükebiliyor.
  • Metin içerikli alanların fontu ve font büyüklüğü mutlaka belirtilmeli.
  • Gereksiz iç içe tablo tanımları sadeleştirilmeli.
  • div ve p tag’lerindeki width tanımları mail uygulamalarında çalışmayabiliyor, bu sebeple kesin genişlik belirtmek gerekiyorsa table içine yerleştirilmeli.
  • Dikey boşluklar için tr veya td tanımlarında height değeri eğer içerikte   gibi ya da başka metin içeriği varsa işe yaramaz. Burada içerik varsa font-size değeri belirlenmeli. En kolay dikey boşluk marjinler ile verilebilir.

E-posta imzalarını her şirkette html formatta düzenlemek veya imzalarınızı dinamik olarak güncellemek için her seferinde ajanslara gitmek mümkün olmayabilir. Bu durumda hazır mail imza template’leri kullanarak oluşturabilirsiniz. E-posta imza şablonu üretmek için ücretsiz olarak Signature Generator (freemailsignature.com) uygulamasını kullanabilirsiniz. Microsoft Word uygulamalarında kendinizi iyi hissediyorsanız imzanızı Word uygulamasında standart tablolar ekleyerek oluşturabilir, mail imza ölçülerini daha esnek bir şekilde düzenleyebilirsiniz.

İmzanızı tasarladıysanız şimdi hazırsınız demek çok güzel olurdu ancak asıl sorular şimdi başlıyor. Tasarladığınız imzaları şirket geneline nasıl yaygınlaştıracaksınız, kişilerin telefon numaraları, unvanları değiştikçe bu bilgiler nasıl güncellenecek, herkesin imzasının tasarladığınız şekilde göründüğünden nasıl emin olacaksınız belki de daha önemlisi özel günlerde, yıl dönümlerinde veya kampanyalarınızda otomatik olarak değişmesini sağlamak için en baştan tek tek tüm bu süreci tekrar mı yaşamalısınız.

Bu sorulara yanıt vermeyi kolay hale getirmek için merkezi e-posta imza yönetimi uygulaması Sign&Go’ya (SIGN & GO – PEAKUP) bir göz atabilirsiniz. Sign&Go ile e-posta imzalarınızı ister Word’de tasarlayıp aktarabilir, isterseniz ajansınızdan aldığınız html olarak geliştirilmiş imza formatını ekleyerek imza şablonları oluşturabilirsiniz. Kimlerin hangi imzaları kullanmasını basit filtrelerle belirleyebilir ve birkaç adımda tüm şirket geneline tasarladığınız imzaları kullanıcılar etkilenmeden dağıtabilirsiniz. Zamanlanmış imza şablonları ile özel günler veya kampanya dönemlerini önceden belirleyebilir, mail imzalarınızda yer vereceğiniz banner tanıtım alanları ile dinamik olarak e-postaları yönetebilir ve iş yükünüzü azaltırken verimliliğinizi arttırabilirsiniz.

Şimdi hazırsınız. Bir sonraki adımda mail imzalarınızdaki banner reklamlar ile e-postalarınızı doğrudan pazarlama aracına dönüştürmek ve imzanızdaki linklerin tıklama istatistiklerini nasıl ölçebileceğinizi görmek için diğer blog içeriklerini inceleyebilirsiniz.