이 문서에서는 잘 개발된 이메일 캠페인 템플릿으로 이어지는 이메일 디자인에 대한 우수 사례 중 일부를 설명합니다.
AEM에서 사용할 수 있는 데모 캠페인은 다음과 같은 모든 모범 사례를 따릅니다. 각 우수 사례에 대해 데모 캠페인에서 우수 사례를 구현하는 방법에 대해 설명합니다.
자신만의 뉴스레터를 만들 때 이러한 우수 사례를 사용합니다.
모든 캠페인 컨텐츠는 cq/personalization/components/ambitpage
유형의 master
페이지 아래에 만들어야 합니다. 예를 들어 캠페인 구조를 계획하는 경우 다음과 같습니다.
/content/campaigns/teasers/en/campaign-promotion-global
마스터 페이지 아래에 있어야 합니다.
/content/campaigns/teasers/master/en/campaign-promotion-global
Adobe Campaign에 대한 메일 템플릿을 만들 때 템플릿의 jcr:content 노드에 값 mapRecipient과 함께 속성 acMapping 속성을 포함해야 합니다. 그렇지 않으면 AEM의 페이지 속성에서 Adobe Campaign 템플릿을 선택할 수 없습니다(필드가 비활성화됨).
/libs/mcm/campaign/components/campaign_newsletterpage
모범 사례 | 구현 |
일관된 렌더링을 위해 문서 유형을 지정합니다. 시작 부분에 DOCTYPE 추가(HTML 또는 XHTML) |
cq:doctype 속성을 "/etc/designs/default/jcr:content/campaign_newsletterpage" 기본값은 "XHTML"입니다. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> "HTML_5"로 변경할 수 있습니다. <!DOCTYPE HTML> |
특수 문자를 정확하게 렌더링할 수 있도록 문자 정의를 지정합니다. CHARSET 선언(예: iso-8859-15, UTF-8)을 <head>에 추가 |
이 UTF-8로 설정되어 있습니다. <meta http-equiv="content-type" content="text/html; charset=UTF-8"> |
<table>요소를 사용하여 모든 구조를 코딩합니다. 보다 복잡한 레이아웃의 경우 표를 중첩하여 복잡한 구조를 만들어야 합니다. 이메일은 css가 없더라도 좋아 보입니다. |
전체 템플릿 전체에서 표를 사용하여 컨텐츠를 구조화합니다. 현재 중첩된 최대 4개의 표(기본 표 1개 + 최대)를 사용하고 있습니다. 3 중첩 수준) <div> 태그는 적절한 구성 요소 편집을 위해 작성 모드에서만 사용됩니다. |
요소 특성(예: 셀 패딩, 값 및 폭)을 사용하여 표 크기를 설정합니다. 이것은 박스 모델 구조를 만든다. | 모든 표에는 border, cellpadding, cellspacing 및 width와 같은 필요한 속성이 포함되어 있습니다. 표 내부에 요소 배치를 조화롭게 하기 위해 모든 테이블 셀에는 valign="top" 속성이 설정되어 있습니다. |
가능하면 모바일친화성을 고려하십시오. 미디어 쿼리를 사용하여 작은 화면에서 텍스트 크기를 늘리고 링크에 대해 축소판 크기의 히트 영역을 제공합니다. 디자인이 허용하는 경우 반응형 이메일을 만듭니다. |
CSS 스타일을 사용하여 데모 디자인 일러스트레이션에 이르는 한 모바일 친화적인 버전을 제공하는 데 미디어 쿼리를 사용합니다. |
인라인 CSS는 모든 CSS를 시작 부분에 놓는 것보다 더 좋습니다. | 기본 HTML 구조를 보다 잘 보여주고 뉴스레터 구조를 일부 CSS 정의만 삽입하여 사용자 정의할 수 있도록 하기 위해. 페이지의 <head>에 있는 스타일 블록에 기본 스타일과 템플릿 변화가 추출되었습니다. 뉴스레터의 최종 제출 시 이러한 CSS 정의는 HTML에 삽입해야 합니다. 자동 인라인닝 메커니즘은 계획되었지만 현재 사용할 수 없습니다. |
CSS를 간소화할 수 있습니다. 복합 스타일 선언, 대표 코드, CSS 레이아웃 속성, 복잡한 선택기 및 의사 요소를 사용하지 마십시오. | CSS 스타일을 사용하여 데모 디자인 일러스트레이션에 이르는 한 CSS 권장 사항을 따릅니다. |
이메일은 최대 폭 600-800픽셀이어야 합니다. 이렇게 하면 많은 클라이언트가 제공하는 미리 보기 창 크기 내에서 더 잘 동작합니다. | 내용 테이블의 너비는 데모 디자인에서 600px로 제한됩니다. |
/libs/mcm/campaign/components/image
모범 사례 | 구현 |
---|---|
이미지에 alt 특성 추가 | alt 특성이 이미지 구성 요소에 대해 필수로 정의되었습니다. |
이미지에 png 형식 대신 jpg을 사용합니다. | 이미지는 이미지 구성 요소에서 항상 JPG로 제공됩니다. |
표의 배경 이미지 대신 <img> 요소를 사용합니다. |
템플릿에 배경 이미지 데이터가 사용되지 않습니다. |
사진에 속성 스타일="표시 블록"을 추가합니다. Gmail에 잘 표시할 수 있습니다. | 모든 이미지는 기본적으로 style="display block" 속성을 포함합니다. |
/libs/mcm/campaign/components/heading, /libs/mcm/campaign/components/textimage
모범 사례 | 구현 |
CSS에서 스타일 대신 html <font>를 사용합니다(글꼴 모음). | 이제 RichTextEditor(예: 텍스트 이미지 구성 요소의 경우)에서 선택한 텍스트에 글꼴군과 글꼴 크기를 선택하여 적용할 수 있습니다. <font> 태그로 렌더링됩니다. |
Arial, Verdana, Georgia 및 Times New Roman과 같은 기본 크로스 플랫폼 글꼴을 사용합니다. | 뉴스레터 디자인에 따라 다릅니다. 데모 디자인의 경우 "Helvetica" 글꼴이 사용되지만 없는 경우 일반 sans-serif 글꼴로 돌아갑니다. |
모범 사례 | 구현 |
---|---|
W3C 유효성 검사기를 사용하여 HTML 코드를 수정합니다. 열려 있는 태그가 모두 올바르게 닫혀 있는지 확인합니다. | 코드가 확인되었습니다. XHTML 전환 Doctype의 경우 <html> 요소에 대한 누락된 xmlns 특성만 누락되었습니다. |
JavaScript 또는 Flash으로 고민하지 마십시오. 이러한 기술은 이메일 클라이언트에서 대부분 지원되지 않습니다. | 뉴스레터 템플릿에는 JavaScript와 Flash이 사용되지 않습니다. |
다중 부분 전송을 위해 일반 텍스트 버전을 추가합니다. | 새 위젯은 페이지 컨텐츠에서 일반 텍스트 버전을 쉽게 추출하기 위해 페이지 속성으로 빌드되었습니다. 최종 일반 텍스트 버전의 시작점으로 사용할 수 있습니다. |
AEM에는 캠페인 뉴스레터를 만들 수 있는 다양한 템플릿과 구성 요소가 포함되어 있습니다. 이러한 템플릿 및 구성 요소를 사용하여 사용자 정의 뉴스레터를 만들 수 있습니다.
기본 템플릿을 제공하고 다양한 컨텐츠 흐름을 확장하려면 기본적으로 3가지 서로 다른 템플릿 유형을 사용할 수 있습니다. 이러한 템플릿을 사용하여 맞춤형 뉴스레터를 만들 수 있습니다.
모두 머리글, 바닥글 및 body 섹션이 있습니다. 본문 섹션 아래에 있는 각 템플릿은 열 디자인(1, 2 또는 3열)과 다릅니다.
현재 캠페인 템플릿](/docs/experience-manager-64/authoring/aem-adobe-campaign/adobe-campaign-components.html?lang=ko)에서 사용할 수 있는 구성 요소가 [7개 있습니다. 이러한 구성 요소는 모두 Adobe 마크업 언어 HTL을 기반으로 합니다.
구성 요소 이름 | 구성 요소 경로 |
---|---|
제목 | /libs/mcm/campaign/components/heading |
이미지 | /libs/mcm/campaign/components/image |
텍스트 및 개인화 | /libs/mcm/campaign/components/personalization |
Textimage | /libs/mcm/campaign/components/textimage |
링크 | /libs/mcm/campaign/components/reference |
Dynamic Media Classic(이전 Scene7) 이미지 템플릿 | /libs/mcm/campaign/s7image |
대상 참조 | /libs/mcm/campaign/components/reference |
이러한 구성 요소는 메일 컨텐츠에 최적화되어 있습니다.즉, 이 문서의 모범 사례를 준수합니다. 다른 기본 구성 요소를 사용하면 일반적으로 이러한 규칙을 위반하게 됩니다.
이러한 구성 요소는 Adobe Campaign 구성 요소에서 자세히 설명합니다.