9 трикова за дизајнирање савршеног ХТМЛ билтена

Е-маил невслеттер је савршен начин да останете у контакту са својим клијентима или сљедбеницима. Често ће ваша компанија или веб локација имати бројна ажурирања производа, или евентуално надолазеће догађаје које желите подијелити. Увијек је могуће објављивати нове информације на свом блогу или у друштвеним мрежама, али ваша публика може само тако далеко доћи до вас. У овом случају, е-маил сигурно није мртва технологија, само неискоришћени потенцијал.

Процес креирања и слања билтена је много лакши него што се може мислити, али за креирање прилагођеног шаблона и прављења сопственог кода - то може потрајати мало дуже.

Саставили смо неколико фантастичних савета како бисмо вам дизајнирали висококвалитетне ХТМЛ билтене као никада до сада. Чак и ако сте почетник у теми, сигурно ћете пронаћи неке непроцењиве информације да бисте започели процес е-маил маркетинга.

Циљеви билтена

Пре него што почнемо да се бавимо дизајнерским аспектима, требало би да разјаснимо вашу сврху за израду билтена. У зависности од врсте веб-локације коју покрећете, информације које се налазе у вашем билтену могу се драстично разликовати од других, али главна сврха билтена је да достави практична ажурирања у пристиглу пошту у читачу.

Већи корисници интернета ће вероватно проверити своју е-пошту више од два пута дневно. Чак и они који су стално запослени ће узети времена да прођу кроз поруке најмање једном дневно. Ово је право време хватање пажње чак и без посете Вашем сајту. Чак и ако нико не кликне на ваше линкове, информација је још примљена, што је одлично за изградњу робне марке.

Размотрите неке од тема које бисте требали понудити у свом дизајну. Да ли сте укључили везе за пријаву за своју услугу; могуће блог линкове, или недавно објављене чланке на вашем сајту? Изглед Вашег билтена ће одражавати како желите да ваши читаоци реагују, али на крају крајева желите да покренете интересовање и прођете неке занимљиве информације за масе.

1. Користите табеле у вашим распоредима

Ово може изгледати помало контрадикторно у односу на данашње модерне веб стандарде, али е-маилови су још увијек архаични у њиховим рендеровим моторима, тако да морате градити према старијим моделима. Нажалост, столови су најлакши начин да све функционише исправно међу различитим клијентима е-поште. У зависности од вашег знања о прављењу табеларних распореда, ово може заиста бити добра вест!

Можете се и запитати зашто див и други блок елементи нису тако добра идеја. Већина клијената е-поште јесу направљен да уклони било који страни ЦСС садржаја. То значи да нећете моћи да користите много тога осим инлине ЦСС (па чак и потпуна подршка је лоша). Клијенти као што су Мицрософт Оутлоок 2007 и Гоогле Гмаил имају веома слабу подршку за флоатед елементе и директну позиционирање.

Најбоље рјешење би било гнијежите више таблица једна у другу. Падови и маргине нису постављени на одређену скалу између многих клијената е-поште. То је разлог да се наставимо користити видтх = "валуе" на свим елементима ћелије табеле. Они ће увек приказивати исту ширину без обзира који клијент за е-пошту читаоци користе, тако да је много сигурније и доследнији да поставите паддинг и маргине користећи празне ћелије табеле.

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

Имате неколико опција приликом израде нацрта вашег распореда билтена, али најбоља опција за праћење је да поставите фиксне ширине за вашу табелу. Постоји много различитих резолуција монитора - нећете моћи да задовољите све. Ако немате одређене елементе са статичком ширином, увек можете користити видтх = "100%" на вашој табели. Ово ће омогућити вашем садржају да попуни целу ширину свих клијената е-поште.

Међутим, за многе је ова метода мало превише слаба. Конструктивни билтени ће у већини случајева захтијевати фиксну ширину, посебно ако користите баннере и слике постављене на одређену величину. Препоручујем рад са 500пк - 600пк максимална ширина документа. Хоризонтална величина екрана иПхоне-а и неких БлацкБерри модела ограничена је на 320 пиксела, тако да ће чак и на 500пк шаблон е-поште бити смањили да би се добро уклопили.

С обзиром на то да многи мобилни корисници одлучују да е-пошту гледају без ХТМЛ-а, то не би требало да буде велики проблем. Корисници десктоп и вебмаил клијената ће вероватно искусити сличну поставку без обзира на оперативни систем који користе. Када си у недоумици направите неколико дизајна шаблона и изабери оне које ти се највише свиђају!

3. Јединице пиксела

Ако не користите флуидне елементе у билтену, вероватно ћете морати да направите неколико ствари. Покушајте да га задржите пиксела (пк) него у другој врсти јединице. Постоци се лако могу помијешати с многим клијентима веб-поште и прозорима софтвера. Са мањим бројем елемената странице, распореди флуида се могу појавити неоштећени, иако са неколико грешака.

