9 tricks för att designa den perfekta HTML-nyhetsbrevet

Ett nyhetsbrev är det perfekta sättet att hålla kontakten med dina kunder eller anhängare. Ofta kommer ditt företag eller hemsida att ha många produktuppdateringar, eller eventuellt kommande evenemang du skulle vilja dela med. Det är alltid möjligt att skicka ny information till dina bloggar eller sociala medier, men din publik kan bara gå så långt för att nå dig. I det här fallet är e-post verkligen inte död teknik, bara outnyttjad potential.

Processen att skapa och skicka ett nyhetsbrev är mycket lättare än man kanske tror, men att designa en anpassad mall och bygga din egen kod - det kan ta lite längre tid.

Vi har sammanställt några fantastiska tips för att få dig att utforma högkvalitativa HTML-nyhetsbrev som aldrig tidigare. Även om du är nybörjare till ämnet hittar du säkert ovärderlig information för att komma igång i e-postmarknadsföringsprocessen.

Mål för en nyhetsbrev

Innan vi går in i designaspekterna bör vi klargöra ditt syfte att bygga ett nyhetsbrev. Beroende på vilken typ av webbplats du kör kan informationen i ditt nyhetsbrev variera dramatiskt från andra, men det centrala syftet med ett nyhetsbrev är att leverera praktiska uppdateringar direkt till din läsarens inkorg.

Tunga internetanvändare kommer sannolikt att kontrollera sina e-postmeddelanden mer än två gånger om dagen. Även de som är ständigt upptagna tar tid att gå igenom sina meddelanden minst en gång om dagen. Detta är den perfekta tiden att fånga uppmärksamhet även utan att kräva besök på din webbplats. Även om ingen klickar igenom dina länkar är informationen fortfarande mottagen, vilket är bra för att bygga ett varumärke.

Tänk på några av de ämnen du skulle behöva erbjuda i din design. Inkluderar du länkar till registrering för din tjänst; eventuellt blogg länkar eller senast publicerade artiklar på din webbplats? Utformningen av ditt nyhetsbrev kommer att återspegla hur du önskar dina läsare att svara, men i slutändan letar du efter att intressera dig och skicka runt några intressanta tips för information till massorna.

1. Använd tabeller i dina layouter

Det kan verka lite motstridigt mot dagens moderna webbstandarder, men e-postmeddelanden är fortfarande arkaiska i sina återgivningsmotorer, så du måste bygga mot äldre modeller. Tyvärr är borden det enklaste sättet för att få allt som fungerar ordentligt bland de olika e-postklienterna. Beroende på din kunskap om att bygga bordsbaserade layouter kan det faktiskt komma som goda nyheter!

Du kanske också undrar varför div och andra blockelement är inte så bra. De flesta e-postklienter är byggd för att avlägsna alla externa CSS innehåll. Det betyder att du inte kommer att kunna använda mycket av allt utom inline CSS (och till och med fullt stöd är skummigt). Klienter som Microsoft Outlook 2007 och Googles Gmail har mycket dåligt stöd för flytande element och direkt positionering.

Den bästa lösningen skulle vara att bo flera bord inuti varandra. Padding och marginaler är inte inställda i en viss skala mellan många e-postklienter. Detta är en anledning att hålla sig till med width = "värde" på alla dina tabellcellselementer. Dessa kommer alltid att visa samma bredd oavsett vilken e-postklient dina läsare använder, så det är mycket säkrare och mer konsekvent att ställa in vaddering och marginaler med tomma bordceller.

2. Fast-breddspositionering

Du har några alternativ när du bygger utkasten till ditt nyhetsbrevlayout, men det bästa alternativet att följa är för att ställa in fasta bredder för ditt bord. Det finns många olika skärmupplösningar - du kommer inte att kunna glädja alla. Om du inte har några specifika element med statiska bredder, kan du alltid använda width = "100%" på din innehålla bordet. Detta gör det möjligt för ditt innehåll att fylla hela bredden på alla e-postklienter.

