9 temppua suunnittelemaan täydellinen HTML-uutiskirje

Sähköpostiuutiskirje on täydellinen tapa pitää yhteyttä asiakkaisiin tai seuraajiin. Usein yrityksellesi tai sivustollesi on lukuisia tuotepäivityksiä tai mahdollisesti tulevia tapahtumia, joita haluat jakaa. On aina mahdollista lähettää uusia tietoja blogiisi tai sosiaalisen median streameihin, mutta yleisösi voi mennä vain niin pitkälle, että pääset sinuun. Tässä tapauksessa sähköposti ei todellakaan ole kuollut tekniikka, vaan vain hyödyntämätön potentiaali.

Uutiskirjeen luominen ja lähettäminen on paljon helpompaa kuin ajatella, mutta suunnitella mukautettu malli ja rakentaa oma koodi - tämä voi kestää hieman kauemmin.

Olemme koonneet upeita vinkkejä, joiden avulla voit suunnitella laadukkaita HTML-uutiskirjeitä kuin koskaan ennen. Vaikka olisit aloittelija aiheeseen, löydät varmasti arvokasta tietoa, jonka avulla pääset alkuun sähköpostimarkkinointiprosessissa.

Uutiskirjeen tavoitteet

Ennen kuin pääset suunnittelunäkökohtiin, meidän pitäisi selventää tarkoitustasi luoda uutiskirje. Uutiskirjeesi sisältämät tiedot voivat vaihdella dramaattisesti muista sivustoista riippuen, mutta uutiskirjeen keskeinen tarkoitus on tarjota käteviä päivityksiä suoraan lukijasi Saapuneet-kansioon.

Raskat Internet-käyttäjät tarkistavat todennäköisesti sähköpostinsa yli kaksi kertaa päivässä. Jopa ne, jotka ovat jatkuvasti kiireisiä, vievät aikaa käydä läpi viestinsä ainakin kerran päivässä. Tämä on täydellinen aika kiinnitä huomiota edes ilman sivustosi käyntiä. Vaikka kukaan ei napsauta linkkejäsi, tiedot ovat edelleen vastaanotettu, joka on hyvä tuotenimeä varten.

Harkitse joitakin aiheita, joita sinun pitäisi tarjota suunnittelussa. Pidätkö linkkejä palveluun kirjautumiseen; mahdollisesti blogilinkit tai viimeisimmät julkaistut artikkelit sivustossasi? Uutiskirjeen ulkoasu kuvastaa sitä, miten haluat, että lukijat reagoivat, mutta lopulta etsitte kiinnostusta ja välitätte mielenkiintoisia tietomerkkejä massoille.

1. Käytä taulukkoja Layoutsissa

Tämä saattaa tuntua hieman ristiriitaiselta nykypäivän moderneille web-standardeille, mutta sähköpostiviestit ovat edelleen vanhoissa malleissa, joten sinun täytyy rakentaa vanhempia malleja. Valitettavasti taulukot ovat helpoin tapa saada kaikki toimivat oikein eri sähköpostiohjelmissa. Riippuen tietosi rakentamisesta pöytäpohjaisten asettelujen suhteen, tämä saattaa todella olla hyvä uutinen!

Saatat myös ihmetellä, miksi div ja muut lohkoelementit eivät ole niin hyvä idea. Useimmat sähköpostiohjelmat ovat rakennettu poistamaan kaikki vieraat CSS sisältöä. Tämä tarkoittaa, että et voi käyttää paljon muuta kuin inline CSS (ja jopa täysi tuki on huono). Microsoft Outlook 2007: n ja Googlen Gmailin asiakkailla on erittäin heikko tuki kelluville elementeille ja suoralle paikannukselle.

