HTML электрондық пошта дизайнының қиындықтарын (және көңілсіздіктерді) түсіну
Веб-беттерді құру үшін мазмұнды басқару жүйесін ашсаңыз, бұл өте қарапайым процесс. Қазіргі веб-браузерлерді қолдайды HTML, CSS, және JavaScript қатаң веб стандарттарына сәйкес келеді. Және олар дизайнерлерді алаңдатуы керек бірнеше браузерлер ғана. Ерекшеліктер бар, әрине… және сол шолғыштарға тән кейбір қарапайым уақытша шешімдер немесе функциялар.
Жалпы стандарттарға байланысты мазмұнды басқару жүйелерінде бет құрастырушыларды әзірлеу оңай. Браузерлер HTML5, CSS және JavaScript стандарттарына сәйкес келеді... және әзірлеушілер құрылғыларға жауап беретін және браузерлерде үйлесімді веб-беттерді жасау үшін керемет сенімді шешімдер жасай алады. Екі онжылдық бұрын іс жүзінде әрбір веб-дизайнер веб-беттерді әзірлеу үшін жұмыс үстелі бағдарламалық құралын пайдаланды. Енді веб-дизайнердің веб-бетті әзірлеуі өте сирек кездеседі – олар көбінесе үлгілерді әзірлейді және мазмұнды толтыру үшін мазмұн жүйелеріндегі редакторларды пайдаланады. Веб-сайт редакторлары керемет.
Бірақ электрондық пошта редакторлары өте артта қалды. Міне, неге…
HTML электрондық пошталарын жобалау веб-сайтқа қарағанда әлдеқайда күрделі
Егер сіздің компанияңыз әдемі HTML электрондық поштасының әзірленгенін қаласа, бұл процесс бірнеше себептерге байланысты веб-парақты құрудан гөрі күрделірек болады:
- Стандарттар жоқ – HTML электрондық поштасын көрсететін электрондық пошта клиенттерінің веб-стандартты қатаң сақтауы жоқ. Іс жүзінде әрбір электрондық пошта клиенті және әрбір электрондық пошта клиентінің әрбір нұсқасы басқаша әрекет етеді. Кейбіреулер CSS-ті, сыртқы қаріптерді және заманауи HTML-ді құрметтейді. Басқалары кейбір кірістірілген стильдерді құрметтейді, тек қаріптер жинағын көрсетеді және кестеге негізделген құрылымдардан басқаның бәрін елемейді. Бұл мәселемен ешкімнің айналыспауы өте күлкілі. Нәтижесінде, клиенттер мен құрылғылар арасында тұрақты түрде көрсетілетін үлгілерді жобалау үлкен бизнеске айналды және өте қымбат болуы мүмкін.
- Электрондық пошта клиентінің қауіпсіздігі – Жақында Apple Mail әдепкі бойынша HTML электрондық хаттарындағы электрондық поштаға ендірілмеген барлық кескіндерді блоктау үшін жаңартылды. Сіз оларға бір уақытта электрондық поштаны жүктеуге рұқсат бересіз немесе осы параметрді өшіру үшін параметрлерді қосуыңыз керек. Электрондық пошта клиентінің қауіпсіздік параметрлерімен қатар корпоративтік параметрлер де бар.
- IT қауіпсіздігі – Сіздің АТ командасы электрондық поштада нақты қандай нысандарды көрсетуге болатыны туралы қатаң ережелер жиынын қолдануы мүмкін. Егер сіздің суреттеріңіз, мысалы, корпоративтік брандмауэрде ақ тізімге енгізілмеген белгілі бір доменнен келсе, кескіндер электрондық поштаңызда көрсетілмейді. Кейде біз электрондық поштаны әзірлеуге және барлық кескіндерді корпорацияның серверіне орналастыруға тура келді, осылайша олардың қызметкерлері суреттерді көре алады.
- Электрондық пошта қызметтерін жеткізушілер – Нашарлау үшін, қызмет провайдерлеріне электрондық пошта жіберетін электрондық пошта құрастырушылары (ESPс) проблемаларды шектемей, іс жүзінде енгізу. Олар өз редакторын "Сен көретін нәрсе - сен аласың" (WYSIWYG) ұсынғанымен, электрондық пошта дизайнында керісінше жағдай жиі кездеседі. Сіз олардың платформасында электрондық поштаны алдын ала қарайсыз және алушы барлық дизайн мәселелерін көреді. Компаниялар көп мүмкіндіктер бар деп ойлап, құлыпталған редактордың орнына мүмкіндіктері мол редакторды жиі таңдайды. Керісінше… егер сіз электрондық поштаның барлық клиенттері арасында дәйекті түрде көрсетілетін электрондық хаттарды қаласаңыз, неғұрлым қарапайым болса, соғұрлым жақсырақ, себебі азырақ қате болуы мүмкін.
- Электрондық пошта клиентін көрсету – Жүздеген электрондық пошта клиенттері жұмыс үстелінде, қолданбаларда, мобильді құрылғыларда және веб-пошта клиенттерінде HTML көрсетеді. Электрондық пошта қызметінің провайдеріндегі тамаша мәтін өңдегішінде электрондық поштаға тақырып қою параметрі болуы мүмкін, бірақ толтыру, шеттер, жол биіктігі және қаріп өлшемі әрбір электрондық пошта клиенті үшін әр түрлі болуы мүмкін. Нәтижесінде, электрондық поштаны тұрақты түрде көрсету үшін HTML тілін өшіріп, әрбір элементті басқаша кодтауыңыз керек (төмендегі мысалды қараңыз) және жиі электрондық пошта клиентіне тән ерекше жағдайларды жазуыңыз керек. Қарапайым блок түрлері жоқ, сіз кестеге негізделген макеттерді жасауыңыз керек, бұл 30 жыл бұрынғы веб-сайтты құруға тең. Сондықтан кез келген жаңа орналасу әзірлеуді де, электрондық пошта клиенті мен құрылғыны тексеруді де қажет етеді. Кіріс жәшігіңізде көргеніңіз менің кіріс жәшігімде көргенімнен мүлдем басқаша болуы мүмкін. Сол себепті рендеринг құралдары сияқты Қышқыл туралы электрондық пошта or лакмус жаңа дизайндарыңыздың барлық электрондық пошта клиенттерінде жұмыс істеуін қамтамасыз ету үшін қажет. Мұнда танымал электрондық пошта клиенттерінің және олардың көрсету қозғалтқыштарының қысқаша тізімі берілген:
- Apple Mail, Mac жүйесіне арналған Outlook, Android Mail және iOS поштасын пайдалану WebKit.
- Outlook 2000, 2002 және 2003 пайдалану Internet Explorer.
- Outlook 2007, 2010 және 2013 пайдалану Microsoft Word (иә, Word!).
- Веб-пошта клиенттері өздерінің браузерлерінің сәйкес қозғалтқышын пайдаланады (мысалы, Safari WebKit пайдаланады және Chrome Blink пайдаланады).
Web Vs үшін HTML мысалы. Электрондық пошта
Электрондық поштадағы дизайнның вебке қарағанда күрделілігін көрсететін мысалды алғыңыз келсе, мұнда Mailbakery мақаласынан тамаша мысал келтірілген. 19 Электрондық пошта мен Web HTML арасындағы үлкен айырмашылықтар:
HTML электрондық поштасы
Түймені дұрыс орналастыру және оның электрондық пошта клиенттерінде жақсы көрінуін қамтамасыз ету үшін қажетті барлық кірістірілген стильді қамтитын кестелер сериясын құруымыз керек. Сыныптарды біріктіру үшін ілеспе стиль тегі де осы электрондық поштаның жоғарғы жағында болады.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left">
<table border="0" cellspacing="0" cellpadding="0" bgcolor="#43756e">
<tr>
<td class="text-button" style="padding: 5px 20px; color:#ffffff; font-family: 'Oswald', Arial, sans-serif; font-size:14px; line-height:20px; text-align:center; text-transform:uppercase;">
<a href="#" target="_blank" class="link-white" style="color:#ffffff; text-decoration:none"><span class="link-white" style="color:#ffffff; text-decoration:none">Find Out More</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
Web HTML
Түйме ретінде пайда болатын анкерлік тегтің регистрін, туралануын, түсін және өлшемін анықтау үшін сыныптары бар сыртқы стиль кестесін пайдалана аламыз.
<div class="center">
<a href="#" class="button">Find Out More</a>
</div>
Электрондық поштаның дизайн мәселелерін қалай болдырмауға болады
Сәйкес процесті орындау арқылы электрондық поштаны жобалау мәселелерін болдырмауға болады:
- Үлгіні тестілеу – Жазылушыларыңыз пайдаланатын электрондық пошта клиенттерін түсіну және сіздің HTML электрондық поштаңыздың ұялы телефонда және жұмыс үстелінде толық тексерілгенін қамтамасыз ету кез келген үлгіні қолданбас бұрын өте маңызды. Біз электрондық поштаны Photoshop макетінен құрастыра аламыз... бірақ оны кестеге негізделген, кросс-электрондық пошта клиентіне кесу және кесу оңтайлы және дәйекті электрондық пошта дизайнын қолдану үшін маңызды.
- Ішкі тестілеу – Үлгіңіз әзірленіп, сыналған соң, оны қарап шығу және бекіту үшін ұйымның ішкі тұқым тізіміне жіберу керек. Алдымен электрондық поштаны ішкі көрсетумен байланысты желіаралық қалқан немесе қауіпсіздік мәселелерінің жоқтығына көз жеткізу үшін жеке тұлғалардың өте шектеулі жиынынан бастағыңыз келуі мүмкін. Егер бұл жаңа электрондық пошта қызметінің провайдерінде дананы құрастырып жатса, сіз тіпті электрондық поштаны кіріс жәшігіне алумен байланысты кейбір сүзу немесе блоктау мәселелерін де таба аласыз.
- Үлгі нұсқасы – Жасалуға, дұрыс сынауға және орналастыруға болатын үлгінің жаңа нұсқасымен жұмыс жасамай, макеттеріңізді немесе дизайныңызды өзгертпеңіз. Көптеген компаниялар әр науқанға арналған бір реттік дизайнды жақсы көреді... бірақ бұл үшін әрбір электрондық поштаның әр науқан үшін жобалануы, әзірленуі және орналастырылуы қажет. Бұл ішкі электрондық пошта маркетингі процесіне көп уақыт қосады. Сондай-ақ, электрондық поштаңыздағы қандай элементтердің қандай элементтерден жақсы жұмыс істейтінін түсінбеу қаупі бар. Жүйелілік - бұл процесті жеңілдету тәсілі ғана емес, ол жазылушылардың мінез-құлқы үшін де маңызды.
- Электрондық пошта қызметін жеткізуші ерекше жағдайлар – Іс жүзінде әрбір электрондық пошта қызметінің провайдерінде олардың электрондық пошта құрастырушысы енгізетін мәселелерді шешу құралы бар. Компания кірістірілген электрондық пошта өңдегішін пайдаланып, электрондық поштаның дизайнын бұзбауы үшін тіркелгіге жиі өңделмеген CSS қоса аламыз немесе тіпті әрбір электрондық поштаға қосылуы керек мазмұн блогы болуы мүмкін. Әрине, бұл қадамдардың орындалуын қамтамасыз ету үшін осы қадамдарды қолдану үшін кейбір оқытуды және процесті бақылауды қажет етуі мүмкін. Немесе – сіз өзіңіздің электрондық пошта дизайныңызды клиенттер мен құрылғыларда жұмыс істейтіні дәлелденген шешімде дамытқыңыз келуі мүмкін, содан кейін оны электрондық пошта қызметінің провайдеріне қайта қойыңыз.
Электрондық поштаны жобалау платформалары
Электрондық пошта сервисінің платформалары тұтынушылар арасындағы және құрылғылар арасындағы дәйекті түрде көрсетілетін құрылысшыларды құруда және оларға қызмет көрсетуде нашар жұмыс істегендіктен, нарыққа бірқатар тамаша платформалар шықты. Біз кеңінен қолданатындардың бірі Стрипо.
Stripo тек электрондық поштаны құрастырушы ғана емес, оларда оңай импортталатын 900-ден астам үлгілерден тұратын кітапхана бар. Электрондық поштаны құрастырғаннан кейін сіз 60+ ESP-ге және электрондық пошта клиенттеріне, соның ішінде электрондық поштаны жібере аласыз Intuit Mailchimp, HubSpot, Науқанға Monitor, Aweber, eSputnik, көзқарас, және Gmail. Ең жақсысы Stripo үлгілері электрондық поштаны көрсету сынақтарымен бірге жеткізіледі, осылайша сіз олардың тексерілгеніне және 40-тан астам электрондық пошта клиентінде тұрақты жұмыс істейтініне көз жеткізе аласыз.