Share
Wat je gaat creërenDe beste manier om een proces te begrijpen, is om het zelf uit te voeren, vanaf de grond af. Vandaag gaan we dat doen met e-mailontwerp, door helemaal vanuit het niets een HTML-e-mailsjabloon te bouwen.
Opmerking van de uitgever: Deze tutorial is oorspronkelijk geschreven door Nicole in juni 2013. Sindsdien is het een referentie geworden voor marktleiders over de hele wereld en wordt het door miljoenen beginners gebruikt als een startpunt voor hun avonturen in e-mail. Het is net zo relevant vandaag als het was toen het voor het eerst werd gepubliceerd.
Als u op zoek bent naar een kant-en-klare professionele oplossing, neem dan een van onze bestverkopende HTML-e-mailsjablonen op Envato Market. We hebben honderden responsieve opties vanaf slechts $ 5, met eenvoudig aan te passen functies om u op weg te helpen.
Bestverkopende HTML-e-mailsjablonen op Envato Market Niet wat je zoekt? Geen probleem, deze tutorial leert je hoe je je eigen kunt bouwen.
Om te beginnen is het de moeite waard om te vermelden waar ik enkele bronnen van heb getrokken.
Nu, zoals we in de vorige tutorial hebben besproken, moet u uw HTML-e-maildocument beginnen met een XHTML-doctype:
Demystifying Email Design
Met dat gesorteerd kunnen we beginnen met het bouwen van de rest van de structuur.
Eerst voegen we een algemene structuur toe voor onze e-mail, te beginnen met een label. We zullen de marge en padding op de body-tag op nul zetten om elke onverwachte ruimte te vermijden.
We voegen ook een tabel toe met een breedte van 100%. Dit fungeert als een echte body-tag voor onze e-mail, omdat de styling van de body-tag niet volledig wordt ondersteund. Als u een achtergrondkleur aan de 'hoofdtekst' van uw e-mail wilt toevoegen, moet u deze in plaats daarvan op deze grote tabel toepassen.
Stel uw cellpadding en cellspacing in op nul om onverwachte ruimte in de tabel te voorkomen.
Notitie: We gaan weg border = "1" op al onze tafels, zodat we het skelet van onze lay-out kunnen zien terwijl we verder gaan. We zullen ze aan het einde verwijderen met een eenvoudige Find & Replace.
| Hallo! |
"Als een kenmerk in HTML voorkomt, gebruik dat in plaats van CSS"
Plaats nu een gecentreerde tafel van 600 pixels breed in de containertabel. 600 pixels is een veilige maximale breedte voor uw e-mails om comfortabel weer te geven in de meeste desktop- en webmailclients op de meeste schermresoluties.
Stel deze breedte in met behulp van HTML in plaats van CSS, door het kenmerk width te gebruiken. De gouden regel in HTML e-mailontwikkeling is: als een kenmerk in HTML bestaat, gebruik dat in plaats van CSS.
We zullen onze kleine 'Hallo!' Vervangen. groet met deze tabel:
| Hallo! |
We hebben ook een eigenschap inline-stijl toegevoegd waarmee de border-collapse eigendom aan ineenstorting. Als we dit niet doen, voegen nieuwere versies van Outlook een kleine spatie toe tussen onze tabel en onze rand.
In ons ontwerp kunnen we zien dat de e-mail is verdeeld in drie logische secties, dus we zullen een rij voor elk maken.
Laten we de enkele rij dupliceren die we al hebben gemaakt, zodat we er in totaal drie hebben. Ik heb de tekst erin gewijzigd, zodat we elke rij gemakkelijk kunnen identificeren.
| Rij 1 |
| Rij 2 |
| Rij 3 |
Nu kleuren we ze in volgens het ontwerp. Zoals bgcolor is een geldig HTML-kenmerk. We gebruiken dit om de achtergrondkleur in plaats van CSS in te stellen. Onthoud altijd dat je de volledige zes tekens van een hexadecimale code moet gebruiken, omdat een steno van drie tekens niet altijd werkt.
| Rij 1 |
| Rij 2 |
| Rij 3 |
Ok, daarna gaan we ons richten op rij 1. We willen de opvulling op de cel aanpassen en dan onze afbeelding invoegen.
Wanneer u opvulling in e-mail gebruikt, moet u altijd elke afzonderlijke waarde opgeven (boven, rechts, onder en links), anders kunt u onvoorspelbare resultaten krijgen. Ik vind dat je nog steeds de steno kunt gebruiken, d.w.z.. opvulling: 10px 10px 8px 5px;, maar als je problemen hebt, wil je dit misschien lang formuleren, d.w.z.. padding-top: 10px; opvulling rechts: 10px; padding-bottom: 8px; padding-links: 5px;.
Als je nog meer problemen hebt met padding (bijvoorbeeld als je verzendplatform je CSS verwijdert), gebruik het dan helemaal niet. Gebruik eenvoudig lege cellen om ruimte te creëren. Het is niet nodig om GIF's voor spacers te gebruiken, zorg er wel voor dat u ze toevoegt style = "line-height: 0; font-size: 0;" naar de cel, plaats een binnen en geef het een expliciete hoogte of breedte. Hier is een voorbeeld:
Merk ook op dat het veilig is om padding op TD-tags te gebruiken, maar niet op P-tags of DIV's. Ze gedragen zich veel onvoorspelbaarder.
We zullen dus wat inline CSS gebruiken om opvulling aan de cel toe te voegen. Vervolgens voegen we onze afbeelding in, voegen we alt-tekst toe en voegen we toe style = "display: block;" dat is een veel voorkomende oplossing die ervoor zorgt dat sommige e-mailclients leemtes onder uw afbeeldingen toevoegen. We centreren de afbeelding door toe te voegen align = "center" naar onze td-tag. We voegen ook een alt-tag toe die belangrijk is voor wanneer onze e-mail voor het eerst wordt geladen en die in de meeste gevallen met afbeeldingen uit zal zijn.
Notitie: Als de inhoud van uw kop erg belangrijk is voor uw bericht, gebruik dan geen header met alleen afbeeldingen. Vergeet niet dat afbeeldingen voor de meeste clients standaard zijn geblokkeerd, dus als een aspect van uw e-mail cruciaal is, moet u dit nooit als afbeelding opnemen. In dit voorbeeld is mijn header echter vrij overbodig.
Ten eerste voegen we wat opvulling toe aan de middelste cel, zodat de tafel erin een beetje ruimte heeft, volgens ons ontwerp.
Nu voegen we een tabel met drie rijen toe voor onze hoofdinhoud: één voor de kop, één voor de inleidende tekst en één voor de rij met twee kolommen. We stellen de breedte van deze tabel in op 100% in plaats van een pixelwaarde te gebruiken, omdat dit ons verder zal helpen als we onze e-mail responsief willen maken. Als u altijd pixelbreedten op alles hebt, kunt u veel waarden overschrijven die door mediaquery's worden overschreven. Als uw geneste tabelbreedten zijn gebaseerd op percentages, past u alles aan wanneer u de breedte van het bovenliggende element aanpast.
Rij 1 Rij 2 Rij 3
Nu voegen we onze inhoud toe en voegen we wat opvulling toe aan de middelste cel.
| Lorem ipsum dolor sit amet! |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, zit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat. |
| Rij 3 |
Nu gaan we onze twee kolommen met inhoud toevoegen aan rij 3. Omdat we een 'marge' tussen deze twee cellen willen, maar de marge wordt niet ondersteund, maken we een tabel met drie kolommen met een lege cel tussen de twee buitenste kolommen.
Hoe graag ik me aan percentages wil houden, wanneer je content van een specifieke grootte hebt, kan het lastig zijn om het naar een percentage te converteren (in dit voorbeeld zouden de kolommen 48.1% zijn, wat verwarrend zou kunnen worden). Omdat onze twee afbeeldingen 260 px breed zijn, maken we daarom kolommen die ook 260 pixels breed zijn, met in het midden een 20 px-margecel. (Dit is 540px, wat de 600px-breedte van onze tabel is, verminderd met de opvulling van 30px aan elke kant.) Zorg ervoor dat u uw lettertype en regelhoogte op nul zet en een niet-brekend ruimtekarakter toevoegt in de margecel.
We zullen ook de valign naar top voor beide cellen, zodat ze verticaal uitgelijnd zijn met de bovenkant, zelfs als de ene kolom meer tekst bevat dan de andere. De standaard verticale uitlijning is midden-.
| Kolom 1 | Kolom 2 |
Laten we nu onze afbeeldingen en inhoud toevoegen aan die kolommen. Omdat we meerdere rijen nodig hebben, zullen we een andere tabel nesten omdat we er geen kunnen gebruiken colspan of rowspan -tags. We voegen ook wat opvulling toe tussen de afbeelding en de kopie in elke kolom.
|
|
Hier hebben we de breedte van de afbeeldingen ingesteld met HTML op 100% van de kolombreedte. Dit is opnieuw zo dat als we deze e-mail responsief maken, we alleen mediaquery's hoeven te gebruiken om de breedte van het bovenliggende element te wijzigen. We zullen de hoogte in pixels moeten opheffen vanwege het gebruik style = "height: auto" nu zal het niet in alles werken (hoest hoest, Outlook). Dus we zullen het instellen met behulp van pixels. Dit betekent dat we zouden moeten instellen hoogte: automatisch! belangrijk op die afbeeldingen die mediaquery's gebruiken om de pixelwaarde te overschrijven, maar we zouden dat met een enkele klasse kunnen doen. Als we de breedte instellen als een percentage, hoeven we dat niet te overschrijven. Hoe minder dingen te negeren, hoe beter.
Nu voegen we onze opvulling toe aan de voettekstrij.
Rij 3
In die cel zullen we een andere tafel nesten om onze twee kolommen te krijgen.
| Kolom 1 | Kolom 2 |
We zullen een ander tafeltje voor onze social media-pictogrammen maken. We zullen zijn oudercel instellen op align = "right". Zorg ervoor dat je instelt border = "0" op deze afbeeldingkoppelingen (om een blauwe linkrand te voorkomen) en niet te vergeten display: block.
Nu voegen we onze tekst toe en voegen we een breedte toe aan onze cellen om het zekere voor het onzekere te nemen, ook al is er veel spaties tussen. We stellen deze cel in op 75% en de andere op 25%.
® Iemand, ergens in 2013
Abonneer u onmiddellijk op deze nieuwsbrief
En daar hebben we het! Onze lay-out is voltooid.
Laten we dit door de W3C Validator halen om er zeker van te zijn dat niets slecht of kapot is. Als je precies hebt gevolgd, zal het zeggen dat het is geslaagd.
Vervolgens gaan we een test uitvoeren via Litmus om ervoor te zorgen dat de structuur van onze e-mail goed werkt. Hier is een samenvatting van mijn test:
Kijk online Onze eerste rij is de kop. We zullen de gebruiken tag om vetgedrukte tekst te maken omdat, zoals we al weten, als deze bestaat in HTML, we die gebruiken in plaats van CSS.
Lorem ipsum dolor sit amet!
We voegen deze inline-stijl ook toe aan alle andere cellen van de tekst:
style = "color: # 153643; font-family: Arial, sans-serif; font-size: 16px; line-height: 20px;"
Vervolgens moeten we de voettekst opmaken en we zullen ook onze afmeldlink opruimen. We zullen onze unsubscribe-tekstlink opmaken met behulp van zowel CSS als de HTML label. Deze verdubbeling is de beste manier om ervoor te zorgen dat uw links nooit in het standaard blauw verschijnen.
® Iemand, ergens in 2013
Afmelden deze nieuwsbrief meteen
En daar hebben we het! Alles is binnen. Tijd om de grenzen uit te schakelen en het er mooi uit te laten zien. Ga door en vervang elk voorkomen van border = "1" met border = "0".
Op dit moment ziet het er een beetje triest uit in de witte ruimte, dus laten we naar onze eerste 600px brede tafel gaan en toevoegen:
style = "border: 1px solid #cccccc;"
Nu lijkt het er niet meer op dat het zweeft. Als laatste stap voeg ik 30px padding toe aan de onderkant van de allereerste cel om te voorkomen dat onze e-mail abrupt onderin stopt in sommige webmailclients (zoals Apple Mail) en 10px padding aan de bovenkant , zodat onze blauwe kop een beetje ademruimte heeft.
En dat is het! Je bent helemaal klaar voor een laatste test.
Kijk online
Het zit er op!
Voordat we het een dag noemen, moet je ze verwijderen als je opmerkingen hebt gebruikt. Sommige e-mailclients kunnen stikken bij opmerkingen, dus het is het verstandig als er geen onnodige code in uw bestanden staat.
Het is nu een goed moment om een laatste test uit te voeren en dan is uw HTML-e-mail klaar om te verzenden!
E-mailsjablonen downloaden
Als u meer opties nodig heeft, is een van onze responsieve e-mailsjablonen wellicht precies wat u nodig hebt. Abonneer u op Envato Elements en u krijgt onbeperkte toegang tot honderden aanpasbare e-mailsjablonen, evenals stockfoto's, pictogrammen, afbeeldingen en vele andere creatieve items voor uw projecten.
Meer informatie over HTML-e-mail
Om te nemen wat je hebt geleerd naar het volgende niveau! Bekijk onze Mastering HTML Email-leergids voor meer tutorials over HTML-e-mailsjablonen, e-mailontwerp, codering van responsieve e-mail, toegankelijkheid, marketing, transactionele e-mail, e-mailserviceproviders (ESP's), tips voor de ontwikkeling van workflows en meer!
Accentsconagua
Kijk online 