Hur man skapar HTML-e-post: steg för steg guide

E-postlistor är en viktig del av marknadsföringskampanjer. Skapa e-post för dem på många sätt det liknar utvecklingen av enkla webbsidor. Samtidigt bör man ta hänsyn till några viktiga skillnader. Framför allt kommer att skicka HTML-e-post vara effektiva endast om de görs korrekt i teknisk mening, och deras innehåll och stil att nå dina mål. I det här fallet finns det en uppfattning att en lekman inte kan klara denna uppgift. Den här artikeln innehåller detaljerade steg för steg instruktioner, hur man skriver och hur man skickar HTML-e-post.

Dragen av skapelsen

Den moderna människan får dagligen i genomsnitt 5-6, och ibland upp till 10 e-post. Detta innebär att du bara har mindre än en sekund, för att ha tid att uppmärksamma mottagaren innan den går till läsningen av följande korrespondens. Annars kommer dina skicka HTML-e-post vara helt verkningslösa, och du bara bortkastad tid.

En nyans som ökar dina chanser att fånga uppmärksamheten hos potentiella kunder eller annan målgrupp är skapandet av korrespondens, som är anpassad till mobila enheter. När allt kommer omkring, de flesta av dem som det är riktat att visa e-post, förmodligen använda dem oftare än stationära datorer och bärbara datorer.

För kan användas i detta syfte, till exempel "responsiv design" lätt anpassar sig till skärmstorleken.

Vad bör brevmallen

När dokumentets layout, avsedd att skicka korrespondenter, bör följa följande krav:

• Det bör göras ganska smal, det vill säga. E. storlek får inte överstiga intervallet 500-600 pixlar som ger korrekt visning av text och annat innehåll på enheter av något slag.
• Du måste använda en tillräckligt stor typsnitt för all text information samt iOS-enhet HTML-post kommer att vara obekväm att läsa om teckenstorlek på minst 13 pixlar.
• Element som du kan klicka på för att göra, bör vara tillräckligt stor och isolerad från de närmast anknytning. I detta fall kan mottagaren enkelt aktivera dem på första försöket.

utbildning

Innan utvecklingen av HTML-brev, bör du skapa en av enheterna en ny mapp och namnge det, till exempel, "Nyheter". Dessutom måste du hämta och installera Dreamweaver CS3. Denna produkt från Adobe är en ganska enkel verktygskonstruktion webbplatser och är väl lämpad för att utveckla ett utskick bokstäver i HTML-format.

Skapa och spara ett dokument

Innan du skriver text i brevet, måste du:

• öppna ganska populära program designer HTML-e-post Dreamweaver CS3 (DW);
• skapa ett dokument genom att välja en typ av "Transition HTML 4.01»;
• spara filen med tillägget «.html»;
• i toppmenyn för att hitta redigeringskommando;
• avlägsna fästingen från kryssrutan "Använd CSS i stället för taggen HTML».

Steg för steg guide

Nu ska vi se hur man skapar HTML-e-post. Gör så här:

• Konsekvent öppna fliken "Infoga" -menyn och "Table" och exponera de nödvändiga parametrarna i tabellen. Exempelvis linjen - 2 kolonner - 1, Bredd - 700, sidhuvudet - toppen. Gränserna kan ställas in, och du kan göra utan dem, ange 0.
• Forma meddelandehuvudet. Sedan HTML-brev är avsedd för ett större antal mottagare, så använd operatören [förnamn], för att ersätta namnet på den önskade mottagaren.
• I den nedre fönstret "Egenskaper" sätta upp de nödvändiga parametrarna för typsnitt, storlek och färg på titeltexten och bakgrundsfärg.
• "Exit" i rubrikfältet. Längst ner på skärmen för att flytta markören säljoptioner "Centered" och "I mitten".
• Sätt i beredd textmeddelande eller "skriva" rätt i DW-programmet genom att välja typ och teckenstorlek, och anpassning av texten på sidan.

Skapa hyperlänkar

Vi kommer att försöka att göra HTML-brev mer professionell och avancerad. Med detta mål i hide innehåll hyperlänkar. För att göra detta, välj den plats i texten, som valdes som en hyperlänk. I det vänstra hörnet ska vara "öppen" lämplig ikon och infoga en länk i listrutan längst upp på skärmen. I det här fallet, glöm inte att sätta en bock i kryssrutan «_blank», för att öppna länken i ett nytt fönster, och mottagaren efter showen har inte förlorat tillgång till de viktigaste brev.

Hur man sätter bilder

