9 трикове за проектиране на идеалния бюлетин за HTML

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

Процесът на създаване и изпращане на бюлетин е много по-лесен, отколкото може да се мисли, но за да създадете персонализиран шаблон и да създадете свой собствен код - това може да отнеме малко повече време.

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

Цели на бюлетина

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

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

Обмислете някои от темите, които трябва да предложите в своя дизайн. Включвате ли връзки за регистрация за услугата си; вероятно блог линкове или най-скоро публикувани статии на сайта ви? Оформлението на вашия бюлетин ще отразява начина, по който желаете вашите читатели да отговорят, но в крайна сметка искате да заинтригувате интереса си и да прехвърлите някои интересни информация на масите.

1. Използвайте таблици във вашите оформления

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

Може също да се чудите защо Разделение и други блокови елементи не са добра идея. Повечето клиенти за електронна поща са построен, за да отстрани всички външни CSS съдържание. Това означава, че няма да можете да използвате много от всичко, с изключение на вграден CSS (и дори пълната подкрепа е калпав). Клиенти като Microsoft Outlook 2007 и Gmail на Google имат много лоша поддръжка за плаващи елементи и директно позициониране.

Най-доброто решение би било поставете множество таблици един в друг. Запълването и полетата не са зададени в определен мащаб между много клиенти за електронна поща. Това е причина да се придържаме към използването ширина = "стойност" на всички елементи от клетката на таблицата. Те винаги ще показват една и съща ширина, без значение кой клиент за електронна поща използва вашите читатели, така че е много по-безопасно и по-последователен да зададете подложка и полета с празни клетки от таблицата.

2. Позициониране с фиксирана ширина

Имате няколко опции при изграждането на проектите на оформлението на вашия бюлетин, но най-добрият вариант е да следвате за да зададете фиксирана ширина за съдържащата се таблица. Има много различни резолюции на монитора - няма да можете да се харесате на всички. Ако нямате конкретни елементи със статични ширини, винаги можете да ги използвате широчина = "100%" на съдържащата ви таблица. Това ще позволи на съдържанието ви да запълни цялата ширина на всички имейл клиенти.

Въпреки това, за много този метод е малко прекалено слаб. Конструктивни бюлетини ще изисква фиксирана ширина в повечето случаи, особено ако използвате банери и изображения, зададени на определен размер. Препоръчвам да работите с 500px - максимална ширина на документа 600px. Хоризонталният размер на екрана на iPhone и някои модели BlackBerry е ограничен до 320px, така че дори при 500px шаблонът ви за електронна поща ще бъде намален, за да се побере правилно.

Имайки предвид, че много мобилни потребители избират да гледат електронна поща без HTML, това не би трябвало да е огромен проблем. Потребителите на настолни и уеб-пощенски клиенти вероятно ще изпитват подобна настройка, независимо от операционната система, която използват. Когато се съмнявате създайте няколко шаблона за шаблони и изберете тези, които ви харесват най-добре!

3. Пикселни единици

Освен ако не използвате течни елементи във вашия бюлетин, вероятно ще трябва да оразмерите няколко неща. Опитайте се да го запазите пиксели (px) вместо в друг тип единица. Процентите лесно могат да се смесват с многото клиенти на уеб поща и с прозорците на софтуера. С по-малко страници елементи, течни оформления могат да излязат невредими, макар и с няколко грешки.

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

4. Възможности с CSS

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

Бъдете предпазливи по отношение на стиловете на шрифтове, за да не прекалите твърде много границите. Ако се чувствате неудобно с вградените стилове, винаги е възможно да използвате етикета на HTML шрифта, въпреки че е остарял. Ако сте CSS дизайнер, не е необходимо да излизате от системата, но всяко стенографско CSS кодиране може да доведе до бъгове. Като пример шрифт: 12px / 14px Arial, sans-serif; стенограмите могат да ви помогнат да спестите много място, но не е напълно прието за дизайн на електронна поща, дори когато се използва с вградени стилове.

Дори цветовия избор трябва да бъдат изписани с ръка. Hex цветове като #ccc или # e3f трябва да бъдат написани изцяло като #cccccc или # ee33ff, съответно. Ако можете да изградите това, което ви трябва, без CSS бих препоръчал този път, но не се отказвайте напълно от CSS в дизайна на електронната поща, защото в противоречие с общоприетото схващане той се поддържа в повечето случаи.

5. Най-добри практики за свързване

Със сигурност ще искате да включите някои връзки във вашия бюлетин. Това могат да бъдат изходящи връзки към други страници в мрежата или може би връзки, водещи до най-популярните страници на уебсайта Ви. Освен това повечето нива ще съдържат връзка за отписване за вашите читатели да се откажат от процеса на електронна поща, но как трябва да се справяте с всички тези връзки в своя дизайн?

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

някакъв текст за връзка

Ефектите при навъртане са не се поддържа в Outlook 2007/2010, Gmail, iOS или Android. Може все пак да искате да включите A: мишката стил за всички поддържащи клиенти: Outlook 2000/2003, Hotmail, Apple Mail и Yahoo! поща, но лично аз не виждам голяма полза от частичния потребителски опит, тъй като селекторите на котвата не се поддържат силно просто предлагаме 2-3 цветни връзки да използвате в целия си дизайн.

