Lite bättre och enklare e-postmallar

Att göra e-postmallar är kul, men kan vara väldigt komplicerat och tidskrävande. HTML och CSS för e-postklienterna går tvärtemot vad man har vet är bäst om inline CSS, layouts med tabeller och liknande.

Tidigare i år tröttnade jag på att om och om igen skriva inline-CSS (och använda MailChimps Inliner Tool) så jag skapade ett workflow för att underlätta processen.

Gulp.js

Till att börja med satte jag upp Gulp för att hantera byggandet av mallen automatiskt med LESS-kompilering, CSS-prefixing samt det viktigaste; att skjuta in all CSS inline.

Det fina med den här metoden är att man helt enkelt kodar mallen precis som om det vore en webbsida, och ut spottas en mall som är redo att användas för ens val av tjänst för e-postutskick (jag rekommenderar CampaignMonitor och MailChimp).

Koden hittar du på GitHub (tillsammans med grunden till en basic mall, inte direkt redo att användas).

Responsiva e-postmallar

Alla vill ha responsiva mallar, så tid har även lagts på att undersöka metoder på att skapa så väl fungerade responsiva mallar som möjligt.

Responsiva e-postmallar är lite av en "hit or miss"; det gäller att man har en någorlunda utplanerad plan, och att man har koll på vilka e-postklienter / tjänster som faktiskt stödjer det här.

Den enklaste formen av responsiva mallar är så klart att köra med en flytande layout, alltså:

1.wrapper {
2    width: 100%;
3    max-width: 700px;
4}
1.wrapper {
2    width: 100%;
3    max-width: 700px;
4}

Där bredden anpassas efter enheten. Nackdelen med den här metoden är dock att man inte har möjligheten att visa/gömma innehåll, eller att t.ex. få en två-kolumnslayout att bli till en kolumn på ens iPhone.

Man blir helt enkelt tvungen att på hederligt vis använda media-queries:

 1@media screen and (max-width: 480px) {
 2    td.col {
 3        width: 100% !important;
 4        display: block;
 5    }
 6}
 7
 8<table>
 9    <tr>
10        <td class="col" width="50%">
11            <p>Kolumn 1</p>
12        </td>
13        <td class="col" width="50%">
14            <p>Kolumn 2</p>
15        </td>
16    </tr>
17</table>
 1@media screen and (max-width: 480px) {
 2    td.col {
 3        width: 100% !important;
 4        display: block;
 5    }
 6}
 7
 8<table>
 9    <tr>
10        <td class="col" width="50%">
11            <p>Kolumn 1</p>
12        </td>
13        <td class="col" width="50%">
14            <p>Kolumn 2</p>
15        </td>
16    </tr>
17</table>

Vad som händer här att td-elementen (som har display: table-cell; som standard) sätts som block, och kommer att ta upp hela bredden. Metoden fungerar mycket bra i de allra flesta mailklienterna, med undantag; GMails egna app för Android och iOS (Androids och iOS standard mailläsare fungerar det dock med) – då den klienten envisas med att rensa bort alla <style>-taggar. Hoppas på ändring från Google där snart.

Bonus, alternerande layout till en kolumn

Ett vanligt sätt att presentera t.ex. produkter på i ett mail är följande vis:

Men vad händer om layout:en är responsiv? Jo:

Produkterna alternerar inte som man har tänkt sig... Men, det finns ett väldigt enkelt knep man kan använda sig av, via attributen dir och align:

 1<table dir="rtl">
 2    <tr>
 3        <td dir="rtl" class="col" align="right" width="50%">
 4            <img src="#">
 5        </td>
 6        <td dir="ltr" class="col" align="left" width="50%">
 7            <p>Text</p>
 8        </td>
 9    </tr>
10</table>
 1<table dir="rtl">
 2    <tr>
 3        <td dir="rtl" class="col" align="right" width="50%">
 4            <img src="#">
 5        </td>
 6        <td dir="ltr" class="col" align="left" width="50%">
 7            <p>Text</p>
 8        </td>
 9    </tr>
10</table>

Ger:

dir är egentligen till för att bestäma hur texten ska "flöda" i ett element, rtl (right to left) eller ltr (left to right). Men med det kan vi också styra hur kolumnerna ska stapla sig ovanför varandra.

Källkod finns på GitHub. Min gulpfile.js är anpassad efter hur jag föredrar att jobba, men är enkel att anpassa efter dina egna behov. Frågor eller kommentarer? @olssonm är jag på Twitter.

*Uppdaterat 2022-02-19: Projekt/länkar döda