9 triki, lai izstrādātu perfektu HTML biļetenu

E-pasta biļetens ir lielisks veids, kā uzturēt kontaktus ar saviem klientiem vai sekotājiem. Bieži vien jūsu uzņēmumam vai tīmekļa vietnei būs daudzi produktu atjauninājumi vai, iespējams, gaidāmie notikumi, kurus vēlaties kopīgot. Vienmēr ir iespējams ievietot jaunu informāciju savam emuāram vai sociālo mediju plūsmām, bet jūsu auditorija var iet tik tālu, lai sasniegtu jums. Šādā gadījumā e-pasts noteikti nav miris, tikai neizmantots potenciāls.

Biļetena izveides un izsūtīšanas process ir daudz vieglāks nekā domāt, bet, lai izveidotu pielāgotu veidni un izveidotu savu kodu - tas var aizņemt nedaudz ilgāku laiku.

Mēs esam apkopojuši dažus fantastiskus padomus, lai izveidotu augstas kvalitātes HTML biļetenus, piemēram, nekad agrāk. Pat ja jūs esat jaunietis uz tēmu, jūs noteikti atradīsiet nenovērtējamu informāciju, lai sāktu darbu e-pasta mārketinga procesā.

Biļetena mērķi

Pirms iekļūšanas dizaina aspektos mums ir jāprecizē jūsu mērķis veidot biļetenu. Atkarībā no jūsu tīmekļa vietnes veida jūsu informatīvajā biļetenā iekļautā informācija var ievērojami atšķirties no citiem, bet gan biļetena galvenais mērķis ir ērti atjauninājumi tieši jūsu lasītāja iesūtnē.

Iespējams, ka smagie interneta lietotāji pārbaudīs savu e-pastu vairāk nekā divas reizes dienā. Pat tie, kas ir pastāvīgi aizņemti, aizņems laiku, lai vismaz reizi dienā izietu savus ziņojumus. Tas ir ideāls laiks pievērst uzmanību pat bez apmeklējumiem jūsu vietnē. Pat ja neviens nespiež jūsu saites, informācija ir joprojām saņemta, kas ir lieliski piemērots zīmola nosaukumam.

Apsveriet dažas tēmas, kas jums būtu jāpiedāvā jūsu dizainā. Vai jums ir arī saites uz reģistrēšanos jūsu pakalpojumam; iespējams, blogu saites vai pēdējie publicētie raksti jūsu vietnē? Jūsu biļetena izkārtojums atspoguļo to, kā jūs vēlaties, lai jūsu lasītāji reaģētu, bet galu galā jūs meklējat interesi un nodot dažus interesantus informācijas masīvus.

1. Izmantot tabulas savā izkārtojumā

Tas var šķist pretrunīgi mūsdienu mūsdienu tīmekļa standartiem, bet e-pasta vēstules joprojām ir arhaisks, tāpēc jums ir jāveido vecāki modeļi. Diemžēl tabulas ir vienkāršākais veids lai viss darbotos pareizi starp dažādiem e-pasta klientiem. Atkarībā no jūsu zināšanām par galda izkārtojumu izveidi, tas patiesībā var būt labas ziņas!

Jūs varat arī brīnīties, kāpēc div un citi bloka elementi nav tik laba ideja. Lielākā daļa e-pasta klientu ir būvēts, lai atdalītu jebkādu svešu CSS saturu. Tas nozīmē, ka jūs nevarēsiet izmantot daudz neko, izņemot CSS (un pat pilnīgs atbalsts ir neskaidrs). Klientiem, piemēram, Microsoft Outlook 2007 un Google Gmail, ir ļoti slikts atbalsts peldošiem elementiem un tiešai pozicionēšanai.

Labākais risinājums būtu ligzdojiet vairākas tabulas viena otrai. Daudzu e-pasta klientu starpā polsterējums un rezerves nav iestatītas noteiktā mērogā. Tas ir iemesls, lai izmantotu width = "value" uz visiem jūsu galda šūnu elementiem. Tie vienmēr parādīs tādu pašu platumu neatkarīgi no tā, kuru e-pasta klientu lasītāji lieto, tāpēc tas ir daudz drošāka un saskaņotāka iestatīt polsterējumu un margas, izmantojot tukšas galda šūnas.

2. Fiksēta platuma pozicionēšana

Jums ir dažas iespējas, veidojot jūsu biļetenu izkārtojuma projektus, taču vislabākā iespēja ir sekot iestatīt fiksēto platumu jūsu saturošajai tabulai. Ir daudz dažādu monitora izšķirtspēju - jūs nevarēsiet iepriecināt visus. Ja jums nav konkrētu elementu ar statiskiem platumiem, jūs vienmēr varat izmantot width = "100%" jūsu tabulā. Tas ļaus jūsu saturam aizpildīt visu e-pasta klientu platumu.

Tomēr daudziem šī metode ir nedaudz pārlieka. Konstruktīvi biļeteni lielākajā daļā gadījumu būs nepieciešams fiksēts platums, īpaši, ja jūs izmantojat banerus un attēlus, kas iestatīti noteiktā izmērā. Es ieteiktu strādāt ar 500px - 600px maksimālais dokumenta platums. IPhone un dažu BlackBerry modeļu horizontālais ekrāna izmērs ir ierobežots līdz 320 pikseļiem, tāpēc pat 500px jūsu e-pasta veidne būs samazināts, lai tas būtu piemērots.

Ņemot vērā, ka daudzi mobilo sakaru lietotāji izvēlas apskatīt e-pastu bez HTML, tam nevajadzētu būt milzīgai problēmai. Darbvirsmas un tīmekļa e-pasta klientu lietotāji, iespējams, piedzīvos līdzīgu iestatījumu neatkarīgi no operētājsistēmas, ko tie izmanto. Ja rodas šaubas izveidojiet dažas veidnes un izvēlēties sev piemērotākos!

3. Pikseļu vienības

Ja vien jūsu biļetenā neizmantojat šķidruma elementus, visticamāk, jums vajadzēs izmērīt dažas lietas. Mēģiniet to saglabāt pikseļi (px) nevis cita veida vienību. Procenti var viegli sajaukt ar daudziem webmail klientiem un programmatūras logiem. Ar mazākiem lappuses elementiem šķidruma izkārtojumi var izskanēt, kaut arī ar dažām kļūdām.

Bet pikseļi vienmēr ir droša lieta. Strādājot 600px maksimālā platuma ierobežojumā, jūs faktiski varēsiet ievietot daudz satura. Ekspozīcija ir vieglāka, ja izkārtojumus sadalāt divās vai trīs kolonnās un vienmēr rakstiet izmērus pikseļos. Vienīgais izņēmums var būt fonta lielumus kur ems var labāk lasīt lasītājus, bet em izmēri atšķirsies līdzīgi, kā tas būtu vienkāršības labad pieturieties pie pikseļu izvietojumiem.

4. Iespējas ar CSS

Tas var šķist e-pasta dizains, lai iznīcinātu CSS stilu izmantošanu. Lai gan ir daudzas neatbalstāmas funkcijas, CSS daudzos gadījumos joprojām ir pilnīgi pieņemams. Kampaņas monitors ir aprīkots ar skaistu tabulu ar atbalstītiem CSS rekvizītiem, kas uzskaitīti pa e-pasta klientu. Visi atbalstīs pamatus, piemēram font-family un fonta stils, lai jūs varētu izlaist ja vēlaties.

