Какво представлява HTML имейл темплейт?


Това е имейл съобщение, чийто дизайн е написан с HTML код.

Все повече български компании използват този вид съобщения за своите оферти, поздравителни картички и бюлетини.
Чудесен начин за комуникация между бизнеса и клиентите, който ви дава много допълнителни възможност – за брандиране, поставяне на допълнителни линкове, измерване, създаване на емоция, добавяйки изображения, приятно оформление на текста, различни шрифтове.
Една от отличителните черти на изпращането на имейл чрез софтуер за имейл маркетинг, а не просто с добавяне на списъка с имейли в Невидими е ,че може да измерите:

  • колко от получателите са отворили съобщението,

  • колко и кои от тях са кликнали на него,

  • да измерите какъв е интереса към всеки продукт или оферта - чрез анализ на линковете, които сте поставили.

HTML съобщението си има някои предимства и недостатъци.

Предимства :
- може да се направи форматиране на текст - като цвят, големина на шрифта
- позволява добавяне на изображения - те въздействат повече на повече сетива - с тях вашите оферти могат да изглеждат доста по-привлекателни
- Call-to-Action бутони и линкове - правят съобщенията ви по-лесни за възприемане.
- позволява добавянето на линкове - чрез тях бихте могли да постигнете една по-добра сегментация на имейл списъка,  да уловите интереса към кои ваши оферти е по-голям и съответно точно от кои читатели, след това може да ги добавите в отделна група.
увеличавате трафика към сайта си - чрез линковете към точно определени страници в сайта ви.
- може да пренасочите читателите си към вашите профили в социалните медии

Недостатъци:

- ако има грешки в кода съобщението ще бъде бъде маркирано като СПАМ от имейл клиента който го получава.
- може да не е видимо при всички получатели – в зависимост от кода, който изпозлвате.
- трудно ще се чете на мобилните телефони - ако дизайна не е предвиден за това.

Ако искате вашите съобщения да преминават през Анти СПАМ филтрите на имейл клиентите, и вашето съобщение да изглежда добре и да се чете на повечето ви получатели, трябва много да внимавате какъв HTML код изпращате.
Друг фактор, който трябва да се съобрази е кои от имейл платформите, където вашите читатели си отварят най-често имейли поддържат CSS. Тук може да намерите повече информация относно Email Standards Project

Отчитайки различната поддръжка на стилове и допустими HTML елементи, писането на код за имейл шаблон може да се превърне в голяма беда за уеб дизайнерите. Затова тук ще разгледам основните правила, към които е добре да се придържате, когато пишете HTML код за имейл темплейт.

Основи на HTML имейл темплейт:

Основния проблем при писането на код за имейл темплейт е, че имейлите се четат на все повече типове устройства и браузери. Създавайки един дизайн, той трябва да се чете и да изглежда добре на - Gmail, Yahoo, Hotmail, Abv.bg, Mail.bg, Outlook, Thunderbird, Lotus Notes. На всеки от тях вашия имейл ще изглежда по различен начин.
Най-лесно е, ако изтеглите някой от безплатните темплейти на Emailinvest.com и разгледате кода.
Затова без значение дали ще пишете кода си на ръка или ще използвате за основа готови имейл темплейти е добре, да се придържате към следните правила:

- прегледайте от кои имейл домейни са най-много от вашите читатели и тествайте как се вижда вашето съобщение там. Поставете ги в една група - test и тествайте едновременно на всички. Ако получателите ви са от България - задължително трябва да имате имейл в Abv.bg и Mail.bg.
- Преценете какъв тип дизайн е най-подходящ за вашите съобщения - с една или две колони, ляво или дясно меню. За бюлетини е най-добре да се използва една или две колони, тъй като може да публикувате неограничено количество информация разположена една под друга при ограниченото място на имейл клиентите

Дизайна с една колона обикновено съдържа следните елементи
- preview линк който води към текста на имейла в браузер, ако читателя има проблем при отварянето му
- header - съдържа лого и линкове за навигация
- съдържание - представя основната информация на съобщението.
- footer - съдържа контактна информация за компанията ви, линк за отписване

Дизайн с две колони - отново съдържа header и footer и лява или дясна част която представлява улеснена навигация, акценти или контакти. линкове с допълнителна информация по темата

Промоционалните имейли спазват същите правила, само че те имат по-малко информация като текст и съдържания, набляга се на големите изображения и линкове с Call-to-Action към конкретната промоция

За дизайн с две колони използвайте три таблици - по една за header, съдържанието с две колони footer.
Тези три таблици поставете в една главна с ширина 600 px и я центрирайте.