Men för många är den här metoden lite för lax. Konstruktiva nyhetsbrev kommer i de flesta fall att kräva en fast bredd, speciellt om du använder banners och bilder som är inställda i en viss storlek. Jag rekommenderar att du arbetar med 500px - 600px maximal dokumentbredd. Den horisontella skärmstorleken på iPhone och vissa BlackBerry-modeller är begränsad till 320px, så även vid 500px kommer din e-postmall att vara skalas ner för att passa ordentligt.

Med tanke på att många mobila användare väljer att se e-post utan HTML, borde det inte vara ett stort problem. Användare av skrivbord och webmail klienter kommer sannolikt att uppleva en liknande inställning oavsett operativsystem som de använder. När du är i tvivel skapa några malldesigner och välj de som du gillar bäst!

3. Pixelenheter

Om du inte använder flytande element i ditt nyhetsbrev är det troligt att du måste förstora några saker. Försök att behålla den pixlar (px) snarare än i en annan typ av enhet. Procentandelar kan enkelt blandas med de många webmailklienterna och programfönstren. Med färre sidelement kan vätskeformat komma ut oskadat, om än med några få buggar.

Men pixlar är alltid en säker sak. Arbetar inom 600x max breddgräns, du kan faktiskt passa mycket innehåll inuti. Exponering är lättare om du delar upp dina layouter i två eller tre kolumner, och skriv alltid dina storlekar i pixlar. Det enda undantaget kan vara att typsnittstorlekar var ems kan stödja dina läsare bättre, men em limning kommer att skilja sig på samma sätt som procentandelar skulle - så För enkelhetens skull håller du dig till pixelbaserade anpassningar.

4. Möjligheterna med CSS

Det kan tyckas att e-postdesign är ute för att förstöra användningen av CSS-format. Även om det finns många ostödda funktioner är CSS fortfarande helt acceptabelt i många fall. Kampanjövervakaren har ett vackert bord med stödda CSS-egenskaper som listas av e-postklienten. Alla kommer att stödja grunderna som typsnittsfamilj och typsnitt, så du kan hoppa över tagga om du vill.

Var försiktig med dina typsnittstyp för att inte skjuta gränserna för långt. Om du inte känner dig obekväm med inline-stilar, är det alltid möjligt att använda HTML-teckensnittet, även om det har avlägsnats. Om du är en CSS-designer behöver du inte avsluta systemet, men någon kortfattad CSS-kodning kan resultera i buggy-design. Som ett exempel typsnitt: 12px / 14px Arial, sans-serif; stenografi kan hjälpa till att spara mycket utrymme, men det är inte fullt godkänt för e-postdesign, även när den används med inline-stilar.

Även dina färgval bör skrivas ut longhand. Hex färger som #ccc eller # e3f måste skrivas i sin helhet som #CCCCCC eller # ee33ff, respektive. Om du kan bygga det du behöver utan CSS skulle jag rekommendera den här vägen, men är inte helt blyg från CSS i e-postdesign eftersom det i de flesta fall stöder folkens övertygelse.

5. Anchor Links Best Practices

Du kommer säkert att inkludera några länkar till ditt nyhetsbrev. Dessa kan vara utgående länkar till andra sidor på webben, eller kanske länkar som leder till de mest populära sidorna på din webbplats. Dessutom kommer de flesta sidflikar att innehålla en avbrytande länk för dina läsare att välja bort e-postprocessen, men hur ska du hantera alla dessa länkar i ditt design?

Tja, det bör först noteras att e-postklienterna är väldigt fina med sina mönster. Många kommer att välja att skriva över dina länkstilar, även med inline CSS. Ett snyggt trick är att Inkludera både inlinefärg och en extra spännmärkning inom förankringselementet. Om färg och styling av dina länkar är viktiga för den övergripande designen, vill du vidta extra försiktighet. Jag har lagt till ett litet kodexempel nedan:

