9 triki kujundada täiuslik HTML uudiskiri

E-posti uudiskiri on ideaalne viis oma klientidega või järgijatega kursis hoida. Sageli on teie ettevõttel või veebisaidil mitmeid tootearendusi või võimalikke tulevasi sündmusi, mida soovite jagada. Alati on võimalik oma blogile või sotsiaalmeedia voogudele uut teavet postitada, kuid teie vaatajaskond võib sinu juurde jõuda. Sel juhul ei ole e-kiri kindlasti surnud tehnoloogia, vaid kasutamata potentsiaal.

Infolehe loomise ja saatmise protsess on palju lihtsam kui mõelda, kuid kohandatud malli kujundamine ja oma koodi loomine - see võib võtta veidi kauem aega.

Oleme koostanud mõned fantastilised näpunäited, mis võimaldavad teil kujundada kvaliteetseid HTML-infolehti nagu kunagi varem. Isegi kui te olete selle teema jaoks algaja, leiate kindlasti hindamatu teabe, et alustada e-posti turunduse protsessis.

Uudiskirja eesmärgid

Enne disaini aspektide sattumist peaksime selgitama oma eesmärki uudiskirja loomiseks. Sõltuvalt teie kasutatava veebisaidi tüübist võib uudiskirja teave teistest oluliselt erineda, kuid uudiskirja põhieesmärk on pakkuda mugavaid värskendusi otse oma lugeja sisendkausta.

Rasked Interneti kasutajad kontrollivad tõenäoliselt oma e-posti rohkem kui kaks korda päevas. Isegi need, kes on pidevalt hõivatud, võtavad aega oma sõnumite läbimiseks vähemalt kord päevas. See on ideaalne aeg pöörama tähelepanu isegi ilma teie saidi külastust nõudmata. Isegi kui keegi ei kliki teie linkide kaudu, on see teave ikka veel vastu võetud, mis on suurepärane brändi nime ehitamiseks.

Vaatleme mõningaid teemasid, mida te oma disainis pakuksite. Kas Teil on ka linke teie teenuse registreerimiseks; kas blogi lingid või saidi viimased avaldatud artiklid? Teie uudiskirja paigutus peegeldab, kuidas soovite oma lugejatele vastata, kuid lõpuks soovid te huvipakkuvate teemade kogumise ja mõnede huvitavate teemade ümberpaigutamise..

1. Kasutage tabeleid oma paigutustes

See võib tunduda pisut vastuoluline tänapäeva kaasaegsete veebistandardite suhtes, kuid e-kirjad on endiselt nende arhiveerimismootorites arhailised, seega peate ehitama vanemate mudelite poole. Kahjuks on tabelid lihtsaim viis saada kõik e-posti kliendid hästi. Sõltuvalt teie teadmistest lauapõhiste paigutuste loomisel võib see tegelikult olla hea uudis!

Samuti võite küsida, miks div ja muud ploki elemendid ei ole nii hea mõte. Enamik e-posti kliente on ehitatud kõrvaliste CSS-i eemaldamiseks sisu. See tähendab, et sa ei saa kasutada palju midagi, välja arvatud inline CSS (ja isegi täielik toetus on räpane). Klientidel nagu Microsoft Outlook 2007 ja Google'i Gmailil on väga halb toetus ujutatud elementidele ja otsesele positsioneerimisele.

Parim lahendus oleks pesa üksteise sees mitu tabelit. Paljude e-posti klientide vahel ei ole polsterdus ja marginaalid teatud skaalal seatud. See on põhjus kasutada width = "value" kõigis oma lauaelemendi elementides. Neil on alati sama laius olenemata sellest, millist e-posti klienti teie lugejad kasutavad, nii et see on palju ohutum ja järjekindlam pehmenduste ja marginaalide seadistamiseks tühjade laualakkude abil.

2. Fikseeritud laiusega positsioneerimine

Teie uudiskirja paigutuse eelnõude loomisel on mõned võimalused, kuid parim valik on fikseeritud laiuste seadmine oma tabelisse. On palju erinevaid monitori resolutsioone - te ei saa kõigile meeldida. Kui sul ei ole staatilise laiusega konkreetseid elemente, võite seda alati kasutada width = "100%" oma tabelis. See võimaldab teie sisul täita kõik e-posti kliendid.

