렌더링 문제를 피하고 이메일 뉴스 레터의 가독성과 효과를 향상시키기 위해 디자인과 콘텐츠를 명확하게 유지하십시오.
HTML 이메일 기초
HTML 이메일을 코딩 할 때 가장 큰 고통은 Eudora, Outlook, AOL, Thunderbird 및 Lotus Notes와 같은 데스크탑 소프트웨어에서 Yahoo!와 같은 웹 기반 이메일 서비스에 이르기까지 다양한 소프트웨어 도구를 읽을 수 있다는 것입니다. , Hotmail 및 Google Mail, 휴대 전화 및 태블릿의 앱을 이메일로 보내십시오. 각 이메일 소프트웨어 도구에 HTML을 렌더링하는 데 사용되는 소프트웨어는 HTML 및 CSS 코드가 작동하는 것이 무엇인지 결정하고 작동하지 않습니다. 웹 사이트의 크로스 브라우저 호환성을 보장하기가 어렵다고 생각되면, 이것이 완전히 새로운 게임이라는 점에 유의하십시오. 이러한 각 이메일 소프트웨어 도구는 동일한 이메일을 크게 다른 방식으로 표시 할 수 있습니다. 이러한 도구가 HTML 이메일을 올바르게 표시하는 경우에도 전자 메일을 읽을 때 독자가 창문을 크기로 만드는 너비는 차이를 설명합니다.
HTML 이메일을 직접 코딩하든 기존 템플릿을 사용하든 HTML 이메일을 만들 때 명심해야 할 두 가지 기본 개념이 있습니다.
HTML 테이블을 사용하여 설계 레이아웃 및 일부 프리젠 테이션을 제어하십시오. 웹 페이지에 순수한 CSS 레이아웃을 사용하는 데 사용될 수 있지만 그 접근 방식은 이메일 환경에서 유지되지 않습니다.
배경색 및 글꼴과 같은 이메일 내에서 다른 프리젠 테이션 요소를 제어하기 위해 인라인 CSS를 사용하십시오.
HTML 테이블과 인라인 CSS가 HTML 이메일 내에서 상호 작용하는 방법을 확인하는 가장 빠르고 쉬운 방법은 캠페인 모니터 및 MailChimp에서 일부 템플릿을 다운로드하는 것입니다. 이 템플릿 중 하나를 열면 나중에 더 자세히 논의 할 몇 가지 사항이 있습니다.
내 코드 HTML 이메일 사이트에도 다운로드하고 서식 한 실제 HTML 이메일이있어서 다른 사람들이 이메일을 만드는 방법을 공부할 수 있습니다.
1 단계 : 레이아웃에 HTML 테이블을 사용하십시오
<:> 맞습니다 : 테이블이 돌아 왔어요! 웹 표준은 웹 브라우저에 표시를위한 페이지를 코딩하는 표준이되었을 수 있지만 이것은 웹, 베이비가 아닙니다. 몇몇 이메일 소프트웨어 클라이언트는 CSS 지원 측면에서 8 개의 볼 뒤에 가벼운 해에 가벼워졌습니다. 즉, 모든 독자에 대해 뉴스 레터가 일관되게 표시되기를 원한다면 레이아웃에 테이블을 사용하는 데 의지해야합니다 (끝에 읽기 목록을 참조하십시오. 이 기사는 메일 클라이언트에서 CSS 지원에 대한 훌륭한 리소스에 대한이 기사). -
따라서 표준 준수 모범 사례와 린 마크 업 기술을 제쳐두고 : 우리는 손을 더럽 히려고합니다!
HTML 이메일을 만드는 첫 번째 단계는 사용하려는 종류의 레이아웃을 결정하는 것입니다. 뉴스 레터의 경우 단일 열 및 2 열 레이아웃이 가장 잘 작동합니다. 많은 양의 콘텐츠가 이메일과 같은 작은 공간으로 밀려 나면 발생하는 자연 혼돈을 제어하기 때문입니다. 단일 열 이메일 디자인은 또한 전화기와 태블릿에서 쉽게 표시 할 수 있도록합니다. - 단일 열 레이아웃은 일반적으로 다음과 같습니다
로고와 로고와 일부 (또는 일부)가 부모 웹 사이트의 내비게이션 링크를 포함하여 브랜딩을 강화하고 사이트 방문자에게 친숙 함을 제공합니다
email intra-email 링크는 이메일에 더 나오는 이야기와 이야기와 내용이 뒤 따릅니다.
전자 메일 하단의 바닥 글은 종종 상단 탐색과 동일한 링크를 포함하고 를 구독하지 않는 지침을 포함합니다.
2 열 이메일은 헤더와 바닥 글을 사용합니다. 2 열 웹 페이지와 마찬가지로, 일반적으로 좁은 측면 열을 사용하여 하우스 기능과 더 많은 정보에 대한 링크를 사용하는 반면 더 넓은 열에는 전자 메일의 신체 내용이 보관됩니다. 이 기사의 뒷부분에서 볼 수 있듯이 전화 나 태블릿에 잘 표시되는 2 열 이메일 레이아웃을 얻으려면 코드 -FU가 필요합니다.
홍보 이메일은 비슷한 규칙을 따르지만 컨텐츠와 링크 방식에는 훨씬 적습니다. 여기에는 종종 하나 또는 두 개의 메시지가 포함되며 때로는 작은 설명 텍스트와 이미지 아래의 일부 링크가있는 큰 이미지를 사용합니다.
HTML 테이블을 사용하여 공간을 행과 열로 나누기 위해 이러한 모든 이메일 레이아웃 가능성을 쉽게 만들 수 있습니다. 실제로 HTML 테이블을 사용하는 것은 다른 메일 클라이언트에서 일관되게 렌더링하는 레이아웃을 달성하는 유일한 방법입니다.
이메일이 어떻게 설계되었는지에 관계없이 가장 중요한 컨텐츠가 이메일 상단 또는 근처에 표시되어야한다는 것을 기억하는 것이 중요하므로 독자가 이메일을 엽니다면 즉시 볼 수 있습니다. 이메일 메시지의 왼쪽 상단은 종종 사람들이 이메일을 열 때 가장 먼저 보는 장소입니다. -
이것은 html 이메일을 만드는 데 사용하는 접근법입니다.
2 열 레이아웃의 경우 헤더에 대해 각각 하나의 테이블, 두 개의 중앙 내용 열 및 바닥 글은 세 개의 테이블을 만듭니다. 이 테이블을 다른 컨테이너 테이블로 감싸십시오. 단일 열 레이아웃에는 동일한 접근 방식을 사용하지만 콘텐츠 테이블에 하나의 열을 제공하십시오. 이 접근법은 이메일 디자인에 여러 테이블 셀에 분해되는 이미지가 포함되어있는 경우 특히 적합합니다. 그렇지 않으면, 헤더에 대한 td 행이있는 단일 테이블 (Colspan = "2", 디자인이 두 열을 사용하는 경우), 컨텐츠 및 바닥 글은 모두 Lotus Notes 이메일 소프트웨어에 잘 표시되어야합니다.
테이블 내 속성과 TD 태그를 사용하여 테이블의 디스플레이를 제어하십시오. 예를 들어, 경계 = "0", valign = "top", align = "left"(또는 디자인에 적합한 경우 중앙), cellPadding = "0", cellspacing = "0"등을 설정합니다. 이는 주로 이전 이메일 클라이언트가 (간신히) 허용되는 방식으로 이메일을 표시하는 데 도움이됩니다.
이메일 디자인에 테이블 주위에 테두리가 포함되어 있지 않더라도 TR의 내부 정렬로 인해 발생하는 모든 문제의 디버깅에 도움이되는 Border = "1"을 개발하는 동안 도움이 될 수 있습니다. 및 TD 태그. 테스트 및 생산을 위해 Border = "0"으로 다시 변경하십시오
-
이 접근법은 최신 표준을 사용하여 코드를 선호하는 순수 주의자들을 화나게 할 수 있지만,이 시점에서 유일하게 실행 가능한 접근법입니다. 그러나 우리가 레이아웃에 테이블을 사용하고 있다는 사실이 구식 방법에 완전히 의존해야한다는 의미는 아닙니다. 예를 들어, Lotus Notes가 HTML 이메일을 표시하는 방법에 관계없이 글꼴 태그 사용에 의지 할 필요가 없습니다. 그리고 Outlook 2007의 HTML 렌더링 엔진은 완벽하지는 않지만 기본 HTML 테이블이 잘 표시됩니다.
그러나 몇 가지 경고가 있습니다. 다음에 우리의 텍스트 스타일링을 살펴 보겠습니다. -
2 단계 : CSS 스타일을 추가하십시오
CSS 지원이 우편 고객이 열악하다고 했습니까? 글쎄요. 그러나 중첩 테이블 레이아웃이 마련된 후에는 이메일의 스타일에 CSS를 사용할 수 있습니다. 조심해야 할 몇 가지가 있습니다. 내가 사용하는 단계는 다음과 같습니다.
먼저, 인라인 스타일을 사용하여 여기에 표시된대로 모든 스타일 정보를 저장하십시오.
-
여기에는 테이블, td, p, a 등이 포함됩니다
웹 페이지를 작성할 때와 같이 HTML 헤드 태그에서 CSS 스타일 선언을 사용하지 마십시오. 대신, 스타일 선언을 바디 태그 바로 아래에 놓습니다. 그러나 Google Mail은 이메일의 스타일 선언을 찾고 (유용하게) 삭제합니다. 또한 링크 요소를 사용하여 외부 스타일 시트를 참조하여 Google Mail, Hotmail 및 기타 이메일 소프트웨어를 참조하지 마십시오. 이러한 외부 참조를 스타일 시트에 무시, 수정 또는 삭제합니다. 컨테이너 테이블의 경우 (헤더, 콘텐츠 및 바닥 글 테이블이있는 컨테이너 테이블) 테이블 너비를 98%로 설정합니다. 야후! 우편은 이메일을 올바르게 표시하기 위해 양쪽에 1% 쿠션이 필요합니다. 측면 홈통이 이메일 디자인에 중요하다면 잠재적 인 문제를 피하기 위해 너비를 95% 또는 90%로 설정하십시오. 물론, 컨테이너 테이블 내부의 테이블은 100%로 설정해야합니다.
일반 글꼴 스타일 정보를 컨텐츠에 가장 가까운 표에 넣습니다. 예, 이것은 여러 TD 셀 내에서 반복적 인 스타일 선언을 초래할 수 있습니다. 글꼴 스타일 정의를 제목 (예 : H1, H2), P 또는 필요한 경우에만 태그에 넣습니다.
divs를 드물게 사용하여 작은 내용 상자와 테이블의 TD 셀 내부의 오른쪽 또는 왼쪽으로 링크를 떠 다니십시오. Google Mail은 CSS 플로트 선언을 무시하는 것 같습니다 (아직 Yahoo!와 Hotmail은 잘 대처합니다). 때로는 플로트 선언에 의존하는 것보다 더 복잡한 테이블 레이아웃을 코딩하는 것이 좋습니다. 또는 이메일을 어수선하기가 너무 쉽기 때문에 디자이너에게 플로트 콘텐츠를 좁은 측면 칼럼에 넣도록 요청하십시오. 플로트에 대한 플라크 지원은 이메일 디자인을 재 작업 할 수있는 한 가지 문제입니다.
div는 간신히 유용한 것으로 보이지만, 스팬은 인라인 요소이기 때문에 거의 매번 작동하는 것처럼 보입니다. 경우에 따라 스팬은 색칠 또는 크기 텍스트 이상의 텍스트에 사용될 수 있습니다. 내용 위나 아래의 텍스트를 배치하는 데 사용될 수 있습니다.
.
일부 이메일 배송 서비스는 스타일 정의를 풀어 모든 이메일 소프트웨어에서보다 명시적이고 읽을 수있게합니다. 예를 들어, CSS 속기 스타일 = "마진 : 10px 5px 10px 0;" 앞서 나와있는 긴 스타일 선언으로 확장 될 수 있습니다. 각 이메일을 테스트하고 이메일 코드에 어떤 일이 발생하는지 확인하십시오. 최악의 경우 모든 이메일 소프트웨어와 잘 어울리는 것처럼 보이기 때문에 CSS 속기로 시작하십시오. .
캠페인 모니터 및 MailChimp에서 전자 메일 템플릿을 다운로드하여 연구 한 경우 컨테이너 테이블을 HTML 본체 태그처럼 취급하는 것을 볼 수 있습니다. 캠페인 모니터 팀은이 테이블을 "Bodyimposter"라고하며, 이는 프레임이나 래퍼 테이블에 대해 생각하는 좋은 방법입니다. CSS 관점에서 컨테이너 테이블은 Google Mail과 같은 서비스가 본체 태그를 비활성화하거나 무시하지 않은 경우 HTML 본문 요소가 수행 할 작업을 수행합니다.
3 단계 : 모범 사례 채택
내가 제안한 가이드 라인을 사용하여 유효한 HTML 이메일을 생성했다는 것을 알면 솔루션의 일부일뿐입니다. 이메일이 잘 수신되도록해야 할 몇 가지 모범 사례가 있습니다. .
다음 단계는 다양한 이메일 클라이언트에서 HTML 이메일을 테스트하는 것입니다. 종종 이것은 해결 방법이 필요한 문제를 식별합니다 최초의 테스트 도구는 Firefox 및 Internet Explorer 웹 브라우저입니다. 이메일이 두 브라우저 모두에 잘 표시되거나 완벽하게 표시되면 Outlook, Yahoo!, Google Mail 및 기타 서비스에서 이메일을 테스트 할 가능성이 높습니다. 가능하다면 Internet Explorer 6에서 이메일 테스트를 권장하는 것이 좋습니다.이를 통해 전자 메일이 Outlook 2003에서 전자 메일을 렌더링하는 방법에 대한 좋은 표시를 제공해야합니다 (인터넷 실행에 대한 정보는이 기사 끝의 리소스 목록을 참조하십시오. 탐험가 6). 마지막으로 iPhone 또는 iPad에서 이메일이 어떻게 보이는지 테스트하려면 Safari 웹 브라우저에서 HTML 이메일을 확인하십시오.
이 두 웹 브라우저에서 전자 메일이 제대로 나타나면 이메일 배송 서비스를 사용하여 이메일을 다양한 테스트 이메일 계정으로 보냅니다. 이상적으로는 Yahoo!, Hotmail 및 Google Mail 서비스와 계정이 포함되어야합니다.
물론 사용하는 테스트 계정은 이메일을받을 사람들의 메일 링리스트의 도메인 이름에 따라 결정되어야합니다. 예를 들어,이 목록에 AOL 가입자가없는 경우 AOL 이메일 계정을 설정하고 테스트 할 시간과 돈 낭비 일 수 있습니다.
이 테스트 단계에서 필요한 가장 일반적인 코드 조정은 다음과 같습니다.
때로는 폭이 비율에서 고정 너비로의 스위치가 필요합니다. 독자가 읽는 동안 이메일 창을 크기를 조정할 수 있기 때문에 이것은 이상적이지 않지만, 때로는 고정 너비를 사용하는 것이 여러 전자 메일 클라이언트에서 레이아웃을 올바르게 표시하는 유일한 방법입니다.
전자 메일 디자인의 열에 간격 문제가있는 경우 먼저 HTML 테이블의 셀 패딩 및 셀 스페이스 속성을 조정하십시오. 그렇지 않은 경우 CSS 마진 및 패딩 속성을 적용하십시오. HTML 간격은 오래된 이메일 소프트웨어에서 더 잘 작동합니다
IMG 태그 바로 아래에 TD 셀이 닫히면 이미지 변위가 발생할 수 있습니다. 이것은 고대 HTML 문제입니다. 태그를 바로 다음 (동일한 줄에) IMG 태그는 성가신 1 픽셀 간격을 제거합니다.
또한 다음 모범 사례가 권장됩니다
JavaScript를 사용하지 마십시오. 대부분의 이메일 소프트웨어는 어쨌든 비활성화됩니다. -
이미지가 썰어 여러 HTML 테이블 셀에 퍼지면 많은 테스트 계정을 사용하여 이메일을 테스트하십시오. 때로는 전망에서 멋지게 보일 수 있지만 Hotmail 및 기타 서비스에서 하나 이상의 픽셀로 이동합니다. 또한 이미지를 배경 이미지의 일부를 표시하는 모든 테이블 행과 열을 감싸는 새로운 HTML 테이블의 배경 이미지를 만드는 것을 고려하십시오. 이것은 종종 이미지를 슬라이스하는 것과 동일한 효과를 달성하지만 코드를 적게 사용하고 더 나은 결과를 제공 할 수 있습니다 (아래 참조). Outlook 2007에는 배경 이미지가 표시되지 않습니다. 대상 이메일 소프트웨어로 이메일 코드를 테스트하십시오.
배경 이미지의 경우 CSS를 사용하는 대신 테이블의 배경 속성을 사용하십시오. 이것은 다른 잠재적 솔루션보다 이메일 소프트웨어에서 더 일관되게 작동합니다. -
웹 서버 (바람직하게는 웹 사이트의 이미지와 별개의 폴더) (예 : /images /email이라는 폴더)에 이메일 이미지를 저장하고 삭제하지 마십시오. 어떤 사람들은 몇 주 또는 몇 달 후에 이메일을 열었습니다. 사람들이 북마크를 사용하여 웹 사이트로 돌아가는 방식과 마찬가지로.
모든 이미지가 ALT, 높이 및 너비 속성을 사용하는지 확인하십시오. 이러한 속성의 값을 설정하면 Google 메일의 결과가 향상되고 독자가 이미지를 끄면 레이아웃을 유지 관리합니다. 그러나 Outlook 2007은 Alt 속성을 인식하지 못한다는 점에 유의하십시오.
A TAGS에 대한 대상 = "_ blank"속성을 사용하여 웹 메일 서비스를 읽은 사람들이 요청 된 페이지가 웹 메일 인터페이스에 나타나지 않도록하십시오.
1 × 1 픽셀 이미지를 사용하여 스페이스를 강제로 정확한 이메일 레이아웃을 만들 수 있지만 스패머는 종종 1 × 1 픽셀 이미지를 사용하여 이메일이 열렸는지 확인합니다. 이 관행을 사용하면 이메일이 스팸으로 분류 될 가능성이 높아집니다.
마찬가지로, 이메일에 큰 이미지 "주름 위"를 사용하지 마십시오. 이것은 또 다른 고전적인 스패머 연습이며 이메일을 스팸으로 해석하게 할 수 있습니다.
-
이미지가 꺼져있는 상태에서 HTML 이메일이 허용되는지 확인하는 것이 중요합니다. 많은 이메일 응용 프로그램은 기본적으로 이미지 표시를 "OFF"로 설정했습니다. 예를 들어, 배경 이미지를 사용하여 흰색 글꼴 색상의 배경색을 제공하는 경우 HTML 테이블의 해당 배경색이 흰색이 아닌 어둡지 확인하십시오.
전자 메일이 이미지로 표시되는 방식을 테스트 할 때 일반적으로 텍스트 편집기를 사용하여 각 이미지의 SRC 속성을 "XSRCX"와 같은 고유 한 문자 조합으로 대체 한 다음 테스트 후 다시 되돌아갑니다.
일단 HTML 이메일이 조정되어 테스트 전자 메일 계정에 잘 표시되도록 조정되면 다음 단계는 체크리스트를 통과하는 것입니다. 예를 들어 다음을 확인하십시오
From 주소가 올바르게 표시됩니까 (맨손으로 전자 메일 주소가 아닌 이름으로)?
는 제목 줄이 맞습니까?
는 연락처 정보가 정확하고 시각적으로 명백합니까? -
전자 메일 상단에 텍스트가 표시됩니다.“이 이메일을 받았기 때문에이 이메일을 받았습니다. 구독 지침 이이 이메일의 맨 아래에 있습니다.”
귀하의 이메일에는 독자에게 주소에서 귀하의 주소를 이메일 주소 책에 추가하도록 요청하는 텍스트가 포함되어 있습니까?
이메일 상단에는 메시지의 웹 버전에 대한 링크가 포함되어 있습니까?
많은 전자 메일 배달 서비스에는 HTML 이메일이 광범위한 이메일 소프트웨어에서 어떻게 표시되는지 확인하는 기능이 포함됩니다. 전송하기 전에 필요한 코드 조정을 식별하는 데 도움이됩니다. -
4 단계 : Google Mail, Lotus Notes 및 Outlook 2007 코드
> Google Mail, Lotus Notes 및 Outlook 2007은 고유 한 코딩 문제를 제시합니다. Outlook 2007, 믿거 나 말거나, 이전 버전의 Outlook보다 CSS에 대한 지원이 크게 적습니다!
-
Google 메일의 지원 부족은 조금 더 용서할 수 있습니다. 응용 프로그램은 브라우저에서 실행되므로 표시되는 이메일의 내용을 제어 할 수 없습니다. 결과적으로 Google의 엔지니어는 HTML 또는 이메일이 작성된 CSS의 품질에 관계없이 애플리케이션이 제대로 표시되도록 조치를 취해야했습니다.
결과적으로 Google Mail은 웹 표준이 원시적 인 1990 년대 초의 인공물처럼 작용합니다. 약간의 작업이 필요하지만 Google 메일 페이지를 열고 HTML 이메일을 실제로 렌더링하는 방법에 대한 접근 방식을 확인할 수 있습니다.
한 가지에 대해 Google Mail은 이메일에 어디에 있는지 상관없이 모든 스타일 태그 사이에 포함 된 CSS 스타일을 삭제합니다. HTML 테이블 내에 표시되는 글꼴 (스타일을 사용하는 유일한 대안)은 HTML 이메일이 어떻게 구성되어 있든 의도 한 것보다 더 큰 습관이 있습니다.
그러나 좋은 소식은,이 세 가지 이메일 응용 프로그램의 이상한 점을 설명하도록 코드화되면 HTML 이메일 코드가 대부분의 경우 전자 메일 클라이언트가 아니라는 것입니다. Google Mail 및 기타 이전 이메일 소프트웨어에서 잘 작동하는 몇 가지 기술은 다음과 같습니다.
CSS 스타일이 아닌 BGColor 속성으로 TD 셀의 배경색을 정의하십시오.
위에서 언급 한 바와 같이, CSS를 사용하는 대신 배경 이미지에 대한 TD 셀의 배경 속성을 사용하십시오. 이 접근법의 한 가지 부작용은 백그라운드 이미지를 필요에 따라 키가 크게 만들 수 있다는 것입니다. 이메일 템플릿에 사용 된 콘텐츠가 크기가 다를 가능성이 높으면이 방식으로 가장 잘 배경 이미지를 사용하여 크기가 달라질 수 있습니다. 사본의 높이에 따라 한 이메일에서 다음 이메일까지 이메일이 수축되거나 확장됩니다. 그러나 Outlook 2007은 배경 이미지를 완전히 무시합니다. -
더 잘 작동하면 패딩 선언을 사용하여 TD 셀 내에서 마진을 제어하십시오. 마진 스타일은이 셀에서 작동하지 않지만 패딩은
입니다.
TD 셀 주위에 테두리가 필요한 경우 Google Mail은 DIV에 정의 될 때 TD 셀 주위에 테두리를 표시하지만 TD 태그에서 테두리 스타일로 정의되지 않은 경우는 아닙니다. - .
어두운 배경색에 대한 밝은 색의 링크가 필요한 경우 글꼴 정의를 TD 셀에 넣으십시오 (따라서 P와 태그에 동일하게 적용) 색상을 추가하십시오.
P와 글꼴이 크기가 다른 것처럼 보이면 A 태그를 P 태그로 감싸십시오.
Google Mail은 HTML 이메일을 중앙 패널에 압박하는 Google Mail 사용자 인터페이스의 오른쪽 열을 적극적으로 사용합니다. 컨텐츠 TD의 패딩 스타일이 둥글게 10 픽셀로 설정되어있어 텍스트가 왼쪽과 오른쪽 가장자리에 맞지 않도록하십시오.
Google 메일 계정으로 HTML 이메일을 테스트 할 때는 TD, H1, H2, P, A 및 기타 태그에 하나 이상의 글꼴 스타일이 누락 될 수 있습니다. Google 메일이 글꼴을 올바르게 표시하는지 확인하려면 모든 글꼴을주의 깊게 검사하십시오.
Google 메일 외에도 HTML 이메일을 만들 때 프로그래머가 직면 한 또 다른 명백한 위험이 있습니다 : Lotus Notes. 많은 대기업들이 메모 설치를 계속 지원하고 업그레이드합니다. -
불행히도, 어떤 회사가 메모를 사용하는지 알 수 없습니다. 가장 좋은 방법은이 기사에 설명 된 지침을 따르는 것입니다. 코드가 더 원시적 일수록, 메모와 함께 완벽하게 작동하지 않더라도 잘 작동 할 가능성이 높아집니다.
.
즉, Lotus Notes는 거의 믿음을 넘어서는 HTML 이메일을 소개 할 가능성이 상당합니다. 예를 들어, 기존 버전의 메모는 이미지를 독점 형식으로 변환하거나 한 이메일에서 완벽한 기본 HTML을 무시할 수 있지만 다른 이메일에 다른 HTML 벌세를 표시 할 수 있습니다. - .
다음은 HTML 이메일을 올바르게 표시하도록 메모를 설득하는 데 도움이되는 몇 가지 팁입니다.
앞에서 논의한 바와 같이, 모든 내부 레이아웃 테이블이 포함 된 컨테이너 테이블 (예 : 헤더, 컨텐츠 및 바닥 글)을 사용하십시오. 이것은 이메일을 하나의 HTML 덩어리로 유지하므로 메모에 표시 될 때 레이아웃 조각이 방황 할 가능성이 적습니다.
너비를 백분율로 설정하고/또는 최소 5의 셀 패딩을 사용하여 컨테이너 테이블 주위에 거터를 만듭니다.
앞에서 언급했듯이 이메일 헤드 태그에 스타일 선언을 사용하지 마십시오. 웹 표준을 준수하는 접근법 일지 모르지만 (Google Mail과 같은) 메모는 스타일을 삭제할 수 있습니다. 대신 테이블 내 인라인 스타일, TD, H1, H2, P, A 및 기타 태그에 의존하십시오.
웹 서버에 저장된 이미지에 절대 URL을 사용하십시오. 이미지 변환 메모에 대해서는 많이 할 수 없지만 원격 이미지를 사용하면 도움이 될 수 있습니다. -
명명 된 앵커를 사용하여 메일 내 링크가 드물게 작동하지 않습니다. 이메일을 특정 콘텐츠로 뛰어 넘는 링크를 피하는 것이 가장 좋습니다.
html 테이블의 콜 스팬을 피하십시오. 참고 - 특히 이전 버전은 기본 테이블 레이아웃 만 처리 할 수 있습니다.
TD 셀 폭이 정확한지 확인하십시오. 모든 셀이 가장 넓은 폭을 자동으로 설정하는 웹 브라우저와 달리 정의 된 너비를 기준으로 각 TD 셀 크기를 기록합니다.
이메일 레이아웃 중심을 중심으로하는 것은 일반적으로 메모에서 작동하지 않습니다. 이메일 레이아웃은 일반적으로 좌회전해야합니다
-
이러한 기술을 사용하여 Google Mail 및 Lotus Notes에서 성공적인 렌더링을 달성하면 이전 HTML 렌더링 엔진을 사용하는 Outlook 2007에 이메일도 잘 표시됩니다. Microsoft는 이메일 소프트웨어가 제대로 표시되고 제대로 표시되지 않는 것에 대한 세부 정보를 게시했습니다. 자세한 내용은이 기사 끝의 리소스 섹션에서 찾을 수 있습니다.
캠페인 모니터 인 이메일 배달 서비스에는 모든 인기있는 모바일, 웹 및 데스크탑 이메일 클라이언트에 대한 CSS 요소 지원 목록이 있습니다.
5 단계 : 전화 및 태블릿 코딩
놀라운 수의 사람들은 스마트 폰과 태블릿과 데스크탑 이메일 소프트웨어에서 HTML 이메일을 읽습니다. 이 장치에 잘 표시되도록 HTML 테이블에 적응하는 것은 다소 쉬운 것으로 판명되었습니다. CSS 지원이 새로운 전화기 및 태블릿에 사용되는 HTML 렌더링 엔진에 매우 좋습니다.
솔루션은 CSS @Media 정의를 사용하여 HTML 테이블 TD 셀을 대상으로하고 잘 표시하는 데 필요한 글꼴 크기를 향상시키는 것입니다. 예를 들어, iPhone의 글꼴은 읽을 수 있으려면 13 픽셀이어야합니다. 가장 중요한 부분? WebMail 및 Desktop 이메일 소프트웨어는 @Media 정의를 제거하거나 무시하는 동안 휴대 전화와 태블릿이 코드를 읽고 모든 것을 완벽하게 표시합니다.
전화 및 태블릿 용 1 열 레이아웃 HTML 테이블을 표시하기위한 @Media 정의 샘플 세트는 다음과 같습니다.
<span><span><span><p</span> <span>style<span>="<span>color: red;</span>"</span></span>></span><span><span></p</span>></span></span>
로그인 후 복사
위의 @Media 코드는 480 픽셀 미만의 스크린의 경우 열 테이블, 왼쪽 및 오른쪽 열, 왼쪽 내용 열과 동일한 너비 및 기본 열 아래의 슬라이드를 설정합니다.
이 접근법은 휴대 전화 및/또는 태블릿으로 작업하기 위해 레이아웃 설계 변경을 대상으로하는 데 사용될 수 있습니다.
이 솔루션은 캠페인 모니터, 반응 형 이메일 디자인의 훌륭한 가이드에서 제공되며 HTML 이메일을 다양한 화면 크기에 반응하는 방법에 대한 자세한 내용과 아이디어가 있습니다.
요약
이메일을받는 많은 사람들은 여러 가지 이유로 텍스트보다 HTML을 선호합니다. 그러나 프로그래머의 경우, 일관되게 표시되는 HTML 이메일을 작성하는 작업은 단순하고 끔찍하게 복잡하게 나타납니다. 이 기사는 이메일 소프트웨어에서 작동하는 마크 업을 만들기위한 많은 문제와 전략을 설명했습니다.
이 기사에서 벗어나는 가장 좋은 아이디어는 무엇입니까? 간단한 이메일 디자인과보다 복잡한 솔루션 사이에서 선택할 수있는 것이 있다면 단순성은 항상 가장 안전합니다.
추가 읽기
이 리소스는 HTML 이메일 코딩에 대해 더 배우고 싶을 때 도움이되는 귀중한 정보를 제공합니다.
캠페인 모니터 : CSS 지원 안내서
캠페인 모니터 : 반응 형 전자 메일 디자인
<:> MailChimp : 모바일 장치 의 이메일
<:> mailchimp : 이메일 blueprints
<:> MailChimp : 이메일 마케팅 필드 안내서
그리고 여기에 좀 더…
이메일 표준 프로젝트
이메일 표준 프로젝트는 아마도 다른 이메일 클라이언트가 HTML과 CSS를 지원하는 정도를 정확하게 이해하기위한 가장 좋은 출발점 일 것입니다. 이 사이트는 또한 이메일 소프트웨어의 준수를 비교하는 데 사용할 수있는 산성 테스트를 유지하며 웹 표준의 이메일 지원을 개선하기 위해 참여할 수있는 몇 가지 방법이 있습니다. .
무료 캠페인 모니터 및 MailChimp HTML 이메일 템플릿
이 이메일 배달 서비스는 모두 다른 이메일 클라이언트와 시간이 지남에 따라 템플릿을 적극적으로 테스트합니다. 그러나 각각의 접근 방식에는 미묘한 차이가 있습니다. 캠페인 모니터는 헤드 태그 내에 스타일 선언을하는 반면 MailChimp는 그렇지 않습니다. 이메일 목록을받는 사람이 사용하는 이메일 클라이언트를 사용하여 최종 HTML 코드를 테스트하십시오.
일반 텍스트 이메일 디자인 가이드 라인
이 기사는 텍스트 이메일을보다 쉽게 스캔 할 수 있도록 여러 가지 간단한 기술을 나열합니다.
테스트 html 이메일
이 기사는 여러 이메일 클라이언트에서 테스트 절차를 탐색합니다. 다른 관련 기사에는 HTML 이메일 레이아웃 생성 및 다변량 테스트 이해가 포함됩니다.
에 의해 차단 된 이메일 이미지에 대한 기사
"> 클릭 및 캠페인 모니터
2004 년부터 ClickZ 기사는 이미지가 차단 될 때 또는 컨텐츠가 미리보기 창에서 볼 때 주요 이메일 소프트웨어를 비교하는 방법을 보여줍니다. 캠페인 모니터 기사는 실제 예제와 아이디어를 나열하여 전자 메일의 기본 이미지 오프 렌더링과 싸우는 방법과 미리보기 PANES에서 괜찮아 보이도록 이메일을 디자인하는 방법을 나열합니다.
Word 2007 HTML 및 CSS 렌더링 기능 2007
Outlook 2007이 HTML 및 CSS에 대해 렌더링하지 않는 것에 대한 공식 Microsoft 설명. DreamWeaver에서 작동하는 유효성 검사기와 Microsoft 편집 도구에 대한 링크가 포함되어 있습니다.
MailChimp : HTML 이메일 템플릿 시작 가이드
스팸 필터 작동 방식을 포함하여 HTML 이메일의 모든 측면에 대한 많은 정보가 많이 있습니다. 프로세스를보다 쉽게 만들기 위해 좋은 도구가 포함되어 있습니다.
“HTML 이메일의 비밀”시리즈
이 정보 중 일부는 오래되었지만 Lotus Notes의 좋은 부분이 제공됩니다.
CSS와 이메일, 나무에서 키스
HTML 이메일에 대한이 우수한 CSS 전용 접근 방식은 목록별로 게시되었습니다. 참고 : 저자는 캠페인 모니터 블로그에 게시 된이 기사에 대한 업데이트를 작성하여 HTML 이메일로 CSS 프레젠테이션을 최적화합니다.
HTML 코드가 전자 메일 전달성에 영향을 미치는 방법
다양한 이메일 서비스가 HTML 이메일에 포함 된 HTML을 어떻게 보는지 설명하는 괜찮은 개요. 모든 문제를 직접 해결할 수는 없습니다 (예 : HTML과 이메일의 텍스트 버전간에 명확한 경계를 만들면 이메일 서비스 제공 업체를 사용하는 경우 이메일 서비스 제공 업체에 문제가 있습니다).
초보자의 6 단계 이메일 마케팅 안내서
다음은 액세스 가능한 제목이 제안한 것보다 주제를 더 잘 다루는 이메일 마케팅 안내서이며, 이메일 템플릿을 작성하는 동안 독자로부터 최상의 결과를 얻을 수있는 좋은 정보 섹션이 포함됩니다. 2020 년 후반부터 오늘날의 전자 메일 마케팅 공간에 대한 견고한 전망을 제공합니다.
2020 년에 블로그를 시작하는 방법 (그리고 돈을 버는 방법) : 오늘 블로깅을 시작하는 쉬운 가이드
메일 링리스트를 성장시키는 가장 좋은 방법 중 하나는 일관된 블로그를 실행하는 것입니다. 이 안내서는 드문 발견입니다. 효과적인 블로그를 실행하고 결과를 빠르게 실행하는 방법을 보여주고 블로그 조언 세계에서 많은 소음을 줄입니다. 또한 이메일 뉴스 레터를 사용하여 블로그 잠재 고객을 키우고 전체 작업을위한 미덕주기를 만듭니다.
HTML 이메일 뉴스 레터에 대한 자주 묻는 질문 (FAQ)
html 이메일 뉴스 레터 코딩을위한 모범 사례는 무엇입니까? 코딩 HTML 이메일 뉴스 레터는 약간 까다로울 수 있지만 모범 사례를 따르면 프로세스를 더 매끄럽게 만들 수 있습니다. 첫째, 항상 레이아웃에 테이블을 사용하십시오. 최신 웹 디자인과 달리 이메일 디자인은 여전히 테이블에 크게 의존합니다. 둘째, 인라인 CSS가가는 길입니다. 모든 이메일 클라이언트가 임베디드 또는 링크 된 CSS를 지원하는 것은 아니기 때문입니다. 셋째, 너비, 높이 등에 HTML 속성을 사용하십시오. 이를 통해 이메일이 다른 이메일 클라이언트에서 올바르게 표시되도록합니다. 마지막으로, 이메일을 보내기 전에 항상 이메일을 테스트하십시오. 다른 이메일 클라이언트에서 이메일을 어떻게 볼 수 있는지 테스트 할 수있는 다양한 도구가 있습니다.
HTML 이메일 뉴스 레터 응답을 어떻게 만들 수 있습니까?
HTML 이메일 뉴스 레터 반응 수단 만들기 데스크탑 컴퓨터에서 휴대폰에 이르기까지 모든 장치에서 잘 보이도록합니다. 이를 달성하려면 CSS에서 미디어 쿼리를 사용할 수 있습니다. 미디어 쿼리를 사용하면 장치의 화면 크기에 따라 다양한 스타일을 적용 할 수 있습니다. 그러나 모든 이메일 클라이언트가 미디어 쿼리를 지원하는 것은 아니므로 모바일 우선 접근 방식으로 이메일을 디자인하는 것이 중요합니다. 이것은 가장 작은 화면을 먼저 설계 한 다음 더 큰 화면에 적응하기 위해 미디어 쿼리를 추가하는 것을 의미합니다. HTML 이메일 뉴스 레터에서 웹 글꼴을 사용할 수 있습니까? 예, 웹 글꼴을 사용할 수 있습니다. HTML 이메일 뉴스 레터. 그러나 모든 이메일 클라이언트가 웹 글꼴을 지원하는 것은 아닙니다. 그렇지 않은 사람들을 위해 항상 폴백 글꼴을 제공해야합니다. 이것은 일반적으로 Arial 또는 Times New Roman과 같이 널리 지원되는 표준 글꼴입니다. 웹 글꼴을 사용하려면 @font-face 규칙을 사용하여 CSS에 글꼴 파일을 포함시킵니다.
HTML 이메일 뉴스 레터에 이미지를 추가 할 수 있습니까?
이미지 추가에 이미지 추가 HTML 이메일 뉴스 레터는 태그를 사용하여 수행 할 수 있습니다. 그러나 명심해야 할 몇 가지 사항이 있습니다. 첫째, 항상 태그에 너비와 높이 속성을 포함하십시오. 이렇게하면 이미지가 올바르게 표시되도록합니다. 둘째, 이미지에 절대 URL을 사용하십시오. 이것은 이미지 소스가 상대 경로가 아니라 전체 URL이어야 함을 의미합니다. 마지막으로, 항상 이미지에 대한 Alt 텍스트를 포함하십시오. 이것은 이미지를로드 할 수없는 경우 표시되는 이미지에 대한 설명입니다.
내 HTML 이메일 뉴스 레터가 모든 이메일 클라이언트에서 좋아 보이는 방법을 어떻게 보장 할 수 있습니까?
HTML 이메일 뉴스 레터가 다른 HTML 및 CSS 기능을 지원하기 때문에 모든 이메일 클라이언트에서 HTML 이메일 뉴스 레터가 도전 할 수 있습니다. 그러나 사용할 수있는 몇 가지 전략이 있습니다. 첫째, 항상 레이아웃 및 인라인 CS에 테이블을 사용하십시오. 이들은 이메일 클라이언트에서 널리 지원됩니다. 둘째, 이메일을 보내기 전에 다양한 이메일 클라이언트에서 이메일을 테스트하십시오. 이를 수행 할 수있는 온라인 도구가 있습니다. 마지막으로 디자인을 간단하게 유지하십시오. 디자인이 더 복잡할수록 특정 이메일 클라이언트에서 깨질 가능성이 높습니다. HTML 이메일 뉴스 레터에서 javaScript를 사용할 수 있습니까?
기술적으로 가능하지만 일반적으로 사용하는 것이 권장되지 않습니다. HTML 이메일 뉴스 레터의 JavaScript. 많은 이메일 클라이언트가 JavaScript를 지원하지 않거나 보안상의 이유로 기본적으로 IT를 비활성화했기 때문입니다. 대신 이메일 디자인을 위해 HTML 및 CSS를 고수하십시오.
HTML 이메일 뉴스 레터에서 호환 통화 버튼을 추가하려면 어떻게해야합니까?
Call-to Action 버튼 추가 HTML 이메일 뉴스 레터는 HTML 및 CSS를 사용하여 수행 할 수 있습니다. 가장 간단한 방법은 CSS가있는 태그를 사용하여 버튼처럼 스타일링하는 것입니다. 그러나 이메일 클라이언트에서 더 나은 호환성을 위해 버튼처럼 보이는 단일 셀과 스타일의 테이블을 사용할 수 있습니다.
HTML 이메일 뉴스 레터에 배경색을 추가 할 수 있습니까? CSS를 사용하여 HTML 이메일 뉴스 레터에 배경색 추가를 수행 할 수 있습니다. 배경색 속성을 사용하여 전체 이메일 또는 테이블 또는 테이블 셀과 같은 특정 요소에 대한 배경색을 설정할 수 있습니다. 그러나 모든 이메일 클라이언트가 배경색을 지원하는 것은 아닙니다. 그렇지 않은 사람들의 경우 HTML의 bgcolor 속성을 사용하여 폴백 색상을 제공해야합니다.
HTML 이메일 뉴스 레터에 링크를 추가 할 수 있습니까?
HTML 이메일에 링크 추가 뉴스 레터는 태그를 사용하여 수행 할 수 있습니다. 웹 사이트, 이메일 주소 또는 전화 번호로 링크 할 수 있습니다. 웹 사이트에 링크하려면 웹 사이트의 전체 URL과 함께 HREF 속성을 사용하십시오. 이메일 주소에 링크하려면 HREF 속성의 Mailto : Protocol을 사용하십시오. 전화 번호에 링크하려면 HREF 속성의 전화 : 프로토콜을 사용하십시오. HTML 이메일 뉴스 레터에 소셜 미디어 아이콘을 추가 할 수 있습니까?
HTML 이메일에 소셜 미디어 아이콘 추가 뉴스 레터는 이미지와 링크를 사용하여 수행 할 수 있습니다. 아이콘 이미지에 태그를 사용하고 태그로 랩하여 소셜 미디어 프로필에 링크합니다. 이미지에 대한 alt 텍스트를 항상 포함시키고 이미지 소스와 링크 href에 절대 URL을 사용하십시오.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
