Aanbevolen procedures voor e-mailsjablonen

In dit document worden enkele van de aanbevolen procedures beschreven voor het ontwerpen van e-mailberichten. Dit resulteert in een goed ontwikkelde sjabloon voor e-mailcampagnes.

De demo-campagne in AEM volgt al deze beste praktijken. Hoe de beste praktijken in de demo campagne worden uitgevoerd wordt beschreven voor elke beste praktijken.

Gebruik deze aanbevolen procedures bij het maken van uw eigen nieuwsbrief.

OPMERKING

Alle inhoud van de campagne moet worden gemaakt onder een master-pagina van het type cq/personalization/components/ambitpage. Als u bijvoorbeeld een campagnestructuur wilt maken, gaat dit als volgt te werk:

  • /content/campaigns/teasers/en/campaign-promotion-global

Zorg ervoor dat het bestand zich onder een master pagina bevindt:

  • /content/campaigns/teasers/master/en/campaign-promotion-global
OPMERKING

Wanneer u een mailsjabloon voor Adobe Campaign maakt, moet u de eigenschap acMapping met de waarde mapRecipient opnemen in het jcr:content-knooppunt van de sjabloon, anders kunt u de Adobe Campaign-sjabloon niet selecteren in Pagina-eigenschappen van AEM (veld is uitgeschakeld).

Sjabloon/paginacomponent

/libs/mcm/campagne/components/campagne_newsletterpage

Beste praktijken Implementatie

Geef het documenttype op om consistente rendering te garanderen.

DOCTYPE aan het begin toevoegen (HTML of XHTML)

Is configureerbaar door ontwerp veranderend cq:doctype bezit in "/etc/designs/default/jcr:content/campagne_newsletterpage"

De standaardwaarde is "XHTML":

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Kan worden gewijzigd in "HTML_5":

<!DOCTYPE HTML>

Geef een tekendefinitie op om ervoor te zorgen dat speciale tekens correct worden weergegeven.

CHARSET-declaratie (bijvoorbeeld iso-8859-15, UTF-8) toevoegen aan <head>

Is ingesteld op UTF-8.

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

Codeer alle structuur met behulp van het <table>element. Voor complexere lay-outs moet u tabellen nesten om complexe structuren te maken.

E-mail moet er goed uitzien, zelfs zonder css.

Tabellen worden in de gehele sjabloon gebruikt voor het structureren van inhoud. Momenteel met maximaal vier geneste tabellen (1 basislabel + max.) 3 nestniveaus)

<div> -tags worden alleen gebruikt in de ontwerpmodus voor een juiste componentbewerking.

Gebruik elementkenmerken (zoals celopvulling, valsing en breedte) om tabelafmetingen in te stellen. Dit dwingt een box-model structuur.

Alle tabellen bevatten noodzakelijke kenmerken, zoals border, cellpadding, cellspacing en width.

Om de plaatsing van elementen in tabellen te harmoniseren, hebben alle tabelcellen het kenmerk valign="top" dat wordt ingesteld.

Indien mogelijk rekening houden met de vriendelijkheid van mobiele apparaten. Gebruik mediaquery's om de tekstgrootte op kleine schermen te verhogen en selecteer aanraakgebieden met de grootte van het blokje voor koppelingen.

Maak een e-mail ontvankelijk als het ontwerp het toestaat.

Voor zover CSS-stijlen worden gebruikt om demonstratieontwerp te illustreren, worden mediaquery's gebruikt om een mobiele versie aan te bieden.
Inline CSS is beter dan het plaatsen van alle CSS aan het begin.

Om de onderliggende HTML-structuur beter aan te tonen en de mogelijkheid om de nieuwsbrief-structuur aan te passen te vereenvoudigen, zijn slechts enkele CSS-definities gealigneerd.

Basisstijlen en sjabloonvariaties zijn geëxtraheerd naar een stijlblok in de <head> van de pagina. Bij de definitieve indiening van de nieuwsbrief moeten deze CSS-definities in de HTML worden opgenomen. Een automatisch inlineringsmechanisme is gepland, maar is momenteel niet beschikbaar.

Houd uw CSS eenvoudig. Vermijd samengestelde stijldeclaraties, korte code, CSS-lay-outeigenschappen, complexe kiezers en pseudo-elementen. Voor zover CSS-stijlen worden gebruikt om demonstratieontwerp te illustreren, worden de CSS-aanbevelingen gevolgd.
E-mails moeten een maximale breedte van 600-800 pixels hebben. Hierdoor kunnen ze zich beter gedragen binnen de grootte van het voorvertoningsvenster die door veel clients wordt geboden. De breedte van de inhoudstafel is beperkt tot 600px in duoontwerp.

