Komme i gang med HTML-e-post

HTML-e-post er en flott måte å holde kundene oppdatert om de siste oppdateringene relatert til din bedrift eller produkt, men de er litt vanskelige. CSS-støtte i e-postklienter er inkonsekvent. Som et resultat må vi ty til gamle teknikker, som for eksempel bruk av tabeller og inline CSS. I dag skal jeg gå gjennom prosessen med å lage enkle HTML-e-postmeldinger.

Intro: HTML Email

Som freelance webutvikler er koding av HTML-e-post en av de mer utfordrende oppgavene jeg har å håndtere. Heldigvis, da en av mine første klienter ba meg om å designe og koden hans nyhetsbrev, var han tålmodig nok til å la meg gå gjennom den lange og frustrerende prosessen med å finne ut alt. Du kan ikke være så heldig, så gjør deg klar med denne opplæringen.

Problemet: E-postklienter

Tror du at IE er en smerte i rumpa? Vent til du møter Outlook 2007. På grunn av de store forskjellene i HTML / CSS-gjengivelse mellom e-postklienter, ved hjelp av moderne kodeteknikker, vil det resultere i et ganske katastrofalt rot i mange populære e-postklienter. E-postklienter gjør ganske enkelt ikke HTML på samme måte som nettlesere gjør - ikke engang i mange tilfeller. Ting som flyter, bakgrunnsbilder og jevne marginer er ikke lenger en del av vokabularet ditt. Så hva er en standard-kjærlig koder å gjøre?

Løsningen: Kode som det er 1997

Det er riktig. Tabeller. Cellpadding, cellespace, colspan, alle de brutale tingene du trodde du hadde etterlatt seg. Tabeller er den eneste måten å få konsekvente e-postoppsett, så det er på tide å (midlertidig) glemme CSS-kjærlige måter og omfavne un-semantiske, rotete bord.

Trinn 1: Design

Hold det enkelt

Når du designer en HTML-e-post, behold du enkelhet. Designet vi bruker i dag har flere kolonneoppsett, hovedsakelig for demonstrasjonsformål, men vurder å stikke til to kolonner hele tiden når du koder ditt eget nyhetsbrev for å redde dere mange hodepine.

Minimer bildebruk

Husk å ikke bli for fancy med designene dine, siden Outlook ikke støtter bakgrunnsbilder. Faktisk, avhengig av kundens behov, vil du kanskje hoppe over Photoshop-prosessen for å tvinge deg selv til å holde designen praktisk. Når det er sagt, bruker vi Photoshop her, slik at du kan få en bedre ide om vår plan.

Du kan bruke bakgrunnsbilder av dekorative grunner, så lenge e-posten er leselig og gir mening uten dem. For eksempel skal vi legge til en liten gradient i vår header, men det er ikke så farlig hvis det ikke kommer opp.

Tynnere er bedre

Fordi vinduer for forhåndsvisning av e-postklientene ofte er bare en liten brøkdel av skjermbredden, vil du vanligvis holde designet ditt under 600px. Ingen liker horisontale rullestenger.

Være konsekvent

Husk at vi skal bruke ufleksible egenskaper som cellpadding og cellespacing for å sprede ut elementene våre. Det er forsiktig å prøve å holde avstanden mellom elementene konsistente.

Vår design

Denne utformingen ligner på en jeg brukte for et klientnyhetsbrev i fjor sommer, men forenklet. Det er ikke vakkert, men det er ikke poenget her. Det er enkelt og konsistent, og har en rekke layoutalternativer slik at du kan se hvordan de er forskjellige.

Trinn 2: Planleggingen av vår kode

I mine erfaringer blir HTML-e-postkoden svært komplisert, veldig raskt. Det er viktig å ha en plan for angrep. Så her er planen (vi kommer tilbake til dette, ikke bekymre deg hvis du ikke følger).

Først, Vi starter med et stort 100% breddebord med en grå bakgrunn, dette er vårt "wrapper" bord.

