имейли

В тази статия

След най-добрите практики, ето насоките за вмъкване на анимиран GIF във вашия имейл, безопасно и оптимизирано за мобилни устройства.

Забелязали ли сте как анимираните имейли и имейлите с движение са все по-чести във входящата поща? Ние правим. Като професионалист или дизайнер по имейл маркетинг, може би сте се опитали да ги използвате, за да увеличите конверсиите по имейл. Но също така забелязахме, че търговците не винаги включват Анимирани GIF файлове в съобщения използвайки най-добрите дизайнерски практики.

Интересното е, че анимираните GIF файлове всъщност са много лесни за използване в имейл: те могат да се използват като всеки друг файл с изображения и са напълно съвместими с повечето имейл клиенти. Проблемът с много GIF файлове в имейлите е, че призивите за действие в съобщенията често са в рамките на GIF, както в този имейл от Ан Тейлър:

Подканващата фраза „GO“ всъщност не е бутон: тя е част от изображението. Всяко щракване, горе, отдолу или около "бутона" ще има същия ефект: ще ви отведе до целева страница на сайта на Ан Тейлър, защото връзката се простира до целия анимиран GIF. Това улеснява читателите да получат повече информация (и евентуално да направят покупка), като просто докоснат или щракнат върху почти всяка точка. Но това също може да бъде проблематично. Ако анимираният GIF не се изобрази правилно по една или друга причина, съобщението губи цялата си функция. Това може да се случи, ако ...

  • На мобилното устройство за четене има изкривявания на размера на изображението
  • Показването на изображения не е активирано на клиента, където се чете имейл.
  • Програма за блокиране на реклами блокира GIF.
  • GIF е голям файл и четецът не чака да завърши зареждането

Също така, потребителите на Outlook най-вероятно ще видят само неподвижно изображение, тъй като анимацията няма да работи. По тези причини и други, Винаги препоръчваме да се възприеме подход към дизайна на имейли, който оптимизира HTML и не разчита единствено на изображения. Искате ли да знаете как да използвате страхотните си анимирани GIF файлове в имейла, като същевременно гарантирате, че вашите призиви за действие винаги се показват? Продължавай да четеш.

Днешната работилница

Днес ще пресъздадем следното съобщение от Banana Republic и ще ви покажем как да оптимизирате използването на анимирани GIF файлове в имейл, за да сте сигурни, че съдържанието ви се появява.

Ето нашето резюме във видео урок:

И за справка, ето пълното съобщение от Banana Republic:

В имейла на Banana Republic ключовото съобщение, което включва призив за действие, е в един блок с изображения, както в имейла на Ан Тейлър, видян по-горе. По-голямата част от съобщението - цялата черна част - е анимиран GIF:

Това означава, че ако показването на изображения е деактивирано или GIF виси или не се зарежда, цялото съобщение се губи.

Нека поправим това.

Стъпка 1: Изолирайте анимирания GIF

Анимираният GIF в тази публикация е страхотен. Така че дори и да се появи във входящата поща, може да не се зареди или да не се зареди напълно, така че съобщението се оказва непрочетено. За да избегнете тези проблеми, добра практика е да изрежете GIF анимацията, като изрежете частите на изображението, които не се нуждаят от анимация. В съобщението Banana Republic това означава, че искаме да изолираме средната част на изображението, частта, която се движи - в розовото поле отдолу - и да пресъздадем останалото с текст и HTML.

За да изрежем бързо изображението, използваме ezGIF.com. И тук имаме нашия нов анимиран GIF:

Стъпка 2: Организирайте имейла с блокове със съдържание

Днес ще започнем с основен шаблон с една колона в редактора за електронна поща на BEE.

Предварително дефинираната структура на блоковете със съдържание е много подобна на това, от което се нуждаем: текст, последван от изображението, последван от повече текст и след това бутон с подканваща фраза.

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

Сега е моментът да плъзнете изрязания анимиран GIF и да го пуснете в заместителя на изображението, точно както бихме направили всяко друго изображение.

Сега, когато съдържанието ни е на мястото си, можем да започнем да форматираме.