Paljude jaoks on see meetod siiski liiga lahe. Konstruktiivsed infolehed nõuab enamikul juhtudel fikseeritud laiust, eriti kui kasutate bännerit ja pilti, mis on määratud kindla suurusega. Soovitan töötada 500px - 600 px maksimaalne dokumendi laius. IPhone'i ja mõnede BlackBerry mudelite horisontaalne ekraani suurus on piiratud 320xx-ga, nii et isegi 500px-s on teie e-posti mall korrigeeritud, et see sobiks.

Arvestades, et paljud mobiilikasutajad soovivad igal juhul vaadata HTML-i e-kirju, ei tohiks see olla suur probleem. Töölaua- ja veebipostklientide kasutajad kogevad tõenäoliselt sarnast seadistust sõltumata nende kasutatavast operatsioonisüsteemist. Kui kahtled luua mõned malli kujundused ja vali need, mis sulle meeldib!

3. Pikslite ühikud

Kui te ei kasuta oma uudiskirjale vedelaid elemente, on tõenäoline, et peate mõõtma mõned asjad. Püüdke seda hoida pikslid (px) pigem teise üksuse tüübi asemel. Protsendid võivad kergesti seguneda paljude veebiposti klientidega ja tarkvarakendega. Vähemate leheküljeelementidega võib vedeliku paigutus välja tulla vigastamata, ehkki mõne veaga.

Kuid pikslid on alati kindel asi. 600px maksimaalse laiuse piires töötades saate tegelikult sisustada palju sisu. Säritus on lihtsam, kui jaotad oma paigutused kaheks või kolmeks veerguks ja kirjutage alati suurused pikslites. Ainus erand võib olla fondi suurused kus ems suudab teie lugejaid paremini toetada, kuid em suurused erinevad sarnaselt protsentides lihtsuse huvides jääda pikslipõhistele joondustele.

4. Võimalused CSS-iga

See võib tunduda, et e-posti kujundus ei lase CSS-stiilide kasutamist hävitada. Kuigi on palju toetamata funktsioone, on CSS paljudel juhtudel endiselt vastuvõetav. Kampaania monitoril on ilus tabel toetatud CSS-i omadustest, mis on loetletud e-posti kliendi poolt. Kõik toetavad põhitõdesid font-pere ja font-style, et saaksite üle minna silt, kui soovite.

Ole ettevaatlik oma fondi stiilide suhtes, et mitte piirata piire liiga kaugele. Kui te tunnete end sisemise stiiliga ebamugavalt, on alati võimalik kasutada HTML-fontide märgist, kuigi see on aegunud. Kui olete CSS-disainer, ei pea te süsteemist loobuma, kuid mis tahes lühikirjeldatud CSS-kodeering võib põhjustada veatud disainilahendusi. Näiteks font: 12px / 14px Arial, sans-serif; lühikirjeldus aitab säästa palju ruumi, kuid see ei ole e-posti kujundamiseks täielikult aktsepteeritud, isegi kui seda kasutatakse inline-stiilidega.

Isegi teie värvivalikud tuleb kirjutada pikaajaline. Hex värvid nagu #ccc või # e3f peab olema täielikult kirjutatud #cccccc või # ee33ff, vastavalt. Kui sa saad ehitada seda, mida vajate ilma CSS-i soovita, soovitaksin seda teed, kuid ärge eemal e-posti disainilahendustest täielikult CSS-ist, sest vastupidiselt levinud arvamusele on see enamikul juhtudel toetatud.

5. Ankru linkide parimad tavad

Kindlasti soovite oma uudiskirja lisada mõned lingid. Need võivad olla väljaminevad lingid veebi teistele lehekülgedele või linkid, mis viivad teie veebisaidi kõige populaarsematele lehekülgedele. Lisaks sisaldab enamik jaluseid teie lugejate tellimuse lingist, et e-posti protsessist loobuda, kuid kuidas peaksite neid kõiki oma disainilahenduse linke käsitlema?

Esmalt tuleb märkida, et e-posti kliendid on oma disainilahendustega väga täpsed. Paljud otsustavad oma lingi stiilid üle kirjutada isegi sisemise CSS-iga. Kena trikk on sisaldama nii inline värvi kui ka ankurelemendi täiendavat võrdlusmärgist. Kui teie linkide värv ja stiil on olulised üldise kujunduse jaoks, peate võtma ettevaatusabinõusid. Lisasin allpool väikese koodi näite:

