Share
Hva du skal skapeDen beste måten å forstå hvilken som helst prosess er å bære den ut selv fra grunnen. I dag skal vi bare gjøre det med e-postdesign, ved å bygge en HTML-e-postmal fra grunnen av.
Redaktørens notat: denne opplæringen ble opprinnelig skrevet av Nicole i juni 2013. Siden da er det blitt referanse for industriens ledere over hele verden, og har blitt brukt av millioner av nybegynnere som utgangspunkt for deres eventyr i e-post. Det er like relevant i dag som det var da det ble publisert første gang.
Hvis du leter etter en ferdig, profesjonell løsning, ta en av våre bestselgende HTML-e-postmaler på Envato Market. Vi har hundrevis av responsive alternativer fra så lite som $ 5, med lett å tilpasse funksjoner for å komme i gang.
Bestselgende HTML-e-postmaler på Envato Market Ikke det du leter etter? Ikke noe problem, denne opplæringen vil lære deg hvordan du bygger din egen.
Til å begynne med er det verdt å nevne hvor jeg trakk noen av ressursene fra.
Nå, som vi diskuterte i den forrige opplæringen, må du begynne HTML-e-postdokumentet med en XHTML-doktype:
Demystifying Email Design
Med det sorterte, kan vi begynne å bygge resten av strukturen.
Først legger vi til en samlet struktur for e-posten vår, som starter med en stikkord. Vi stiller marginen og utfyllingen på kroppsmerket til null for å unngå uventet plass.
Vi legger også til et bord med en bredde på 100%. Dette virker som en ekte kroppstempel for vår e-post, fordi styling av kroppsmerket ikke støttes fullt ut. Hvis du vil legge til en bakgrunnsfarge til "kropp" av e-posten din, må du bruke den på dette store bordet i stedet.
Angi cellpadding og cellespace til null for å unngå uventet plass i tabellen.
Merk: Vi kommer til å forlate border = "1" på alle våre bord, slik at vi kan se skjelettet av vårt oppsett når vi går. Vi fjerner dem på slutten med en enkel Finn & Erstatt.
| Hallo! |
"Hvis en attributt eksisterer i HTML, bruk det i stedet for CSS"
Legg nå et sentrert bord på 600 piksler bredt inne i beholderbordet. 600 piksler er en sikker maksimal bredde for e-postene dine for å vise komfortabelt innenfor de fleste desktop- og webmailklienter på de fleste skjermoppløsninger.
Angi denne bredden ved hjelp av HTML i stedet for CSS, ved å bruke breddeattributtet. Den gylne regelen i HTML-e-postutvikling er: hvis et attributt finnes i HTML, bruk det i stedet for CSS.
Vi erstatter vår lille "Hei!" hilsen med dette bordet:
| Hallo! |
Vi har også lagt til en inline-stilegenskap som setter inn border-kollaps eiendom til kollapse. Hvis vi ikke gjør dette, vil nyere versjoner av Outlook legge til en liten plass mellom bordet vårt og grensen vår.
I vårt design kan vi se at e-posten er delt inn i tre logiske seksjoner, så vi lager en rad for hver.
La oss duplisere den eneste raden vi allerede har laget slik at vi har tre totalt. Jeg har endret teksten inne i dem slik at vi enkelt kan identifisere hver rad.
| Rad 1 |
| Rad 2 |
| Rad 3 |
Nå vil vi farge dem i henhold til designen. Som bgcolor er et gyldig HTML-attributt, vi bruker det til å angi bakgrunnsfargen i stedet for CSS. Husk alltid å bruke de seks bokstavene i en heksekode, da tre tegnskorthand ikke alltid vil fungere.
| Rad 1 |
| Rad 2 |
| Rad 3 |
Ok, neste gang skal vi fokusere på rad 1. Vi vil justere polstringen på cellen og deretter sette inn bildet vårt.
Når du bruker padding i e-post, må du alltid spesifisere hver eneste verdi (øverst, høyre, nederst og venstre) ellers kan du få uforutsigbare resultater. Jeg finner at du fortsatt kan bruke stenografi, dvs.. polstring: 10px 10px 8px 5px;, men hvis du har problemer, kan det hende du ønsker å skrive den ut longform, dvs.. polstring: 10px; polstring-høyre: 10px; polstring-bunn: 8px; polstring-venstre: 5px;.
Hvis du har enda større problemer med polstring (for eksempel hvis din sendeplattform strekker ut CSS), må du ikke bruke det i det hele tatt. Bruk bare tomme celler til å lage plass. Det er ikke nødvendig å bruke spacer GIFs, bare sørg for at du legger til style = "line-height: 0; font-size: 0;" til cellen, plasser en innsiden og gi den en eksplisitt høyde eller bredde. Her er et eksempel:
Vær også oppmerksom på at det er trygt å bruke polstring på TD-koder, men ikke på P-koder eller DIV-er. De oppfører seg mye mer uforutsigbart.
Så, vi bruker noen inline CSS for å legge til polstring i cellen. Deretter setter vi inn bildet vårt, legger til alt tekst og legger til style = "display: block;" som er en vanlig løsning som stopper noen e-postklienter, legger til hull under bildene dine. Vi senterer bildet ved å legge til juster = "center" til vår td-tag. Vi legger også til en alt-tagg som er viktig for når e-posten vår er lagt inn, som i de fleste tilfeller vil være med bilder av.
Merk: Hvis innholdet i overskriften din er veldig viktig for meldingen, må du ikke bruke et bildehodet. Husk at bilder er blokkert som standard for de fleste klienter, så hvis det er et aspekt av e-posten din som er avgjørende, må du aldri inkludere det som et bilde. I dette eksemplet er imidlertid toppteksten min ganske overflødig.
Først av, legger vi til noe polstring til midtcellen, slik at bordet på innsiden har litt plass rundt det, som i vårt design.
Nå legger vi til et bord med tre rader for vårt hovedinnhold-ett for overskriften, en for innledende tekst og en for rad med to kolonner. Vi stiller bredden på denne tabellen til 100% i stedet for å bruke en pikselverdi fordi dette vil hjelpe oss videre nedover sporet hvis vi vil gjøre vår e-post responsiv. Hvis du alltid har pikselbredder på alt, kan du ende opp med mange verdier for å overstyre med medieforespørsler. Hvis de innlejrede tabellbreddene dine er basert på prosentandeler, da vil du tilpasse bredden på overordnet elementet.
Rad 1 Rad 2 Rad 3
Nå legger vi til innholdet vårt, og legger til noe polstring på midtcellen.
| Det er ikke noe problem! |
| Kjæresten er dum og sitter, og er en avgjørende forfatter. I tempus adipiscing felis, setter du et blankt ipsum volutpat sed. Morbi Porttitor, eget akkord, er en av de mest ettertraktede ipsumene, og har en tendens til å være noe bedre.. |
| Rad 3 |
Nå skal vi legge til våre to kolonner av innhold til rad 3. Fordi vi vil ha en "margin" mellom disse to cellene, men marginen støttes ikke, oppretter vi et tre kolonne bord med en tom celle mellom to ytre kolonner.
Så mye som jeg liker å holde fast i prosentandeler, når du har innhold som er en bestemt størrelse, kan det være vanskelig å konvertere det til en prosentandel (i dette eksemplet vil kolonnene være 48,1% som kan bli forvirrende). Av denne grunn, siden våre to bilder er 260px brede, vil vi lage kolonner som også er 260px brede, med en 20px marginalcelle i midten. (Dette vil totalt 540px, som er 600px bredden på bordet minus polstring på 30px på hver side.) Pass på å nullstille skriftstørrelsen og linjens høyde og legge til et ikke-brytende mellomrom i marginalcellen.
Vi stiller også inn valign til topp for begge cellene slik at de vil stå vertikalt i forhold til toppen, selv om en kolonne har mer tekst enn den andre. Standard vertikaljustering er midten.
| Kolonne 1 | Kolonne 2 |
La oss nå legge til bilder og innhold til de kolonnene. Da vi trenger flere rader, nestes vi enda en tabell fordi vi ikke kan bruke noen colspan eller rowspan tags. Vi legger også til noe polstring mellom bildet og kopien i hver kolonne.
|
|
Her har vi satt bredden på bildene ved hjelp av HTML ved 100% av kolonnebredden. Dette er igjen, slik at hvis vi gjør denne e-posten lydhør, må vi bare bruke medieforespørsler for å endre bredden på overordnet elementet. Vi må overstyre høyden i piksler fordi du bruker style = "height: auto" nå vil det ikke fungere i alt (hoste hoste, Outlook). Så vi bestemmer det ved å bruke piksler. Dette betyr at vi måtte sette høyde: auto! viktig på bildene ved hjelp av medieforespørsler for å overstyre pixelverdien, men vi kunne gjøre det med en enkelt klasse. Når vi setter bredden som en prosentandel, trenger vi ikke å overstyre det. Jo færre ting å overstyre, desto bedre.
Nå legger vi vår polstring til bunnfeltet.
Rad 3
Inne i den cellen vil vi nest et annet bord for å få våre to kolonner.
| Kolonne 1 | Kolonne 2 |
Vi lager et annet lite bord for våre sosiale medier-ikoner. Vi setter sin overordnede celle til align = "right". Pass på at du stiller inn border = "0" På disse bildelinkene (for å unngå en blå lenke) og ikke glem display: block.
Nå legger vi til teksten vår og legger til en bredde på cellene våre, for å være trygg, selv om det er mye mellomrom mellom dem. Vi stiller denne cellen til 75% og den andre til 25%.
® Noen, et sted 2013
Frameld deg dette nyhetsbrevet umiddelbart
Og der har vi det! Vår oppsett er fullført.
La oss kjøre dette gjennom W3C Validator for å sikre at ingenting er dårlig eller ødelagt. Hvis du har fulgt nøyaktig, vil det si at den har passert.
Neste skal vi kjøre en test gjennom Litmus for å sikre at strukturen på e-posten fungerer bra. Her er et sammendrag av testen min:
Ta en titt på nettet Vår første rad er overskriften. Vi bruker tag for å lage fet tekst fordi, som vi allerede vet, om det finnes i HTML, bruker vi det i stedet for CSS.
Det er ikke noe problem!
Vi legger også til denne inline-stilen til alle de andre cellene i teksten:
style = "color: # 153643; font-family: Arial, sans-serif; skriftstørrelse: 16px; linjehøyde: 20px;"
Deretter må vi utforme bunntekstteksten, og vi vil også rydde opp vår abonnementslink. Vi vil style vår unsubscribe text link ved hjelp av både CSS og HTML stikkord. Denne fordoblingen er den beste måten å sikre at koblingene dine aldri vises i standardblått.
® Noen, et sted 2013
Avslutte abonnementet til dette nyhetsbrevet umiddelbart
Og der har vi det! Alt er i. Tid for å slå av grensene og se det som er vakkert. Gå gjennom og erstatt hver forekomst av border = "1" med border = "0".
På dette punktet ser det ut litt trist flytende i hvitt rom, så la oss gå opp til vårt første 600px brede bord og legge til:
style = "border: 1px solid #cccccc;"
Nå ser det ikke ut som det flyter lenger. Som en endelig berøring skal jeg legge til 30px med polstring til bunnen av den aller første cellen for å hindre at e-posten vår stopper bratt nederst i noen webmail klienter (som Apple Mail) og 10px med polstring på toppen , slik at den blå hodet har en liten puste.
Og det er det! Du er klar for en endelig prøve.
Ta en titt på nettet
Det er en Wrap!
Før vi kaller det en dag, hvis du har brukt noen kommentarer, bli kvitt dem. Noen e-postklienter kan stryke på kommentarer, så det er klokeste å ikke ha noen unødvendig kode hvor som helst i filene dine.
Nå er det en god tid å gjøre en endelig test, og så er HTML-e-posten din klar til å sende!
Last ned e-postmaler
Hvis du trenger flere alternativer, kan en av våre responsive e-postmaler være akkurat det du trenger. Abonner på Envato Elements, og du får ubegrenset tilgang til hundrevis av tilpassbare e-postmaler, samt lagerfotografering, ikoner, grafikk og mange andre kreative eiendeler for dine prosjekter..
Lær mer om HTML-e-post
Å ta det du har lært til neste nivå! Ta en titt på vår Mastering HTML Email læringsguide for flere opplæringsprogrammer på HTML-e-postmaler, e-postdesign, kodende responsiv e-post, tilgjengelighet, markedsføring, transaksjonell e-post, e-postleverandører (ESP), utviklingsprosesstips og mer!
Accentsconagua
Ta en titt på nettet 