Как да създадете HTML имейл за кореспонденция

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







Спешната създаване на HTML имейли до пощенския списък

Можете да изпращате материали за допълнителни услуги, които може да са се превърнали се интересуват от вашите клиенти след първата покупка.

И има много проблеми за уеб дизайнери, които създават HTML имейли.

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

Проблеми в оформлението на HTML имейли

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

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

Друга изненада е фактът, че не са толкова много услуги за електронна поща не поддържат плувка и уплътнение на маржа и подложка. Как да направите? Представете си, че налагат въз основа DIV (и) класен три колони HTML имейл, както и потребителското такива глупости дойде, той има също така е било изтрито, никога не осъзнава, че той трябва да се направи.

Да, да. Имаш ли го прави! Трябва да се използва таблицата, ако не желаят да жертват хиляди потребители, които са отворили своя имейл не е правилна. Оказва се, че на масата - това е единственият начин, днес, за да се постигне различни браузъри.

Както е писано в един от сайтовете:

Ние трябва да помним, такива ужасни неща като: Cellpadding, cellspacing, ColSpan

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







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

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

Как да създадете HTML имейл за кореспонденция

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

Как да създадете HTML имейл

Първо, аз създаде рамка маса за цялото съдържание на писмото, с ширина от 100% и на син фон. Това поставя два дъщерни таблици. Един за заглавката (ID = "глава"), за втория съдържанието (ID = "съдържание"):

Както може би сте забелязали, аз помолих cellpadding = "40" на обвивката на маса. Това е външна облицовка. Отстъп 20px слагам масата, която е отговорна за капачката. Той добави, допълвайки на масата, който ще се намира в съдържанието. Също така, всички от масите облицована центъра. Продължавай.

все още не са измислили, не забравяйте да посочите дали размера на снимките, така че в това отношение, докато хаоса. Някъде - сложих някъде - не. Когато изпитванията се поставят в ред. Или отнеме най-малко, за да се намали на кода, или къде да се добави, ако е неправилно показва в някои от пощальоните.

Този код добавя ред в една колона в таблица "съдържание" и го сложи на снимката, с "Smartlanding" надпис:

Сега писмото е както следва:

Как да създадете HTML имейл за кореспонденция

Продължавай. Сега трябва да се въведе такава структура:

Как да създадете HTML имейл за кореспонденция

Всичко това се прави, за да има уплътнение между съдържание. HTML код за връзка със съдържанието изглежда така:

Сега трябва да се приложи член съобщение, това се прави просто. 1 линия, една колона и текст в него:

Сега трябва да се създаде структура на 3 колони. Тъй като ние не може да използва плувка (а), трябва да се направят 5 колони. 3 по съдържанието на картината (150px) и 2 - с цел да се определи разстоянието между тях (60px).

Същият маркиране прави за текст, заглавия:

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

Ето писмото дойде. Сега имаме един куп тестове. Смятам да се тества на оформлението в следните пощенски услуги и програми:

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

(Виж предварителните тестове HTML имейли за различните търсачки тук)

Това е интересно: