9 trikov za oblikovanje Perfect HTML Newsletter

E-poštni novice so odličen način, da ostanete v stiku s svojimi strankami ali privrženci. Pogosto bo vaše podjetje ali spletno mesto imelo številne posodobitve izdelkov ali morebitne prihajajoče dogodke, ki jih želite deliti. Vedno je mogoče objaviti nove informacije v svojem spletnem dnevniku ali v socialnih medijih, vendar lahko vaše občinstvo doseže le toliko, da vas lahko doseže. V tem primeru e-pošta zagotovo ni mrtva tehnologija, le neizkoriščen potencial.

Postopek ustvarjanja in pošiljanja glasila je veliko lažji, kot si lahko zamislite, toda za oblikovanje predloge po meri in izdelavo lastne kode - to lahko traja dlje.

Zbrali smo nekaj fantastičnih nasvetov, ki vam bodo pomagali pri oblikovanju visokokakovostnih HTML novic, kot še nikoli prej. Tudi če ste novinec na tem področju, boste zagotovo našli nekaj neprecenljivih informacij, da boste lahko začeli s postopkom e-poštnega trženja..

Cilji glasila

Preden se lotimo oblikovalskih vidikov, moramo pojasniti vaš namen za izdelavo glasila. Glede na vrsto spletnega mesta, ki ga uporabljate, se lahko informacije, ki jih vsebuje vaše glasilo, močno razlikujejo od drugih, toda osrednji namen glasila je priskrbeti priročne posodobitve v mapi »Prejeto« bralca.

Težki uporabniki interneta najverjetneje preverijo svojo e-pošto več kot dvakrat na dan. Tudi tisti, ki so nenehno zaposleni, bodo vzeli čas, da bodo vsaj enkrat na dan pregledovali svoja sporočila. To je pravi čas zajeti pozornost tudi brez obiska vašega spletnega mesta. Tudi če nihče ne klikne vaših povezav, so podatki še vedno prejete, kar je odlično za izgradnjo blagovne znamke.

Razmislite o nekaterih temah, ki bi jih morali ponuditi v svojem načrtu. Ali imate povezave za prijavo za svojo storitev; morda blog povezave ali najnovejše objavljene članke na vašem spletnem mestu? Postavitev vašega glasila bo odražala vašo željo, da bi se vaši bralci odzvali, a navsezadnje iščete zanimanje in prenašajte nekaj zanimivih informacij v množice..

1. Uporabite tabele v postavitvah

To se morda zdi nekoliko protislovno glede na današnje sodobne spletne standarde, e-pošta pa je v svojih upodabljalnih motorjih še vedno arhaična, zato morate graditi na starejše modele. Na žalost so mize najlažji način vse, kar deluje pravilno med različnimi e-poštnimi odjemalci. Glede na vaše poznavanje postavitev, ki temeljijo na tabelah, je to dejansko dobra novica!

Morda se sprašujete tudi, zakaj div in drugi blok elementi niso tako dobra ideja. Večina e-poštnih odjemalcev je zgrajen, da odstrani vse tuje CSS vsebine. To pomeni, da ne boste mogli več uporabljati ničesar, razen inline CSS (in celo popolna podpora je vlečna). Stranke, kot je Microsoft Outlook 2007 in Googlov Gmail, imajo zelo slabo podporo za plavajoče elemente in neposredno pozicioniranje.

Najboljša rešitev bi bila gnezdite več tabel med seboj. Oblazinjenje in robovi niso nastavljeni na določeno merilo med številnimi e-poštnimi odjemalci. To je razlog, da se držimo uporabe width = "value" na vseh elementih celic tabele. Te bodo vedno prikazale enako širino, ne glede na to, kateri odjemalec e-pošte uporablja bralce, zato je veliko varnejši in bolj dosledna nastavite oblazinjenje in robove z uporabo praznih celic tabele.

2. Določanje položaja fiksne širine

Imate nekaj možnosti pri gradnji osnutkov vaše novice, vendar je najboljša možnost slediti nastavite fiksne širine za vašo tabelo. Obstaja veliko različnih resolucij monitorja - ne boste mogli zadovoljiti vseh. Če nimate določenih elementov s statičnimi širinami, lahko vedno uporabite width = "100%" na vaši tabeli. To bo vaši vsebini omogočilo zapolniti celotno širino vseh e-poštnih odjemalcev.

Vendar je za mnoge ta metoda malo preveč ohlapna. Konstruktivna glasila v večini primerov potrebujete fiksno širino, še posebej, če uporabljate pasice in slike določene velikosti. Priporočam delo z 500px - največja širina dokumenta 600px. Horizontalna velikost zaslona iPhonea in nekaterih modelov BlackBerry je omejena na 320 pikslov, tako da bo tudi pri 500px e-poštni predlogi ustrezno zmanjšali.

Glede na to, da se mnogi uporabniki mobilne telefonije odločijo za ogled e-pošte brez HTML-ja, to ne bi smelo biti velik problem. Uporabniki namiznih in spletnih poštnih odjemalcev bodo verjetno doživeli podobno nastavitev ne glede na operacijski sistem, ki ga uporabljajo. Če ste v dvomih ustvarite nekaj modelov predlog in izberite tiste, ki vam najbolj ustrezajo!

3. Enote pikslov

Razen če boste v glasilu uporabljali tekoče elemente, boste verjetno morali določiti nekaj velikosti. Poskusite ga obdržati slikovnih pik (px) namesto v drugi vrsti enote. Odstotki se lahko zlahka pomešajo s številnimi odjemalci spletne pošte in okni programske opreme. Z manj elementov strani lahko postavitve tekočin pridejo nepoškodovane, čeprav z nekaj napakami.

Toda piksli so vedno zanesljiva stvar. Če delate znotraj omejitve največje širine 600px, lahko dejansko vstavite veliko vsebine. Osvetlitev je lažja, če razporedite svoje postavitve v dva ali tri stolpce in vedno zapišite velikosti v pikslih. Edina izjema je lahko velikosti pisav kje ems lahko bolje podpira vaše bralce, vendar em se bodo razlikovale na podoben način, če bi - tako zaradi preprostosti se držite poravnav na osnovi pikslov.

4. Možnosti s CSS

Morda se zdi, da je oblikovanje elektronske pošte uničilo uporabo stilov CSS. Čeprav obstaja veliko nepodprtih funkcij, je CSS v mnogih primerih še vedno popolnoma sprejemljiv. Monitor oglaševalske akcije ima lepo tabelo podprtih lastnosti CSS po e-poštnem odjemalcu. Vsi bodo podpirali osnove, kot je družina pisav in slog pisave, tako da lahko preskočite označite, če želite.

Bodite previdni glede vaših slogov pisav, da ne bi pretiravali meja. Če se ne počutite neprijetno s stili v vrstici, lahko vedno uporabite oznako pisave HTML, čeprav je bila opuščena. Če ste CSS oblikovalec, vam ni treba zapreti sistema, vendar pa lahko kodirano kodiranje CSS povzroči napačne modele. Kot primer je pisava: 12px / 14px Arial, sans-serif; Stenografija lahko pomaga prihraniti veliko prostora, vendar ni popolnoma sprejeta za oblikovanje e-pošte, tudi če je uporabljena s stili.

Tudi izbire barv izpisati dolgoletno. Hex barve, kot so #ccc ali # e3f mora biti napisana v celoti kot #cccccc ali # ee33ff, v tem zaporedju. Če lahko gradite tisto, kar potrebujete, brez CSS-ja bi vam priporočil to pot, vendar se ne posvetujte popolnoma s CSS-jem v modelih e-pošte, ker je v nasprotju s splošnim prepričanjem, da je podprta v večini primerov.

5. Sidrne povezave Najboljše prakse

Vsekakor boste želeli vključiti nekaj povezav v vaše glasilo. To so lahko izhodne povezave do drugih strani po spletu ali morda povezave, ki vodijo do najbolj priljubljenih strani na vašem spletnem mestu. Poleg tega bo večina nožic vsebovala povezavo za odjavo za vaše bralce, da se izklopijo iz e-poštnega postopka, ampak kako naj obravnavate vse te povezave v svojem načrtu?

Najprej je treba opozoriti, da so e-poštni odjemalci s svojimi načrti zelo naporni. Mnogi se bodo odločili, da bodo prepisali svoje stile povezav, tudi s spremenjenim CSS. Čeden trik je vključi tako barvno vrstico kot dodatno oznako za razpon v sidrnem elementu. Če sta barva in styling vaših povezav pomembni za celotno oblikovanje, boste želeli sprejeti dodatne previdnostne ukrepe. Spodaj sem dodal primer majhne kode:

nekaj besedila povezave

Hover učinki so ne podpira Outlook 2007/2010, Gmail, iOS ali Android. Morda boste še vedno želeli vključiti a: lebdenje slog za vse podporne odjemalce: Outlook 2000/2003, Hotmail, Apple Mail in Yahoo! osebno ne vidim veliko koristi pri delni uporabniški izkušnji, saj selektorji sidra niso močno podprti. samo ponujajo 2-3 barve povezave uporabiti v celotnem dizajnu.

Kot domneva bodo uporabniki pričakovali, da se bodo vaše povezave odprle v novem zavihku ali oknu. V idealnem primeru target = "_ blank" atribut mora biti dovolj, da lahko vsi brskalniki prepoznajo to funkcionalnost, in vključitev tega atributa v vaše sidrne povezave ne sme negativno vplivati na e-poštno programsko opremo, kot je Lotus Notes ali Outlook, bodisi.

6. Preizkusite v vseh večjih strankah

Nedavna študija najbolj priljubljenih e-poštnih odjemalcev (ki jo je izvedel Monitor akcije) prikazuje deset najbolj priljubljenih e-poštnih odjemalcev v preteklem letu. Morda se zdi malo dolgočasno, vendar oblikovalci v navado preverjati svoje glasila o vseh večjih e-poštnih odjemalcih, vsaj za nekatere pogostejše stranke, kot so Gmail, Hotmail ali Yahoo! Mail.

To ne vključuje samo spletne pošte, ampak tudi operacijsko programsko opremo za Mac OS X in Windows. Tudi glede na njihov diagram Pošta iOS in Android V zadnjih nekaj letih sta se oba uvrstila na top 10 seznam. Pravzaprav iPhone, iPod Touch in iPad Mail uvrščajo # 2 najbolj priljubljeno pravico v programu Outlook! Na žalost ni mogoče preskusiti teh brez lastništva ene od naprav - zato se boste morali poravnati z drugimi možnostmi.

Ena napaka z mobilno podporo je na voljo v številnih modelih iPhone in Android. Mobilno e-poštno upodabljanje bo pogosto spremenite velikost besedila v predlogi. To morda ne vpliva veliko na vašo zasnovo, vendar pa lahko nekaterim bralcem moti. Uporaba CSS -webkit-text-size-adjust: nič;, volja zagotovite celo privzeto velikost besedila v vseh razčlenjevalnih motorjih brez testiranja.

Če poznate prijatelje ali sodelavce, ki uporabljajo alternativno programsko opremo, boste morda želeli prosimo za pomoč pri testiranju glasila. Lahko tudi pošljete jim kopijo e-pošte preverite na svoji napravi ali izposodite napravo aktivno brisanje kodirnih hroščev. Na srečo Outlook ponuja različico za namestitev sistema Mac, tako da vam ni treba izslediti uporabnika sistema Windows za te optimizacije, toda ko gre za Lotus Notes ali Windows Mail, morda ne boste imeli sreče..

Druga možnost je, da plačati za rešitev kot je Predogled moje e-pošte, na žalost ne zagotavljajo nobenih brezplačnih demo računov, vendar je njihova storitev dobro znana po tem, da ponuja odlične predoglede vašega modela. E-pošta na Acid je podobna storitev, ki ponuja brezplačen račun, vendar vam ne omogoča preizkušanja na vseh odjemalcih, kar poraziluje namen. Storitve spletnega upodabljanja bi morale biti koristne, če morate dolgoročno preizkusiti številne predloge novic brez uporabe nadomestnih računalnikov, vendar niso temeljne, zato ne obremenjujte se če jih ne morete vse preskusiti!

7. Vedno ponudite spletne prikaze

Bralci ne bodo vedno mogli (ali biti pripravljeni) videti vašo e-pošto. Ponudba druge različice nekje na spletu daje občutek enostavnosti in združljivosti. Tega postopka ni mogoče popolnoma avtomatizirati, razen če želite vključiti a golo besedilo različica.