Neste, Legg merke til at det er tre flere bord inne i wrappebordet: en øverst for koblingen "Vis i nettleser", en i midten for hovedinnholdet og en nederst for koblingen "abonnement".

Endelig, I hovedbordet vil hver horisontal del av innholdet ligge innenfor en tabellrad og en tabellcelle. Disse tabellcellene vil i sin tur inneholde et annet bord som skal være vert for hver innholdsseksjon:

Cellpadding og Cellspacing

Istedenfor å bruke margin og padding CSS egenskaper, vi skal bruke cellpadding og cellspacing HTML-attributter. Tenk på cellpadding som å være ganske mye det samme som CSS padding - plass i et element rundt innholdet. Cellspacing er mellomrummet mellom dataceller på et bord.

Våre #hoved bordet kommer til å ha 15px av cellespace, slik at vi får det 15px av hvite plass rundt hele hovedinnholdsseksjonen, og 15px mellom hver horisontale gruppe. Cellpadding og cellespace gjelder bare for foreldrebordet, ikke barna. Hvis vi ikke vil ha en cellpadding eller cellespace, må vi spesifisere det for hvert bord.

Trinn 3: Koding av det

Nå kan vi starte prosessen med koding av vårt nyhetsbrev, seksjon etter seksjon. I motsetning til beste praksis, skal vi gjøre noen styling sammen med strukturen. Vi skal begynne med oppsettet, inkludert all avstand og polstring, og bakgrunnsfarger, etter det skal vi gjøre typografi og andre CSS-ting.

Setup

Oppsett for en e-post er veldig enkelt: bare html, hode og kropp tagger er involvert. La oss legge til i innpakningstabellen og de tre hovedtabellene vi diskuterte tidligere.

Når det gjelder doktypene, er det noen forskjellige tilnærminger, som beskrevet i denne artikkelen. I vårt tilfelle har jeg bestemt meg for å bruke en, fordi vi ikke trenger noen ting vi ville få ved å erklære en doktype. Det vil bli fjernet i de fleste tilfeller uansett.

Nettuts Email Nyhetsbrev

Generelt sett er det bedre å tilordne bredder til individuelle tabellceller enn til selve tabellen.

Legg merke til at de to meldingstabellene har cellpadding-verdier for 20px. Dette vil plassere ut de avsnittene fra hovedinnholdet. Hovedbordet har 15px av cellespacing. Dette er å etablere en konsistent vertikal rytme. Siden hver del er innenfor sin egen tabellcelle, vil det være 15px mellom dem alle.

Legg også merke til at tabellene er satt til juster = "center", og vi har uttrykkelig definert deres bredder. I HTML-e-post er det generelt best å ikke definere bredder for innpakningstabeller. Du har det bedre å definere bredder for hver celle, men i dette tilfellet vil vi bryte denne regelen fordi vi har cellespace / cellpadding å bekymre deg for.

Meldingstabeller

Disse er super enkle: bare avsnitt i senterjusterte celler.

Feil ved å se denne e-posten? Vis i nettleser

Den nederste meldingen er nøyaktig den samme.

Overskrift

Overskriften er ganske enkel, det er bare en kolonne, med tre rader. Siden vi har den fine blå bakgrunnen, trenger vi litt polstring rundt hver celle for å få teksten borte fra kantene.

    Communitech Venture Services  
  Nyheter og arrangementer  
  Juli 2010

Husk å angi bredden på hver celle, som i dette tilfellet er 570px (600px-15px av cellespace på hver side). Vi har også satt rette inn eiendom for datoen til Ikke sant. Akkurat nå legger vi ikke til i bakgrunnsbildet, vi gjør det senere. I mellomtiden bruk bare en lysere blå.

Legg merke til at vi bruker bgcolor i stedet for style = "bakgrunn:". Dette skyldes at HTML-verdier bedre støttes i e-postklienter enn CSS-egenskaper.

Det er det vi har så langt, det ser ganske dårlig ut, men oppsettet er akkurat det vi ønsket.