lite länktext

Höger effekter är stöds inte i Outlook 2007/2010, Gmail, iOS eller Android. Du kanske fortfarande vill inkludera a: hover stil för alla stödjande kunder: Outlook 2000/2003, Hotmail, Apple Mail och Yahoo! post, men personligen ser jag inte stor nytta i den partiella användarupplevelsen, eftersom ankarselektorerna inte är starkt stödda jag rekommenderar erbjuder bara 2-3 länkfärger att använda i hela din design.

Som en presumtion kommer användarna också att förvänta att dina länkar öppnas i en ny flik eller ett fönster. Helst target = "_ blank" attributet ska räcka för att alla webbläsare kan känna igen denna funktion och att inkludering av detta attribut på dina ankarlänkar inte skulle påverka e-postprogramvaran negativt, till exempel Lotus Notes eller Outlook antingen.

6. Test i alla större kunder

En ny studie av populäraste e-postklienter (gjord av Campaign Monitor) visar tio av de mest populära e-postklienterna under det gångna året. Det kan tyckas lite tråkigt men designers borde vara vana att kolla deras nyhetsbrev på alla större e-postklienter, åtminstone på några av de vanligaste kunderna som Gmail, Hotmail eller Yahoo! Post.

Detta inkluderar inte webbmail ensam, utan även operativprogramvara på både Mac OS X och Windows. Också enligt deras diagram iOS Mail och Android har båda rocketed i topp 10 listan under de senaste åren. Faktum är iPhone, iPod Touch och iPad Mail rankad som # 2 mest populära under Outlook! Tyvärr finns det inget sätt att testa dessa utan att äga en av enheterna - så du måste lösa med andra alternativ.

En bugg med mobilstöd kommer i många iPhone- och Android-modeller. Mobil e-post återgivning kommer ofta ändra storlek på texten i din mall. Detta kan inte påverka din design väldigt mycket, men det kan vara irriterande för vissa läsare. Använda CSS -webkit-textstorleksjustering: ingen;, kommer säkerställa en jämn standardtextstorlek i alla parsningsmotorer utan att behöva testa det.

Om du känner till några vänner eller kollegor som använder alternativ programvara kanske du vill be om hjälp om att testa nyhetsbrevet. Du kan antingen skicka dem en kopia av e-postmeddelandet att kolla på deras enhet eller låna enheten att aktivt rensa ut kodningsbuggar. Lyckligtvis erbjuder Outlook en Mac-installationsversion så att du inte behöver spåra en Windows-användare för dessa optimeringar, men när det gäller Lotus Notes eller Windows Mail kan du vara otur.

Alternativet är att betala för en lösning som förhandsvisa mitt e-postmeddelande, tyvärr tillhandahåller de inga gratis demokonton, men deras service är välkänd för att erbjuda fantastiska förhandsgranskningar av din design. E-post på Acid är en liknande tjänst som erbjuder ett gratis konto, men låter dig inte testa på alla klienter, vilken slags besegrar syftet. Online-renderingstjänster bör vara användbara om du behöver testa många nyhetsbrevsmallar på lång sikt utan att använda andra datorer, men de är inte grundläggande, så stressa inte om du inte kan testa dem alla!

7. Alltid erbjuda webbaserade visningar

Läsare kommer inte alltid att kunna (eller vara villiga) för att se ditt e-postnummer. Erbjuder en annan version någonstans på webben kommer att ge en känsla av lätthet och kompatibilitet. Denna process kan inte helt automatiseras om du inte vill inkludera en oformatterad text version.

På så sätt skulle du ta bort alla HTML-taggar från nyhetsbrevslayouten. Du skulle inte kunna inkludera länkar eller stilar för någonting. Allt innehåll skulle helt enkelt läggas ut som en vanlig textfil för läsare utan återgivningskapacitet. Det här är verkligen ett bra alternativ, men när du erbjuder en fullständig webbversion av samma nyhetsbrev det tar bort skadan som görs av någon återgivningsfel. De flesta läsare kommer att köra en uppdaterad webbläsare som du kan utforma och bygga ditt nyhetsbrev på och till perfektion.