Стъпка # 3: Използвайте HTML фонови цветове

От съдържателния блок „SWEET TREAT“ зададохме шрифта на бял и увеличихме размера му до 36 пиксела. Сега продължаваме, като задаваме черно като цвят на фона на съобщението, както е в GIF на съобщението Banana Republic.

За целта просто дефинираме цветовете на фона в менюто Свойства на реда вдясно, като задаваме фона на реда прозрачен, а фона на съдържанието черен.

Ние даваме едни и същи свойства на реда на всички блокове съдържание, които следват, включително цвета на фона зад анимирания GIF.

Сега съобщението се представя като непрекъснат цветен блок. За финал форматираме останалата част от текста.

Все още трябва да направим някои окончателни коригиращи подложки, за да получим правилните интервали, и да актуализираме бутона ни за CTA, но нашето съобщение вече е почти идентично с изображението на Banana Republic; ние обаче го направихме с безопасни шрифтове за електронна поща и с HTML цветове на фона.

Нашето съобщение изглежда изрядно и значително намалихме риска то да бъде загубено, ако GIF не бъде видян. Ще се появят цветове, текст и най-важното бутонът за подканваща фраза.

Стъпка # 4: Включете защитен от броня бутон за подканващо действие

Предупреждение за спойлер: не е нужно да кодираме един ред HTML или да правим каквото и да е, за да сме сигурни, че нашият бутон с подканваща фраза „НАУЧЕТЕ ПОВЕЧЕ“ ще работи на всички видове устройства и имейл клиенти. В редактора на BEE всички бутони са устойчиви на куршуми по подразбиране, което означава, че не са базирани на изображения, така че винаги ще се появяват, ще бъдат отзивчиви и ще изглеждат страхотно.

Всичко, което трябва да направим, е да актуализираме стила в менюто Свойства на съдържанието вдясно. Първо даваме на бутона бял цвят на фона и променяме цвета на шрифта на черен.

След като това стане, бутонът изглежда така:

След това форматираме текста, като увеличаваме размера на шрифта и го правиме удебелен. Когато увеличим размера, CTA се появява в два реда:

Но отново в менюто Свойства на съдържанието, увеличихме ширината до 35%:

Както виждаме, бутонът Banana Republic има много остри ъгли, така че нашият трябва да бъде по-малко заоблен. За да променим формата на бутона, ние намаляваме радиус на ръба до 0.

Това е нашето послание! Почти е готов.

Стъпка # 5: Финални щрихи: коригирайте разстоянието

Текстът и дъното на бутона CTA са твърде близки. За да създадем малко пространство, коригираме подложката над и под всяка структура на съдържанието.

Ние просто кликваме върху структура (бутон, текст, изображение), отиваме в менюто Свойства на съдържанието и се уверяваме, че виждаме Още опции в раздела Подложка в Spaces:

След това коригираме подложката над и отдолу на бутона и над и под блока за съдържание «Solo Online».

Това е последният имейл:

Появата му в мобилния преглед е перфектна:

Пресъздадохме почти точно посланието на Banana Republic със своя модерен, рационализиран дизайн и анимиран GIF, но оптимизирахме използването на цветовете на фона в HTML и бутоните с подканваща фраза, така че сме уверени, че ще се вижда перфектно на всички видове устройства и имейл клиенти.

Надяваме се да ви е харесал този семинар за използване на gif изображения в имейл. Някакви въпроси? Можете да ни изпратите вашите въпроси по-долу в коментарите. И не забравяйте да опитате на BEE имейл редактор!

Тази статия е написана от

Израснал съм във Филаделфия, САЩ и имам две степени по английски език и икономика. Обичам да размишлявам върху това как хората живеят и работят, как се развиват творческите процеси и как взаимодействаме помежду си. Сътрудничеството върху нови проекти е моето ежедневно гориво.

Хареса ли ви тази статия? Тук имаме много повече за вас.

Абонирайте се сега, за да получавате най-добрите маркетингови новини по имейл и SMS.

Много оригинално съдържание, нула спам. Абонирайте се за бюлетина