9 gudrybės tobulam HTML informaciniam biuleteniui

El. Pašto informacinis biuletenis yra puikus būdas palaikyti ryšį su savo klientais ar pasekėjais. Dažnai jūsų įmonė ar svetainė turės daug produktų atnaujinimų ar galbūt būsimų įvykių, kuriuos norite bendrinti. Visada galima skelbti naują informaciją į savo tinklaraštį ar socialinės žiniasklaidos srautus, tačiau jūsų auditorija gali eiti tik tiek, kad pasiektų jus. Tokiu atveju el. Paštas neabejotinai yra negyvas technologija, tik nepanaudotas potencialas.

Naujienlaiškio kūrimo ir siuntimo procesas yra daug lengviau, nei manau, bet sukurti individualų šabloną ir sukurti savo kodą - tai gali užtrukti šiek tiek ilgiau.

Mes parengėme keletą fantastinių patarimų, kaip sukurti aukštos kokybės HTML naujienlaiškius, kaip niekada anksčiau. Net jei esate naujokas į temą, jūs tikrai rasite neįkainojamą informaciją, kad galėtumėte pradėti e. Pašto rinkodaros procesą.

Informacinio biuletenio tikslai

Prieš patekdami į dizaino aspektus turėtume paaiškinti jūsų tikslą sukurti informacinį biuletenį. Priklausomai nuo jūsų naudojamo svetainės tipo, jūsų informaciniame biuletenyje esanti informacija gali labai skirtis nuo kitų, tačiau pagrindinis informacinio biuletenio tikslas yra patogus atnaujinimas tiesiai į jūsų skaitytojo gautuosius.

Sunkūs interneto vartotojai tikriausiai tikrins savo el. Paštą daugiau nei du kartus per dieną. Net ir tie, kurie nuolat užsiėmę, turės laiko praleisti savo pranešimus bent kartą per dieną. Tai puikus laikas atkreipti dėmesį net ir nereikia apsilankyti jūsų svetainėje. Net jei niekas nespaudžia jūsų nuorodų, informacija yra vis dar gavo, kuris yra puikus prekės ženklo kūrimui.

Apsvarstykite kai kurias temas, kurias turėtumėte pasiūlyti savo dizaine. Ar įtraukiate nuorodas į registracijos paslaugą; galbūt tinklaraščio nuorodos arba paskutiniai jūsų svetainėje paskelbti straipsniai? Jūsų informacinio biuletenio išdėstymas atspindės, kaip norėtumėte, kad skaitytojai atsakytų, bet galiausiai norėsite pakelti susidomėjimą ir perduoti keletą įdomių informacijos masėms..

1. Naudokite lenteles savo išdėstymuose

Tai gali atrodyti šiek tiek prieštaraujanti šiuolaikiniams žiniatinklio standartams, tačiau elektroniniai laiškai vis dar yra archajiški jų atvaizdavimo varikliams, todėl jūs turite kurti senesnius modelius. Deja, lentelės yra paprasčiausias būdas gauti viską, kad įvairūs el. pašto klientai tinkamai veiktų. Priklausomai nuo jūsų žinios apie stalinių maketų kūrimą, tai iš tikrųjų gali būti geros naujienos!

Jūs taip pat galite stebėtis, kodėl div ir kiti blokiniai elementai nėra tokia gera idėja. Dauguma el. Pašto klientų yra pastatytas, kad pašalintų pašalinius CSS turinys. Tai reiškia, kad jūs negalėsite naudoti nieko, išskyrus inline CSS (ir netgi visapusiška parama yra apgaulinga). Klientai, pvz., „Microsoft Outlook 2007“ ir „Google“ „Gmail“, turi labai prastą paramą plaukiojantiems elementams ir tiesioginiam pozicionavimui.

Geriausias sprendimas būtų lizdas keletą lentelių viduje. Paddinimas ir paraštės nėra nustatytos tam tikru mastu tarp daugelio el. Pašto klientų. Tai yra priežastis laikytis naudojimo width = "value" ant visų jūsų stalo elementų elementų. Tai visada bus tokio paties pločio, nesvarbu, kokie el. Pašto klientai naudojasi jūsų skaitytojais saugesnis ir nuosekliau nustatyti tuščius stalelius ir paraštes.

2. Fiksuoto pločio padėties nustatymas

Turite keletą variantų, kai kuriate naujienlaiškio išdėstymo projektus, tačiau geriausias variantas yra nustatyti nustatyto pločio dydį jūsų lentelėje. Yra daug skirtingų monitoriaus rezoliucijų - jūs negalėsite patikti visiems. Jei neturite konkrečių statinio pločio elementų, visada galite naudoti width = "100%" ant jūsų turimos lentelės. Tai leis jūsų turiniui užpildyti visą visų el. Pašto klientų plotį.

