9 tricks til at designe det perfekte HTML-nyhedsbrev

Et e-mail-nyhedsbrev er den perfekte måde at holde kontakten med dine kunder eller tilhængere. Ofte vil din virksomhed eller hjemmeside have mange produktopdateringer eller eventuelt kommende arrangementer, du gerne vil dele. Det er altid muligt at sende nye oplysninger til dine blog- eller socialmediestrømme, men dit publikum kan kun gå så langt for at nå dig. I dette tilfælde er e-mail bestemt ikke død teknologi, kun uudnyttet potentiale.

Processen med at oprette og sende et nyhedsbrev er meget lettere end man måske tror, men at designe en brugerdefineret skabelon og opbygge din egen kode - det kan tage lidt længere tid.

Vi har samlet nogle fantastiske tips til at få dig til at designe høykvalitets HTML-nyhedsbreve som aldrig før. Selvom du er nybegynder til emnet, finder du sikkert nogle uvurderlige oplysninger for at komme i gang i e-mail-marketingprocessen.

Mål for et nyhedsbrev

Før vi kommer ind i designaspekterne, bør vi præcisere dit formål med at opbygge et nyhedsbrev. Afhængigt af hvilken type websted du kører, kan oplysningerne i dit nyhedsbrev variere dramatisk fra andre, men det centrale formål med et nyhedsbrev er at levere praktiske opdateringer lige til din læsers indbakke.

Heavy internetbrugere vil sandsynligvis kontrollere deres e-mail mere end to gange om dagen. Selv de, der er konstant optaget, tager tid til at gennemgå deres budskaber mindst en gang om dagen. Dette er den perfekte tid til fange opmærksomhed selv uden at kræve besøg på dit websted. Selvom ingen klikker på dine links, er oplysningerne stadig modtaget, hvilket er fantastisk til opbygning af et mærke.

Overvej nogle af de emner, du måtte tilbyde i dit design. Inkluderer du links til tilmelding til din tjeneste; muligvis blog links eller senest offentliggjorte artikler på dit websted? Layoutet på dit nyhedsbrev vil afspejle, hvordan du ønsker dine læsere at reagere, men i sidste ende søger du at tromme op i interessen og videregive nogle interessante tiders information til masserne.

1. Brug tabeller i dine layouter

Dette kan virke lidt modstridende mod nutidens moderne webstandarder, men e-mails er stadig arkaiske i deres gengivelsesmotorer, og derfor skal du bygge mod ældre modeller. Desværre er tabellerne den nemmeste måde for at få alt til at fungere ordentligt blandt de forskellige e-mail-klienter. Afhængigt af din viden om bygning af bordbaserede layouter, kan dette faktisk komme som gode nyheder!

Du kan også undre sig over hvorfor div og andre blokelementer er ikke så god ide. De fleste e-mail-klienter er bygget til at fjerne alle former for CSS indhold. Det betyder, at du ikke vil kunne bruge meget af noget bortset fra inline CSS (og endda fuld støtte er lunken). Kunder som Microsoft Outlook 2007 og Googles Gmail har meget dårlig support til flydende elementer og direkte positionering.

Den bedste løsning ville være at reden flere tabeller inde i hinanden. Padding og marginer er ikke indstillet til en bestemt skala mellem mange e-mail-klienter. Dette er en grund til at holde fast ved at bruge width = "værdi" på alle dine celleelementer. Disse vil altid vise samme bredde, uanset hvilken e-mail-klient dine læsere bruger, så det er meget sikrere og mere konsekvente at indstille polstring og margener ved hjælp af tomme bordceller.

2. Fastbreddepositionering

Du har et par muligheder, når du bygger udkastene til dit nyhedsbrev layout, men den bedste mulighed for at følge er for at indstille faste bredder for dit bord. Der er mange forskellige skærmopløsninger - du vil ikke være i stand til at behage alle. Hvis du ikke har bestemte elementer med statiske bredder, kan du altid bruge width = "100%" på din indeholdende bord. Dette gør det muligt for dit indhold at udfylde hele bredden af alle e-mail-klienter.

