Hoe we het deden de Tuts + Emails converteren naar campagnes voor campagnes

In de eerste twee delen van deze casestudyreeks hebben we gezien hoe de nieuwe Envato Tuts + e-mails werden ontworpen en vervolgens gebouwd als statische HTML / CSS-deliverables. In dit laatste stukje van de puzzel laat ik zien hoe we die bestanden hebben geconverteerd naar Campaign Monitor-sjablonen.

In dit stadium waren er een aantal teamleden bij het proces betrokken: Cameron en ik. Cam nam de leiding over de integratie van de digesties in Campaign Monitor, ik behandelde de nieuwsbrieven, die ik in dit bericht zal uitleggen.

1. Maak je bestanden klaar

Nicole leverde een reeks bestanden aan het einde van het bouwproces, inclusief HTML-, CSS- en afbeeldingsactiva. Samen zorgden ze voor een aantal verschillende e-mailtypen, dus moest ik alleen de stukjes maken die nodig zijn voor de nieuwsbriefsjabloon en vanaf daar werken.

Tip: Download de bronbestanden als u deze wilt volgen.

Plaatselijke held

Momenteel zijn de paden in de bestanden allemaal relatief. Er zijn een paar koppelingen naar CSS-bestanden, enkele links binnen die naar afbeeldingen, en ze wijzen allemaal rond de lokale bestandsdirectory zoals wij die zien. Bijvoorbeeld:

Wanneer we onze bestanden uploaden aan het einde van de zelfstudie, zal Campaign Monitor al deze paden herkennen en dienovereenkomstig wijzigen.

2. Begin bovenaan

Ons proces is dit: we nemen alle statische delen van onze e-mailsjabloon waar en vervangen deze waar mogelijk voor dynamische fragmenten. Naar beneden schuiven, is de eerste boosdoener die ik tegenkom rond regel 73: een link naar de webversie:

Klopt er iets niet? Bekijk de webversie

Die link zal elke keer anders zijn, dus laten we deze omschakelen naar de dynamiek van CM :

Iets ziet er niet goed uit? Bekijk de webversie

Zo eenvoudig. volgende!

3. Meer belangrijke links

De waar we net voor hebben gezorgd, is een van de weinige belangrijke links die beschikbaar zijn gesteld door Campagnemonitor. Terwijl we in de stemming zijn, laten we een of twee anderen gebruiken. De e-mail voorkeuren alinea is te vinden op regel 346 en ziet er zo uit:

U bent geabonneerd op deze nieuwsbrief omdat u deel uitmaakt van het vertaalteam. Niet helemaal naar wens? Geen probleem: werk uw e-mailvoorkeuren bij of meld u af.

Laten we gebruiken  en  om dat gedeelte dynamisch te maken:

U bent geabonneerd op deze nieuwsbrief omdat u deel uitmaakt van het vertaalteam. Niet helemaal naar wens? Geen probleem: update uw e-mailvoorkeuren of Afmelden.

Er zijn een aantal andere belangrijke links, zoals , maar we zullen er in dit geval geen gebruik van maken.

4. Enkele regels

Het volgende dat we moeten onthouden is de belangrijkste e-mail rubriek.

Rond regel 87 vind je het als volgt gemarkeerd:

Nieuwsbrief vertaalproject
 
Maand 20XX

Alinea's, met klassen van titel en h1 of h2 (bedankt e-mail HTML). Elk van deze moet kunnen worden bewerkt vanuit Campaign Monitor, dus aangezien we de tekstinhoud en niets anders alleen maar hoeven te bewerken, kunnen we de  sjabloon element:

 Nieuwsbrief vertaalproject 
 
 Maand 20XX 

De alinea's blijven perfect intact, we voegen gewoon een bewerkbare regio toe binnen elke alinea. Elk enkele lijn heeft een optionele label kenmerk, dat handig wordt weergegeven vanuit de editor van Campaign Monitor:

5. Meerdere lijnen

Voor inhoud die iets complexer is dan kopjes en straplines, gebruiken we de element. Op regel 134 vindt u de inhoud van ons 'eerste artikel' dat we gebruiken als inleiding voor elke e-mail:

In dit vertaalproject nieuwsbrief n tempus nunc ullamcorper at. Etiam eget turpis augue. Proin a efficitur massa. In ac augue libero. Nulla in tortor commodo, hendrerit nisl non, placerat nunc.
 
Ian Yates
 Redacteur, Envato Tuts+

Laten we deze twee secties dynamisch maken:

 
In dit vertaalproject nieuwsbrief n tempus nunc ullamcorper at. Etiam eget turpis augue. Proin a efficitur massa. In ac augue libero. Nulla in tortor commodo, hendrerit nisl non, placerat nunc.
   