Tačiau daugeliui šis metodas yra šiek tiek pernelyg laisvas. Konstruktyvūs informaciniai biuleteniai daugeliu atvejų reikės fiksuoto pločio, ypač jei naudosite tam tikro dydžio banerius ir vaizdus. Aš rekomenduoju dirbti 500px - 600px maksimalus dokumento plotis. „IPhone“ ir kai kurių „BlackBerry“ modelių horizontalus ekrano dydis yra ribotas iki 320 pikselių, taigi net ir 500 piks. sumažintas, kad tilptų tinkamai.

Atsižvelgiant į tai, kad daugelis mobiliųjų telefonų naudotojų nusprendžia bet kuriuo atveju peržiūrėti el. Laiškus be HTML, tai neturėtų būti didžiulė problema. Darbalaukio ir žiniatinklio pašto klientų vartotojai greičiausiai patirs panašią konfigūraciją, nepriklausomai nuo operacinės sistemos, kurią jie naudoja. Jei abejojate sukurti kelis šablonus ir pasirinkti tuos, kurie jums labiausiai patinka!

3. Pikselių vienetai

Jei naujienlaiškyje nenaudosite skysčio elementų, tikėtina, kad reikės matyti keletą dalykų. Pabandykite jį laikyti pikselių (px) vietoj kito tipo vieneto. Procentai gali lengvai susimaišyti su daugeliu žiniatinklio pašto klientų ir programinės įrangos langų. Su mažiau puslapių elementų, skysčių išdėstymai gali būti nepažeisti, nors ir su keliomis klaidomis.

Tačiau taškai visada yra tikri dalykai. Dirbdami per 600px maksimalaus pločio ribą, galite iš tikrųjų pritvirtinti daug turinio. Ekspozicija yra lengviau, jei padalijote savo išdėstymus į dvi ar tris stulpelius ir visada rašykite dydžius pikseliais. Vienintelė išimtis gali būti šrifto dydžius kur EMS gali geriau padėti jūsų skaitytojams, bet em dydis bus panašus, lygiai taip būtų paprastumo dėlei laikykitės pikselių pagrindo.

4. Galimybės su CSS

Tai gali atrodyti kaip el. Pašto dizainas, kad sunaikintų CSS stilių naudojimą. Nors yra daug nepalaikomų funkcijų, CSS daugeliu atvejų vis dar yra priimtinas. „Campaign Monitor“ turi gražią palaikomų CSS savybių lentelę, nurodytą el. Pašto kliente. Visi bus palaikomi pagrindai šrifto šeima ir Šrifto stilius, todėl galite praleisti žyma, jei norite.

Būkite atsargūs dėl savo šriftų stilių, kad nebūtų pernelyg didelės ribos. Jei jaučiatės nepatogiai su inline stiliais, visuomet galima naudoti HTML šriftų žymę, nors ji buvo pasenusi. Jei esate CSS dizaineris, jums nereikia išeiti iš sistemos, bet bet koks trumpas CSS kodavimas gali sukelti bugiškus dizainus. Kaip pavyzdį šriftas: 12px / 14px Arial, sans-serif; stenografas gali padėti sutaupyti daug vietos, tačiau jis nėra visiškai priimtas el. pašto dizainui, net jei jis naudojamas su inline stiliais.

Net jūsų spalvų pasirinkimas turėtų būti parašytas ilgas. Šešios spalvos, pvz #ccc arba # e3f turi būti parašyta kaip #cccccc arba # ee33ff, atitinkamai. Jei galite sukurti tai, ko jums reikia be CSS, aš rekomenduoju tą kelią, bet ne visiškai atsisakyk nuo CSS el. Pašto dizaino, nes priešingai populiariems įsitikinimams, jis dažniausiai palaikomas.

5. Anchor Links Best Practices

Jūs tikrai norite įtraukti kai kurias nuorodas į savo informacinį biuletenį. Tai gali būti siunčiamos nuorodos į kitus žiniatinklio puslapius arba galbūt nuorodos, vedančios į populiariausius jūsų svetainės puslapius. Be to, daugumoje poraštės bus atsisakymo nuoroda, skirta jūsų skaitytojams atsisakyti el. Pašto proceso, bet kaip turėtumėte tvarkyti visas šias savo dizaino nuorodas?

Pirmiausia reikia pažymėti, kad el. Pašto klientai yra labai smulkūs. Daugelis pasirinks perrašyti savo nuorodų stilius net ir su CSS. Puikus triukas yra apima ir inline spalvą, ir papildomą patikros žymę inkaro elemente. Jei jūsų nuorodų spalva ir stilius yra svarbūs bendram dizainui, norėsite imtis papildomų atsargumo priemonių. Aš pridėjau mažą kodo pavyzdį:

tam tikras nuorodos tekstas

