9 triks for å designe den perfekte HTML-nyhetsbrevet

Et nyhetsbrev er den perfekte måten å holde kontakten med dine kunder eller tilhenger. Ofte vil firmaet eller nettstedet ditt ha mange produktoppdateringer, eller muligens kommende arrangementer du vil dele. Det er alltid mulig å legge inn ny informasjon i bloggen din eller i sosiale medier, men publikum kan bare gå så langt for å nå deg. I dette tilfellet er e-post absolutt ikke død teknologi, bare uutnyttet potensial.

Prosessen med å lage og sende ut et nyhetsbrev er mye enklere enn man kanskje tror, men å designe en egendefinert mal og bygge din egen kode - dette kan ta litt lengre tid.

Vi har samlet noen fantastiske tips for å få deg til å utforme høykvalitets HTML-nyhetsbrev som aldri før. Selv om du er nybegynner til emnet, vil du sikkert finne noen uvurderlig informasjon for å komme i gang i e-postmarkedsføringsprosessen.

Mål for et nyhetsbrev

Før du kommer inn i designaspektene, bør vi klargjøre formålet med å bygge et nyhetsbrev. Avhengig av hvilken type nettside du kjører, kan informasjonen i nyhetsbrevet variere dramatisk fra andre, men hovedformålet med et nyhetsbrev er å levere praktiske oppdateringer rett til leserens innboks.

Sterke Internett-brukere vil sannsynligvis sjekke e-posten deres mer enn to ganger om dagen. Selv de som er konstant opptatt, tar seg tid til å gå gjennom sine meldinger minst en gang om dagen. Dette er den perfekte tiden til fange oppmerksomhet selv uten å kreve besøk på nettstedet ditt. Selv om ingen klikker gjennom linkene dine, er informasjonen fortsatt mottatt, som er flott for å bygge et merkenavn.

Vurder noen av emnene du trenger å tilby i ditt design. Inkluderer du koblinger til påmelding for din tjeneste; muligens blogkoblinger eller nylig publiserte artikler på nettstedet ditt? Oppsettet av nyhetsbrevet ditt vil gjenspeile hvordan du ønsker dine lesere å svare, men i siste omgang ser du etter å tromme opp interessen og passere rundt interessante spennende informasjon til massene.

1. Bruk tabeller i layoutene dine

Dette kan virke litt motstridende mot dagens moderne webstandarder, men e-post er fortsatt arkaisk i sine gjengivelsesmotorer, og dermed må du bygge mot eldre modeller. Dessverre er bordene den enkleste måten for å få alt som fungerer riktig blant de ulike e-postklienter. Avhengig av din kunnskap om å bygge bordbaserte oppsett, kan dette faktisk komme som gode nyheter!

Du kan også lure på hvorfor div og andre blokkelementer er ikke så bra. De fleste e-postklienter er bygget for å fjerne eventuelle CSS innhold. Dette betyr at du ikke vil kunne bruke mye av noe bortsett fra inline CSS (og selv full støtte er skummel). Klienter som Microsoft Outlook 2007 og Googles Gmail har svært dårlig støtte for flytede elementer og direkte posisjonering.

Den beste løsningen ville være å nest flere bord i hverandre. Padding og margins er ikke satt til en bestemt skala mellom mange e-postklienter. Dette er en grunn til å holde fast ved bruk width = "verdi" på alle tabellcellene dine. Disse vil alltid vise samme bredde uansett hvilken e-postklient leserne bruker, så det er mye sikrere og mer konsistent å sette polstring og marginer ved hjelp av tomme tabellceller.

2. Fast-breddeposisjonering

Du har noen muligheter når du bygger utkastene til nyhetsbrevet ditt, men det beste alternativet å følge er å angi faste bredder for bordet ditt. Det er mange varierende skjermoppløsninger - du vil ikke være i stand til å behage alle. Hvis du ikke har bestemte elementer med statiske bredder, kan du alltid bruke width = "100%" på bordet ditt. Dette vil tillate innholdet ditt å fylle hele bredden på alle e-postklienter.

