Een HTML-letter maken: stap-voor-stap instructie

Mailinglijsten zijn een belangrijk onderdeel van marketingcampagnes. Brieven voor hen op vele manieren lijken op de ontwikkeling van eenvoudige webpagina's. Tegelijkertijd moeten bepaalde belangrijke verschillen in aanmerking worden genomen. In het bijzonder zal het verzenden van HTML-letters alleen effectief zijn als ze op een technische manier correct zijn samengesteld, en hun inhoud en stijl zijn in overeenstemming met uw doelen. Tegelijkertijd is er een mening dat een leek deze taak niet kan aanpakken. In dit artikel wordt een gedetailleerde instructie geleverd over hoe u kunt schrijven en hoe u een HTML-brief wilt verzenden.

Kenmerken van de creatie

De moderne persoon ontvangt dagelijks gemiddeld 5-6, en soms tot 10 e-mails. Dit betekent dat je maar een seconde hebt om de aandacht van de geadresseerde te krijgen voordat hij de volgende correspondentie doorgaat. Anders zal uw verzending van HTML-letters absoluut ondoeltreffend zijn, en u zal gewoon tijd tevergeefs verspillen.

Een van de nuances die je kansen verhoogt om de aandacht van potentiële klanten of een ander doelgroep te trekken, is het creëren van correspondentie, die is aangepast aan mobiele apparaten. Immers, de meeste van hen aan wie het is gericht om mail te bekijken, gebruik ze zeker vaker dan desktopcomputers en laptops.

Hiertoe kunt u bijvoorbeeld 'responsief ontwerp' gebruiken, gemakkelijk aan te passen aan de grootte van het scherm.

Wat moet de briefsjabloon zijn?

Wanneer u een document maakt dat bedoeld is voor het verzenden naar correspondenten, dienen aan de volgende voorwaarden te worden voldaan:

• Het moet smal genoeg gemaakt worden, dat wil zeggen in grootte mag het niet groter zijn dan een bereik van 500-600 pixels, wat de correcte weergave van tekst en andere inhoud op apparaten van elk type garandeert.
• Het is nodig om een vrij groot lettertype voor alle tekstuele informatie te gebruiken, aangezien op iOS-apparaten de HTML-letter ongemakkelijk is om te lezen of de lettergrootte minder dan 13 pixels is.
• Op te klikken elementen moeten groot genoeg zijn en geïsoleerde van de dichtstbijzijnde links. In dit geval kan de geadresseerde ze gemakkelijk vanaf de eerste poging activeren.

Bereiding van

Voordat u een HTML-gebaseerde brief ontwikkelt, moet u een nieuwe map op een van de stations maken en deze noemen, bijvoorbeeld 'Nieuwsbrieven'. Daarnaast moet u Dreamweaver CS3 downloaden en installeren. Dit product van Adobe is een van de redelijk eenvoudige tools voor het maken van websites en is goed geschikt voor het ontwikkelen van een e-mailbrief in HTML-formaat.

Maak een document op en sla het op

Voordat u het tekstdeel van de brief schrijft, heeft u het volgende nodig:

• Open een vrij populaire programma-ontwerper HTML-letters Dreamweaver CS3 (DW);
• Maak een document door "Transitional HTML 4.01" te selecteren als het type;
• Sla het bestand op met de extensie ".html";
• In het bovenste menu vind je het bewerkings commando;
• Om een vinkje uit het selectievakje 'Gebruik CSS in plaats van HTML-tags' te verwijderen.

Stap-voor-stap instructie

Overweeg nu hoe u een HTML-letter wilt maken. Om dit te doen

• Open de tabbladen "Invoegen" en "Tafel" in het menu en stel de benodigde tabelparameters in. Bijvoorbeeld, lijnen - 2, kolommen - 1, breedte - 700, kop - van bovenaf. Borders kunnen worden ingesteld, maar je kan ze zonder, 0 aanwijzen.
• Vorm de titel van de brief. Aangezien de HTML-letter is bedoeld voor een groter aantal ontvangers, gebruik dan de operator [first_name], de gewenste naam van de ontvanger vervangen.
• Stel in het onderste venster 'Eigenschappen' de vereiste parameters voor het lettertype, de grootte en de kleur van de koptekst en de achtergrondkleur in.
• "Exit" uit het koptekstgebied. Onderaan het scherm stelt u de parameters voor de cursor "Center" en "In the middle" in.
• Wij plakken de afgewerkte tekst van de brief of "schrijf het direct in het DW-programma, selecteer het gewenste type en de grootte van het lettertype, evenals de locatie van de tekst op de pagina.

Hypertext links maken

We zullen proberen de HTML-letter meer professioneel en geavanceerd te maken. Met dit doel verbergen we de hypertext links in de inhoud. Om dit te doen, selecteer de plaats in de tekst die is geselecteerd als hypertext link. In de linkerbovenhoek bovenaan het scherm moet u het bijbehorende pictogram openen en uw link in de vervolgkeuzelijst plaatsen. Tegelijkertijd vergeet niet om een vinkje in het vinkje "_blank" te plaatsen, zodat de link in een nieuw venster wordt geopend en de geadresseerde na het bekijken ervan de toegang niet heeft verloren aan de hoofdletter.

Hoe plaatst u foto's?

