Share
Som mange andre webdesignere trives jeg på koding av vakre, men fleksible nettsider som viser nesten identisk i hver nettleser. Dessverre sender designere nyhetsbrev tilbake ti år. Utdaterte tagger, tabeller, inline styling, oh my! I denne artikkelen vil jeg liste seks metoder som umiddelbart forbedrer e-postoppsettene dine.
Som en ny leie på opt-in e-postmarkedsføringstjeneste AWeber var min første oppgave å skape et par dusin nye HTML-nyhetsbrevmaler for våre kunder. For den rene kode-kjærlige webdesigneren er HTML-e-post en påminnelse om en dum fortid. Etter uker med jobb og utallige hodepine, leverte jeg varene. Jeg lærte også mye om å designe for e-post.
For å hjelpe deg med å unngå mye av hodepine jeg opplevde under testing, er det 15 ting du kan gjøre for å lage flotte HTML-e-poster.
Hvis du bare tar bort ett tips fra denne artikkelen, vennligst la det være dette. Som designere bruker vi mye tid på å skape den perfekte brukeropplevelsen på nettet og teste den opplevelsen på tvers av flere plattformer. Men når det gjelder e-post, unnlater mange av oss ikke å levere samme oppmerksomhet på detaljer.
I likhet med testing for nettet, kan det være et absolutt mareritt å lage en e-postoppsett som viser det samme i hver e-postklient.
For å være sikker på at abonnentene dine vil motta meldingen din som ønsket - test i alt du kan!
Dette inkluderer, men er ikke begrenset til:
Men vent - det er mer!
Noen av disse e-postklienter har flere versjoner, som hver vil gjøre CSS og HTML annerledes.
Dette er en del av en HTML-e-post som blir gjengitt av gammel versjon av Yahoo.
Her er nøyaktig samme e-post som gjengis av Ny versjon av Yahoo. 
Subtile forskjeller, jeg innrømmer. Men nok av disse subtile forskjellene, og det legger til en sløv design. Og hvis det ikke er nok ... brukerens nettleser kan også spille en rolle i hvordan designet gjøres.
Nå før du kaster datamaskinen ut av vinduet i frustrasjon ... kan disse neste trinnene hjelpe deg med å utelukke et flertall av testproblemer.
Jeg er overrasket over at noen av de største annonsørene bryter med grunnleggende bruksregler om HTML-e-post.
Her er noen retningslinjer for å leve av:
Dette er en header på en e-post jeg mottok fra Discovery Health:
Jeg tok dette skjermbildet fra Gmail-kontoen min - før du aktiverer bilder. Se hvordan ALT-teksten "bullet" og "spacer" kommer i veien?
Hvis du legger til ALT-koder i elementer som bare tjener til designformål, danner designet og distraherer fra meldingen.
Hu h? Jeg brukte hele denne tiden å lære CSS og nå må jeg gå tilbake til bordene? Når det gjelder e-postdesign, er bordene varme som sine 2003 - de er nærmeste til standarder vi har.
Noen ting å merke seg:
Merk: Dine bakgrunnsbilder vil oppføre seg som om de var flislagt ... så planlegg deretter.
Jeg trodde heller ikke det.
Noen populære e-postklienter ignorerer koden inni hodetakene dine. Gmail og Hotmail er spesielle syndere som kommer til tankene.
Med oppsettet ditt opprettet i tabellformat, er det på tide å bruke stiler til tekst og bilder.
Her er noen tips og triks for å sikre at meldingen ser nesten identisk ut i alle
nettleser:
Visste du at emnelinjen i hver e-post sendt til en Gmail-konto, følges av de første utdragene av tekst innenfor den aktuelle e-postadressen?
Hvorfor ikke bruke dette til din fordel!
Over er et bilde fra Gmail-innboksen min.
Begge nyhetsbrevene har samme innhold i header.
Bare en forskjell - Nyhetsbrev 1 utnytter Gmail's innboksformatering.
Slik gjorde jeg det:
Sett inn et 1px x 1px bilde som det aller første elementet i e-posten din. Wrap bildet i span-koder som angir skriftfargen til det samme som bakgrunnen. Uansett hvilken tekst du legger inn i ALT-kodene for ditt 1px x 1px-bilde, erstatter det nå den Google-kodene i brukerens innboks.
Det er like enkelt som det! Denne subtile forskjellen vil sette meldingen din bortsett fra andre e-postmeldinger i leserens innboks.
Jeg har gjort mitt beste for å dele noen ting jeg gjør når jeg lager HTML-e-post. Det er din tur!
Hvordan går det med å designe, kode og teste e-postkampanjene dine?
Eventuelle anbefalinger, tips eller triks du vil legge til vil bli verdsatt av fellesskapet ditt.
Accentsconagua