Hvordan bygge og sende en tilpasset HTML-e-post

En interaktiv HTML-e-post er et kraftig verktøy. Bedrifter kan bruke dem til kampanjetilbud, frilansere kan bruke dem til å presentere tjenestene sine for potensielle kunder, og barnebarn kan bringe et smil til besteforeldrenes ansikter med en søt skikk design. De eneste to teknologiene du trenger for å bygge en tilpasset e-post fra bunnen av er HTML og innebygd CSS. Alt du trenger å gjøre er å ha et design i tankene, analysere det i form av tabellrader og kolonner, og du er flink til å begynne å bygge. I denne artikkelen lærer du en trinn-for-trinn-metode for å bygge og sende en tilpasset HTML-e-post.

Bygg e-postmalen ved hjelp av HTML

E-postmalen er avhengig av tradisjonelle HTML-teknikker. Du skal jobbe med tabeller og stable tabellrader og tabelldata hele tiden. Den grunnleggende HTML-e-postmalen ser slik ut:

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




...

Produksjon:

Det beste ville være å utarbeide et design slik at du kan kartlegge hvor og hvordan du skal skjære opp designet. I tillegg vil du være mentalt forberedt på å lage en tabellstruktur ut av den.

Her begynner du med DOCTYPE for dokumentet. Deretter angir du tegnsett, innholdstype, metakoder og tittel i stikkord. Den essensielle delen begynner med tagge hvor du plasserer en forelder og legg til flere tabellrader inni det. Etter å ha delt innholdet i et riktig antall rader, er det på tide å legge inn tabelldataene inni dem.

Som sagt, du må bare jobbe med tabeller. Derfor, for å legge inn forskjellige data i tag, må du følge en definert rute. La oss for eksempel lage en e-postmal med en logo og dato i en stikkord.

 Logo og dato i 
-taggen 

















5. desember 2021

Nå vet du hvordan du plasserer HTML-tagger og bygger en god struktur for e-postmalen din. La oss gå videre for å bedre forstå e-poststyling.

Stil HTML-e-posten din

Å style en HTML-e-post er en tungvint oppgave siden du bare kan bruke innebygd CSS. Du må også gjenta stylingen for hvert element hvis det har lignende styling. Hvis du ikke er kjent med Cascading Style Sheets, kan du utforske komme i gang med CSS.

Forhåndsvisning:

 5. desember 2021 






































Hei John Doe



Takk for at du besøker siden vår. Vi håper du lærte noe nytt i dag.





 Din mening er viktig for oss! 

 Vurder artiklene våre her. 


012345678910

Produksjon:

Hvis du vil, kan du få tilgang til hele koden på GitHub og klone depotet for å bruke det.

Sender posten

Kopier og lim inn hele koden fra GitHub. Hvis du bruker VS-kode, åpner du HTML-filen ved å bruke live serverutvidelsen og kopierer innholdet ved å klikke på Ctrl + A>Ctrl + C. Åpne Gmail og skriv en ny e-post. Lim inn innholdet og skriv inn mottakerens e-post-ID. Send e-posten, så får du resultatene som vist nedenfor:

Test koden på forskjellige enheter for å se hvordan den ser ut og oppfører seg. Tilpass HTML-e-posten din og gjør den ren, enkel og responsiv.

Endre eksisterende e-postmaler

Å lage en HTML-e-post fra bunnen av krever et solid grep om HTML og innebygd CSS. Du kan også endre en eksisterende e-postmal og tilpasse den etter dine behov. Husk at HTML-e-poster har en tendens til å ta noen sekunder å laste opp. Planlegg, design, koder og utfør grundige tester for å unngå eventuelle sluttbrukerinkonsekvenser. Du kan lære mer om semantisk HTML og CSS for å skrive bedre og mer tilgjengelig kode.

Naincy Mourya (17 artikler publisert)

Naincy spesialiserer seg på å bygge svært responsive nettsteder og effektiv innholdsstrategi sammen med nettkopier. Hun er en freelance tech-skribent som holder et skarpt øye med trendende teknologier.

Mer fra Naincy Mourya