Ето и правилата, които да следвате при писанена HTML код за имейл темплейти :

  • Използвайте TABLE, вместо DIV, за да организирате цялостното разположение на елементите
  • Използвайте Inline CSS декларации за големина и цвят на текста
  • Не използвайте външни css файлове, тъй като някои имейл клиенти, ги игнорират или изтриват.
  • Не използвайте javascript тъй като това директно води до СПАМ папката или се изтрива.
  • Спазвайте ширина от 600 px.
  • Избягвайте съкратения CSS - вместо - font: 12px/16px Arial, Helvetica
  • Използвайте - font-family, font-size, line-height.
  • За всяка таблица използвайте подравняване в елемента TD - border="0", valign="top", align="left" (или center, в зависимост от дизайна), cellpadding="0", cellspacing="0"
  • Избягвайте използването на изображения за background.
  • Не забравяйте, че в първия момент вашите съобщения се виждат без изображения. По подразбиране всички имейл клиенти блокират изображенията. Постарайте се най-важната информация да е с текст и за всеки линк, който е и изображение използвайте alt и title елементи, за да се чете какво действие следва да се извърши. С една дума, вашето съобщение трябва да дава достатъчно информация и без да са разрешени изображенията.
  • Не поставяйте твърде високи изображения в горната част на съобщението, тъй като читателя трябва да скролва, за да достигне до най-важната информация.
  • Не поставяйте линковете направо като URL, а ги опишете с нормален текст и линк. Т.е. линк трябва да е - Прочети повече, а не - https://emailinvest.com
  • Използвайте фиксирани ширини, вместо %
  • Поставете край на ред веднага след изображенията, защото понякога става разместване на изображенията, ако е на следващия ред
  • Уверете се, че използвате за всеки IMG таг - wifth, height атрибути.
  • Винаги използвайте alt атрибут за IMG, в който само с няколко думи опишете изображението
  • Запишете изображенията или файловете, към които води линк на вашия сървър и не ги изтривайте оттам. Не забравяйте.че едно съобщение може да бъде отворено и след 6 месеца. Поставете ги в отделна папка - /images/email/.
  • Постарйте се, да използвате малки изображения или прикачени файлове. Съобщения с големи файлове могат да бъдат изпратени директно в СПАМ папката.
  • Ако ще поставяте оферта, която е PDF или DOC файл, качете го на сървъра и поставете линк в съобщението към него. По този начин няма да затормозите изпращането и освен това ще може да измерите интереса към офертата. Ще получите списък на всички които наистина са я отворили.
  • Не използвайте абсолютно позициониране на
    таговете.
  • Не позиционирайте изображенията, използвайки X-Y координати
  • Не използвайте атрибути за изображенията – roll-over
  • Не използвайте pop-ups.
  • Избягвайте използването на специални символи като - < > & €.
  • Избягвайте използването на URL, базирани на IP-адрес, използвайте имена на домейни.
  • Избягвайте дизайн, който съдържа твърде много изображения и твърде малко текст. Помнете, че само текста има значение, той се вижда, изображенията се използват за допълнение, създаване на емоция, ако е необходимо.
  • Използвайте описателни имена за вашите изображения, например – send-free-emial-campaign.jpg
  • Внимавайте да не използвате име на файл за изображение, което съдържа празен симвил, или разстояние между думите, това създава проблеми при някои имейл клиенти.
  • Ако използвате линк към страница с флаш елементи, убедете се, че имате и алтернативна html страница
  • Ако използвате , използвайте абсолютна големина на шрифта size=2, а не относителна - size = +2.
  • Използвайте текстови бутони за call-to-action.
  • Използвайте прости тагове -  XHTML tags: h1, h2, h3, h4, h5, h6, p, ol, ul, li, table, tr, th, td, a, img
  • Много тагове се премахват от имейл клиентите, например -  ,
  • Имейл клиентите, които са само текстови, показват текста на вашето съобщение, поради тази причина използвайте линкове, с дължина на URL, не повече от 75 символа. Не е препоръчително да използвате програмите които съкращават дължината на URL, тъй като те са много често използвани от спамърите
  • Не използвайте съкращаване на URL
  • Имайте предвид, че някои текстове директно се маркират, като линкове – например name@example.com, emailinvest.com. Особено, когато имейла се чете от Gmail.com. Тествайте.
  • Използвайте таг title="This is a description of this image or link". Това подобрява четаемостта на съобщението. В ALT таг, може да използвате само няколко думи за описание, докато в TITLE, може да си позволите повече подробности.
  • Използвайте
    вместо

    с margings тагове, защото има вероятност някои видове css да бъдат премахнат от имейл клиента.

  • Уверете се, че кода ви е чист, валидиран и спретнат.

    Този документ, ще продължи да бъде допълван.

    Ако искате да получавате БЕЗПЛАТНИ СЪВЕТИ ЗА ИМЕЙЛ МАРКЕТИНГ, запишете се за нашия БЮЛЕТИН.