Men for mange er denne metoden litt for lax. Konstruktive nyhetsbrev vil kreve en fast bredde i de fleste tilfeller, spesielt hvis du bruker bannere og bilder satt til en bestemt størrelse. Jeg anbefaler å jobbe med 500px - 600px maksimal dokumentbredde. Den horisontale skjermstørrelsen på iPhone og noen BlackBerry-modeller er begrenset til 320px, så selv ved 500px vil din e-postmal være skalert ned for å passe ordentlig.

Med tanke på at mange mobile brukere velger å se e-post uten HTML, bør dette ikke være et stort problem. Brukere av desktop og webmail klienter vil trolig oppleve et lignende oppsett uavhengig av operativsystemet de bruker. Når du er i tvil Lag noen få maledesigner og velg de du liker best!

3. Pixel-enheter

Med mindre du bruker væskeelementer i nyhetsbrevet ditt, er det sannsynlig at du må formatere noen få ting. Prøv å holde den inne piksler (px) heller enn i en annen type enhet. Prosentandelene kan enkelt blandes med de mange webmailklientene og programvarevinduene. Med færre sideelementer kan væskeoppsettene komme ut uskadet, om enn med noen få feil.

Men piksler er alltid en sikker ting. Arbeider innenfor maksimal breddegrense på 600 px, du kan faktisk passe mye innhold inni. Eksponering er lettere hvis du deler oppsettene dine i to eller tre kolonner, og skriv alltid dine størrelser i piksler. Det eneste unntaket kan være til skriftstørrelser hvor eMS kan støtte leserne bedre, men em dimensjonering vil variere på samme måte som prosentandelene ville - så For enkelhetens skyld, hold deg til pixelbaserte justeringer.

4. Mulighetene med CSS

Det kan virke som e-postdesign er ute for å ødelegge bruken av CSS-stiler. Selv om det er mange funksjoner som ikke støttes, er CSS fortsatt godt akseptabelt i mange tilfeller. Kampanje Monitor har et vakkert bord med støttede CSS egenskaper som er oppført av e-postklient. Alle vil støtte det grunnleggende som font-family og fontstil, så du kan hoppe over merk hvis du ønsker det.

Vær forsiktig med skrifttypestiler for ikke å skyve grensene for langt. Hvis du føler deg ubehagelig med inline-stiler, er det alltid mulig å bruke HTML-font-taggen, selv om den er blitt utdatert. Hvis du er en CSS-designer, trenger du ikke å avslutte systemet, men en hvilken som helst kortfattet CSS-koding kan føre til buggy-design. Som et eksempel på font: 12px / 14px Arial, sans-serif; shorthand kan bidra til å spare mye plass, men det er ikke fullt akseptert for e-postdesign, selv når den brukes med inline-stiler.

Selv dine fargevalg bør skrives ut longhand. Hex farger som #ccc eller # e3f må skrives i sin helhet som #cccccc eller # ee33ff, henholdsvis. Hvis du kan bygge det du trenger uten CSS, vil jeg anbefale den banen, men ikke helt sjenert fra CSS i e-postdesign fordi det i motsetning til popular tro er støttet i de fleste tilfeller.

5. Ankerlinker Best Practices

Du vil sikkert inkludere noen koblinger til nyhetsbrevet ditt. Disse kan være utgående koblinger til andre sider rundt på nettet, eller kanskje lenker som fører til de mest populære sidene på nettstedet ditt. I tillegg vil de fleste footers inneholde en abonnementslink for leserne dine for å melde deg av e-postprosessen, men hvordan skal du håndtere alle disse linkene i ditt design?

Vel, det bør bemerkes først at e-postklienter er veldig finaktige med sine design. Mange vil velge å overskrive koblingsstilene dine, selv med inline CSS. Et pent trick er til inkludere både inline-farge og en ekstra spanke i ankerelementet. Hvis fargene og stylingen av koblingene er viktige for det overordnede designet, vil du ta ekstra forholdsregel. Jeg har lagt til et lite kodeeksempel nedenfor:

noen koblingstekst

