Шаблон за HTML Newsletter чрез Inkbrush

Шаблон за HTML Newsletter чрез Inkbrush и Photoshop

Здравейте, приятели!

Вече разгледах темата за най-добрите практики за изпращане и проследяване на имейл бюлетин (newsletter). А сега нека да я допълня чрез тази статия, в която ще ви покажа как можете да създадете много бързо HTML бюлетин и да го използвате под формата на темплейт за MailChimp или друго средство за имейл маркетинг.

Но преди това бих желал да ви обясня защо бихте желали да създадете HTML newsletter – поради простата причина, че този вид бюлетини изглеждат красиво, могат да бъдат визуализирани на всяко устройство и могат да ви осигурят голямо количество трафик.

Тази статия е за всички потребители, които не разбират (достатъчно или никак) от HTML и нямат необходимото време, за да го разучават.

Ето защо съм длъжен да направя едно важно уточнение – най-качествените HTML newsletters са тези, които ще създадете чрез ваш HTML код (просто, защото имате пълен контрол над него). Но това, което ще получите като краен резултат след употребата на онлайн инструмента, описан в тази статия, ще ви позволи да имате достатъчно надежден бюлетин, който не само че ще изглежда красиво, но и ще предразполага получателите му да кликват на линковете в него. При това БЕЗ да ви се налага да пишете нито 1 ред HTML код!

Инструментът, който ви позволява да постигнете това се нарича Inkbrush. Той е изцяло безплатен, а неговите създатели твърдят, че това няма да се промени с времето. А освен, че е безплатен, той е и лесен за употреба.

Създайте HTML e-mail newsletter чрез Inkbrush

За да използвате Inkbrush, трябва да преминете през изключително бърза регистрация. След това системата ще ви позволи да качите *.psd файл (файл на Photoshop) или изображение по ваш избор. Единственото изискване на инструмента за desktop варианта на бюлетина е той да не е по-широк от 850 px. Ако качвате дизайн за mobile версия на newsletter-а – системата ще ви уведоми дали ширината му не е прекалено голяма и ще бъдете помолени да я намалите. Впрочем това се случва и за desktop варианта.

Това означава, че преди да започнете употребата на Inkbrush, вие трябва да отворите Photoshop (или друга програма за редактиране на изображения) и да сглобите визуално вашият бюлетин. Ако искате да изтеглите готови *.psd шаблони за newsletter, можете да посетите тези (или други подобни) сайтове:

На изображението по-долу виждате примерен вид на бюлетин, който би бил подходящ за Optibg.com. Той е създаден чрез Photoshop и е качен в Inkbrush. Сега следва да бъде редактиран чрез инструмента.

Примерен HTML бюлетин създаден чрез Inkbrush (в процес на редакция)

За целта следва да разделите каченият newsletter на секции. Използвайте Outer и Inner Slice инструментите и обозначете всяка секция, която следва да бъде линк към вашия сайт, профил в социална мрежа или друга локация. Ако сбъркате винаги можете да промените размера на секцията или просто да я изтриете –  за целта използвайте инструментите от раздел Adjust Slices.

След като приключите с тази операция следва да кликнете на Add Content. От появилия се вдясно прозорец изберете табът Original Design и поставете отметка на Links somewhere… След това въведете URL адреса на линка, който ще създадете. Не забравяйте да въведете и Alt текст. Така ако някой от абонатите на вашите бюлетини е забранил директното зареждане на картинки в имейлите си, той ще може да види текстово описание на тази секция и респективно да пожелае да зареди бюлетина в пълен вид. В този ред на мисли – желателно е да дадете възможност за разглеждане на негова браузър версия. Но за това ще поговорим малко по-надолу в статията.

Добавяне на линк и алтернативен текст към секция в HTML newsletter-а в Inkbrush

След като въведете всички линкове, можете да тествате вашия бюлетин. Използвайте бутона Preview от горната лента, за да видите резултата директно във вашия браузър. Можете също така да си изпратите и тестови имейл. Имайте предвид, че линковете в него ще са замаскирани така, че да преминат през inkbrush.com – това не бива да ви притеснява (все пак това е само тест, предназначен за вашите очи).

Проверете и съвместимостта на вашия newsletter за desktop и mobile варианти. В случая примерът за целите на тази статия е съвместим изцяло с всички desktop имейл клиенти и услуги (или ако не с всички, то с повечето). Нямам мобилен дизайн (а ако пожелая мога да добавя и такъв). Но изхождайки от все по-голямата употреба на мобилни устройства за браузване, то създаването на мобилен дизайн е просто задължително, така че предвидете и такава опция.

Проверка за съвместимост на HTML newsletter-а за мобилни и десктоп е-мейл клиенти

Сега следва да кликнете на бутона Export и да изберете за коя система искате да създадете готов шаблон. Вариантите са:

  • Ваш FTP сървър;
  • Campaign Monitor (тази услуга се предлага и с готови шаблони, които да редактирате директно в нея);
  • MailChimp (при нужда можете да довършите редакциите по newsletter-а директно в тази услуга);
  • Amazon S3;

С което на практика сте готови за изпращане на бюлетина – останалото е само въпрос на донастройка на желаната от вас услуга.

А сега малко препоръки (и напомняния):

  • Създайте *.psd файл с най-високо качество – Inkbrush може да компресира изображенията в бюлетина, което означава, че ниското качество на самия *.psd файл ще резултатира в още по-ниско качество на финалния бюлетин. Също така се постарайте качеството в Inkbrush да бъде максимално високо;
  • Горната секция от newsletter-а е желателно да съдържа линк за визуализацията му в браузър. Причината е ясна – възможно е потребителят да не успее да го разгледа коректно в неговия имейл клиент. Тоест качете браузър версия и на вашия домейн, която да е достъпна чрез директен линк. Поради същата тази причина текстът и линкът към този бюлетин е желателно да не са част от *.psd файла. Тоест използвайте Text табът от Add Content. Имайте предвид, че това ще промени леко background цвета на секцията – обърнете внимание на изображението по-долу;

Цветовете на фона зад добавения чрез Inkbrush текст се различават от цвета (или pattern-а), който сте избрали при дизайна в Photoshop

  • Същото е желателно да направите и за долната секция, в която е линкът за отписване от бюлетина (Unsubscribe);
  • Inkbrush позволява и добавянето на HTML код, ако считате за необходимо (и най-вече ако знаете как да се справите с това). Тоест винаги можете да използвайте инструмента и за добавяне на custom елементи;
  • Експортираният шаблон може да бъде редактиран и чрез HTML редактор по ваш избор, в случай че желаете да добавите код, който Inkbrush не ви е позволил от съображения за сигурност;
  • Изпращайте имейл бюлетин само на желаещите да го получават ваши последователи. За повече информация прочетете статията в Optibg.com E-mail кампании – изпращане и проследяване

Желая ви успех в създаването на вашите бюлетини!

До нови срещи, приятели!