HTML электрондық пошта дизайнының қиындықтарын (және көңілсіздіктерді) түсіну

Веб-беттерді құру үшін мазмұнды басқару жүйесін ашсаңыз, бұл өте қарапайым процесс. Қазіргі веб-шолғыштар HTML, CSS және JavaScript тілдерін қолдайды қатаң веб-стандарттар жиынтығы. Және олар шынымен де дизайнерлерді алаңдатуы керек бірнеше браузерлер. Ерекшеліктер бар, әрине… және сол шолғыштарға тән кейбір қарапайым уақытша шешімдер немесе функциялар.

Жалпы стандарттарға байланысты мазмұнды басқару жүйелерінде бет құрастырушыларды әзірлеу өте оңай. Браузерлер HTML5, CSS және JavaScript стандарттарына сәйкес келеді... және әзірлеушілер құрылғыларға жауап беретін және браузерлерде сәйкес келетін веб-беттерді құру үшін керемет сенімді шешімдер жасай алады. Екі онжылдық бұрын іс жүзінде әрбір веб-дизайнер веб-беттерді әзірлеу үшін жұмыс үстелі бағдарламалық құралын пайдаланды. Енді веб-дизайнердің веб-бетті әзірлеуі өте сирек кездеседі – көбінесе олар үлгілерді әзірлейді және мазмұнды толтыру үшін мазмұн жүйелеріндегі редакторларды пайдаланады. Веб-сайт редакторлары керемет.

Бірақ электрондық пошта редакторлары өте артта қалды. Міне, неге…

HTML электрондық пошталарын жобалау веб-сайтқа қарағанда әлдеқайда күрделі

Егер сіздің компанияңыз әдемі HTML электрондық поштасын әзірлегісі келсе, бұл процесс бірнеше себептерге байланысты веб-парақ жасаудан гөрі күрделірек болады:

• Стандарттар жоқ – Ешқандай желіні қатаң ұстану жоқ Стандарттар HTML электрондық поштасын көрсететін электрондық пошта клиенттері арқылы. Шын мәнінде, виртуалды түрде әрбір электрондық пошта клиенті және әрбір электрондық пошта клиентінің әрбір нұсқасы басқаша әрекет етеді. Кейбіреулер CSS-ті, сыртқы қаріптерді және заманауи HTML-ді құрметтейді. Басқалары кейбір кірістірілген стильді құрметтейді, тек қаріптер жинағын көрсетеді және кестеге негізделген құрылымдардан басқаның бәрін елемейді. Бұл мәселемен ешкімнің айналыспауы шын мәнінде өте күлкілі. Нәтижесінде, клиенттер мен құрылғылар арасында тұрақты түрде көрсетілетін үлгілерді жобалау үлкен бизнеске айналды және өте қымбат болуы мүмкін.
• Электрондық пошта клиентінің қауіпсіздігі – Осы аптада Apple Mail әдепкі бойынша HTML электрондық хаттарындағы электрондық поштаға ендірілмеген барлық кескіндерді блоктау үшін жаңартылды. Сіз оларға бір уақытта электрондық поштаны жүктеуге рұқсат бересіз немесе бұл параметрді өшіру үшін параметрлерді қосуыңыз керек. Электрондық пошта клиентінің қауіпсіздік параметрлерімен қатар корпоративтік параметрлер де бар.
• IT қауіпсіздігі – Сіздің АТ командасы электрондық поштада нақты қандай нысандарды көрсетуге болатыны туралы қатаң ережелер жиынын қолдануы мүмкін. Егер сіздің суреттеріңіз, мысалы, корпоративтік брандмауэрде ақ тізімге енгізілмеген белгілі бір доменнен келсе, кескіндер электрондық поштаңызда көрсетілмейді. Кейде біз электрондық поштаны әзірлеуге және барлық кескіндерді корпорацияның серверіне орналастыруға тура келді, осылайша олардың қызметкерлері суреттерді көре алады.
• Электрондық пошта қызметтерін жеткізушілер – Нашарлау үшін, қызмет провайдерлеріне электрондық пошта жіберетін электрондық пошта құрастырушылары (ESPs) проблемаларды шектеудің орнына іс жүзінде енгізу. Олар өздерінің редакторын алға жылжытқанда Көргенің - алғаның (WYSIWYG), керісінше электрондық пошта дизайнында жиі кездеседі. Сіз олардың платформасында электрондық поштаны алдын ала қарайсыз, содан кейін электрондық поштаны алушы дизайн мәселелерінің барлық түрлерін көреді. Компаниялар көбіне біреуінде екіншісіне қарағанда көбірек мүмкіндіктер бар деп ойлап, жабық редактордың орнына мүмкіндіктері мол редакторды таңдайды. Керісінше… егер сіз электрондық поштаның барлық клиенттері арасында тұрақты түрде көрсетілетін электрондық хаттарды қаласаңыз, неғұрлым қарапайым болса, соғұрлым жақсырақ, себебі қателіктер аз болуы мүмкін.
• Электрондық пошта клиентін көрсету – Жүздеген электрондық пошта клиенттері бар, олардың әрқайсысы жұмыс үстелінде, қолданбаларда, мобильді және веб-пошта клиенттерінде HTML көрсетеді. Электрондық пошта қызметінің провайдеріндегі тамаша мәтіндік редакторда электрондық поштаңызға тақырып қою параметрі болуы мүмкін болса да, толтыру, шеттер, жол биіктігі және қаріп өлшемі әрбір электрондық пошта клиентінде әр түрлі болуы мүмкін. Нәтижесінде, электрондық поштаны дәйекті түрде көрсету үшін HTML тілін өшіріп, әрбір элементті басқаша кодтауыңыз керек (төмендегі мысалды қараңыз) және жиі электрондық пошта клиентіне тән ерекше жағдайларды жазуыңыз керек. Қарапайым блок түрлері жоқ, сіз кестеге негізделген макеттерді жасауыңыз керек, бұл XNUMX жыл бұрынғы веб-сайтты құруға тең. Сондықтан кез келген жаңа орналасу әзірлеуді де, электрондық пошта клиенті мен құрылғыны тексеруді де қажет етеді. Кіріс жәшігінде көргеніңіз менің кіріс жәшігімде көргенімнен мүлдем басқаша болуы мүмкін. Сол себепті рендеринг құралдары сияқты Қышқыл туралы электрондық пошта 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 арасындағы үлкен айырмашылықтар:

<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>

<div class="center">
   <a href="#" class="button">Find Out More</a>
</div>

Электрондық поштаның дизайн мәселелерін қалай болдырмауға болады

Сәйкес процесті орындау арқылы электрондық поштаны жобалау мәселелерін болдырмауға болады:

1. Үлгі дизайны – Электрондық пошта дизайнында жасағыңыз келетін барлық стильді қамтитын әртүрлі макеттер мен мазмұн блоктары бар үлгіні жасаңыз. Біз клиентті іске асырған кезде, біз әрқашан оларды итермелейміз болашаққа арналған электрондық поштаны құрастырыңыз – жіберілген келесі электрондық пошта науқаны ғана емес. Осылайша, біз қажетті уақытша шешімдерді толығымен жобалай аламыз, әзірлей аламыз, сынай аламыз және жүзеге асыра аламыз бұрын олар бірінші электрондық поштаны жібереді.
2. Үлгіні тестілеу – Жазылушыларыңыз пайдаланатын электрондық пошта клиенттерін түсіну және сіздің HTML электрондық поштаңыздың ұялы телефонда және жұмыс үстелінде толығымен тексерілгенін қамтамасыз ету кез келген үлгіні қолданбас бұрын өте маңызды. Біз электрондық поштаны фотошоп макетінен тура жасай аламыз... бірақ оны кестеге негізделген, кросс-электрондық пошта клиентіне кесу және кесу оңтайлы және дәйекті электрондық пошта дизайнын қолдану үшін маңызды.
3. Ішкі тестілеу – Үлгіңіз әзірленіп, сыналған соң, оны қарап шығу және бекіту үшін ұйымның ішкі тұқым тізіміне жіберу керек. Алдымен электрондық поштаны ішкі көрсетумен байланысты желіаралық қалқан немесе қауіпсіздік мәселелерінің жоқтығына көз жеткізу үшін жеке тұлғалардың өте шектеулі жиынынан бастағыңыз келуі мүмкін. Егер бұл жаңа электрондық пошта қызметінің провайдерінде дананы құрастырып жатса, сіз тіпті электрондық поштаны кіріс жәшігіне алумен байланысты кейбір сүзу немесе блоктау мәселелерін де таба аласыз.
4. Үлгі нұсқасы – Жасалуға, дұрыс сынауға және орналастыруға болатын үлгінің жаңа нұсқасымен жұмыс жасамай, макеттеріңізді немесе дизайныңызды өзгертпеңіз. Көптеген компаниялар әр науқанға арналған бір реттік дизайнды жақсы көреді... бірақ бұл үшін әрбір электрондық поштаның әр науқан үшін жобалануы, әзірленуі және орналастырылуы қажет. Бұл ішкі электрондық пошта маркетингі процесіне көп уақыт қосады. Сондай-ақ, электрондық поштаңыздағы қандай элементтердің қандай элементтерден жақсы жұмыс істейтінін түсінбеу қаупі бар. Жүйелілік - бұл процесті жеңілдету тәсілі ғана емес, ол жазылушылардың мінез-құлқы үшін де маңызды.
5. Электрондық пошта қызметін жеткізуші ерекше жағдайлар – Іс жүзінде әрбір электрондық пошта қызметінің провайдерінде олардың электрондық пошта құрастырушысы енгізетін мәселелерді шешу құралы бар. Компания кірістірілген электрондық пошта өңдегішін пайдаланып, электрондық поштаның дизайнын бұзбауы үшін тіркелгіге жиі өңделмеген CSS қоса аламыз немесе тіпті әрбір электрондық поштаға қосылуы керек мазмұн блогы болуы мүмкін. Әрине, бұл қадамдардың орындалуын қамтамасыз ету үшін осы қадамдарды қолдану үшін кейбір оқытуды және процесті бақылауды қажет етуі мүмкін. Немесе – сіз өзіңіздің электрондық пошта дизайныңызды клиенттер мен құрылғыларда жұмыс істейтіні дәлелденген шешімде дамытқыңыз келуі мүмкін, содан кейін оны электрондық пошта қызметінің провайдеріне қайта қойыңыз.

Электрондық поштаны жобалау платформалары

Электрондық пошта сервисінің платформалары тұтынушылар арасындағы және құрылғылар арасындағы дәйекті түрде көрсетілетін құрылысшыларды құруда және оларға қызмет көрсетуде нашар жұмыс істегендіктен, нарыққа бірқатар тамаша платформалар шықты. Біз кеңінен қолданатындардың бірі Стрипо.

Stripo тек электрондық поштаны құрастырушы ғана емес, оларда оңай импортталатын 900-ден астам үлгілерден тұратын кітапхана бар. Электрондық поштаны құрастырғаннан кейін сіз 60+ ESP-ге және электрондық пошта клиенттеріне, соның ішінде электрондық поштаны жібере аласыз MailChimp, HubSpot, Campaign Monitor, AWeber, eSputnik, Outlook және Gmail. Ең жақсысы Stripo үлгілері электрондық поштаны көрсету сынақтарымен бірге жеткізіледі, осылайша сіз олардың тексерілгеніне және 40-тан астам электрондық пошта клиентінде тұрақты жұмыс істейтініне көз жеткізе аласыз.

Stripo редакторының демонстрациясына кіріңіз

Ақпаратты ашу: мен өзімді байланыстырамын маркетингтік консалтингтік фирма іс жүзінде кез келген электрондық пошта қызметінің провайдерінде жетекші брендтер үшін кросс-клиенттік электрондық пошталарды жобалайды және орналастырады. Мен де серіктеспін Стрипо және мен осы мақаладағы сілтемені пайдаланып жатырмын.