Hover effekter er støttes ikke i Outlook 2007/2010, Gmail, iOS eller Android. Du vil kanskje fortsatt inkludere a: hover stil for alle støttende klienter: Outlook 2000/2003, Hotmail, Apple Mail og Yahoo! post, men personlig ser jeg ikke stor nytte i den delvise brukeropplevelsen, siden ankervalgene ikke er sterkt støttet, anbefaler jeg bare tilbyr 2-3 link farger å bruke gjennom hele designen din.

Som en formodning vil brukere også forvente at koblingene dine åpnes i en ny kategori eller et vindu. Ideelt sett target = "_ blank" Attributtet skal være tilstrekkelig for alle nettlesere å gjenkjenne denne funksjonaliteten, og inkluderingen av dette attributtet på ankerlinkene dine bør ikke påvirke e-postprogramvare som Lotus Notes eller Outlook negativt.

6. Test i alle større klienter

En nylig studie av mest populære e-postklienter (utført av Campaign Monitor) viser ti av de mest populære e-postklientene i det siste året. Det kan virke litt kjedelig, men designere bør bli vant til å sjekke nyhetsbrevene sine på alle større e-postklienter, i det minste på noen av de vanligste klientene som Gmail, Hotmail eller Yahoo! Post.

Dette inkluderer ikke webpost utelukkende, men også operativ programvare på både Mac OS X og Windows. Også i henhold til deres diagram iOS Mail og Android har begge raket inn i topp 10 listen de siste årene. Faktisk iPhone, iPod Touch og iPad Mail rangerer # 2 mest populære rett under Outlook! Dessverre er det ikke en måte å teste disse på uten å eie en av enhetene - så du må avgjøre med andre alternativer.

En feil med mobilstøtten kommer i mange iPhone- og Android-modeller. Mobil e-post gjengivelse vil ofte endre størrelsen på teksten i malen din. Dette kan ikke påvirke ditt design veldig mye, men det kan være irriterende for noen lesere. Bruke CSS -webkit-tekststørrelsesjustering: ingen;, vil sørg for en jevn standard tekststørrelse i alle parsing motorer uten å måtte teste det.

Hvis du kjenner venner eller kolleger som bruker alternativ programvare, kan det være lurt å Be om hjelp til å teste nyhetsbrevet. Du kan heller send dem en kopi av e-posten for å sjekke på enheten eller låne enheten å aktivt rydde ut kodende feil. Heldigvis tilbyr Outlook en Mac-installasjonsversjon, slik at du ikke trenger å spore opp en Windows-bruker for de optimaliseringene, men når det kommer til Lotus Notes eller Windows Mail, kan det hende du ikke har lykke.

Alternativet er å betale for en løsning som for eksempel Forhåndsvisning av min e-post, dessverre gir de ikke noen gratis demo-kontoer, men deres tjeneste er godt kjent for å tilby fantastiske forhåndsvisninger av designet. E-post på Acid er en lignende tjeneste som tilbyr en gratis konto, men lar deg ikke teste på alle klienter, hvilken slags beseirer formålet. Online renderingstjenester bør være nyttig hvis du må teste mange nyhetsbrevmaler på lang sikt uten bruk av alternative datamaskiner, men de er ikke grunnleggende, så ikke stress hvis du ikke kan teste dem alle!

7. Alltid tilby nettbaserte visninger

Leserne vil ikke alltid kunne (eller være villige) for å se e-posten din nativt. Tilbyr en annen versjon et sted på nettet vil gi en følelse av letthet og kompatibilitet. Denne prosessen kan ikke fullstendig automatiseres med mindre du ønsker å inkludere en vanlig tekst versjon.

På denne måten ville du stripe alle HTML-koder fra nyhetsbrevet. Du vil ikke kunne inkludere koblinger eller stiler for noe. Alt innhold ville ganske enkelt legges ut som en vanlig tekstfil for lesere uten rendering evner. Dette er absolutt et godt alternativ, men når du tilbyr en full webversjon av det samme nyhetsbrevet tar bort skaden som er gjort av en hvilken som helst gjenopprettingsfeil. De fleste lesere vil kjøre en oppdatert nettleser som du kan utforme og bygge nyhetsbrevet på og til perfeksjon.