Men for mange er denne metode lidt for lax. Konstruktive nyhedsbreve vil kræve en fast bredde i de fleste tilfælde, især hvis du bruger bannere og billeder sat til en bestemt størrelse. Jeg anbefaler at arbejde med 500px - 600px maksimal dokumentbredde. Den horisontale skærmstørrelse på iPhone og nogle BlackBerry-modeller er begrænset til 320px, så selv ved 500px bliver din e-mail-skabelon nedskaleret for at passe ordentligt.

I betragtning af at mange mobile brugere vælger at se e-mail uden HTML alligevel, bør dette ikke være et stort problem. Brugere af desktop- og webmailklienter vil sandsynligvis opleve en lignende opsætning uanset hvilket operativsystem de bruger. Når I tvivl lav et par skabelon designs og Vælg dem, du bedst kan lide!

3. Pixel enheder

Medmindre du bruger væskeelementer i dit nyhedsbrev, er det sandsynligt, at du skal dimensionere et par ting. Prøv at holde den inde pixels (px) snarere end i en anden type enhed. Procentdele kan nemt blandes med de mange webmail klienter og software vinduer. Med færre sideelementer kan væskeformater komme ud uskadt, om end med nogle få fejl.

Men pixels er altid en sikker ting. Arbejder inden for 600px maks. Breddegrænse, du kan faktisk passe meget indhold indeni. Eksponering er nemmere, hvis du deler dine layouter i to eller tre kolonner, og skriv altid dine størrelser i pixels. Den eneste undtagelse kan være at skrifttypestørrelser hvor ems kan understøtte dine læsere bedre, men em dimensionering vil variere på samme måde som procentdele ville - så For nemheds skyld holder vi sig til pixelbaserede tilpasninger.

4. Mulighederne med CSS

Det kan virke som om e-mail-design er ude for at ødelægge brugen af CSS-stilarter. Selv om der er mange funktioner, der ikke understøttes, er CSS stadig meget acceptabel i mange tilfælde. Kampagneovervågning har et smukt bord med understøttede CSS-egenskaber angivet af e-mail-klienten. Alle vil støtte det grundlæggende som font-family og skrifttype, så du kan springe over tag hvis du ønsker det.

Vær forsigtig med dine skrifttypestile for ikke at skubbe grænserne for langt. Hvis du føler dig ubehagelig med inline-stilarter, er det altid muligt at bruge HTML-skrifttags-taggen, selvom den er blevet udskrevet. Hvis du er en CSS-designer, behøver du ikke at afslutte systemet, men en hvilken som helst stenografi CSS-kodning kan resultere i buggy designs. Som et eksempel på skrifttype: 12px / 14px Arial, sans-serif; stenografi kan hjælpe med at spare meget plads, men det er ikke fuldt accepteret til e-mail-design, selv når det bruges til inline-stilarter.

Selv dine farvevalg bør skrives ud longhand. Hex farver som #ccc eller # e3f skal skrives i sin helhed som #cccccc eller # ee33ff, henholdsvis. Hvis du kan bygge det, du har brug for uden CSS, vil jeg anbefale den vej, men lad mig ikke helt vige væk fra CSS i e-mail-design, fordi det i modstrid med populær tro understøttes i de fleste tilfælde.

5. Anker Links Best Practices

Du vil helt sikkert have nogle links til dit nyhedsbrev. Disse kan være udgående links til andre sider på internettet, eller måske links der fører til de mest populære sider på din hjemmeside. Derudover vil de fleste footers indeholde et afmeldingslink til dine læsere for at afvige fra e-mail-processen, men hvordan skal du håndtere alle disse links i dit design?

Nå skal det først bemærkes, at e-mail-klienter er meget finicky med deres designs. Mange vælger at overskrive dine linkformater, selv med inline CSS. Et pænt trick er at inkludere både inline farve og en ekstra span tag inden for ankerelementet. Hvis farve og styling af dine links er vigtige for det overordnede design, vil du gerne tage den ekstra forholdsregel. Jeg har tilføjet et lille kodeeksempel nedenfor:

nogle linktekst

Hover effekter er understøttes ikke i Outlook 2007/2010, Gmail, iOS eller Android. Du vil muligvis stadig gerne medtage a: hover stil til alle støttende kunder: Outlook 2000/2003, Hotmail, Apple Mail og Yahoo! mail, men personligt ser jeg ikke stor fordel i den delvise brugeroplevelse, da ankervalgene ikke er stærkt understøttede, anbefaler jeg tilbyder kun 2-3 linkfarver at bruge i hele dit design.

Som en formodning vil brugerne også forvente, at dine links åbnes i en ny fane eller et vindue. Ideelt set target = "_ blank" attributten skal være tilstrækkelig for alle browsere til at genkende denne funktionalitet, og inkluderingen af denne attribut på dine ankerforbindelser må ikke påvirke e-mail-software som f.eks. Lotus Notes eller Outlook negativt.

6. Test i alle større kunder

En nylig undersøgelse af mest populære e-mail-klienter (udført af Campaign Monitor) viser ti af de mest populære e-mail-klienter i det forløbne år. Det kan virke lidt kedeligt, men designere bør være vant til at kontrollere deres nyhedsbreve på alle større e-mail-klienter, i det mindste på nogle af de mere almindelige klienter som Gmail, Hotmail eller Yahoo! Post.

Dette omfatter ikke webmail udelukkende, men også driftssoftware på både Mac OS X og Windows. Også i henhold til deres diagram iOS Mail og Android har begge raket ind i top 10 listen i løbet af de sidste par år. Faktisk iPhone, iPod Touch og iPad Mail rangerer # 2 mest populære højre under Outlook! Desværre er der ingen måde at teste disse på uden at eje en af enhederne - så du bliver nødt til at afvikle med andre muligheder.

En fejl med mobil support kommer i mange iPhone og Android modeller. Mobil e-mail-gengivelse vil ofte Ændre størrelsen på teksten inde i din skabelon. Dette kan ikke påvirke dit design meget, men det kan være irriterende for nogle læsere. Brug af CSS -webkit-tekststørrelsesjustering: ingen;, vilje sikre en jævn standard tekststørrelse i alle parsingmotorer uden at skulle teste det.

Hvis du kender venner eller kolleger, der bruger alternativ software, kan du ønske at bede om deres hjælp til at teste nyhedsbrevet. Du kan enten send dem en kopi af e-mailen at kontrollere deres enhed eller låne enheden for aktivt at fjerne kodningsfejl. Heldigvis tilbyder Outlook en Mac-installeringsversion, så du ikke behøver at spore en Windows-bruger til disse optimeringer, men når det kommer til Lotus Notes eller Windows Mail, kan du være ude af held.

Alternativet er at betale for en løsning som eksempelvis min e-mail, desværre giver de ikke nogen gratis demo-konti, men deres service er velkendt for at tilbyde fantastiske forhåndsvisninger af dit design. E-mail på Acid er en lignende tjeneste, som tilbyder en gratis konto, men giver dig ikke mulighed for at teste på alle klienter, hvilken slags besejrer formålet. Online renderingstjenester skal være nyttige, hvis du skal teste mange nyhedsmaler på lang sigt uden brug af alternative computere, men de er ikke grundlæggende, så stress ikke hvis du ikke kan teste dem alle!

7. Altid tilbyde webbaserede visninger

Læsere vil ikke altid (eller være villige) kunne se din e-mail indbygget. Tilbyder en anden version et eller andet sted på nettet vil give en følelse af lethed og kompatibilitet. Denne proces kan ikke fuldføres automatisk, medmindre du ønsker at inkludere en simpel tekst version.

På den måde ville du strip alle HTML tags fra nyhedsbrevet layout. Du ville ikke kunne inkludere links eller stilarter til noget. Alt indhold ville simpelthen udlægges som en almindelig tekstfil til læsere uden gengivelsesfunktioner. Dette er helt sikkert et godt alternativ, men når du tilbyder en fuld webversion af det samme nyhedsbrev, er det det tager væk skaden udført af en hvilken som helst rendering fejl. De fleste læsere kører en opdateret webbrowser, som du kan style og bygge dit nyhedsbrev på og til perfektion.