Tako bi odstranite vse oznake HTML iz postavitve glasila. Ne bi mogli vključiti povezav ali slogov za karkoli. Vse vsebine bi preprosto izpisati kot datoteko z navadnim besedilom za bralce brez zmogljivosti upodabljanja. To je zagotovo dobra alternativa, toda ko ponujate celotno spletno različico istega glasila odvzame škodo, ki jo je povzročil katerikoli žogica. Večina bralcev bo vodila najnovejši spletni brskalnik, ki ga lahko oblikujete in gradite na novice in do popolnosti.

Kako nastavite stran je popolnoma vaša izbira. Nekatere spletne strani bodo posvetite celotno objavo v spletnem dnevniku podvajanju vsebine e-pošte, mogoče z nekaterimi Dodatne informacije. Drugi bodo ustvarite ločeno stran od glavne spletne strani brez neposrednih povezav v navigaciji. Ta metoda je lahko koristna, ker bralci ne bodo moteni zaradi vaše glavne predloge spletne strani ali vsebine stranske vrstice.

8. Dodajanje slikovne vsebine

Slike so še en razlog, da svojim bralcem ponudite spletno rešitev. Privzeto odjemalci e-pošte nastavljene, da izločijo slike iz vsebine. Če je vaš naslov dodan varnemu seznamu, bodo privzeto prikazane vse slike, vendar bo uporabnik mora sprejeti to nastavitev zato zagotovo ni jamstvo. Samo poskrbite, da slike niso potrebne kot del glavne vsebine, vendar so vključeni kot dodatni dodatki za estetiko strani.

Ko pridete do izvoza grafike, je nekaj nasvetov za izdelavo slik posebej za e-pošto. Vedno boste želeli nastavite atribute širine in višine img oznake. Brez teh specifikacij, nekateri odjemalci bodo izkrivili vsebino slike. An alt se bo izkazalo za uporabno, zato bodo obiskovalci vedeli, kaj vsebina slike vsebuje, preden se naloži.

Kot smo že omenili, lahko postavitev slik v e-pošto postane težavna. Izogibajte se uporabi plovcev za vsako ceno! Slika align = "left" atribut bo deloval veliko bolje ali alternativno preslikajte natančne celice tabele da se slike prilegajo na zgornjo, levo ali desno stran glasila. Ne boste mogli dobiti popolnega ujemanja s toliko strankami, ki so tam zunaj (še posebej mobilne stranke), vendar optimizirajte svoje slike in ohranite velikost datotek majhna za najboljše rezultate.

Kar se tiče shranjevanja slik, vam priporočamo, da shranite vse datoteke v svojem spletnem strežniku. To je boljša možnost, namesto uporabe drugega slikovnega gostitelja ali prenosa datotek v spletno storitev glasila. Poleg tega bi morali ločite vsebino glasil od ostalih slik v strukturi map tako / img / email ali / img / email / 2011.

9. Izogibajte se neželeni mapi!

To je težko slišati, vendar niso vsi e-poštni odjemalci prijazni do novic. Vsak dan je na voljo več milijard e-poštnih sporočil, ki večinoma vsebujejo nezaželeno ali zlonamerno vsebino, zato so ti varnostni ukrepi, vgrajeni v mapo Prejeto, očitno varnostni ukrepi.

Vendar pa, ko gre za internetno trženje, lahko zlahka odvrnejo, da vidite svoje zadnje novice na koncu z junk. Da bi zmanjšali možnosti, da se to zgodi, morate očistite svoj dizajn za preprosto. Ne ustvarjajte nadležnih slik ali razstrelili besedilo z več sto ključnimi besedami.

Poskusite tudi obdržite svojo vsebino kratko in na temo. Za vse vaše članke ali strani ni treba vključiti celotne vsebine. Namesto dolgega vnosa na spletno mesto poskusite dodati stavek ali dva z nadomestno povezavo na svoje spletno mesto. The Če boste na kratko pregledali e-pošto, bolj je verjetno, da bo pregledoval spam.

Galerija oblikovanja novic

Kaj bi bilo zabavno, če bi bil članek z elektronskimi novicami brez fantastičnih primerov? Obstaja ton e-mail newsletter modelov in predloge, da preverite v Google. HTML Galerija e-pošte je zelo priljubljen vir navdiha.

Spodaj sem vključil posnetke iz številnih glasil v galeriji Monitorja akcije. Upajmo, da lahko ti čudoviti načrti priskrbijo nekaj odličnih idej za vaše lastne modele.

Zabavajte se z oblikovanjem idealnih glasil!

Opozorilo za podjetja