Paras ratkaisu olisi pesää useita pöytiä toistensa sisällä. Padding ja marginaalit eivät ole asetettu tiettyyn mittakaavaan monien sähköpostiohjelmien välillä. Tämä on syy pitää kiinni käytöstä width = "arvo" kaikissa taulukon soluelementeissä. Näillä on aina sama leveys riippumatta siitä, mitä sähköpostiohjelmasi lukijat käyttävät, joten se on paljon turvallisempaa ja johdonmukaisempi aseta pehmusteet ja marginaalit tyhjillä taulukon soluilla.

2. Kiinteän leveyden paikannus

Sinulla on muutamia vaihtoehtoja, kun luodaan uutiskirjeen ulkoasun luonnoksia, mutta paras vaihtoehto on asettaa kiinteät leveydet sisältävälle pöydälle. Näytön erottelutarkkuus on monia - et voi miellyttää kaikkia. Jos sinulla ei ole tiettyjä elementtejä, joilla on staattinen leveys, voit aina käyttää width = "100%" omassa taulukossa. Näin sisältösi täyttää kaikkien sähköpostiasiakkaiden koko leveyden.

Monille tämä menetelmä on kuitenkin hieman liian levoton. Rakentavat uutiskirjeet vaatii useimmissa tapauksissa kiinteän leveyden, varsinkin jos käytät tietyn kokoisia bannereita ja kuvia. Suosittelen työskennellä 500 px - 600px asiakirjan maksimileveys. IPhonen ja joidenkin BlackBerry-mallien vaakasuora näytön koko on rajoitettu 320px: iin, joten jopa 500 pikselin sähköpostiosoite on pienennetty sopivaksi.

Ottaen huomioon, että monet mobiilikäyttäjät haluavat katsella sähköpostiviestejä ilman HTML-tiedostoja, tämän ei pitäisi olla valtava ongelma. Työpöytä- ja webmail-asiakkaiden käyttäjät kokevat todennäköisesti samanlaisen asennuksen riippumatta niiden käyttämästä käyttöjärjestelmästä. Jos olet epävarma luo muutama mallimalli ja valitse parhaiten haluamasi!

3. Pikseliyksiköt

Jos et käytä uutiskirjeessäsi nestemäisiä elementtejä, sinun on todennäköisesti koottava muutamia asioita. Yritä säilyttää se pikselit (px) pikemminkin kuin toisen tyyppisessä yksikössä. Prosenttiosuudet voivat helposti sekoittua monien webmail-asiakkaiden ja ohjelmistoikkunoiden kanssa. Vähemmän sivuelementtejä, nestemäiset asettelut voivat tulla vahingoittumattomiksi, vaikkakin muutamalla vikalla.

Mutta pikselit ovat aina varma asia. Voit työskennellä 600px: n maksimileveyden rajoissa itse asiassa paljon sisältöä sisälle. Valotus on helpompaa, jos jaat layoutit kahteen tai kolmeen sarakkeeseen ja kirjoita koot aina pikseleinä. Ainoa poikkeus voi olla kirjasinkokoja missä EMS voi tukea lukijoita paremmin, mutta em kokoluokka eroaa samalla tavalla kuin prosenttiosuudet yksinkertaisuuden vuoksi, pidä kiinni pikselipohjaisiin kohdistuksiin.

4. Mahdollisuudet CSS: n kanssa

Se saattaa tuntua siltä, että sähköpostisuunnittelu ei tuhoa CSS-tyylien käyttöä. Vaikka on olemassa monia tukemattomia ominaisuuksia, CSS on edelleen täysin hyväksyttävä monissa tapauksissa. Kampanjamonitorilla on kaunis taulukko tuetuista CSS-ominaisuuksista, jotka on lueteltu sähköpostiohjelmassa. Kaikki tukevat perusasioita kuten font-family ja fonttityyli, joten voit ohittaa sen tunniste, jos haluat.