Hvordan du oppretter siden er helt ditt valg. Noen nettsteder vil dedikere et helt blogginnlegg til å duplisere e-postens innhold, kanskje med noen tilleggsinformasjon. Andre vil opprett en egen side fra hovedwebsiden uten direkte koblinger i navigasjonen. Denne metoden kan være gunstig siden leserne ikke vil bli distrahert av din hovedside-webside mal eller sidebar innhold.

8. Legge til bildeinnhold

Bilder er en annen grunn til å tilby leserne en nettbasert løsning. Som standard, e-postklienter er satt til å fjerne bilder ut av innholdet. Hvis adressen din er lagt til i en sikker liste, vises alle bilder som standard, men brukeren må godta dette oppsettet så det er absolutt ingen garanti. Bare sørg for at bilder ikke kreves som en del av hovedinnholdet, men inkludert som en ekstra topping for siden estetikk.

Når du kommer til å eksportere grafikk, er det noen tips for å bygge bilder spesielt for e-post. Du vil alltid Sett inn både bredde og høydeattributter på din img tags. Uten disse spesifikasjonene i rekkefølge, Noen kunder vil forvride bildeinnholdet. en alt taggen vil også vise seg nyttig, slik at besøkende vil vite hva bildens innhold inneholder før det lastes inn.

Som nevnt tidligere kan plasseringen av bildene i e-posten bli vanskelig. Unngå å bruke flyter for enhver pris! Bildet innrette = "left" Attributtet vil fungere mye bedre, eller alternativt kartlegge nøyaktige tabellceller for å passe bildene dine langs toppen, venstre eller høyre side av nyhetsbrevet ditt. Du vil ikke kunne få en perfekt match-up med så mange kunder der ute (spesielt mobile klienter), men optimaliser bildene dine og Hold filstørrelsen liten for best resultat.

Når det gjelder bildelagring, anbefales det at du beholde alle filer på din egen webserver. Dette er det beste alternativet i stedet for å bruke en annen bildeserver, eller ved å laste opp filene til en nyhetsbrevtjeneste. I tillegg bør du skille innholdet til nyhetsbrevene dine bort fra resten av bildene dine i en mappestruktur som så / Img / e-post eller / Img / e-post / 2011.

9. Unngå Spam-mappen!

Dette kan være vanskelig å høre, men Ikke alle e-postklienter er vennlige mot nyhetsbrev. Det er milliarder e-postmeldinger som sendes hver dag, og flertallet inneholder søppelpost eller skadelig innhold. Derfor er det sikkert at disse sikkerhetsmåtene er innebygd i innboksen for sikkerhetsforanstaltninger.

Men når det gjelder internett markedsføring, kan du lett fraråtte å se ditt siste nyhetsbrev ende opp med søppel. For å redusere sjansene for dette skjer bør du Ryd opp designet ditt for enkelhet. Ikke gjør irriterende bilder eller blås opp tittelteksten med hundrevis av søkeord.

Prøv også å Hold innholdet ditt kort og på temaet. Du trenger ikke å inkludere fullt innhold for alle artiklene dine eller sidene. Prøv å legge til en setning eller to med en alternativ lenke til nettstedet ditt i stedet for en lang liste. De mer kort din e-post ser ut, desto mer sannsynlig vil det passere spam inspeksjon.

Nyhetsbrev Design Gallery

Hva gøy ville en e-post nyhetsbrev artikkelen være uten noen fantastiske eksempler? Det er tonnevis av e-postvarsler og maler for å sjekke ut i Google. HTML E-post Gallery er en veldig populær kilde for inspirasjon.

Nedenfor har jeg tatt med skjermbilder fra de mange nyhetsbrevene i kampanjemonitorens galleri. Forhåpentligvis kan disse flotte layoutene gi deg gode ideer til dine egne design.

Ha det gøy å designe dine ideelle nyhetsbrev!

Alertful for Business