Esiet piesardzīgi attiecībā uz jūsu fontu stiliem, lai nepārspētu robežas pārāk tālu. Ja jūs jūtaties neērti ar iekšējiem stiliem, vienmēr ir iespējams izmantot HTML fontu tagu, lai gan tas ir novecojis. Ja jūs esat CSS dizainers, jums nav jāiziet no sistēmas, bet jebkurš īslaicīgs CSS kodējums var novest pie kļūdām. Kā piemēru fonts: 12px / 14px Arial, sans-serif; stenogramma var palīdzēt ietaupīt daudz vietas, bet tas nav pilnībā pieņemts e-pasta dizainam, pat ja tas tiek lietots ar inline stiliem.

Pat jūsu krāsu izvēle būtu jāizraksta garš. Hex krāsas, piemēram, #ccc vai # e3f jābūt pilnībā rakstītam kā #cccccc vai # ee33ff, attiecīgi. Ja jūs varat veidot to, kas jums nepieciešams bez CSS, es ieteiktu šo ceļu, bet nevajag pilnībā izvairīties no CSS e-pasta dizainos, jo pretēji populārajam pārliecinājumam tas lielākoties tiek atbalstīts.

5. Enkura saites labākā prakse

Jūs, protams, vēlēsieties savā biļetenā iekļaut dažas saites. Tās varētu būt izejošās saites uz citām tīmekļa lapām, vai arī saites, kas ved uz populārākajām vietnēm jūsu vietnē. Turklāt lielākajā daļā kājenēs būs pieejama abonēšanas saite, kas ļaus jūsu lasītājiem atteikties no e-pasta procesa, bet kā jums vajadzētu apstrādāt visas šīs saites jūsu dizainā?

Vispirms jāatzīmē, ka e-pasta klienti ir ļoti smalki ar savu dizainu. Daudzi izvēlas pārrakstīt jūsu saites stilus, pat izmantojot CSS. Veikls triks ir ietver gan iekšējo krāsu, gan papildu span tagu enkura elementā. Ja jūsu saišu krāsa un stils ir svarīgs vispārējam dizainam, jūs vēlaties veikt papildu piesardzību. Es esmu pievienojis mazu koda piemēru:

daži saites teksti

Hover efekti ir nav atbalstīts programmā Outlook 2007/2010, Gmail, iOS vai Android. Iespējams, joprojām vēlaties iekļaut a: lidināties stils visiem atbalsta klientiem: Outlook 2000/2003, Hotmail, Apple Mail un Yahoo! sūtījumi, bet personīgi neredzu daudz labumu daļējā lietotāja pieredzē, jo enkura atlasītāji nav ļoti atbalstīti. vienkārši piedāvā 2-3 saites krāsas izmantot visā jūsu dizainā.

Kā prezumpcija lietotāji arī sagaida, ka jūsu saites tiks atvērtas jaunā cilnē vai logā. Ideālā gadījumā target = "_ blank" atribūtam jābūt pietiekamam, lai visas pārlūkprogrammas varētu atpazīt šo funkcionalitāti, un šī atribūta iekļaušana jūsu enkura saitēs nedrīkst negatīvi ietekmēt e-pasta programmatūru, piemēram, Lotus Notes vai Outlook.

6. Pārbaudīt visus galvenos klientus

Nesen veiktais populārāko e-pasta klientu pētījums (ko veica Campaign Monitor) parāda desmit populārākos e-pasta klientus pagājušajā gadā. Tas var šķist mazliet garlaicīgs, bet dizaineri būtu jāapgūst ieradums pārbaudīt savus jaunumus par visiem galvenajiem e-pasta klientiem, vismaz dažos no biežāk sastopamajiem klientiem, piemēram, Gmail, Hotmail vai Yahoo! Pasts.

Tas neietver tikai webmail, bet arī operētājsistēmu gan Mac OS X, gan Windows. Arī saskaņā ar to diagrammu iOS Mail un Android pēdējo gadu laikā abi ir iekļuvuši top 10 sarakstā. Faktiski iPhone, iPod Touch un iPad Mail ierindo # 2 populārākās tiesības programmā Outlook! Diemžēl nav iespējas to pārbaudīt, nepārvaldot vienu no ierīcēm, tāpēc jums būs jāizpilda citas iespējas.

