Aanbevolen procedures voor e-mailsjablonen best-practices-for-email-templates

CAUTION
Dit artikel is op de afgekeurde Componenten van de Stichting van toepassing die AEM e-mailcomponenten worden gebaseerd.
De gebruikers worden aangemoedigd om de moderne Componenten E-mailcomponenten van de Kern te gebruiken.

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.

NOTE
Alle inhoud van de campagne moet worden gemaakt onder een master pagina van het type cq/personalization/components/ambitpage .
Als uw geplande campagnestructuur bijvoorbeeld ongeveer zo is
/content/campaigns/teasers/en/campaign-promotion-global
Controleer of het item zich onder een master -pagina bevindt
/content/campaigns/teasers/master/en/campaign-promotion-global
NOTE
Wanneer het creëren van een postmalplaatje voor Adobe Campaign, moet u het bezit acMapping met de waarde mapRecipient in jcr omvatten:content knoop van het malplaatje. Als u niet, kunt u niet het malplaatje van Adobe Campaign in Eigenschappen van de Pagina van Experience Manager (het gebied is gehandicapt) selecteren.

Sjabloon/pagina-component template-page-component

/libs/mcm/campagne/components/campagne_newsletterpage

Beste praktijken
Implementatie

Geef het documenttype op zodat u een consistente rendering garandeert.

DOCTYPE toevoegen aan het begin (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 zodat 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 in de ontwerpmodus gebruikt voor een juiste componentbewerking.

Gebruik elementkenmerken (zoals celopvulling, valsing en breedte) om tabelafmetingen in te stellen. Deze methode forceert een kader-modelstructuur.

Alle lijsten bevatten noodzakelijke attributen zoals grens , celpadding , het cel uit elkaar plaatsen , en breedte .

Om element het plaatsen binnen lijsten te harmoniseren, hebben alle lijstcellen de attributen valign= "bovenkant" die worden geplaatst.

Houd, indien mogelijk, rekening 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 structuur van de HTML 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 worden deze CSS-definities in de HTML gealigneerd. Een automatisch inlijningsmechanisme is gepland, maar is momenteel niet beschikbaar.

Houd uw CSS eenvoudig. Gebruik geen samengestelde stijldeclaraties, stenocode, 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. Deze grootte zorgt ervoor dat ze zich beter gedragen binnen de grootte van het voorvertoningsvenster die door veel clients wordt geboden.
De breedte van inhoudstafel is beperkt tot 600 pixel in duoontwerp.

Afbeeldingen images

/libs/mcm/campagne/componenten/image

Beste praktijken
Implementatie
Voeg alt attributen aan beelden toe
Het alt attribuut is bepaald als verplicht voor de beeldcomponent.
Gebruik jpg in plaats van png formaat voor beelden
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. Als u dit doet, kunnen ze goed worden weergegeven op Gmail.
Alle beelden bevatten per gebrek style= "vertoningsblok" attributen.

/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 TextImage) ondersteunt nu het kiezen en toepassen van lettertypefamilies en tekengrootten op geselecteerde teksten. Ze worden weergegeven als <font>-tags.
Gebruik basis, dwars-platformdoopvonten zoals Arial®, Verdana, Georgië , en Tijden Nieuwe Roman® .

Afhankelijk van het ontwerp van de nieuwsbrief.

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

Algemeen generic

Beste praktijken
Implementatie
Gebruik W3C-validatie om de HTML-code te corrigeren. Zorg ervoor dat alle open labels goed zijn gesloten.
Code is gevalideerd. Alleen voor XHTML-overgangsdocumenttype ontbreekt het ontbrekende xmlns-kenmerk voor het <html> -element.
Vermijd het gebruik van JavaScript of Flash. Deze technologieën worden vaak niet ondersteund door e-mailclients.
JavaScript of Flash wordt niet gebruikt in de nieuwsbrief sjabloon.
Voeg een gewone tekstversie toe voor het verzenden van meerdere onderdelen.
Er is een nieuwe widget ingebouwd in de pagina-eigenschappen om eenvoudig een plaintekstversie uit de pagina-inhoud te extraheren. U kunt deze gebruiken als beginpunt voor de laatste plaintext-versie.

Sjablonen en voorbeelden voor nieuwsbrieven voor campagnes campaign-newsletter-templates-and-examples

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 templates

Om een stevige basis aan te bieden en de verscheidenheid van de mogelijkheden van de inhoudsstroom uit te breiden, zijn er drie lichtjes verschillende malplaatjetypes beschikbaar uit-van-de-doos. U kunt deze drie typen eenvoudig gebruiken om een aangepaste nieuwsbrief te maken.

Al hebben a kopbal, a footer, en a lichaam sectie. Onder de lichaamssectie, verschilt elk malplaatje in kolomontwerp (één, twee, of drie kolommen).

Varianten van mogelijke nieuwsbrieven

Onderdelen components

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

de naam van de Component
de weg van de Component
Kop
/libs/mcm/campagne/componenten/kop
Afbeelding
/libs/mcm/campagne/componenten/image
Tekst&Personalization
/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
NOTE
Deze componenten zijn geoptimaliseerd voor e-mailinhoud, dat wil zeggen dat ze de beste werkwijzen volgen die in dit document worden beschreven. Het gebruiken van andere uit-van-de-doos componenten schendt gewoonlijk deze regels.

Deze componenten worden beschreven in detail in de componenten van Adobe Campaign.

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2