AEM 6.4 har nått slutet på den utökade supporten och denna dokumentation är inte längre uppdaterad. Mer information finns i teknisk supportperiod. Hitta de versioner som stöds här.
I det här dokumentet beskrivs några av de bästa sätten att arbeta med e-postdesign, vilket resulterar i en välutvecklad mall för e-postkampanjer.
Den demokampanj som finns i AEM följer alla dessa bästa metoder. Hur de bästa metoderna implementeras i demokampanjen beskrivs för varje bästa praxis.
Använd dessa rutiner när du skapar ett eget nyhetsbrev.
NOTE
Allt kampanjinnehåll ska skapas under en master textsida cq/personalization/components/ambitpage. Om du till exempel planerar en kampanjstruktur ser det ut ungefär så här:
När du skapar en e-postmall för Adobe Campaign måste du ta med egenskapen acMapping med värdet mapRecipient i jcr:innehåll noden i mallen, eller så kan du inte välja Adobe Campaign-mallen i Sidegenskaper AEM (fältet är inaktiverat).
Koda all struktur med <table>-element. För mer komplicerade layouter bör du kapsla tabeller för att skapa komplexa strukturer.
E-post ska se bra ut även utan CSS.
Tabeller används i hela mallen för att strukturera innehåll. Använder för närvarande maximalt fyra kapslade tabeller (1 bastabell + max). 3 kapslingsnivåer)
<div> -taggar används endast i redigeringsläge för att säkerställa korrekt komponentredigering.
Använd elementattribut (t.ex. cellfyllnad, justering och bredd) för att ange tabelldimensioner. Detta framtvingar en kartongmodellstruktur.
Alla tabeller innehåller nödvändiga attribut som border, cellutfyllnad, cellmellanrum och width.
För att harmonisera elementplaceringen i tabeller har alla tabellceller attributet valign="top" anges.
Konto för mobilvänlighet, om möjligt. Använd mediefrågor om du vill öka textstorleken på små skärmar, ange träffområden i ministorlek för länkar.
Gör ett e-postmeddelande responsivt om designen tillåter det.
När det gäller CSS-format som används för att illustrera demodesign används mediefrågor för att erbjuda en mobilvänlig version.
Inline CSS är bättre än att placera all CSS i början.
För att bättre demonstrera den underliggande HTML-strukturen och förenkla möjligheten att anpassa nyhetsbrevsstrukturen har endast vissa CSS-definitioner infogats.
Basformat och mallvarianter har extraherats till ett formatblock i <head> på sidan. När nyhetsbrevet är färdigt ska dessa CSS-definitioner infogas i HTML. En automatisk infogningsmekanism planeras, men är för närvarande inte tillgänglig.
Gör din CSS enkel. Undvik sammansatta formatdeklarationer, kodförkortningar, CSS-layoutegenskaper, komplexa väljare och pseudoelement.
När det gäller CSS-format som används för att illustrera demodesign följs CSS-rekommendationerna.
E-postmeddelanden ska vara högst 600-800 pixlar breda. Detta gör att de beter sig bättre i den storlek på förhandsgranskningsfönstret som många klienter har.
The width innehållsförteckningen är begränsad till 600 px i demodesign.
Bilder images
/libs/mcm/campaign/components/image
Bästa praxis
Implementering
Lägg till alt attribut till bilder
The alt -attribut har definierats som obligatoriskt för bildkomponenten.
Använd jpg i stället för png bildformat
Bilderna hanteras alltid som JPG av bildkomponenten.
Använd <img> i stället för bakgrundsbilder i en tabell.
Inga bakgrundsbilddata används i mallarna.
Lägg till attributet style="display block" i bilder. Tillåter visning bra på Gmail.
Alla bilder innehåller som standard style="display block" -attribut.
Använd html i stället för format i CSS (font-family)
RichTextEditor (t.ex. i textimagekomponenten) har nu stöd för att välja och använda teckensnittsfamiljer och teckensnittsstorlekar på markerade texter. De återges som taggar.
Använd grundläggande plattformsövergripande teckensnitt som Arial, Verdana, Georgien och Times New Roman.
Används för att skapa nyhetsbrev.
För demodesignen används teckensnittet "Helvetica", men kommer att återgå till det generiska sans-serif-teckensnittet, om det inte finns något.
Allmän generic
Bästa praxis
Implementering
Använd W3C-valideraren för att korrigera HTML-koden. Se till att alla öppna taggar stängs ordentligt.
Koden har validerats. För XHTML-övergångsdokument är det bara det saknade xmlns-attributet för <html> element saknas.
Stör inte JavaScript eller Flash - dessa tekniker stöds i stort sett inte av e-postklienter.
Varken JavaScript eller Flash används i nyhetsbrevmallen.
Lägg till en oformaterad textversion för att skicka flera delar.
En ny widget skapades i sidegenskaperna för att enkelt extrahera en textversion från sidinnehållet. Detta kan användas som startpunkt för den slutliga versionen av plaintext.
Mallar och exempel för kampanjnyhetsbrev campaign-newsletter-templates-and-examples
AEM innehåller flera mallar och komponenter som du kan använda för att skapa nyhetsbrev om kampanjer. Du kan använda de här mallarna och komponenterna för att skapa anpassade nyhetsbrev.
Mallar templates
Det finns tre något olika malltyper att välja mellan för att få en heltäckande bas och för att bredda möjligheterna med innehållsflöde. Du kan enkelt använda dessa för att skapa ett anpassat nyhetsbrev.
Alla har en header, a sidfot och brödtext -avsnitt. Under brödavsnittet skiljer sig mallarna åt i stapelsymbol (1, 2 eller 3 kolumner).
Dessa komponenter är optimerade för e-postinnehåll; dvs. de följer de bästa praxis som beskrivs i detta dokument. Om du använder andra komponenter som inte finns installerade i systemet bryter det vanligtvis mot dessa regler.