Hover efektai yra „Outlook 2007/2010“, „Gmail“, „iOS“ ar „Android“ nepalaiko. Galbūt norėsite įtraukti a: Pakimba visų palaikančių klientų stilius: „Outlook 2000/2003“, „Hotmail“, „Apple Mail“ ir „Yahoo! el. paštu, bet asmeniškai nematau daug naudos iš dalinės naudotojo patirties, nes nerekomenduojama naudoti inkarų parinkčių. tiesiog siūlo 2-3 nuorodų spalvas naudoti visą savo dizainą.

Kaip prielaida, naudotojai taip pat tikisi, kad jūsų nuorodos bus atidarytos naujame skirtuke arba lange. Idealiu atveju target = "_ blank" atributas turėtų būti pakankamas, kad visos naršyklės atpažintų šią funkciją, o šio atributo įtraukimas į jūsų inkaro nuorodas neturėtų neigiamai paveikti el. pašto programinės įrangos, pvz., „Lotus Notes“ arba „Outlook“.

6. Bandymas visuose pagrindiniuose klientuose

Neseniai atliktas populiariausių el. Pašto klientų tyrimas (kurį atliko „Campaign Monitor“) parodo dešimt populiariausių elektroninio pašto klientų praėjusiais metais. Tai gali atrodyti šiek tiek varginantis, bet dizaineriai turėtų gauti įprotį tikrinti savo informacinius biuletenius visuose pagrindiniuose el. pašto klientuose, bent jau kai kurie iš dažniau pasitaikančių klientų, pvz., „Gmail“, „Hotmail“ ar „Yahoo! Paštas.

Tai neapima tik „webmail“, bet ir „Mac OS X“ bei „Windows“ programinė įranga. Taip pat pagal jų diagramą „iOS Mail“ ir „Android“ per pastaruosius kelerius metus jie susilpnėjo į 10 geriausių sąrašų. Tiesą sakant, „iPhone“, „iPod Touch“ ir „iPad Mail“ užima populiariausias teises pagal „Outlook“! Deja, nėra būdų, kaip juos išbandyti, neturėdami vieno iš įrenginių, todėl turėsite išspręsti kitas parinktis.

Viena klaida su mobiliuoju telefonu teikiama daugelyje „iPhone“ ir „Android“ modelių. Dažnai mobilusis el. Pašto perdavimas pakeiskite savo šablono tekstą. Tai gali turėti didelės įtakos jūsų dizainui, tačiau kai kuriems skaitytojams tai gali būti erzina. CSS naudojimas -webkit-text-size-adjust: nėra;, valia užtikrinti vienodą numatytąjį teksto dydį visuose analizavimo varikliuose nereikia išbandyti.

Jei žinote kokių draugų ar kolegų, kurie naudojasi alternatyvia programine įranga, galbūt norėsite paprašykite jų pagalbos bandant naujienlaiškį. Taip pat galite atsiųskite el. pašto kopiją patikrinti savo prietaisą arba pasiskolinkite prietaisą aktyviai išvalyti kodavimo klaidas. Laimei, „Outlook“ siūlo „Mac“ diegimo versiją, taigi jums nereikės stebėti „Windows“ naudotojo dėl šių optimizacijų, tačiau kai kalbama apie „Lotus Notes“ ar „Windows Mail“, jums gali būti nesėkmės.

Alternatyva yra mokėti už sprendimą pavyzdžiui, Peržiūrėti mano el. paštą, deja, jie nesuteikia jokių nemokamų demo sąskaitų, tačiau jų paslauga yra gerai žinoma dėl puikių jūsų dizaino peržiūrų. „Acid“ el. Paštas yra panaši paslauga, kuri siūlo nemokamą paskyrą, bet neleidžia jums išbandyti visų klientų, kokio tipo pralaimėjimo tikslas. Internetinės teikimo paslaugos turėtų būti naudingos, jei ilgą laiką reikia išbandyti daugybę naujienlaiškių šablonų, nenaudojant alternatyvių kompiuterių, tačiau jie nėra esminiai, todėl nereikia streso jei negalite jų išbandyti!

7. Visuomet pateikite internetinius vaizdus

Skaitytojai ne visada galės (ar nori) peržiūrėti savo el. Paštą natūraliai. Siūloma kita versija internete suteiks lengvumo ir suderinamumo jausmą. Šis procesas negali būti visiškai automatizuotas, nebent norite įtraukti a paprastas tekstas versija.

Tokiu būdu, jūs norėtumėte panaikinti visas HTML žymes iš informacinio biuletenio išdėstymo. Jūs negalėsite įtraukti jokių nuorodų ar stilių. Visas turinys būtų tiesiog būti išdėstytas kaip paprastas tekstinis failas skaitytojams be atvaizdavimo galimybių. Tai tikrai gera alternatyva, bet kai jūs siūlote visą to paties informacinio biuletenio internetinę versiją atima žalą, padarytą dėl bet kokio atvaizdavimo klaidos. Dauguma skaitytojų naudojasi naujausia žiniatinklio naršykle, kurią galite sukurti ir sukurti savo naujienas.

