Share
HTML-e-post är ett bra sätt att hålla kunderna uppdaterade om de senaste uppdateringarna som är relaterade till ditt företag eller produkt, men de är lite knepiga. CSS-stöd i e-postklienter är inkonsekvent. Som ett resultat måste vi tillgripa gamla tekniker, såsom att använda bord och inline CSS. Idag ska jag gå igenom processen med att skapa enkla HTML-e-postmeddelanden.
Som en frilans webbutvecklare är kodning av HTML-e-post en av de mer utmanande uppgifter som jag måste hantera. Lyckligtvis, när en av mina första kunder begärde mig att designa och koda sitt nyhetsbrev, var han tålmodig nog att låta mig gå igenom den långa och frustrerande processen att räkna ut allt. Du kanske inte är så lycklig, så förbered dig själv med denna handledning.
Tror du att IE är en smärta i rumpan? Vänta tills du möter Outlook 2007. På grund av de stora skillnaderna i HTML / CSS-återgivning mellan e-postklienter, med hjälp av moderna kodningstekniker, kommer det att resultera i en ganska katastrofal röra i många populära e-postklienter. E-postklienter gör helt enkelt inte HTML på samma sätt som webbläsare gör - inte ens nära i många fall. Saker som floats, bakgrundsbilder och jämn marginal ingår inte längre i ditt ordförråd. Så vad är en standard-lovande kodare att göra?
Det är rätt. Tabeller. Cellpadding, cellspacing, colspan, alla de brutna saker du trodde du hade lämnat bakom sig. Tabeller är det enda sättet att få konsekventa email layouter, så det är dags att (tillfälligt) glömma dina CSS-kärleksfulla sätt och omfamna un-semantiska, röriga tabeller.
När du utformar en HTML-e-post, behåll enkelheten i åtanke. Den design som vi använder idag har flera kolumnlayouter, mestadels för demonstration, men överväga att hålla sig till två kolumner hela tiden när du kodar ditt eget nyhetsbrev för att rädda dig mycket huvudvärk.
Kom ihåg att inte bli för fancy med dina mönster eftersom Outlook inte stöder bakgrundsbilder. Faktum är att du kanske vill hoppa över Photoshop-processen helt och hållet för att tvinga dig att behålla designen praktiskt, beroende på din kunds behov. Med det sagt använder vi Photoshop här så att du kan få en bättre bild av vår plan.
Du kan använda bakgrundsbilder av dekorativa skäl, så länge som e-posten är läsbar och meningsfull utan dem. Till exempel lägger vi till en liten gradient i vår rubrik, men det är inte så mycket om det inte dyker upp.
Eftersom Windows-förhandsgranskningsrutiner för e-postklienter ofta är en liten del av skärmens bredd, vill du generellt hålla din design under ca 600px. Ingen gillar horisontella rullrullar.
Kom ihåg att vi ska använda oflexibla egenskaper som cellpadding och cellspacing för att skilja ut våra element. Det är klokt att försöka hålla avståndet mellan elementen konsekvent.
Denna design liknar en som jag använde för ett kundnyhetsbrev förra sommaren, men förenklat. Det är inte vackert, men det är inte meningen här. Det är enkelt och konsekvent och har ett antal layoutalternativ så att du kan se hur de skiljer sig åt.
I mina erfarenheter blir HTML-e-postkoden mycket komplicerad, mycket snabbt. Det är viktigt att ha en plan för attack. Så här är planen (vi kommer tillbaka till det här, oroa dig inte om du inte följer).
Först, Vi börjar med ett stort 100% breddbord med en grå bakgrund, det här är vårt "wrapper" bord.
Nästa upp, notera att det finns ytterligare tre tabeller inuti omslagstabellen: en överst för länken "Visa i webbläsare", en i mitten för huvudinnehållet och en längst ner för "unsubscribe" länken.
Till sist, inom huvudtabellen ligger varje horisontell del av innehållet inom en tabellrad och en tabellcell. Dessa tabellceller kommer i sin tur att innehålla en annan tabell för att vara värd för varje innehållsavsnitt:
I stället för att använda marginal och stoppning CSS egenskaper, vi ska använda cellpadding och cellspacing HTML attribut. Tänk på cellpadding som att vara ungefär samma som CSS-padding - utrymme inne i ett element runt innehållet. Cellspacing är utrymmet mellan dataceller på ett bord.
Vår #main bordet kommer att ha 15px av cellrummet, så att vi ska ha 15px av blankutrymme runt hela huvudinnehållet, och 15px mellan varje horisontell grupp. Cellpadding och cellspace gäller bara för föräldrabordet, inte barnen. Om vi inte vill ha någon cellpadding eller cellspace måste vi ange det för varje tabell.
Nu kan vi börja processen med att koda vårt nyhetsbrev, avsnitt efter sektion. I motsats till bästa praxis kommer vi att göra några styling tillsammans med strukturen. Vi ska börja med layouten, inklusive allt mellanrum och vaddering, och bakgrundsfärger, efter det ska vi göra typografi och andra CSS-saker.
Inställningen för ett e-postmeddelande är väldigt enkelt: bara html, huvud och kropp taggar är inblandade Låt oss lägga till i omslagstabellen och de tre huvudtabellerna vi diskuterade tidigare.
När det gäller olika typer av dokument finns det några olika tillvägagångssätt, som beskrivs i denna artikel. I vårt fall har jag bestämt mig för att använda en, eftersom vi inte behöver något av de saker vi skulle få genom att förklara en doktyp. Det kommer i alla fall att bli borttagna i alla fall.
Nettuts Email Nyhetsbrev
| |
Generellt sett är det bättre att tilldela bredder till enskilda tabellceller än till själva tabellen.
Observera att de två meddelandetabellerna har cellpadding värden på 20px. Detta kommer att rymma de punkterna från huvudinnehållet. Huvudbordet har 15px av cellutrymme. Det här är att skapa en konsekvent vertikal rytm. Eftersom varje sektion ligger inom sin egen tabellcell kommer det att finnas 15px mellan dem alla.
Observera också att tabellerna är alla inställda align = "center", och vi har uttryckligen definierat deras bredder. I HTML-e-post är det generellt bäst att inte definiera bredder för omslagstabeller. Det är bättre att definiera bredder för varje cell, men i det här fallet bryter vi den här regeln eftersom vi har cellutrymme / cellpadding att oroa sig för.
Dessa är super enkla: bara punkter inom centrerade celler.
| Problem med att visa det här e-postmeddelandet? Visa i webbläsare |
Ê
Det nedersta meddelandet är exakt detsamma.
Rubriken är ganska enkel, det är bara en kolumn med tre rader. Eftersom vi har den fina blå bakgrunden, kommer vi behöva lite padding runt varje cell för att få texten bort från kanterna.
Communitech Venture Services
Nyheter och Evenemang
Juli 2010
Kom ihåg att ställa in bredden på varje cell, vilket i detta fall är 570px (600px-15px av cellutrymme på varje sida). Vi har också ställt in justera egendom för datum till höger. Just nu lägger vi inte till i bakgrundsbilden, vi gör det senare. Under tiden använder du bara en ljusare blå.
Observera att vi använder bgcolor istället för style = "background". Detta beror på att html-värden bättre stöds i e-postklienter än CSS-egenskaper.
Det är vad vi har hittills, det ser ganska dåligt ut, men layouten är precis vad vi ville ha.
Vårt första innehållsavsnitt är en vänsterjusterad bild med två rubriker bredvid den. I stället för att använda CSS-floats som vi normalt skulle, kommer vi att göra ett bord med tre celler:
För bilden med gränsen kommer vi att nesta ett annat bord i cellen och ställa in cellplattan till 5px och ge den en grå bakgrundsfärg. Cellpadding lägger till elementets bredd, så vi måste minska cellens definierade bredd med 10px.
All New Site Design
Det är 150% bättre och 40% mer effektivt!
Accentsconagua
15px av cellrummet kan vi använda en tom cell att lägga till 15px av avstånd mellan element. I min test fungerar detta bra tomt, men du kan alltid lägga till ett icke-brytande utrymme för att vara säker.v-align egendom till topp. Detta är viktigt, eftersom det justerar varje cell med toppen av raden. Standard är mitt, vilket leder till några konstiga resultat.Det här är en väldigt enkel sektion: bara en tabell med en kolumn med ett stycke inuti. Glöm inte att ställa in cellens bredd och ställa in bordet för att centrera inriktningen.
Lorem ipsum dolor sitta amet, konsekventa adipisicing elit, sed gör det ojämnaste tillfället för tillfället att arbeta med en dolore magna aliqua. Utan minsta möjliga vänskap, det är inte nödvändigt att utöva arbetskraftsarbeten och utifrån det som följer. Duis aute irure dolor i reprehenderit i voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt i culpa de officia deserunt mollit anim id er laborum.
För att lägga till vertikalt utrymme (mer än 15px av cellrummet vi har) måste vi använda en distansbild. Precis som 90-talet! Vi kan använda ett spacer gif och ladda upp det, men det är för tillfället snabbare att bara använda en annan dummy-bild. Jag lämnar den grå så att du kan se den, men senare kan vi ställa den till vit på vitt.
Vilket ger oss något så här:
För en sektion med 3 kolumner använder vi fem tabellceller, en för varje kolumn och en mellan kolumnerna för att skilja dem.
Ganska enkelt, använd samma metod för gränsen som vi gjorde i avsnittet 2-kolumner. Glöm inte v-align!
De tre textkolumnerna är exakt samma process.
Spännande nya produkter!
Utan minsta möjliga vänskap, det är inte nödvändigt att utöva arbetskraftsarbeten och utifrån det som följer. Duis aute irure dolor i reprehenderit in voluptate velit esse cillum
En nyhetsbrev varje månad
Excepteur sint occaecat cupidatat non proident, sunt i culpa de officia deserunt mollit anim id er laborum.
Nytt och förbättrat forum
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed gör det ojämnaste tillfället för att få hjälp med att arbeta med en dolore magna aliqua.
Lägg till i en annan divider längst ner, och vi är nästan där:
Allting är bara att repetera vad vi redan har gjort: en 2-kolonn sektion och en 1-kolonn sektion med uppdelare mellan dem.
Detta är en rubrik
Lorem ipsum dolor sitta amet, konsekventa adipisicing elit, sed gör det ojämnaste tillfället för tillfället att arbeta med en dolore magna aliqua. Utan minsta möjliga vänskap, det är inte nödvändigt att utöva arbetskraftsarbeten och utifrån det som följer. Duis aute irure dolor in reprehenderit i voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Lorem ipsum dolor sitta amet, konsekventa adipisicing elit, sed gör det ojämnaste tillfället för tillfället att arbeta med en dolore magna aliqua. Utan minsta möjliga vänskapsmässiga utsträckning, är det viktigt att arbeta utifrån och utifrån.
UPPMANING TILL HANDLING
Och huvudlayouten är nu klar:
Till skillnad från vanliga webbsidor kan du inte bara sätta alla dina bilder i en mapp och sedan använda relativa vägar för att länka till dem. Alla länkar måste vara absoluta! När jag utvecklar ett email värd jag vanligtvis bilder på en underdomän eller på Amazon S3. När jag är redo att skicka e-postmeddelandet till en klient flyttar jag alla bilder till en underdomän på deras hemsida.
Alla bildlänkar måste vara absoluta!
Vi kan inte använda ett externt stilark, och vi kan inte bädda in CSS i huvudet på e-postmeddelandet eftersom vissa kunder kommer att ta bort hela huvudetiketten eller ignorera stilkoder. Vi kommer att behöva använda inline-stilar, vilket är en stor smärta. Lyckligtvis finns det användbara tjänster som tar inbyggd CSS och gör den inline. Jag använder en webbplats med namnet Premailer, där du kan klistra in i koden direkt och den utmatar samma sak med inline CSS.
Vi ska göra inbäddad CSS för denna handledning, då ska vi göra det inline med premailer.
Premailer tar inbäddad CSS och gör den inline!
Vi kommer inte att göra en hård återställning med * väljaren som du kan göra för en webbsida. Att använda standardvärdena ger faktiskt mer konsekventa resultat. De enda elementen vars polstring / marginaler vi behöver återställa är de som kommer att ha plats runt dem (från cellpadding / cellspacing) som våra rubrikrubriker eller våra stycken.
Du märker också en marginal runt omslagstabellen, som bara är standard styling på kroppsdelen.
Inget särskilt speciellt om typografi för ett mail eftersom det är ganska mycket detsamma är det för en webbsida. Använd inte shorthanddeklarationer (som font: ) eftersom du inte får konsekventa resultat.
# top-message p, # bottom-message p färg: # 3f4042; fontstorlek: 12px; font-family: Arial, Helvetica, sans-serif; #header h1 färg: #ffffff; font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif; typsnittstorlek: 24px; #header h2 color: #ffffff; font-family: Arial, Helvetica, sans-serif; typsnittstorlek: 24px; #header p color: #ffffff; font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif; fontstorlek: 12px; h3 font-size: 28px; färg: # 444444; font-family: Arial, Helvetica, sans-serif; h4 fontstorlek: 22px; färg: # 4A72AF; font-family: Arial, Helvetica, sans-serif; h5 font-size: 18px; färg: # 444444; font-family: Arial, Helvetica, sans-serif; p fontstorlek: 12px; färg: # 444444; font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif; linjehöjd: 1,5; h1, h2, h3, h4, h5, h6 margin: 0 0 0.8em 0;
Och se: det är väsentligt bättre nu!
Bakgrundsbilder fungerar ganska mycket som på en webbsida, förutom att ibland fungerar de inte! Se till att du har en bakgrundsbakgrundsfärg, som tilldelas cellen som en bgcolor, för kunder som inte stöder CSS-bakgrunder.
Och vi är klara med den lätta delen. Nu på provningen!
Steg 5: Testning
Testprocessen är den viktigaste och mest obekväma delen av att skapa HTML-e-postmeddelanden. När jag arbetar på ett mail testar jag ofta, i varje steg, så jag kan precisera vad som går fel. Det finns många kunder att testa, och många sätt att testa dem, låt oss gå över allt.
E-postklienter
Det här är de kunder du ska testa för, åtminstone:
- Outlook 2003/2007
- Hotmail
- Yahoo! Post
- Gmail
- Apple Mail
- Thunderbird
Hur man testar
Vi måste hitta ett sätt att skicka HTML-e-postmeddelanden först. Din klient kommer sannolikt att konfigureras med en tjänst som Mailchimp eller Campaign Monitor, som gör att du kan testa och skicka e-postkampanjer.
Du kanske tror att jag komplicerar detta onödigt eftersom vissa e-postklienter låter dig klistra in HTML-kod. Detta kan dock leda till olika resultat än när du använder en e-postkampanjapp. Testa med en app att vara på den säkra sidan.
Testning med Mailchimp
Min föredragna metod innebär att Mailchimp används för att testa och skicka testkampanjer. Mailchimp är gratis för upp till 500 mottagare, så du behöver inte betala för testning. Den har ett enkelt och lättanvänt gränssnitt. Här är en snabb steg-för-steg-walkthrough:
- Registrera dig för ett gratis Mailchimp-konto och lägg till en mottagarlista över dina test-e-postkonton: Hotmail, Yahoo !, och Gmail och logga in på ditt nya konto.
- Välja skapa en kampanj och välj regelbunden ol "-kampanj från huvudkontosidan. Fyll i grundläggande information om kampanjen, du behöver bara ett namn för teständamål.
- Vid design sida, välj Importera -> Klistra in kod och se till att du väljer Automatisk CSS Inliner
- Om du inte använder Mailchimp, se till att du använder Premailer för att få din CSS inline
- Fortsätt tills du kommer till bekräfta sidan och välj skicka test. Du kan skicka några tester härifrån men efter det måste du faktiskt skicka ut e-postmeddelandena till din lista.
Testning med Litmus
Litmus är en webapp som tester HTML-e-postmeddelanden i alla möjliga versioner av alla typer av klienter. Den fulla tjänsten kostar pengar, men om du inte kan övertyga din klient att betala, låter den fria versionen dig fortfarande testa i gamla Gmail och Outlook 2003, vilket fortfarande är användbart.
Resultat - det goda
Några av våra test visade sig ganska bra:
Apple Mail
Thunderbird
Resultat - The Bad-ish
Vissa var lite av, men mer eller mindre samma:
Gmail (safari)
Outloook 2007
Outlook 2003
Yahoo! Post
Resultat - The Ugly
Vi hade också ett par misslyckanden.
Hotmail (GREEN ???)
Gamla Gmail (explorer)
Rengöring av Mess
Allting är det här ett ganska framgångsrikt test, för jag testade mycket av elementen i Outlook och Gmail när jag gick. Problemen vi har med gamla Gmail och Hotmail är relaterade till standard stilark som kunderna använder. Microsofts speciella och unika varumärke av galet har gett oss ett standardformat som överskrider alla rubriker med a grön text stil med
!Viktigbeteckning. Ibland är jag ganska säker på dem vilja att göra mig galen.
För att lösa detta måste vi lägga till
!Viktigdeklaration till alla våra rubrikfärgstilar så här:h3 font-size: 28px; färg: # 444444! viktigt; font-family: Arial, Helvetica, sans-serif; h4 fontstorlek: 22px; färg: # 4A72AF! viktig; font-family: Arial, Helvetica, sans-serif; h5 font-size: 18px; färg: # 444444! viktigt; font-family: Arial, Helvetica, sans-serif;För gammal Gmail har vi ett liknande problem i rubriken: Gmail lägger till extra marginal längst ner på rubriktaggarna. Vi behöver bara åsidosätta
margin-bottomspecifikt.#header h1 färg: #ffffff! viktigt; font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif; typsnittstorlek: 24px; marginalbotten: 0! viktigt; #header h2 color: #ffffff! important; font-family: Arial, Helvetica, sans-serif; typsnittstorlek: 24px; marginalbotten: 0! viktigOch vi fixade Hotmail:
Så där har vi det, en funktionell, konsekvent (om en liten vanlig) HTML-e-post. Det är en smärta, ja, men när du får ett system går det mycket snabbare. Försök att hålla koden väl kommenterad och organiserad så att du kan använda delar av den senare.
Om du kan prata din klient om att anmäla sig till något som Litmus, blir ditt liv mycket enklare. Du kan också testa många kunder genom betalda versioner av Mailchimp och Campaign Monitor.
Felsökning
Du kommer säkert att stöta på problem som jag inte har täckt här, men jag har några allmänna råd för rengöring:
- Kontrollera din matte: Jag kan inte komma ihåg hur många gånger jag har skruvat upp en layout genom att inte lägga upp tabellcellbredder exakt. Kom ihåg att redogöra för cellpadding: det lägger till bredden på dina celler.
- Kontrollera efter standard stilark: använd något som Firebug eller Webkit Inspector för att kontrollera om en webbläsarklient överväger dina stilar. Om detta händer lägger du till en
!Viktigförklaring bör lösa problemet.- Kolla upp det: Det finns alltid en mycket bra chans att någon har upplevt ditt problem förut. Om Google inte hjälper, kan du surfa på tips och tricks på bloggarna för populära e-postkampanjstjänster, vissa människor skickar e-postmeddelanden och de vet sina saker!
- Bryt ner det: Om du inte kan hitta var du gick fel, gå tillbaka till början och kolla din e-post bit för bit tills du hittar vad som bryter det.
Resultatet
Här är den sista koden för din referens:
Nettuts Email Nyhetsbrev
Problem med att visa det här e-postmeddelandet? Visa i webbläsare
Communitech Venture Services
Nyheter och Evenemang
Juli 2010
All New Site Design
Det är 150% bättre och 40% mer effektivt!
Lorem ipsum dolor sitta amet, konsekventa adipisicing elit, sed gör det ojämnaste tillfället för tillfället att arbeta med en dolore magna aliqua. Utan minsta möjliga vänskap, det är inte nödvändigt att utöva arbetskraftsarbeten och utifrån det som följer. Duis aute irure dolor i reprehenderit i voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt i culpa de officia deserunt mollit anim id er laborum.
Spännande nya produkter!
Utan minsta möjliga vänskap, det är inte nödvändigt att utöva arbetskraftsarbeten och utifrån det som följer. Duis aute irure dolor i reprehenderit in voluptate velit esse cillum
En nyhetsbrev varje månad
Excepteur sint occaecat cupidatat non proident, sunt i culpa de officia deserunt mollit anim id er laborum.
Nytt och förbättrat forum
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed gör det ojämnaste tillfället för att få hjälp med att arbeta med en dolore magna aliqua.
Detta är en rubrik
Lorem ipsum dolor sitta amet, konsekventa adipisicing elit, sed gör det ojämnaste tillfället för tillfället att arbeta med en dolore magna aliqua. Utan minsta möjliga vänskap, det är inte nödvändigt att utöva arbetskraftsarbeten och utifrån det som följer. Duis aute irure dolor in reprehenderit i voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Lorem ipsum dolor sitta amet, konsekventa adipisicing elit, sed gör det ojämnaste tillfället för tillfället att arbeta med en dolore magna aliqua. Utan minsta möjliga vänskapsmässiga utsträckning, är det viktigt att arbeta utifrån och utifrån.
UPPMANING TILL HANDLING
Du tar emot det här meddelandet eftersom du anmälde dig för uppdateringar
Avsluta prenumerationen direkt | Vidarebefordra till en vän | Visa i webbläsare
Så här ser vårt slutresultat ut om vi använder riktiga bilder:
Inget speciellt speciellt, men det bör komma igång när du utformar dina egna HTML-e-postmeddelanden. Det finns naturligtvis andra sätt att göra allt jag har gjort men med HTML-e-post är allt som verkligen betyder att det funge