Viena kļūda ar mobilo atbalstu nāk daudzos iPhone un Android modeļos. Bieži vien mobilā e-pasta atveidošana mainīt veidnes izmēru. Tas var neietekmēt jūsu dizainu, bet tas var būt dažiem lasītājiem kaitinošs. Izmantojot CSS -webkit-text-size-adjust: nav;, gribu nodrošināt vienmērīgu noklusējuma teksta izmēru visos parsēšanas dzinējos bez nepieciešamības to pārbaudīt.

Ja jūs zināt kādus draugus vai kolēģus, kas izmanto alternatīvu programmatūru, jūs varat vēlēties lūdziet palīdzību palīdzības biļetena testēšanā. Jūs varat arī nosūtiet e-pasta kopiju pārbaudīt to ierīci vai aizņemties ierīci aktīvi izdzēst kodēšanas kļūdas. Par laimi Outlook piedāvā Mac instalācijas versiju, tāpēc jums nebūs nepieciešams izsekot Windows lietotājam par šīm optimizācijām, bet, kad runa ir par Lotus Notes vai Windows Mail, jums var būt neveiksmi.

Alternatīva ir maksāt par risinājumu piemēram, priekšskatīt manu e-pastu, diemžēl tie nesniedz nekādus bezmaksas demo kontus, bet viņu pakalpojumi ir labi pazīstami, piedāvājot drausmīgus priekšskatījumus jūsu dizainam. E-pasts uz Acid ir līdzīgs pakalpojums, kas piedāvā bezmaksas kontu, bet neļauj jums pārbaudīt visus klientus, kāda veida nolūks ir mērķis. Tiešsaistes izciršanas pakalpojumiem vajadzētu būt noderīgiem, ja jums ir nepieciešams pārbaudīt daudzus biļetenu veidnes ilgtermiņā, neizmantojot alternatīvos datorus, tomēr tie nav būtiski, tāpēc nav stresa ja jūs nevarat tos pārbaudīt!

7. Vienmēr piedāvājiet tīmekļa skatījumus

Lasītāji ne vienmēr varēs (vai būs gatavi) apskatīt jūsu e-pastu dabiski. Piedāvājot citu versiju kaut kur tīmeklī sniegs vieglumu un saderību. Šo procesu nevar pilnībā automatizēt, ja vien nevēlaties iekļaut a vienkāršs teksts versija.

Tādā veidā jūs to darītu noņemt visus HTML tagus no biļetena izkārtojuma. Jūs nevarētu iekļaut saites vai stilus neko. Viss saturs būtu vienkārši kā vienkāršu teksta failu lasītājiem bez atveidošanas iespējām. Tas noteikti ir laba alternatīva, bet, ja jūs piedāvājat pilnu tā paša biļetena tīmekļa versiju atņem bojājumus, kas radušies jebkuras atrašanas kļūdas dēļ. Lielākā daļa lasītāju darbosies ar mūsdienīgu tīmekļa pārlūkprogrammu, kuru varat veidot un veidot savu biļetenu uz pilnību.

Kā iestatāt lapu, ir pilnībā jūsu izvēle. Dažas tīmekļa vietnes veltīt visu blogu, lai dublētu e-pasta saturu, varbūt ar dažiem Papildus informācija. Citi būs izveidojiet atsevišķu lapu no galvenās tīmekļa vietnes bez tiešām saitēm navigācijā. Šī metode var būt izdevīga, jo lasītāji netiks novirzīti no jūsu galvenās tīmekļa vietnes veidnes vai sānjoslas satura.

8. Attēla satura pievienošana