Ole varovainen kirjasintyyleissä, jotta et työnnä rajoja liian pitkälle. Jos sinusta tuntuu epämukavalta sisäisillä tyyleillä, on aina mahdollista käyttää HTML-fonttiä, vaikka se on poistettu käytöstä. Jos olet CSS-suunnittelija, sinun ei tarvitse lopettaa järjestelmästä, mutta mikä tahansa lyhyt CSS-koodaus voi johtaa bugisiin malleihin. Esimerkkinä fontti: 12px / 14px Arial, sans-serif; lyhytnimi voi auttaa säästämään paljon tilaa, mutta se ei ole täysin hyväksytty sähköpostin suunnitteluun, vaikka sitä käytettäisiin inline-tyylin kanssa.

Myös värivalinnat on kirjoitettava pitkäkestoinen. Hex-värit, kuten #ccc tai # E3F on kirjoitettava kokonaisuudessaan #cccccc tai # ee33ff, vastaavasti. Jos voit rakentaa mitä tarvitset ilman CSS: ää, suosittelisin tätä polkua, mutta älä välitä täysin CSS: stä sähköpostisuunnitelmissa, koska yleisesti uskotaan, että sitä tuetaan useimmissa tapauksissa.

5. Ankkurilinkkien parhaat käytännöt

Haluat varmasti sisällyttää uutiskirjeeseen joitakin linkkejä. Nämä voivat olla lähteviä linkkejä muille verkkosivuille suunnatuille sivuille tai linkkejä, jotka johtavat sivustosi suosituimpiin sivuihin. Lisäksi useimmissa alatunnisteissa on tilauslomake, jonka avulla lukijat voivat sulkea pois sähköpostiprosessin, mutta miten sinun pitäisi käsitellä kaikkia näitä linkkejä suunnittelussa?

On syytä huomata ensinnäkin, että sähköpostiasiakkaat ovat erittäin hienoja malleja. Monet haluavat korvata linkkityyliäsi myös inline CSS: n avulla. Tyylikäs temppu on Sisältää sekä inline-värin että ylimääräisen span-tunnuksen ankkurielementissä. Jos linkkienne väri ja muotoilu ovat tärkeitä yleisen suunnittelun kannalta, sinun kannattaa tehdä ylimääräinen varovaisuus. Olen lisännyt pienen koodin esimerkin alla:

linkin tekstiä

Hover-vaikutukset ovat Outlook 2007/2010, Gmail, iOS tai Android eivät tue. Saatat silti haluta sisällyttää a: hover kaikkien tukevien asiakkaiden tyyli: Outlook 2000/2003, Hotmail, Apple Mail ja Yahoo! postitse, mutta henkilökohtaisesti en näe paljon hyötyä osittaisesta käyttäjäkokemuksesta, koska ankkurivalitsimia ei suositella vain 2-3 linkin väriä käyttää koko suunnittelussa.

Oletuksena käyttäjät odottavat myös, että linkit avautuvat uuteen välilehteen tai ikkunaan. Ihannetapauksessa target = "_ blank" määritteen pitäisi riittää, että kaikki selaimet tunnistavat tämän toiminnon, ja tämän attribuutin lisääminen ankkurilinkkeihisi ei saisi vaikuttaa negatiivisesti sähköpostiohjelmistoon, kuten Lotus Notesiin tai Outlookiin..

6. Testaa kaikki suuret asiakkaat

Viimeisimmässä suosituimmista sähköpostiohjelmista (Campaign Monitor) tehty tutkimus osoittaa kymmenen suosituinta sähköpostiasiakasta viime vuonna. Se saattaa tuntua hieman tylsältä, mutta suunnittelijoista pitäisi saada tavaksi tarkistaa tiedotteet kaikista tärkeimmistä sähköpostiohjelmista, ainakin joidenkin yleisempien asiakkaiden, kuten Gmailin, Hotmailin tai Yahoo! posti.