mõned lingitekstid

Hoverefektid on Outlook 2007/2010, Gmail, iOS või Android ei toeta. Võite siiski lisada a: hover kõigi toetavate klientide stiil: Outlook 2000/2003, Hotmail, Apple Mail ja Yahoo! postitada, kuid isiklikult ei näe osaliselt kasutaja kogemus palju kasu, sest ankurvalijaid ei soovitata just 2-3 lingi värve kasutada kogu oma disaini.

Eeldusel, et kasutajad ootavad teie linkide avamist uuel vahekaardil või aknas. Ideaalis target = "_ blank" atribuut peaks olema piisav, et kõik brauserid seda funktsiooni ära tunda ning selle atribuudi lisamine teie ankurlinkidele ei tohiks negatiivselt mõjutada e-posti tarkvara, nagu Lotus Notes või Outlook.

6. Test kõigis suuremates klientides

Hiljutine uuring kõige populaarsemate e-posti klientide kohta (mida on teinud Campaign Monitor) näitab kümmet kõige populaarsemat e-posti klienti viimase aasta jooksul. See võib tunduda natuke tüütu, kuid disainerid peaks saama harjumus kontrollida oma infolehti kõigis suuremates e-posti klientides, vähemalt mõnedes levinumates klientides, nagu Gmail, Hotmail või Yahoo! Mail.

See ei hõlma ainult veebimeili, vaid ka operatsioonisüsteemi tarkvara nii Mac OS X kui ka Windows. Samuti vastavalt nende diagrammile iOS Mail ja Android on mõlemad viimaste aastate top 10-sse nimekirja kantud. Tegelikult on iPhone, iPod Touch ja iPad Mail kõige populaarsemad just # 2 kõige populaarsemad kohad Outlookis! Kahjuks ei ole võimalik neid testida ilma ühegi seadmeta omada - nii et peate teiste võimalustega hakkama saama.

Üks viga mobiiltoega pakub palju iPhone'i ja Androidi mudeleid. Sageli toimub mobiilse e-posti renderdamine muutke oma malli teksti suurust. See ei pruugi teie disaini väga mõjutada, kuid see võib mõnele lugejale tüütu olla. CSS-i kasutamine -webkit-text-size-adjust: no;, tahe tagada kõigi tekstimootorite ühtlase vaikesuuruse ilma seda katsetamata.

Kui teate teisi sõpru või kolleege, kes kasutavad alternatiivset tarkvara, võite seda soovida küsi nende abi uudiskirja testimisel. Võite kas saatke neile e-kirja koopia kontrollida oma seadet või laenata seadet kodeerimisvigade aktiivseks kustutamiseks. Õnneks pakub Outlook Maci installimisversiooni, nii et te ei pea nende optimeeringute jaoks Windowsi kasutajat jälgima, kuid kui tegemist on Lotus Notes'i või Windows Mailiga, võite olla õnne.

Teine võimalus on maksma lahenduse eest näiteks eelvaate minu e-post, kahjuks ei paku nad tasuta demo kontosid, kuid nende teenus on hästi tuntud oma disaini suurepäraste eelvaateid pakkudes. E-post Acid'il on sarnane teenus, mis pakub tasuta kontot, kuid ei lase teil testida kõiki kliente, milline lüüakse eesmärk. Online-renderdamisteenused peaksid olema kasulikud, kui teil on vaja paljude uudiskirja mallide pikaajaline katsetamine ilma asendusarvutite kasutamiseta, kuid need ei ole põhilised, nii et ärge pingutage kui te ei saa neid kõiki testida!

7. Paku alati veebipõhiseid vaateid

Lugejad ei suuda alati (või olla valmis) oma e-posti vaatama. Pakkumine teisele versioonile kusagil veebis annab tunde lihtsust ja ühilduvust. Seda protsessi ei saa täielikult automatiseerida, kui te ei soovi lisada a tavaline tekst versioon.

Nii, et sa seda teeksid eemalda kõik HTML-märgendid uudiskirja paigutusest. Sa ei saa midagi lisada linke või stiile. Kogu sisu oleks lihtsalt olema esitatud lihttekstina lugejatele ilma renderdamisvõimalusteta. See on kindlasti hea alternatiiv, kuid kui pakute sama uudiskirja täielikku veebiversiooni võtab ära mis tahes renderdamisvigade tekitatud kahju. Enamik lugejaid käitab ajakohast veebibrauserit, mida saate kujundada ja oma uudiskirja ehitada ja täiustada.