Innholdsseksjon - 2-kolonne

Vår første innholdsseksjon er et venstrejustert bilde med to overskrifter ved siden av det. I stedet for å bruke CSS-flyter som vi normalt ville, skal vi lage et bord med tre celler:

en for bildet,
en for mellomrommet mellom bildet og overskriftene,
og til slutt en for overskriftene.

For bildet med grensen, kommer vi til å neste et annet bord i cellen og sette cellpadding til 5px og gi den en grå bakgrunnsfarge. Cellpadding legger til bredden på elementet, så vi må redusere den definerte bredden av cellen ved 10px.

           
 
    All New Site Design
 Det er 150% bedre og 40% mer effektivt!

Legge merke til:

Vi har lagt til en tom tabellrad og celle over innholdet. Fordi vi har 15px av cellespacing, kan vi bruke en tom celle til å legge til 15px av avstand mellom elementene. I testingen virker dette fint tomt, men du kan alltid legge til et ikke-bryte rom for å være sikker.
Vi setter inn v-Juster eiendom til topp. Dette er viktig, fordi det justerer hver celle med toppen av raden. Standard er midt, noe som fører til noen rare resultater.
Vi bruker dummybilder fra dummyimage.com fordi alle bilder i HTML-e-postmeldinger må være vert (mer om det senere), og det er mye lettere å bruke genererte bilder. Sjekk ut siden, det forklarer hvordan du spesifiserer bildet du vil ha med nettadressen.

Innholdsseksjon - 1-kolonne

Dette er en veldig enkel del: bare en kolonne tabell med et avsnitt inni. Ikke glem å sette bredden på cellen og sette bordet til midtjustering.

Det er ikke noe problem, men det er ikke noe problem, men det er ikke et øyeblikk, og det er et problem for deg. Ut som et minimum, det er en utfordring å utøve arbeidet med å utvide ut fra dette. Duis aute irure dolor i reprehenderit i voluptate velit esse cillum dolore eu fugiat nulla pariatur. Uncepteur sint occaecat cupidatat non proident, sunt i culpa de officia deserunt mollit anim id er laborum.

skillevegger

For å legge til vertikal plass (mer enn 15px av cellespacing vi har) må vi bruke et mellomromsbilde. Akkurat som 90-tallet! Vi kunne bruke en spacer gif og laste den opp, men for øyeblikket er det raskere å bare bruke et annet dummybilde. Jeg lar den grå, så du kan se den, men senere kan vi sette den til hvit på hvit.

Som gir oss noe slikt:

Innholdsseksjon - 3-kolonne

For en 3-kolonne seksjon bruker vi fem tabellceller, en for hver kolonne og en mellom kolonnene for å skille dem.

Ganske enkelt, bruk samme metode for grensen som vi gjorde i delen 2-kolonne. Ikke glem det v-Juster!

De tre tekstkolonnene er nøyaktig den samme prosessen.

     Spennende nye produkter!
  Ut som et minimum, det er en utfordring å utøve arbeidet med å utvide ut fra dette. Duis aute irure dolor i reprehenderit i voluptate velit esse cillum
    Et nyhetsbrev hver måned
 Uncepteur sint occaecat cupidatat non proident, sunt i culpa de officia deserunt mollit anim id er laborum.
    Nytt og forbedret forum
 Du er her, og du er sikker på at du er i stand til å oppnå en god tid, og du vil ikke være raskere enn du er ute etter..

Legg til i en annen divider nederst, og vi er nesten der:

Resten…

Alt annet er bare å gjenta hva vi allerede har gjort: en 2-kolonne seksjon og en 1-kolonne seksjon med skillelinjer mellom dem.

Dette er en overskrift

Det er ikke noe problem, men det er ikke noe problem, men det er ikke et øyeblikk, og det er et problem for deg. Ut som et minimum, det er en utfordring å utøve arbeidet med å utvide ut fra dette. Duis aute irure dolor in reprehenderit i voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Det er ikke noe problem, men det er ikke noe problem, men det er ikke et øyeblikk, og det er et problem for deg. Ut som et minimum, det er ikke nødvendig å utøve arbeidet med å utvide ut fra det som følger.