Tämä ei sisällä pelkästään webmailia, vaan myös käyttöohjelmaa sekä Mac OS X: ssä että Windowsissa. Myös niiden kaavion mukaan iOS Mail ja Android ovat molemmat viime vuosien aikana kärjistyneet top 10 -listalle. Itse asiassa iPhone, iPod Touch ja iPad Mail sijoittuvat # 2 suosituimpaan oikeuteen Outlookissa! Valitettavasti näitä keinoja ei voi testata ilman, että omistat jotakin laitteista - joten sinun on ratkaistava muiden vaihtoehtojen kanssa.

Yksi virhe mobiilitukeen tulee monissa iPhone- ja Android-malleissa. Mobiilien sähköpostiviestien näyttäminen on usein muokkaa mallin sisällä olevaa tekstiä. Tämä ei ehkä vaikuta suunnitteluun kovin paljon, mutta se voi olla harmillista joillekin lukijoille. CSS: n käyttäminen -webkit-text-size-adjust: ei;, tahtoa varmistaa tasaisen oletusarvon koko kaikissa jäsenkoneissa tarvitsematta testata sitä.

Jos tiedät ystäviä tai kollegoja, jotka käyttävät vaihtoehtoista ohjelmistoa, saatat haluta pyydä apua uutiskirjeen testaamisessa. Voit joko lähettää heille kopion sähköpostista tarkistaa laitteen tai lainata laitetta poistamaan aktiivisesti koodausvirheet. Onneksi Outlook tarjoaa Mac-asennusohjelman, joten sinun ei tarvitse seurata Windows-käyttäjää näihin optimointeihin, mutta kun kyseessä on Lotus Notes tai Windows Mail, saatat olla onnea.

Vaihtoehto on maksaa ratkaisu kuten Esikatsele minun sähköpostiviestiä, valitettavasti he eivät tarjoa ilmaisia demotilejä, mutta niiden palvelu on hyvin tunnettu upeista esikatseluista. Acid-sähköposti on samanlainen palvelu, joka tarjoaa ilmaisen tilin, mutta ei anna sinun testata kaikkia asiakkaita, millaisia tappioita se on. Verkkopalvelujen pitäisi olla hyödyllisiä, jos sinun täytyy testata useita uutiskirjemalleja pitkällä aikavälillä ilman vaihtoehtoisia tietokoneita, mutta ne eivät ole perustavanlaatuisia, joten älä stressiä jos et voi testata niitä kaikkia!

7. Tarjoa aina Web-pohjaisia näkymiä

Lukijat eivät aina pysty (tai ole valmiita) katsomaan sähköpostiviestiäsi. Tarjoaa toisen version jossain Webissä antaa helpon ja yhteensopivan. Tätä prosessia ei voida täysin automatisoida, ellet halua sisällyttää a teksti versio.

Näin olisit nauhoittaa kaikki HTML-tunnisteet uutiskirjeen ulkoasusta. Et voi sisällyttää linkkejä tai tyylejä mihinkään. Kaikki sisältö yksinkertaisesti oltava yksinkertainen tekstitiedosto lukijoille, joilla ei ole renderöintimahdollisuuksia. Tämä on varmasti hyvä vaihtoehto, mutta kun tarjoat saman uutiskirjeen koko Web-version ottaa pois minkä tahansa renderöintivirheen aiheuttamat vahingot. Useimmat lukijat käyttävät ajan tasalla olevaa Web-selainta, jota voit suunnitella ja rakentaa uutiskirjeen ja täydellisyyden.

Miten asetat sivun täysin valintasi. Jotkut sivustot tulevat olemaan omistaa koko blogipostin sähköpostin sisällön kopioimiseksi, ehkä joidenkin kanssa lisäinformaatio. Toiset luo erillinen sivu pääsivustosta ilman suoria linkkejä navigointiin. Tämä menetelmä voi olla hyödyllinen, koska lukijat eivät häiritse pääsivustosi mallia tai sivupalkin sisältöä.

8. Kuvan sisällön lisääminen