Meestal eindigt de letter in HTML-formaat met contactinformatie, bij voorkeur met de foto van de auteur of met een geschikte thematische foto. Het kan op internet worden gedownload of op internet geladen worden, omdat u de URL van deze afbeelding nodig hebt. De beste manier om dit te doen is via een van de gratis services.

Om zo'n mooi einde te ontwerpen:

• Plaats onderaan de letter, in de hoofdtafel een ander met 3 kolommen en een parameter voor de grens van 0 pixels;
• Zet de cursor op de plaats van de tafel waar ze de foto willen zien
• Let op in het onderste venster "In het midden" en "Aan de bovenkant" voor elke sectie;
• Selecteer het tabblad 'Invoegen' in het bovenste menu;
• Maak een klik op het opschrift "Image" en plak in het vervolgkeuzemenu het gekopieerde adres;
• Druk tweemaal op "Ok".

Kijk naar binnen

Nu u weet hoe u een HTML-letter moet maken, moet u ervoor zorgen dat de geadresseerde het in de juiste vorm ziet. Om dit te doen, moet u uw werk in de Dreamweaver CS3-browser bekijken voordat u verzendt. Om dit te doen, klik op het icoon met de bol in het midden bovenste menu. Als in plaats van letters op het scherm verscheen abracedabra, dan moet u de instellingen van uw browser automatisch coderen.

codering

Uit de sectie 'Project' en ga naar het code gedeelte - 'Code'. In het geopende venster selecteert en kopieert u alles wat is ingesloten tussen de tags en . Sla het bestand op. Plak dan de HTML-code.

Stuur een HTML-bericht

Om de verzending te maken, open de SmartResponder (SR). dan:

• Kies of maak een nieuwe letter door het "Naam" en "Afzenderadres" in te vullen.
• Vul de regel 'Onderwerp van de brief' in;
• Markeer in de linker menu HTML-code;
• Plaats de code die in de DW-code is gekopieerd in het grote veld "Bron";
• Controleer de correctheid van het display met behulp van het hulpprogramma 'Voorbeeld'
• Verwijder de tekstversie van de brief;
• Test het voor spam, met de knop met dezelfde naam, naast de knop "Verzenden".

Enkele populaire sjablonen

Het gebruik van het kader helpt het proces van het schrijven van een brief sterker te maken en het toegankelijker maken voor een ontwikkelaar die nog steeds de basis leert om webdocumenten te maken. De meest populaire sjablonen zijn:

• Cerberus . Met deze reeks zogenaamde responsieve sjablonen kunt u brieven maken die normaal gesproken worden weergegeven in zowel de mobiele Gmail-applicatie als Outlook. Het stelt u in staat om blokken van HTML-code afzonderlijk te gebruiken of door ze te combineren.
• Inkt is de voorbereiding van brieven, waarvan de verzendingen bijna universeel zijn en compatibel zijn met apparaten en klanten.
• Echt simpel HTML-e-mail sjabloon. Met de sjabloon kunt u eenvoudig en snel mailingbrieven maken. True, ze hebben een extreem eenvoudig ontwerp in de vorm van een enkele kolom, waarin een oproep tot actie wordt afgesloten.

HTML invoegen in een bericht

Laten we nu een enigszins ander probleem overwegen. Als u de HTML-code wilt invoegen in een e-mail, bijvoorbeeld, moet gmail, zoals in het voorbeeld hieronder, de Google Chrome-browser gebruiken:

• Druk op de knop "F12" of selecteer de juiste volgorde van opdrachten in het menu;
• In het geopende venster met de code van de huidige pagina van de gmail-client, zoek de plaats waar de HTML-letter moet worden ingevoegd, maak een rechtermuisknop en selecteer 'Bewerken als HTML'.
• Voeg de gekopieerde HTML code in;
• Druk op de combinatie van twee toetsen "Ctrl" en "Enter".

Voor hetzelfde doel kunt u een eenvoudig Mozilla Thunderbird programma downloaden. Hiermee kunt u een letter maken en selecteer dan eerst de 'Plakken' en vervolgens 'HTML' en voeg de code van uw mailing in.

instrumenten

Met de Wordpress plug-in e-Nieuwsbrief kunt u vaklijsten en abonnees professioneel beheren. Beide worden direct gedaan via het WordPress admin panel. Deze omstandigheid biedt volledige controle en is volledig vrij, dat kan niet maar verheugen.

Een ander simpel gereedschap - Bulletproof achtergrondafbeeldingen, dat is een eenvoudig hulpmiddel waarmee u code kunt krijgen voor de achtergrondafbeelding van de gemaakte letters. Met haar hulp kunt u correspondentie veel mooier maken. Om een bericht te ontwerpen, geef gewoon de URL aan van de achtergrondafbeelding die u wilt en de back-upkleur, en of deze parameters moeten worden toegepast op het gehele lichaam van het HTML-bericht of dat ze alleen bedoeld zijn voor één van de tabelcellen. Als gevolg hiervan ontvangt u de kant-en-klare code die u wilt kopiëren en plakken in uw sjabloon.

Nu weet je hoe je een HTML-brief moet sturen. De creatie ervan is niet bijzonder moeilijk, vooral als u op maat gemaakte sjablonen gebruikt, waarin er geen tekort op het web bestaat. Daarom kunnen zelfs degenen die geen speciale kennis hebben, deze taak gemakkelijk aanpakken.