OPPFORDRING TIL HANDLING

Og hovedoppsettet er nå ferdig:

Et ord på bilder

I motsetning til vanlige nettsider kan du ikke bare sette alle bildene dine i en mappe og deretter bruke relative veier til å koble til dem. Alle koblinger må være absolutte! Når jeg utvikler en e-post, er jeg vanligvis vert for bilder på et underdomene eller på Amazon S3. Når jeg er klar til å sende ut e-posten til en klient, flytter jeg alle bildene til et underdomen på deres nettsted.

Alle bildeforbindelser må være absolutte!

Trinn 4: Styling E-posten

Vi kan ikke bruke et eksternt stilark, og vi kan ikke legge inn CSS i hodet på e-posten, fordi noen kunder vil fjerne hele hodetiketten, eller ignorere stiletiketter. Vi kommer til å måtte bruke inline-stiler, noe som er en stor smerte. Heldigvis finnes det nyttige tjenester som vil ta innebygd CSS og gjøre det inline. Jeg bruker et nettsted som heter Premailer, hvor du kan lime inn koden direkte og den utfører det samme med inline CSS.

Vi skal gjøre innebygd CSS for denne opplæringen, så skal vi gjøre det på linjen med premailer.

Premailer tar innebygd CSS og gjør det inline!

Grunnleggende tilbakestilling

Vi kommer ikke til å gjøre en hard tilbakestilling med * -velgeren som du kan gjøre for en nettside. Bruke standardene vil faktisk gi mer konsistente resultater. De eneste elementene hvis polstring / marginer vi trenger å tilbakestille er de som vil ha plass rundt dem (fra cellpadding / cellspacing) som våre overskriftoverskrifter, eller våre avsnitt.

Du vil også legge merke til en margin rundt wrappebordet, som bare er standard styling på kroppselementet.

typografi

Ingenting veldig spesielt med typografien for en epost siden det er ganske mye det samme er det ville være for en nettside. Ikke bruk shorthand erklæringer (som font: ) fordi du ikke får konsistente resultater.

# topp-melding p, # bunn-melding p farge: # 3f4042; skriftstørrelse: 12px; font-familie: Arial, Helvetica, sans-serif;  #header h1 color: #ffffff; font-familie: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif; skriftstørrelse: 24px;  #header h2 color: #ffffff; font-familie: Arial, Helvetica, sans-serif; skriftstørrelse: 24px;  #header p color: #ffffff; font-familie: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif; skriftstørrelse: 12px;  h3 font-size: 28px; farge: # 444444; font-familie: Arial, Helvetica, sans-serif;  h4 skriftstørrelse: 22px; farge: # 4A72AF; font-familie: Arial, Helvetica, sans-serif;  h5 skriftstørrelse: 18px; farge: # 444444; font-familie: Arial, Helvetica, sans-serif;  p font-size: 12px; farge: # 444444; font-familie: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif; linjehøyde: 1,5; h1, h2, h3, h4, h5, h6 margin: 0 0 0.8em 0;

Og se: det er betydelig bedre nå!

Bakgrunnsbilder

Bakgrunnsbilder fungerer ganske mye det samme som på en nettside, bortsett fra at noen ganger de ikke virker! Sørg for at du har en tilbakebetaling bakgrunnsfarge, som er tildelt cellen som en bgcolor, for klienter som ikke støtter CSS bakgrunner.

#main border: 1px solid #cfcece; img display: block; a color: # 4A72AF;

Og vi er ferdige med den enkle delen. Nå på testen!

Trinn 5: Testing

Testprosessen er den viktigste og mest ubehagelige delen av å lage HTML-e-postmeldinger. Når jeg jobber med en e-post, tester jeg ofte, i hvert trinn, så jeg kan finne ut nøyaktig hva som går galt. Det er mange kunder å teste, og mange måter å teste dem på, la oss gå over alt.