Kuvat ovat toinen syy tarjota lukijoillesi web-pohjainen ratkaisu. Oletusarvoisesti sähköpostiohjelmat asetetaan poistamaan kuvat pois sisällöstä. Jos osoite lisätään turvalliseen luetteloon, kaikki kuvat näytetään oletusarvoisesti, mutta käyttäjä täytyy hyväksyä tämä asetus joten se ei todellakaan ole takuu. Vain varmista, että kuvia ei tarvita osana pääsisältöä, mutta lisätty ylimääräisenä lisäyksenä sivun estetiikkaan.

Kun olet saanut grafiikan viennin, on muutamia vinkkejä kuvien rakentamiseen erityisesti sähköpostiviestejä varten. Haluat aina aseta sekä leveys- että korkeusmääritteet img tunnisteet. Ilman näitä eritelmiä, jotkut asiakkaat vääristävät kuvan sisältöä. alt tunniste on myös hyödyllinen, joten kävijät tietävät, mitä kuvan sisältö sisältää, ennen kuin se ladataan.

Kuten edellä mainittiin, kuvien sijoittaminen sähköpostiviestiin voi olla hankalaa. Vältä kelluvien käyttöä hinnalla millä hyvänsä! Kuva align = "left" määrite toimii paljon paremmin tai vaihtoehtoisesti kartoittaa tarkat taulukon solut sopii kuvasi uutiskirjeen ylä-, vasen- tai oikealle puolelle. Et voi saada täydellistä ottelua niin monien asiakkaiden kanssa (erityisesti mobiiliasiakkaille), mutta optimoi kuvat ja Pidä tiedostokoot pieninä parhaan tuloksen saavuttamiseksi.

Kuvan tallennuksen osalta on suositeltavaa pitää kaikki tiedostot omassa Web-palvelimessa. Tämä on parempi vaihtoehto sen sijaan, että käytettäisiin toista kuvan isäntää, tai lataamalla tiedostot online-uutiskirjeen palveluun. Lisäksi sinun pitäisi erota uutiskirjeiden sisältö pois muusta kuvastasi kansiorakenteessa niin kuin / Img / sähköposti tai / Img / sähköposti / 2011.

9. Vältä roskapostikansiota!

Tämä voi olla vaikea kuulla, mutta Kaikki sähköpostiasiakkaat eivät ole ystävällisiä uutiskirjeitä kohtaan. Joka päivä lähetetään miljardeja sähköpostiviestejä, joista suurin osa sisältää roskapostia tai haittaohjelmia, joten näiden turvatoimien sisällyttäminen Saapuneet-kansioon on selkeästi turvaohjeita.

Internet-markkinoinnin osalta voit kuitenkin helposti torjua viimeisimmän uutiskirjeen olevan roskapostin kanssa. Vähennä mahdollisuuksia tähän tapahtuu puhdista muotoilu yksinkertaisuuden vuoksi. Älä tee ärsyttäviä kuvia tai räjäyttää otsikkoteksti satojen avainsanojen avulla.

Yritä myös pidä sisällön lyhyt ja aiheellinen. Sinun ei tarvitse sisällyttää koko sisältöä kaikkiin artikkeleihisi tai sivuihisi. Yritä lisätä lause tai kaksi vaihtoehtoista linkkiä sivustoosi pitkän listan sijasta. Lyhyempi sähköposti näyttää, sitä todennäköisemmin se välittää roskapostitarkastuksen.

Newsletter Design Gallery

Mitä hauskaa e-mail-uutiskirjeen artikkeli olisi ilman hienoja esimerkkejä? Google-sivustossa on tonnia sähköpostiviestejä ja malleja. HTML-sähköpostin galleria on erittäin suosittu inspiraation lähde.

Alla olen sisällyttänyt kuvakaappauksia Kampanjan Monitorin gallerian monista uutiskirjeistä. Toivottavasti nämä loistavat ulkoasut voivat tarjota sinulle hienoja ideoita omiin malleihisi.

Pidä hauskaa suunnittelemalla ihanteelliset uutiskirjeet!

Alertful for Business