Attēli ir vēl viens iemesls, lai piedāvātu saviem lasītājiem tīmekļa risinājumu. Pēc noklusējuma e-pasta klienti ir iestatīti, lai no satura izņemtu attēlus. Ja jūsu adrese ir pievienota drošam sarakstam, visi attēli tiks parādīti pēc noklusējuma, bet lietotājs ir jāpieņem šī iestatīšana tāpēc tas noteikti nav garantija. Tikai pārliecinieties, ka attēli nav nepieciešami kā galvenā satura daļa, bet ir iekļauts kā papildus papildinājums lapu estētikai.

Kad nokļūsiet grafikas eksportēšanai, ir daži padomi, kā veidot attēlus īpaši e-pastam. Jūs vienmēr vēlaties iestatiet gan jūsu platuma, gan augstuma atribūtus img tagus. Bez šīm specifikācijām, daži klienti izkropļos attēla saturu. An alt atzīme arī būs noderīga, lai apmeklētāji zinātu, ko satur attēla saturs, pirms tas ir ielādēts.

Kā minēts iepriekš, attēlu novietošana e-pastā var kļūt sarežģīta. Izvairieties no pludiņu izmantošanas par katru cenu! Attēls align = "left" atribūts darbosies daudz labāk vai alternatīvi izplānojiet precīzas tabulas šūnas lai jūsu attēli būtu piemēroti jūsu biļetena augšējā, kreisajā vai labajā pusē. Jūs nevarēsiet iegūt perfektu saskaņotību ar tik daudziem klientiem (īpaši mobilajiem klientiem), bet optimizējiet attēlus un saglabāt lielākus failu izmērus, lai iegūtu labākos rezultātus.

Attiecībā uz attēlu glabāšanu ieteicams saglabāt visus failus savā tīmekļa serverī. Tā ir labāka iespēja, nevis izmantot citu attēlu resursdatoru, vai augšupielādējot failus tiešsaistes biļetenu pakalpojumā. Turklāt jums vajadzētu atdaliet savu biļetenu saturu prom no pārējiem attēliem mapju struktūrā tāpat kā / img / e-pasts vai / img / email / 2011.

9. Izvairieties no surogātpasta mapes!

To var būt grūti dzirdēt, bet ne visi e-pasta klienti ir draudzīgi pret jaunumiem. Katru dienu tiek nosūtīti miljardi e-pasta sūtījumu, un lielākā daļa satur surogātpastu vai ļaunprātīgu saturu, tādējādi šiem drošības pasākumiem iebūvētajā iesūtnē ir skaidri noteikti drošības pasākumi..

Tomēr, kad runa ir par interneta mārketingu, jūs varat viegli atturēties, lai redzētu savu jaunāko biļetenu ar nevēlamu. Lai samazinātu šīs iespējas, jums vajadzētu tīrīt savu dizainu vienkāršības labad. Nelietojiet kaitinošus attēlus vai uzspridziniet virsraksta tekstu ar simtiem atslēgvārdu.

Arī mēģiniet saglabāt savu saturu un tematu. Jums nav nepieciešams iekļaut pilnu saturu visiem jūsu rakstiem vai lapām. Mēģiniet pievienot frāzi vai divus ar alternatīvu saiti uz jūsu vietni ilga saraksta vietā. The vairāk īss jūsu e-pasta izskats, jo lielāka varbūtība, ka tā pārsūtīs surogātpasta pārbaudi.

Newsletter Design Gallery

Kas būtu jautri e-pasta biļetenu rakstam bez fantastiskiem piemēriem? Ir tonnas e-pasta biļetenu dizainu un veidnes, lai pārbaudītu Google. HTML e-pasta galerija ir ļoti populārs iedvesmas avots.

Zemāk esmu iekļāvis ekrānšāviņus no daudziem informatīvajiem izdevumiem kampaņas monitora galerijā. Cerams, ka šie drausmīgie izkārtojumi var sniegt jums lieliskas idejas jūsu pašu dizainam.

Izbaudiet ideālus biļetenus!

Alertful for Business