E-postklienter

Dette er klientene du bør teste for, i det minste:

Outlook 2003/2007
Hotmail
Yahoo! Post
Gmail
Apple Mail
Thunderbird

Hvordan teste

Vi må finne en måte å sende HTML-e-post til først. Klienten din vil sannsynligvis bli konfigurert med en tjeneste som Mailchimp eller Campaign Monitor, som lar deg teste og sende e-postkampanjer.

Du tror kanskje jeg kompliserer dette unødvendig, fordi noen e-postklienter lar deg lime inn i HTML-koden. Dette kan imidlertid føre til forskjellige resultater enn ved bruk av en e-postkampanjeapp. Test med en app for å være på den sikre siden.

Testing med Mailchimp

Min foretrukne metode innebærer bruk av Mailchimp for testing og sending av testkampanjer. Mailchimp er gratis for opptil 500 mottakere, så du trenger ikke betale for testing. Den har et enkelt og brukervennlig grensesnitt. Her er en rask trinnvis gjennomgang:

Registrer deg for en gratis Mailchimp-konto, og legg til en mottakerliste over test-e-postkontoene dine: Hotmail, Yahoo !, og Gmail, og logg inn på den nye kontoen din.
Velge opprett en kampanje og velg vanlig ol "-kampanje fra hovedkontosiden. Fyll ut grunnleggende informasjon om kampanjen, du trenger egentlig bare et navn for testformål.
På design side, velg Import -> Lim inn kode og pass på at du velger Automatisk CSS Inliner
Hvis du ikke bruker Mailchimp, må du sørge for at du bruker Premailer for å få din CSS inline
Fortsett til du kommer til bekrefte side, og velg send test. Du kan sende noen få tester herfra, men etter det må du faktisk sende ut e-postene til listen din.

Testing med Litmus

Litmus er en webapp som tester HTML-e-postmeldinger i alle slags versjoner av alle slags klienter. Full service koster penger, men hvis du ikke kan overbevise kunden om å betale, kan den gratis versjonen deg fortsatt teste i gammel Gmail og Outlook 2003, som fortsatt er nyttig.

Resultater - The Good

Noen av våre tester viste seg ganske bra:

Apple Mail

Thunderbird

Resultater - The Bad-ish

Noen var litt av, men mer eller mindre det samme:

Gmail (safari)

Outloook 2007

Outlook 2003

Yahoo! Post

Resultater - The Ugly

Vi hadde også et par feil.

Hotmail (GREEN ???)

Gammel Gmail (explorer)

Rengjøring av messen

Alt i betraktning er dette en ganske vellykket test, fordi jeg testet mange av elementene i Outlook og Gmail mens jeg skulle. Problemene vi har med gammel Gmail og Hotmail er relatert til standard stilark som kundene bruker. Microsofts spesielle og unike merkevare av gal har gitt oss et standard stilark som overstyrer alle overskrifter med a grønn tekst stil med !viktig betegnelse. Noen ganger er jeg ganske sikker på at de vil å gjøre meg gal.

For å løse dette må vi legge til !viktig erklæring til alle våre overskrift fargestiler som dette:

h3 font-size: 28px; farge: # 444444! viktig; font-familie: Arial, Helvetica, sans-serif;  h4 skriftstørrelse: 22px; farge: # 4A72AF! viktig; font-familie: Arial, Helvetica, sans-serif;  h5 skriftstørrelse: 18px; farge: # 444444! viktig; font-familie: Arial, Helvetica, sans-serif;

For gammelt Gmail har vi et lignende problem i overskriften: Gmail legger til ekstra margin i bunnen av overskriftskodene. Vi trenger bare å overstyre margin-bottom nærmere bestemt.

#header h1 color: #ffffff! viktig; font-familie: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif; skriftstørrelse: 24px; margin-bunn: 0! viktig;  #header h2 color: #ffffff! important; font-familie: Arial, Helvetica, sans-serif; skriftstørrelse: 24px; margin-bunn: 0! viktig

