Sådan opbygger og sender du en tilpasset HTML-e-mail

En interaktiv HTML-e-mail er et kraftfuldt værktøj. Virksomheder kan bruge dem til promo-aftaler, freelancere kan bruge dem til at pitche deres tjenester til potentielle kunder, og børnebørn kan bringe et smil frem på deres bedsteforældres ansigter med en sød skik design. De eneste to teknologier, du skal bruge for at bygge en tilpasset e-mail fra bunden, er HTML og inline CSS. Alt du skal gøre er at få et design i tankerne, analysere det i form af tabelrækker og kolonner, og du er god til at begynde at bygge. I denne artikel lærer du en trin-for-trin metode til at bygge og sende en tilpasset HTML-e-mail.

Byg e-mail-skabelonen ved hjælp af HTML

E-mail-skabelonen er afhængig af traditionelle HTML-teknikker. Du kommer til at arbejde med tabeller og stable tabelrækker og tabeldata hele tiden. Den grundlæggende HTML-e-mail-skabelon ser sådan ud:

...
...
...
...
...
...
...




...

Produktion:

Det vil være bedst at udarbejde et design, så du kan kortlægge, hvor og hvordan du vil skære designet op. Derudover vil du være mentalt forberedt til at tegne en tabelstruktur ud af det.

Her starter du med DOCTYPE for dokumentet. Dernæst indstiller du tegnsæt, indholdstype, metatags og titel inde i tag. Den væsentlige del begynder med tag, hvor du placerer en forælder og tilføje flere tabelrækker inde i den. Efter at have opdelt indholdet i et passende antal rækker, er det tid til at indtaste tabeldataene inde i dem.

Som sagt skal du kun arbejde med tabeller. Derfor, for at indtaste forskellige data inde i tag, skal du følge en defineret rute. Lad os for eksempel danne en e-mail-skabelon med et logo og en dato inde i en tag.

 Logo og dato inde i 
 tag 

















5. december 2021

Nu ved du, hvordan du placerer HTML-tags og bygger en god struktur til din e-mailskabelon. Lad os gå videre for bedre at forstå e-mail-styling.

Stil din HTML-e-mail

At style en HTML-e-mail er en besværlig opgave, da du kun kan bruge inline CSS. Du bliver også nødt til at gentage stylingen for hvert element, hvis det har lignende styling. Hvis du ikke er bekendt med Cascading Style Sheets, så gå på opdagelse komme i gang med CSS.

Forhåndsvisning:

 5. december 2021 






































Hej John Doe



Tak fordi du besøgte vores side. Vi håber, du har lært noget nyt i dag.





 Din mening betyder noget for os! 

 Bedøm vores artikler her. 


012345678910

Produktion:

Hvis du vil, kan du få adgang til den komplette kode på GitHub og klone depotet for at bruge det.

Sender mailen

Kopier og indsæt nu hele koden fra GitHub. Hvis du bruger VS-kode, skal du åbne HTML-filen ved hjælp af live-serverudvidelsen og kopiere indholdet ved at klikke på Ctrl + A>Ctrl + C. Åbn Gmail, og opret en ny e-mail. Indsæt indholdet og indtast modtagerens mail-id. Send e-mailen, og du får resultaterne som vist nedenfor:

Test koden på forskellige enheder for at se, hvordan den ser ud og opfører sig. Tilpas din HTML-e-mail, og gør den ren, enkel og responsiv.

Rediger eksisterende e-mail-skabeloner

At oprette en HTML-e-mail fra bunden kræver et solidt greb om HTML og inline CSS. Du kan også ændre en eksisterende e-mail-skabelon og tilpasse den efter dine behov. Husk, at HTML-e-mails har en tendens til at tage et par sekunder at indlæse. Planlæg, design, kodér og udfør grundige tests for at undgå eventuelle inkonsekvenser hos slutbrugeren. Du kan lære mere om semantisk HTML og CSS for at skrive bedre og mere tilgængelig kode.

Naincy Mourya (17 artikler udgivet)

Naincy har specialiseret sig i at bygge meget responsive hjemmesider og effektiv indholdsstrategi sammen med webkopier. Hun er en freelance tech-skribent, der holder skarpt øje med trendende teknologier.

Mere fra Naincy Mourya