Като презумпция потребителите ще очакват и вашите връзки да се отварят в нов раздел или прозорец. В идеалния случай насочите = "_ празно" атрибутът трябва да е достатъчен, за да могат всички браузъри да разпознаят тази функционалност, а включването на този атрибут във връзките ви за закрепване не трябва да влияе отрицателно върху софтуера за електронна поща, като например Lotus Notes или Outlook.

6. Тест във всички основни клиенти

Скорошно проучване на най-популярните клиенти за електронна поща (направено от Campaign Monitor) показва десет от най-популярните имейл клиенти през изминалата година. Може да изглежда малко досадно, но дизайнери трябва да се навикват да проверяват своите бюлетини на всички основни имейл клиенти, най-малкото за някои от най-често срещаните клиенти като Gmail, Hotmail или Yahoo! поща.

Това не включва само уеб поща, но и операционен софтуер както на Mac OS X, така и на Windows. Също така според тяхната диаграма iOS Mail и андроид и двамата се изкачиха в топ 10 в списъка през последните няколко години. Всъщност iPhone, iPod Touch и iPad Mail се нареждат на второ място по популярност точно под Outlook! За съжаление няма начин да ги тествате, без да притежавате едно от устройствата - така че ще трябва да се съгласите с други опции.

Една грешка с мобилната поддръжка идва в много модели на iPhone и Android. Често ще се показва рендерирането на мобилна електронна поща преоразмерете текста във вашия шаблон. Това може да не повлияе много на вашия дизайн, но може да бъде досадно за някои читатели. Използване на CSS -webkit-text-size-adjust: няма;, ще осигуряват дори по подразбиране размер на текста във всички парсинг двигатели без да е необходимо да го тествате.

Ако познавате приятели или колеги, които използват алтернативен софтуер, може да пожелаете попитайте за тяхната помощ при тестване на бюлетина. Можете също така изпратете им копие от електронната поща за да проверите на тяхното устройство или заемете устройството да изчистите активно грешките в кодирането. За щастие Outlook предлага версия за инсталиране на Mac, така че няма нужда да откривате потребител на Windows за тези оптимизации, но когато става въпрос за Lotus Notes или Windows Mail, може да не сте успели.

Алтернативата е да заплати за решение като например Преглед на моята електронна поща, за съжаление те не предоставят никакви безплатни демо сметки, но тяхната услуга е добре известна с това, че предлага страхотни визуализации на вашия дизайн. Електронната поща на Acid е подобна услуга, която предлага безплатен акаунт, но не ви позволява да тествате на всички клиенти, какъв вид загуба на целта. Услугите за онлайн визуализация трябва да бъдат полезни, ако трябва да тествате много шаблони за бюлетини в дългосрочен план без използването на алтернативни компютри, но те не са фундаментални, затова не стрес ако не можете да ги тествате всички!

7. Винаги предлагайте уеб базирани изгледи

Читателите няма да могат винаги (или да имат желание) да видят електронната ви поща. Предлагането на друга версия някъде в мрежата ще даде усещане за лекота и съвместимост. Този процес не може да бъде напълно автоматизиран, освен ако не искате да включите a обикновен текст версия.

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

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

8. Добавяне на изображение

Изображенията са още една причина да предложите на вашите читатели уеб-базирано решение. По подразбиране клиентите за електронна поща са изтрити от съдържанието. Ако вашият адрес е добавен към безопасен списък, всички изображения ще се показват по подразбиране, но потребителят трябва да приеме тази настройка така че със сигурност не е гаранция. Просто Уверете се, че изображенията не са необходими като част от основното съдържание, но включени като допълнителна гарнитура за естетиката на страницата.

След като стигнете до експортиране на графики има няколко съвета за създаване на изображения специално за електронна поща. Ще искаш винаги Задайте както атрибути за ширина, така и за височина IMG тагове. Без тези спецификации, някои клиенти ще нарушат съдържанието на изображението. Една н маркер също ще се окаже полезен, така че посетителите ще знаят какво съдържа съдържанието на изображението, преди да се зареди.

Както вече споменахме, позиционирането на изображенията в електронната ви поща може да стане трудно. Избягвайте използването на поплавъци на всяка цена! Изображението приведе = "ляво" атрибутът ще работи много по-добре или алтернативно набележи точно клетките на таблицата за да пасне на вашите изображения по горната, лявата или дясната страна на вашия бюлетин. Няма да можете да получите перфектно съответствие с толкова много клиенти там (особено мобилни клиенти), но оптимизирайте изображенията си и поддържайте малки размери на файловете за най-добри резултати.

Що се отнася до съхранението на изображения, препоръчваме ви съхранявайте всички файлове в собствения си уеб сървър. Това е по-добрият вариант, вместо да се използва друг хост на изображението или чрез качване на файлове в онлайн услуга за бюлетин. Освен това трябва отделете съдържанието на бюлетините си от останалите изображения в структурата на папките така / IMG / имейл или / IMG / имейл / 2011.

9. Избягвайте папката за спам!

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

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

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

Галерия за дизайн на бюлетина

Какво забавно би било статията на електронния бюлетин без някои фантастични примери? Има тон на електронна поща дизайн бюлетин и шаблони, за да проверите в Google. HTML E-mail Gallery е много популярен източник на вдъхновение.

По-долу включих скрийншотове от многобройните бюлетини в галерията на Campaign Monitor. Надяваме се тези страхотни оформления да ви предоставят някои страхотни идеи за вашите собствени проекти.

Забавлявайте се, проектирайки идеалните си бюлетини!

Сигнал за бизнеса