Og vi fikserte Hotmail:

Så det har vi det, en funksjonell, konsistent (hvis litt vanlig) HTML-e-post. Det er en smerte, ja, men når du får et system går det går mye raskere. Prøv å holde koden din godt kommentert og organisert slik at du senere kan bruke deler av den.

Hvis du kan snakke med klienten om å registrere deg for noe som Litmus, vil livet ditt bli mye lettere. Du kan også teste mange klienter gjennom betalte versjoner av Mailchimp og Campaign Monitor.

Feilsøking

Du vil sikkert komme over problemer jeg ikke har dekket her, men jeg har noen generelle råd for opprydding:

Sjekk matematikken din: Jeg kan ikke huske hvor mange ganger jeg har skrudd opp et oppsett ved ikke å legge opp tabellcellebredder nøyaktig. Husk å ta hensyn til cellpadding: det legger til bredden på cellene dine.
Sjekk etter standard stilark: bruk noe som Firebug eller Webkit Inspector for å sjekke om en nettleserklient overstyrer stilene dine. Hvis dette skjer, legger du til en !viktig erklæring bør løse problemet.
Slå det opp: Det er alltid en veldig god sjanse for at noen har opplevd ditt problem før. Hvis Google ikke hjelper, kan du prøve å surfe tips og triks på bloggene til populære e-postkampanjetjenester, noen folk gjør e-post for å leve, og de kjenner deres ting!
Bryte det ned: Hvis du ikke finner hvor du gikk galt, gå tilbake til begynnelsen og sjekk e-posten din litt etter hvert til du finner hva som bryter den.

Resultatet

Her er den endelige koden for din referanse:

Nettuts Email Nyhetsbrev

Feil ved å se denne e-posten? Vis i nettleser

Communitech Venture Services

Nyheter og arrangementer

Juli 2010

All New Site Design

Det er 150% bedre og 40% mer effektivt!

Spennende nye produkter!

Ut som et minimum, det er en utfordring å utøve arbeidet med å utvide ut fra dette. Duis aute irure dolor i reprehenderit i voluptate velit esse cillum

Et nyhetsbrev hver måned

Uncepteur sint occaecat cupidatat non proident, sunt i culpa de officia deserunt mollit anim id er laborum.

Nytt og forbedret forum

Du er her, og du er sikker på at du er i stand til å oppnå en god tid, og du vil ikke være raskere enn du er ute etter..

Dette er en overskrift

Det er ikke noe problem, men det er ikke noe problem, men det er ikke et øyeblikk, og det er et problem for deg. Ut som et minimum, det er en utfordring å utøve arbeidet med å utvide ut fra dette. Duis aute irure dolor in reprehenderit i voluptate velit esse cillum dolore eu fugiat nulla pariatur.

OPPFORDRING TIL HANDLING

Du mottar denne e-posten fordi du registrerte deg for oppdateringer

Avmeld straks | Videresend til en venn | Vis i nettleser

Her er hva vårt endelige resultat ser ut hvis vi bruker ekte bilder:

Ingenting virkelig spesielt, men det burde komme i gang med å designe dine egne HTML-e-poster. Det er selvsagt andre måter å gjøre alt jeg har gjort, men med HTML-e-post er alt det som virkelig betyr noe, at det fungerer. Det er ikke mye av et konsept av webstandarder eller beste praksis her.

ressurser

Kjøp e-postmaler på ThemeForest
Kampanje Monitor Resources (deres blogg har også noen veldig nyttige tips)
Mailchimp Resources
6 enkle måter å forbedre HTML-emails
20 Email Design Beste praksis og ressurser for nybegynnere
30 HTML Best Practices for Beginners

Jeg håper du har lært litt i dag! Jeg vet at jeg fant mitt første HTML-e-postprosjekt for å være en av de mest pedagogiske jeg noensinne har jobbet med. Det ser bare ut til å dele det jeg lærte!

Kode