Vanligtvis ett brev i HTML-format avslutar kontaktuppgifter, helst med ett foto av författaren eller berörda tematiska bilden. Den kan laddas ner från Internet eller genom att ladda ner på Internet, som du behöver webbadressen till bilden. Detta görs bäst genom en av de gratistjänster.

Att utfärda en sådan fin avslutning:

• införd i ned i meddelandet, till en annan bas tabell 3 och kolumnerna 0 parameter för gränspixlar;
• Placera markören i tabellen, där de vill se bilden;
• märke i det nedre fönstret, "mitten" och "övre kant" för varje sektion;
• välja från huvudmenyn fliken "Infoga";
• gör klicka på inskriptionen "Bild" i menyn, klistra in den kopierade kontaktadress;
• tryck «Ok» 2 gånger.

översyn

Nu när du vet hur man gör HTML-brev, bör du se till att mottagaren kommer att se det i rätt form. För detta ändamål, innan du skickar du vill se ditt arbete i Dreamweaver CS3 webbläsare. För att göra detta, klicka på ikonen med en jordglob i toppmenyn mitten. Om i stället för bokstäver dök upp på skärmen, abrakadabra, bör du sätta i webbläsarens inställningar avtokodirovku.

kodning

Från avsnittet "Project" och gå till koden delen - "Koden". I fönstret som separeras och kopiera allt som ligger mellan taggarna och . Spara filen. Därefter sätter du i HTML-kod.

Att skicka HTML-e-post

För att göra post öppna "Smartresponder" (SR). då:

• välja eller skapa ett nytt e-postmeddelande genom att fylla i strängen "name" och "ta itu med avsändaren."
• Fyll line "tema av bokstaven";
• märke i det övre vänstra menyn HTML-kod;
• inbäddade koden kopieras till programmet DW-kod i ett stort område "Source";
• kontrollera riktigheten av visnings hjälp av ett verktyg "Preview";
• Tar bort textversionen av brevet;
• testa det för spam, med hjälp av lämplig knapp bredvid knappen "Skicka".

Flera populära mallar

Med hjälp av en ram bidrar till att avsevärt påskynda processen att skriva och göra den mer tillgänglig för utvecklare, som bara har förstått grunderna för att skapa webbdokument. De mest populära mönster:

• Cerberus. Denna uppsättning av så kallade känsliga mallar för att skapa brev, normalt visas i en mobil applikation Gmail och i Outlook. Det gör att du kan använda HTML-kodblock, antingen ensam eller genom att kombinera dem.
• Ink - är att skörda e-post, utskick som är nästan universell och kompatibel med alla enheter och kunder.
• Riktigt enkel HTML-e-mall. Mallen låter dig skapa utskick bokstäver är mycket lätt och snabbt. Dock kommer de att ha en mycket enkel konstruktion i form av en kolonn, som trädde i en uppmaning till handling.

Hur man sätter in HTML i en

Låt oss nu betrakta ett något annorlunda problem. För att infoga HTML-kod i ett e-postmeddelande till exempel Gmail med, som i exemplet nedan, Google Chrome, bör du:

• klicka på knappen «F12», eller välja lämplig sekvens av kommandon i menyn;
• i det öppna fönstret till kundens nuvarande teckentabell gmail hitta en plats där för att sättas in i HTML-brev gör ett högerklick och välj «Redigera HTML».
• klistra in HTML-kod;
• trycka på en kombination av två tangenter «Ctrl» och «Enter».

I samma syfte kan du ladda ner lätt ispolzovnii Mozilla Thunderbird program. Med den kan du skapa ett brev, sedan först välja "Infoga" och sedan "HTML" och klistra in i din e-kod.

instrument

Vordpressovsky e-nyhetsbrev plugin kan du professionellt hantera nyhetsbrev och abonnenter. Och sedan, och en annan sker direkt via Wordpress admin panel. Denna omständighet ger fullständig kontroll och helt gratis, som inte kan utan glädjas.

En annan enkel verktyg - Bulletproof bakgrundsbilder, vilket är ett enkelt verktyg som låter dig få koden för bakgrundsbilden som skapats av bokstäverna. Det kan hjälpa dig att göra korrespondensen vackrare. För registrering av brevet ska helt enkelt skriva in webbadressen till bakgrundsbilden du gillade och boka färgen, och om dessa parametrar tillämpas på hela kroppen av HTML-post eller de är endast avsedda för en av tabellceller. Resultatet är en färdig kod som du vill kopiera och klistra in i din mall.

Nu när du vet hur man skickar HTML-e-post. Dess tillkomst är inte särskilt svårt, speciellt om du använder färdiga mallar där banan är ingen brist. Även de som inte har specialkunskaper, lätt kan klara denna uppgift.