Html оформление на електронни съобщения, особено 4 трябва да бъдат взети под внимание - Юрий Klyuchevskii
С други развития в тази област през последните няколко години е появата на проекта услуга Email стандарти. която има за цел да се подобри съответствието между софтуера поща; поява тестване услуги, как ще се показват съобщения в различни пощенски настолни и уеб приложения; появата на различни безплатни шаблони, за да използват за свои цели. В тази статия ще разгледаме някои от услугите, както и шаблони, за да ви помогне да разберете как правилно HTML имейл формат.
Въпреки тези успехи, оформлението може да се окаже не е тривиална задача. В тази статия ще се опитам да разкрие всички тайни на правилното разположение на буквите и по този начин се постигне добро дисплей в повечето програми за електронна поща. Ще опиша резултатите от моя личен опит в създаването на HTML имейли, както и докосване на техническа информация в Интернет.
Когато PSD към HTML имейли времеемко фактор е наличието на голям брой различни програми за четене на е-мейл: от настолни приложения - Eudora, Outlook, AOL, Thunderbird и Lotus Notes; на работа през уеб интерфейс - Yahoo. Hotmail, Google Mail и други. Ако си мислите, че се придържат към различни браузъри, когато оформлението на уеб страници, беше трудно, а след това се пригответе за новата игра, тъй като всеки един от посочените по-горе клиентите могат да показват една и съща електронна поща по съвсем различен начин. И дори, когато тези средства ще бъдат използвани за показване на всичко перфектно, трябва да се има предвид, че читателите могат да променят размера на прозореца, докато четете, може да изпитате всички видове проблеми.
Ако решите да се занимава с ръчна оформление на HTML имейли (предпочитанията ми) или използване на съществуващ шаблон, трябва да се помни две неща:
- Използвайте таблицата (таблица) в оформлението, за да контролира представянето и дизайна. Вероятно сте се използва най-новите постижения XHTML / CSS оформление за вашите уеб страници, но тези принципи не работят добре в клиентите за електронна поща.
- Използвайте вложени тагове в HTML-CSS код, например, цвета на фона или стила на текста.
Стъпка 1: Използвайте таблици, за да представи
Тази таблица! Уеб стандартите са се превърнали в норма в оформлението на страници, но не и в този случай. Електронна поща, са малко по-назад в подкрепа на CSS стандартите, което означава, че трябва да се върне в таблиците, за да представляват, ако искаме това да имейлите ни показва точно всеки читател.
В този случай ще трябва да се движат далеч от вашите страхотни умения на уеб страници, оформление, тук ще трябва да използвате малко по-различен подход.
В първия етап на създаване на HTML имейли, трябва да се реши как ще изглежда. Ако наистина искате да се даде много информация за читателя, за тази цел ще се обърне една или две колони - това ще спомогнат за подобряване на хаоса.
формат единична колона обикновено се състои от:
Две колони имейли съдържат също и горния и долния, и, както и уеб страница с две стойки, че имат тесен колона (ляв или десен), който съдържа връзки за навигация и допълнителна информация, както и на колоната по-широк.
Всичко това може лесно да бъде създаден с помощта на една маса, да ги разбием с помощта на документ в блокове. Всъщност, използването на таблици - единственият начин да се постигне правилно дисплей в различни програми за електронна поща.
Няма значение какъв вид дизайн в писмото си, най-важното, за да се помни - сложи важна информация възможно най-високо, така че при отваряне на читателя веднага видях най-важното. Когато отворите писмо от читател често обръщат внимание на горната лява част, и едва след това всичко останало.
Това е, което аз използвам подход при създаването на съобщения в HTML формат:
- За представянето две колони, създаване на три маси - по един за капачките, едната (с две графи) за съдържание (основната част) и един за мазето. Сложете тези три маси в една голяма маса. Използвайте същия подход за документа за една колона. Няма нужда да се скъпя на масата, да се използва за всеки елемент на себе си, така че ще бъдете сигурни, че вашето съобщение ще бъде показана и в почти всички клиенти за електронна поща.
- Използвайте атрибутите в таблицата с тагове (маса) и клетките (ДС), за управление на дисплея. Например, Гранична = »0", valign = »Начало», подравняване = »ляво», cellpadding = »0" и така нататък. Това ще помогне на стари пощенски клиент за да се покаже правилно писмото.
- Дори и ако вашият проект не включва рамка около масите, ще откриете много полезни по време на развитието, за да настроите "1" Гранична = стойност, за да открие евентуални грешки. След грешката ще бъде поправена, задаване на границата = "0".
Подход се използват техники, описани по-горе е най-подходящият за днес, въпреки че това може да изглежда обидно за уеб дизайнери, които са свикнали да използват съвременните стандарти.
Нека видим как можете да оформите текста в имейла.
Стъпка 2: Добавяне на стилове на CSS
Казах ли, че тази подкрепа за CSS стилове беше много слаб в клиентите за електронна поща? Да, така е. Ето няколко неща, за които трябва да се следват. Това са методите, които използвам.
Първо, използвайте инлайн стилове, както е показано тук:
Същата тази техника трябва да се използва в маркерите таблици клетките, алинеи, връзките и другите.
За външния таблицата, съдържаща ширина глава маса, съдържание и мазе документ равна на 98%. Необходимо е пощенски клиент Yahoo! на Mail. Можете дори да настроите ширината на масата на 95% -90%, за да се уверите, че всичко, което се появява наред. Разбира се, за таблиците в средата излагайте ширина стойност от 100%.
Предписват основната информация за стилове на шрифта за маркиране клетки
Използвайте Разделение маркер, за да позиционирате блоковете наляво или надясно, в клетка от таблицата. Google Mail игнорира блокове описани като плаващ (поплавък), но Yahoo! и Hotmail няма проблеми. В някои случаи, най-добре е да се създаде една маса по-трудно, с много клетки, вместо да разчита на плаващи блокове
Докато почти Разделение маркери не са подходящи за използване, педя почти винаги може да се използва, защото е инлайн (с малки букви) елемент. В някои случаи, педя може да се използва не само за да регулирате размера на цвят и шрифт, но също така и да позиционирате текста под или над съдържанието.
Имайте предвид, че някои от услугите, които доставят електронна поща, да променяте стила, така че, например, обикновено кратко стил = »марж: 10px 5px 10px 0;" ще бъде разделен на няколко по-малки правила. Това се прави с цел да се писмото е било ясно за повечето клиенти за електронна поща. Тествайте всяка буква и да видим какво ще се случи с кода, избягвайте честата употреба на кратки правила.
Ако сте създали работна и добре показва HTML имейл с помощта на съветите описани по-горе, това е само част от работата - има няколко стъпки, които трябва да знаете, за да се уверете, че писмото е получено по най-добрия начин.
Следващата стъпка - тестване на буквите в различни мейл клиенти. На този етап най-често някои грешки, които трябва да бъдат коригирани.
Важни техники в тази стъпка:
Важно е, че Вашето писмо и изглеждаше добре с изображения изключени. По подразбиране, Thunderbird, Outlook и други програми за електронна поща не се показват изображения. Например, ако използвате бял текст на тъмен фон, чек, какво с изображения изключен фон беше тъмно.
Тестът на вашата електронна поща, включително тест за проверка на "спам". Можете да използвате безплатна услуга SpamCheck.
Ако всички тествани и всички грешки се коригират, следващата стъпка е да се провери следните елементи:
Важно е да се знае какво може да се обърка или какви проблеми могат да възникнат, когато се покажат, опитайте се да ги отстранят, преди писмото ще бъде изпратено до абонати.
Някои от методите на действие, за Google Mail и стари клиенти за електронна поща:
- Предписват определянето на цвета на фона с помощта BGCOLOR атрибут TD маркер не се използва за тези цели, CSS стилове.
- Използвайте фон атрибут за TD маркер, който ще се използва фоново изображение вместо CSS стилове.
- Използвайте подложка за контрол подложка в клетките, марж в този случай тя не работи.
- Ако имате нужда от рамка около клетките, използвайте допълнително Разделение маркер, който предписва на стойностите на границите, тъй като границите на назначаването директно TD маркер няма да работят в Google Mail.
- Expose пълнежа 10 пиксела около съдържанието, което ще има текстът не е "да отпадне в" на границата.
- Внимателно проверете всички шрифтове, това може да се случи, че сте пропуснали да се регистрират стилове на няколко места.
Основно за правилното показване на буквите в клиента за електронна поща - кодът трябва да бъде възможно най-лесно и разбираемо.
Ако трябва да тествате вашия имейл в Lotus Notes, можете да изтеглите безплатна пробна версия.
Каквото и Lotus Notes показва вашето съобщение в HTML формат правилно, използвайте следните насоки:
- Както по-горе, се използва маса контейнера, който ще включва всички други елементи на писмото, както и отделни таблици за заглавната част и основната част на мазето.
- Създаване на пространство около основната таблица, използвайте cellpadding атрибут, това определяне, равна на най-малко 5%.
- Да не се използва стиловете декларация маркер глава, Lotus просто да ги изтриете.
- Използвайте абсолютни пътеки за изображения, които се съхраняват на сървъра.
- Опитайте се да не използвате ColSpan атрибутите таблици, ранната версия на Lotus Notes не ги разбирам.
- Предписани ширина на клетките в ТД на маркер.
- Центриране писмо обикновено не работи в Lotus.
Много потребители предпочитат да получават писма в HTML формат, вместо обикновен текстов формат, а това е разбираемо. Но за програмисти (ПДО), създаване на такива писма, понякога до задачата не е толкова просто, защото е необходимо да се постигне тяхното отлично представяне в много програми за електронна поща. Тази статия е whazzup някои методи и техники, чрез които можете да постигнете добри резултати.
Линкове към темата
Изпратете Проект стандарти - един сайт, където ще намерите много съвети за това какви функции поддържа различни клиенти за електронна поща, как да се постигне правилното оказване и др.
Монитор на кампанията и MailChimp - много различни шаблони за писма в HTML формат.
SpamCheck - проверка на "спам" имейли.
Лакмус - тестване писмо услуга шаблон във всички популярни услуги за електронна поща и електронна поща.