Kaip nustatėte puslapį, yra visiškai jūsų pasirinkimas. Kai kurios svetainės bus visą dienoraščio įrašą nukopijuokite el. laiško turinį, gal su kai kuriais Papildoma informacija. Kiti bus sukurkite atskirą puslapį iš pagrindinės svetainės be jokių tiesioginių nuorodų navigacijoje. Šis metodas gali būti naudingas, nes skaitytojai nebus išsiblaškę pagrindinio svetainės šablono ar šoninės juostos turinio.

8. Vaizdo turinio pridėjimas

Vaizdai yra dar viena priežastis, kodėl siūlome savo skaitytojams internetinį sprendimą. Pagal numatytuosius nustatymus el. Pašto klientai nustatyti, kad vaizdai būtų ištrinami iš turinio. Jei jūsų adresas pridedamas prie saugaus sąrašo, visi vaizdai bus rodomi pagal nutylėjimą, bet naudotojas turi priimti šį nustatymą taigi tai tikrai nėra garantija. Tiesiog įsitikinkite, kad vaizdai nėra būtini kaip pagrindinio turinio dalis, bet įtrauktas kaip papildomas papildymas puslapių estetikai.

Kai gausite eksportuoti grafiką, yra keletas patarimų, kaip kurti specialiai el. Jūs visada norėsite nustatyti savo pločio ir aukščio atributus img žymės. Be šių specifikacijų, kai kurie klientai iškraipys vaizdo turinį. An alt žyma taip pat bus naudinga, todėl lankytojai žinos, kas yra vaizdo turinyje, prieš jį įkeldami.

Kaip minėta anksčiau, vaizdų išdėstymas el. Laiške gali būti sudėtingas. Venkite plūdės bet kokia kaina! Paveikslas align = "left" atributas veiks daug geriau, arba alternatyviai išsiaiškinkite tikslius lentelės langelius kad jūsų vaizdai atitiktų viršutinę, kairiąją ar dešinę jūsų informacinio biuletenio pusę. Jūs negalėsite gauti puikių rungtynių su tiek daug klientų (ypač mobiliųjų klientų), bet optimizuoti vaizdus ir išlaikykite mažus failų dydžius, kad būtų pasiekti geriausi rezultatai.

Kalbant apie vaizdo saugojimą, rekomenduojama jums saugoti visus failus savo žiniatinklio serveryje. Tai yra geresnis variantas, o ne naudojant kitą vaizdų prieglobą, arba įkeliant failus į interneto naujienas. Be to, turėtumėte atskirti savo informacinių biuletenių turinį nuo likusių vaizdų aplanko struktūroje taip / img / email arba / img / email / 2011.

9. Venkite šlamšto aplanko!

Tai gali būti sunku išgirsti, bet ne visi el. pašto klientai yra draugiški informaciniams biuleteniams. Kasdien siunčiami milijardai el. Laiškų, daugumoje yra šlamštas ar kenkėjiškas turinys, todėl šios saugumo priemonės, įtrauktos į gautuosius, yra aiškiai skirtos saugos priemonėms..

Tačiau, kai kalbama apie interneto rinkodarą, galite lengvai pasipriešinti, kad jūsų naujausias informacinis biuletenis baigtųsi šiukšlių. Kad sumažintumėte tikimybę, kad tai įvyktų, turėtumėte išvalykite savo dizainą paprastumui. Nedarykite erzina vaizdų arba susprogdinkite pavadinimo tekstą šimtais raktinių žodžių.

Taip pat pabandykite saugokite savo turinį trumpai ir temoje. Jums nereikia įtraukti visų turinio ar visų puslapių. Vietoje ilgo sąrašo pabandykite pridėti sakinį ar du su kita nuoroda į svetainę. The trumpesnis jūsų el. laiškas, tuo labiau tikėtina, kad bus atliktas šlamšto patikrinimas.

Naujienlaiškio dizaino galerija

Koks įdomus el. Pašto naujienas būtų be fantastiškų pavyzdžių? Yra tonų el. Pašto informacinio biuletenio dizaino ir šablonų, kuriuos galite patikrinti „Google“. HTML el. Pašto galerija yra labai populiarus įkvėpimo šaltinis.

Žemiau aš įtraukiau ekrano kopijas iš daugelio informacinių biuletenių kampanijos monitoriaus galerijoje. Tikimės, kad šie siaubingi maketai gali suteikti jums puikių idėjų savo pačių dizainui.

Smagiai suprojektuokite savo idealius biuletenius!

Alertful for Business