Kuidas olete lehe seadistanud täiesti teie valik. Mõned veebilehed pühendage kogu blogipost e-kirja sisu kopeerimiseks, võibolla mõnedega Lisainformatsioon. Teised luua põhilehelt eraldi leht ilma navigeerimise otseste linkideta. See meetod võib olla kasulik, sest lugejaid ei häiriks teie peamine veebisaidi mall või külgriba sisu.

8. Pildi sisu lisamine

Pildid on veel üks põhjus, miks pakkuda lugejatele veebipõhist lahendust. Vaikimisi on meilikliendid on seatud kujutiste sisu eemaldamiseks. Kui teie aadress on turvalisse nimekirja lisatud, kuvatakse kõik pildid vaikimisi, kuid kasutaja peab selle seadistusega nõustuma seega pole see kindlasti garantii. Lihtsalt veenduge, et pildid ei ole põhisisu osana vajalikud, kuid lisandub ekstra lisandina lehekülje esteetikale.

Kui olete graafika eksportimiseks jõudnud, on mõned näpunäited konkreetselt e-posti jaoks mõeldud piltide loomiseks. Sa tahad alati seadke nii oma laiusele kui ka kõrgusele vastavad atribuudid img sildid. Ilma nende kirjeldusteta, mõned kliendid moonutavad pildi sisu. An alt silt on samuti kasulik, nii et külastajad teavad, milline on pildi sisu enne selle laadimist.

Nagu eelnevalt mainitud, võib piltide paigutamine e-posti aadressile olla keeruline. Vältige ujukite kasutamist iga hinna eest! Pilt align = "left" atribuut töötab palju paremini või alternatiivina kaardistage täpsed laualakud sobitada oma pildid uudiskirja ülemisse, vasakule või paremale küljele. Sa ei saa täiuslikku mängu nii paljude klientidega (eriti mobiiliklientidega), vaid optimeerige oma pilte ja parimate tulemuste saavutamiseks hoidke failide suurust vähe.

Mis puutub pildi salvestamisse, siis soovitame teil hoidke kõik failid oma veebiserveris. See on parem valik teise pildihoidja asemel või failide üleslaadimisel veebipõhise uudiskirja teenusesse. Lisaks peaksite seda tegema eraldage oma uudiskirjade sisu ülejäänud piltidest kausta struktuuris niimoodi / img / email või / img / email / 2011.

9. Vältige rämpsposti kausta!

Seda võib olla raske kuulda, kuid mitte kõik e-posti kliendid on uudiskirjade suhtes sõbralikud. Iga päev saadetakse miljardeid e-kirju ning enamus sisaldab rämpsposti või pahatahtlikku sisu, mistõttu on need turvameetmed sisendkasti sisestatud selgelt ohutuse tagamiseks..

Siiski, kui tegemist on Interneti-turundusega, võite kergesti heidutada, et teie viimane uudiskiri jõuaks rämpspostiga. Selleks, et vähendada selle võimalikkust, peaksite seda tegema puhastage oma disain lihtsuse huvides. Ära tee tüütuid pilte või lõhkuge oma pealkirja teksti sadade märksõnadega.

Samuti proovige hoia oma sisu lühidalt ja teemana. Te ei pea kõigi oma artiklite või lehekülgede täielikku sisu lisama. Proovige lisada pikale nimekirja asemel oma veebilehele alternatiivne link. The rohkem lühidalt oma e-posti välja, seda tõenäolisem läheb rämpsposti kontroll.

Uudiskirja disainigalerii

Mis lõbus oleks e-posti uudiskirja artikkel ilma mõnede fantastiliste näideteta? Google'is on võimalik tutvuda e-posti uudiskirja kujundustega ja malle. HTML-i e-posti galerii on väga populaarne inspiratsiooni allikas.

Allpool olen lisanud ekraanipilte paljude kampaaniate monitori uudiskirjadest. Loodetavasti võivad need kohutavad paigutused pakkuda teile suurepäraseid ideid oma disaini jaoks.

Lõbutsege oma ideaalsete uudiskirjade kujundamisel!

Ärge äratuntav