Afbeeldingen

/libs/mcm/campagne/componenten/image

Beste praktijken Implementatie
alt-kenmerken toevoegen aan afbeeldingen Het kenmerk alt is gedefinieerd als verplicht voor de afbeeldingscomponent.
Gebruik jpg in plaats van png-indeling voor afbeeldingen Afbeeldingen worden altijd als JPG weergegeven door de afbeeldingscomponent.
Gebruik het element <img> in plaats van achtergrondafbeeldingen in een tabel. Er worden geen achtergrondafbeeldingsgegevens gebruikt in de sjablonen.
Kenmerkstijl="weergaveblok" toevoegen aan afbeeldingen. Staat toe om goed op Gmail te tonen. Alle afbeeldingen bevatten standaard het style="display block"-kenmerk.

/libs/mcm/campagne/components/heading, /libs/mcm/campagne/components/textiel

Beste praktijken Implementatie
HTML <font> gebruiken in plaats van stijl in CSS (font-family) De RichTextEditor (bijvoorbeeld in de component van de textielafbeelding) ondersteunt nu het kiezen en toepassen van lettertypefamilies en tekengrootten op geselecteerde teksten. Ze worden weergegeven als <font>-tags.
Gebruik basale, platformonafhankelijke lettertypen zoals Arial, Verdana, Georgia en Times New Roman.

Afhankelijk van het ontwerp van de nieuwsbrief.

Voor het demo-ontwerp wordt het lettertype "Helvetica" gebruikt, maar het wordt teruggezet naar het algemene sans-serif-lettertype, indien dit niet aanwezig is.

Algemeen

Beste praktijken Implementatie
Gebruik W3C-validatie om de HTML-code te corrigeren. Zorg ervoor dat alle open labels goed zijn gesloten. Code is gevalideerd. Bij XHTML-overgangsdocument ontbreekt alleen het ontbrekende xmlns-kenmerk voor het <html>-element.
Let niet op met JavaScript of Flash - deze technologieën worden grotendeels niet ondersteund door e-mailclients. JavaScript en Flash worden niet gebruikt in de sjabloon voor nieuwsbrieven.
Voeg een gewone tekstversie toe voor het verzenden van meerdere onderdelen. Er is een nieuwe widget toegevoegd aan de pagina-eigenschappen om eenvoudig een plaintekstversie uit de pagina-inhoud te extraheren. Dit kan als uitgangspunt voor de definitieve plaintext versie worden gebruikt.

Sjablonen en voorbeelden voor nieuwsbrieven voor campagnes

AEM wordt geleverd met verschillende sjablonen en componenten uit de doos die u kunt gebruiken om campagnebulletins te maken. U kunt deze sjablonen en componenten gebruiken om uw aangepaste nieuwsbrieven te maken.

Sjablonen

Er zijn drie enigszins verschillende sjabloontypen beschikbaar uit het vak om een solide basis aan te bieden en de verscheidenheid aan mogelijkheden voor inhoudsstroom uit te breiden. U kunt deze eenvoudig gebruiken om een aangepaste nieuwe letter te maken.

Alle hebben een header, een footer en een body sectie. Onder de lichaamssectie verschilt elke sjabloon in kolomontwerp (1, 2 of 3 kolommen).

chlimage_1-318

Onderdelen

Er zijn momenteel zeven componenten beschikbaar voor gebruik binnen campagnemalplaatjes. Deze componenten zijn allen gebaseerd op de Adobe prijsverhogingstaal HTL.

Componentnaam Componentpad
Kop /libs/mcm/campagne/componenten/kop
Afbeelding /libs/mcm/campagne/componenten/image
Tekst&personalisatie /libs/mcm/campagne/componenten/personalisatie
Textimage /libs/mcm/campagne/onderdelen/textielafbeelding
Koppeling /libs/mcm/campagne/componenten/reference
Dynamic Media Classic (voorheen Scene7) afbeeldingssjabloon /libs/mcm/campagne/s7image
Gerichte referentie /libs/mcm/campagne/componenten/reference
OPMERKING

Deze componenten zijn geoptimaliseerd voor e-mailinhoud. dat wil zeggen dat zij zich houden aan de beste praktijken die in dit document worden beschreven. Het gebruiken van andere uit-van-de-doos componenten zal gewoonlijk deze regels overtreden.

Deze componenten worden in detail beschreven in Adobe Campaign components.

Op deze pagina