Али пиксели су увек сигурни. Радећи унутар 600пк максималног ограничења ширине, можете заиста да унесете много садржаја унутра. Експозиција је лакша ако поделите распореде у две или три колоне и увек пишете величине у пикселима. Једини изузетак може бити величина фонта где емс може боље подржати ваше читаоце, али ем димензионирање ће се разликовати на сличан начин као и проценти ради једноставности, држите се поравнања заснованих на пикселима.

4. Могућности са ЦСС-ом

Може се чинити да дизајн е-поште уништава употребу ЦСС стилова. Иако постоји много неподржаних функција, ЦСС је још увијек савршено прихватљив у многим случајевима. Монитор кампање има прелепу табелу са подржаним ЦСС карактеристикама наведеним путем е-маил клијента. Сви ће подржавати основе као што су породица фонтова и тип слова, тако да можете прескочити ако желите.

Будите опрезни у погледу стилова фонтова како не бисте превише погурали границе. Ако се осећате нелагодно са инлине стиловима, увек је могуће користити ХТМЛ фонт таг иако је застарео. Ако сте ЦСС дизајнер, не морате да напуштате систем, али било које скраћено ЦСС кодирање може резултирати грешком у дизајну. Као пример фонт: 12пк / 14пк Ариал, санс-сериф; стенографија може уштедети много простора, али није у потпуности прихваћена за дизајн е-поште, чак и када се користи са уграђеним стиловима.

Чак и ваш избор боја треба да буде исписана дуготрајно. Хек боје као што су #ццц или # е3ф мора бити написан у потпуности као #цццццц или # ее33фф, редом. Ако можете да направите оно што вам је потребно без ЦСС-а, препоручио бих вам тај пут, али немојте се потпуно устручавати од ЦСС-а у дизајну е-поште јер је супротно популарном веровању подржано у већини случајева.

5. Сидрени линкови Најбоље праксе

Сигурно желите да укључите неке линкове у ваш билтен. То могу бити излазни линкови ка другим страницама на интернету, или можда везе које воде до најпопуларнијих страница на вашем веб сајту. Осим тога, већина подножја садржи везу за одјаву за ваше читаоце да се искључе из процеса е-поште, али како треба да се носите са свим овим везама у свом дизајну?

Па, прво треба напоменути да су клијенти е-поште веома фини са својим дизајном. Многи ће изабрати да препишу своје стилове веза, чак и са уграђеним ЦСС-ом. Добар је трик укључују и инлине боју и додатну ознаку распона унутар елемента сидра. Ако су боја и стил ваших веза важни за цјелокупни дизајн, пожељет ћете подузети додатне мјере опреза. У наставку сам додао пример малог кода:

неки текст линка

Ховер ефекти су не подржава Оутлоок 2007/2010, Гмаил, иОС или Андроид. Можда и даље желите да укључите а: ховер стил за све подржавајуће клијенте: Оутлоок 2000/2003, Хотмаил, Аппле Маил и Иахоо! маил, али лично не видим много користи од делимичног корисничког искуства, пошто селектори сидра нису јако подржани. нуди само 2-3 боје користити у свом дизајну.

Као претпоставка корисници ће такође очекивати да се ваши линкови отварају у новој картици или прозору. Идеално таргет = "_ бланк" атрибут би требало да буде довољан за све прегледаче да препознају ову функционалност, а укључивање овог атрибута на ваше везе за сидро не би требало да негативно утиче на софтвер за е-пошту као што је Лотус Нотес или Оутлоок.

6. Тестирајте све главне клијенте

Недавна студија најпопуларнијих клијената е-поште (коју је урадио Монитор кампање) показује десет најпопуларнијих клијената е-поште у протеклој години. Можда изгледа помало заморно али дизајнери требало би да се навикне да проверавају своје билтене о свим главним клијентима е-поште, у најмању руку код неких уобичајених клијената као што су Гмаил, Хотмаил или Иахоо! Пошта.

Ово не укључује само вебмаил, већ и оперативни софтвер на Мац ОС Кс и Виндовс. Такође према њиховом дијаграму иОС Маил и Андроид у последњих неколико година су скочиле у топ 10 листу. У ствари, иПхоне, иПод Тоуцх и иПад Маил рангирају # 2 најпопуларније право у програму Оутлоок! Нажалост, не постоји начин да их тестирате без посједовања једног од уређаја - тако да ћете морати да се договорите са другим опцијама.

Један буг са мобилном подршком долази у многим иПхоне и Андроид моделима. Често ће се приказивати мобилна е-пошта промените величину текста унутар шаблона. Ово можда неће много утицати на ваш дизајн, али може бити иритантно за неке читаоце. Коришћење ЦСС-а -вебкит-тект-сизе-адјуст: ноне;, ће обезбедите чак и подразумевану величину текста у свим анализама мотора без потребе за тестирањем.

Ако познајете пријатеље или колеге који користе алтернативни софтвер, можда желите затражите њихову помоћ приликом тестирања билтена. Можете и ви пошаљите им копију е-поште да проверите њихов уређај или позајмите уређај да активно избришете грешке кодирања. Срећом, Оутлоок нуди верзију за Мац инсталацију тако да не морате да пратите Виндовс корисника за те оптимизације, али када је ријеч о Лотус Нотесу или Виндовс Маилу, можда вам није срећа.