Hvordan du opretter siden er helt dit valg. Nogle websteder vil dedikere et helt blogindlæg til at duplikere e-mailens indhold, måske med nogle Yderligere Information. Andre vil opret en separat side fra hovedwebstedet uden direkte links i navigationen. Denne metode kan være gavnlig, da læsere ikke vil blive distraheret af din primære hjemmeside skabelon eller sidebar indhold.

8. Tilføjelse af billedindhold

Billeder er en anden grund til at tilbyde dine læsere en web-baseret løsning. Som standard e-mail klienter er indstillet til at strippe billeder ud af indholdet. Hvis din adresse er tilføjet til en sikker liste, vises alle billeder som standard, men brugeren skal acceptere denne opsætning så det er bestemt ikke en garanti. Lige Sørg for, at billeder ikke er nødvendige som en del af hovedindholdet, men inkluderet som en ekstra topping til side æstetik.

Når du kommer til at eksportere grafik, er der et par tips til at bygge billeder specifikt til e-mail. Du vil altid Indstil både bredde og højde attributter på din img tags. Uden disse specifikationer i rækkefølge, nogle kunder vil fordreje billedindholdet. en alt tag vil også vise sig nyttigt, så besøgende vil vide, hvad billedindholdet indeholder, inden det indlæses.

Som nævnt før kan positionering af billederne i din e-mail blive vanskelig. Undgå at bruge flyder for en hver pris! Billedet align = "left" Attributtet vil fungere meget bedre, eller alternativt kortlægge præcise tabelceller for at passe dine billeder langs øverste, venstre eller højre side af dit nyhedsbrev. Du vil ikke kunne få en perfekt match-up med så mange klienter derude (især mobile klienter), men optimer dine billeder og Hold filstørrelsen lille for at opnå de bedste resultater.

Hvad angår billedlager, anbefales det at du Gem alle filer på din egen webserver. Dette er den bedste mulighed i stedet for at bruge en anden billedvært eller ved at uploade filerne til en online nyhedsbrev-tjeneste. Derudover skal du adskille indholdet til dine nyhedsbreve væk fra resten af dine billeder i en mappestruktur ligesom / Img / e-mail eller / Img / email / 2011.

9. Undgå spammappen!

Dette kan være svært at høre, men Ikke alle e-mail-klienter er venlige mod nyhedsbreve. Der sendes milliarder af e-mails hver dag, og flertallet indeholder spam eller ondsindet indhold. Derfor er disse sikkerhedsforanstaltninger indbygget i indbakken klart for sikkerhedsforanstaltninger.

Men når det kommer til internet marketing, kan du let blive afskrækket for at se dit seneste nyhedsbrev ender med uønsket. For at mindske chancerne for dette sker, bør du rydde op dit design for enkelhed. Gør ikke irriterende billeder eller sprænge din titeltekst med hundredvis af søgeord.

Prøv også at Hold dit indhold kort og på emnet. Du behøver ikke at medtage fuldt indhold for alle dine artikler eller sider. Prøv at tilføje en sætning eller to med et alternativt link ud til din hjemmeside i stedet for en lang liste. Det mere kort din e-mail ser ud, desto mere sandsynligt vil det passere spam inspektion.

Nyhedsbrev Design Gallery

Hvor sjovt ville en e-mail-nyhedsartikel være uden nogle fantastiske eksempler? Der er masser af e-mail-nyhedsbrevdesigner og skabeloner til at tjekke ud i Google. HTML E-mail Gallery er en meget populær kilde til inspiration.

Nedenfor har jeg inkluderet skærmbilleder fra de mange nyhedsbreve i Campaign Monitors galleri. Forhåbentlig kan disse fantastiske layouter give dig nogle gode ideer til dine egne designs.

Har det sjovt at designe dine ideelle nyhedsbreve!

Alertful for Business