Ian Yates
 Redacteur, Envato Tuts+
 

Deze volgen hetzelfde patroon als eerder: bewerkbare regio's, met optionele labels, maar deze keer bieden ze ons een WYSIWYG-editor:

6. Bewerkbare afbeeldingen

Blader naar regel 168 en u vindt een afbeelding binnen een tabelcel, allemaal op zichzelf:

Dit zal deel uitmaken van een herhaalbare sectie (waar we in een minuut mee zullen omgaan), dus laten we eerst deze afbeelding dynamisch maken. Ik vind het niet leuk om het woord "gewoon" te gebruiken in tutorials, maar in dit geval zal ik het laten schuiven: voeg gewoon de bewerkbare attribuut aan de afbeeldingstag. Gedaan!

De breedte attribuut is vereist, maar de src (die ons een standaardafbeelding geeft) is optioneel, net als onze vriend de label attribuut.

Als dat klaar is, kunnen we met de editor de standaardafbeelding verwijderen, een nieuwe uploaden, alt-tekst toevoegen en (cruciaal) een link toevoegen.

"De harde data zeggen: e-mails met afbeeldingen zetten bijna twee keer om." - Chris Hexton, CEO en mede-oprichter van Vero

Notitie: houd er rekening mee dat als we ervoor kiezen om de afbeelding volledig te verwijderen, de betreffende opmaak behouden blijft. Dit kan resulteren in grote gestoffeerde gebieden zonder inhoud, dus overweeg hoe u uw afbeeldingen opmaakt in het ontwerp.

7. Herhaalbare gebieden

Die afbeelding maakt deel uit van een sectie die we zo vaak als nodig kunnen herhalen. Het begint op lijn 146 en eindigt op lijn 176, met de opmerkingen:

Zoals we eerder met andere gebieden hebben gedaan, moeten we de kop in deze sectie maken en de inhoud a , dus doe dat voordat je verder gaat.

Om deze hele brok reproduceerbaar te maken, wikkelen we de benodigde stukjes in a element:

Dit zal ons wat extra controle geven in de Campaign Monitor-editor, waardoor we de sectie kunnen dupliceren, verplaatsen (handig voor opnieuw ordenen) of verwijderen.

Notitie: de moet container ofwel een , een , of een .

Nog een opmerking: je kunt niet nesten elementen!

8. Indeling

Nu voor een herhaalbaar gedeelte met een verschil. Het is een onderwerpspecifieke sectie en elk onderwerp heeft er een met de juiste onderwerpkleur.

In het geval van de nieuwsbrief van ons vertaalproject kunnen we soms een gedeelte over fotografie en video vertonen, samen met code en gamedevelopment. Soms slaan we code misschien over. Soms kunnen we alle negen onderwerpen bevatten. Dus wat is het beste om dit te organiseren? Ga naar element.

We kunnen meerdere lay-outelementen gebruiken binnen een enkele blokkeren, zodat we elke keer dat we het blok dupliceren een keuze aan lay-outs krijgen. In ons geval willen we een keuze maken uit de beschikbare onderwerpen, dus onze opmaak ziet er ongeveer als volgt uit:

    ... 

Daar zie je lay-outelementen, elk met een uniek label.

Belangrijk: niet doen gebruik escaped HTML-entiteiten (zoals & liever dan &) binnen de lay-outlabels.

Begin op regel 183 door onze onderwerpblokken in a te vouwen . Verpak vervolgens elk van de topic-blokken in a

9. Uploaden naar campagnemonitor

Al ons harde werk is gedaan, nu moeten we onze bestanden uploaden naar Campaign Monitor om onze sjabloon in een e-mailcampagne te gebruiken!

Ga in het dashboard van uw campagnemonitor naar Sjablonen> Importeren.

Voer vervolgens een naam voor uw sjabloon in, selecteer uw voltooide HTML-bestand en selecteer vervolgens alle andere benodigde items (CSS en afbeeldingen) als één zipbestand. 

Uw bestanden worden geüpload en verwerkt, wat even duurt. Stijlen zullen worden geoptimaliseerd (sommige inline, sommige in de van de HTML) en paden worden bijgewerkt. Als dat allemaal klaar is, is uw sjabloon beschikbaar om te selecteren wanneer u een nieuwe campagne start!

Conclusie

Dat omhult deze e-mailgevalstudie; een inzicht in hoe we de Envato Tuts + e-mails hebben ontworpen en gebouwd. Ik hoop dat je het leuk vond om het proces te volgen en als je e-mailinspiratie nodig hebt voor je volgende project, bekijk dan zeker de nieuwste e-mailsjablonen die beschikbaar zijn op Envato Market.!

Web ontwerp