Алтернатива је да платити за решење као што је Превиев ми Е-маил, нажалост они не нуде бесплатне демо рачуне, али њихова услуга је позната по томе што нуди сјајне прегледе вашег дизајна. Е-маил на Ацид је сличан сервис који нуди бесплатан рачун, али вам не дозвољава да тестирате на свим клијентима, која врста пораза сврхе. Услуге рендерирања на мрежи треба да буду корисне ако вам је потребно дугорочно тестирање многих шаблона за билтене, без употребе алтернативних рачунара, али они нису фундаментални, тако да не оптерећуј ако их не можете све тестирати!

7. Увек нудите Веб-басед приказе

Читаоци неће увек моћи (или бити вољни) да виде вашу е-пошту. Нудим другу верзију негде на Вебу ће дати осећај лакоће и компатибилности. Овај процес не може бити потпуно аутоматизован ако не желите да укључите а обичан текст версион.

Овако, ти би скините све ХТМЛ ознаке из распореда билтена. Не би могли да укључите линкове или стилове за било шта. Сав садржај би био једноставно бити постављен као обичан текстуални фајл за читаоце без могућности рендеровања. Ово је свакако добра алтернатива, али када нудите пуну Веб верзију истог билтена одузима штету учињену било којом грешком. Већина читалаца имаће ажуран веб претраживач који можете стилизовати и градити свој билтен на савршенство.

Како сте поставили страницу потпуно ваш избор. Неки сајтови ће посветите читав блог пост дуплирању садржаја е-поште, можда са неким Додатне Информације. Други ће направите засебну страницу са главне веб странице без директних веза у навигацији. Овај метод може бити користан јер читаоци неће бити ометани главним шаблоном веб сајта или садржајем бочне траке.

8. Додавање садржаја слике

Слике су још један разлог да својим читатељима понудите веб-рјешење. Подразумевано, клијенти е-поште постављени су да извуку слике из садржаја. Ако је ваша адреса додата на сигурну листу, све слике ће бити приказане подразумевано, али корисник мора прихватити ову поставку тако да сигурно није гаранција. Само уверите се да слике нису потребне као део главног садржаја, али укључени као додатни додатак за естетику странице.

Када дођете до извоза графике, постоји неколико савјета за израду слика посебно за е-пошту. Желиш увек поставите атрибуте ширине и висине на свој имг ознаке. Без ових спецификација, неки клијенти ће искривити садржај слике. Ан алт ознака ће такође бити корисна, тако да ће посетиоци знати шта садржај слике садржи пре него што се учита.

Као што је већ поменуто, позиционирање слика у е-пошти може бити тешко. Избегавајте коришћење пловака по сваку цену! Слика алигн = "лево" атрибут ће радити много боље, или алтернативно мапирати тачне ћелије табеле да бисте подесили своје слике дуж горње, леве или десне стране билтена. Нећете бити у могућности да добијете савршено упаривање са толико клијената тамо (посебно мобилним клијентима), али оптимизујте слике и задржите мале величине датотека за најбоље резултате.

Што се тиче складиштења слика, препоручује се да то урадите задржите све датотеке на свом Веб серверу. Ово је боља опција уместо коришћења другог хоста за слике или учитавања фајлова у онлине сервис билтена. Додатно би требало одвојите садржај за своје билтене од осталих слика у структури фолдера овако / имг / емаил или / имг / емаил / 2011.

9. Избегавајте Спам Фолдер!

То је тешко чути, али нису сви клијенти е-поште пријатељски према билтенима. Сваког дана шаљу се милијарде е-маилова и већина садржи спам или злонамерни садржај, тако да су ове сигурносне мјере уграђене у Инбок јасно за сигурносне мјере опреза.

Међутим, када је у питању Интернет маркетинг, лако можете бити обесхрабрени да видите да ваш последњи невслеттер заврши са смећем. Да бисте смањили шансе да се ово догоди, требали бисте очистите свој дизајн ради једноставности. Не правите досадне слике или разнесите ваш насловни текст са стотинама кључних речи.

Такође покушајте задржите садржај кратак и на тему. Не морате да укључите пун садржај за све ваше чланке или странице. Уместо дуге листе покушајте да додате реченицу или две са алтернативном везом на вашу веб локацију. Тхе што је краћи ваш изглед е-поште, то је вероватније да ће проћи инспекција спама.

Невслеттер Десигн Галлери

Шта би било забавно ако би чланак на е-маил невслеттер-у био без фантастичних примера? Постоји много е-маил невслеттер дизајна и шаблона за проверу у Гоогле-у. ХТМЛ Е-маил галерија је веома популаран извор инспирације.

Испод сам укључио снимке екрана из многих билтена у галерији Кампања Монитор. Надамо се да ће вам ови сјајни распореди пружити одличне идеје за сопствене пројекте.

Забавите се дизајнирајте своје идеалне билтене!

Упозорење за пословање