Hur du ställer in sidan är helt ditt val. Vissa webbplatser kommer att ägna en hel bloggpost för att duplicera e-postens innehåll, kanske med några ytterligare information. Andra kommer skapa en separat sida från huvudwebbplatsen utan några direkta länkar i navigeringen. Den här metoden kan vara till nytta eftersom läsarna inte kommer att distraheras av din huvudsakliga webbplatsmall eller sidofältets innehåll.

8. Lägga till bildinnehåll

Bilder är en annan anledning att erbjuda dina läsare en webbaserad lösning. Som standard, e-postklienter är inställda att ta bort bilder ur innehållet. Om din adress läggs till i en säker lista visas alla bilder som standard, men användaren måste acceptera denna inställning så det är verkligen ingen garanti. Bara se till att bilder inte krävs som en del av huvudinnehållet, men ingår som en extra toppning för sidan estetik.

När du väl har exporterat grafik finns det några tips för att bygga bilder specifikt för e-post. Du vill alltid Ange både bredd och höjdattribut på din img taggar. Utan dessa specifikationer i ordning, vissa kunder kommer att snedvrida bildinnehållet. En alt taggen kommer också att vara användbar, så besökare kommer att veta vad bildinnehållet innehåller innan det laddas.

Som tidigare nämnts kan det vara svårt att placera bilderna i ditt e-postmeddelande. Undvik att använda flottor till varje pris! Bilden align = "left" Attribut kommer att fungera mycket bättre, eller alternativt kartlägga exakta tabellceller för att passa dina bilder längst upp, vänster eller höger sida av ditt nyhetsbrev. Du kommer inte att kunna få en perfekt matchning med så många kunder där ute (särskilt mobila klienter), men optimera dina bilder och behåll filstorlekarna små för bästa resultat.

När det gäller bildlagring rekommenderas det att du behåll alla filer på din egen webbserver. Det här är det bättre alternativet istället för att använda en annan bild värd, eller genom att ladda upp filerna till en online nyhetsbrev tjänst. Dessutom bör du separera innehållet för dina nyhetsbrev bort från resten av dina bilder i en mappstruktur såhär / Img / e eller / Img / email / 2011.

9. Undvik Spam-mappen!

Detta kan vara svårt att höra, men inte alla e-postklienter är vänliga mot nyhetsbrev. Det finns miljarder e-postmeddelanden som skickas varje dag och majoriteten innehåller skräppost eller skadligt innehåll. Därmed är det säkert att säkerhetsåtgärderna är inbyggda i inkorgen..

Men när det gäller Internet marknadsföring, kan du lätt bli avskräckt för att se ditt senaste nyhetsbrev sluta med skräpet. För att minska risken för detta händer bör du städa upp din design för enkelhet. Gör inte irriterande bilder eller spräng din titeltext med hundratals sökord.

Försök också att Håll ditt innehåll kort och på ämnet. Du behöver inte inkludera fullständigt innehåll för alla dina artiklar eller sidor. Försök lägga till en mening eller två med en alternativ länk till din webbplats i stället för en lång lista. De mer kortfattat ditt e-mail ser ut, ju mer sannolikt det kommer att passera spam inspektion.

Nyhetsbrev Design Gallery

Vilken kul skulle en artikel om e-post nyhetsbrev vara utan några fantastiska exempel? Det finns massor av nyhetsbrevdesigner och mallar för att kolla in Google. HTML E-mail Gallery är en mycket populär källa för inspiration.

Nedan har jag inkluderat skärmdumpar från de många nyhetsbreven i Kampanjmonitorens galleri. Förhoppningsvis kan dessa fantastiska layouter ge dig några bra idéer för dina egna mönster.

Ha kul att designa dina ideala nyhetsbrev!

Alertful for Business