HTML 이메일 : 테이블 또는 div?

78

html 이메일 뉴스 레터의 HTML / CSS는 표 형식이어야합니까, 아니면 DIV를 동등하게 사용할 수 있습니까? 나는 여러 템플릿을 다운로드하여 어떻게 수행되는지, 내 자신의 기반이 될지 확인했으며 모두 테이블을 사용하는 것처럼 보입니다.

많은 통찰력을 주셔서 감사합니다!

html html-email

— HandiworkNYC.com
소스

2

이것은 매우 포괄적입니다 : http://mailchimp.com/resources/guides/email-marketing-field-guide

— HandiworkNYC.com

매우 유용한. body 태그 안에 CSS 삽입. 누가 생각했을까요!

— aaandre

URL이 변경되었습니다. mailchimp.com/resources/guides/email-marketing-field-guide

— JasonB

빠른 일반적인 답변-웹 메일 클라이언트는 CSS가 페이지를 엉망으로 만드는 것을 원하지 않으므로 제한합니다 ( position:fixed;Gmail에서 사용한다고 상상해보세요 ). 테이블을 사용하면 div에서 사용할 수 없거나 일치하지 않는 추가 html 요소를 사용할 수 있습니다. 또한 Outlook은 Microsoft Word 엔진을 사용하여 전자 메일 html을 렌더링하고 많은 쓰레기 div 등으로 래핑합니다. Outlook에서 전자 메일 구조를 유지하는 데 도움이됩니다.

— John

136

이메일 HTML과 관련하여 웹 개발의 모든 모범 사례는 창 밖으로 나갑니다. 일관성을 유지하려면 다음을 수행해야합니다.

표 기반 레이아웃 사용
테이블에 구식 속성 스타일링 사용
인라인 스타일 만 사용하고 매우 단순한 스타일 만 사용하십시오. <style>-태그는 많은 클라이언트에 의해 삭제됩니다.
<html>, <head>및 사용 건너 뛰기 <body>-어쨌든 대부분의 클라이언트에서 삭제합니다.
이미지를 포함하는 경우 이미지가로드되지 않은 경우에도 전자 메일이 괜찮아 보이는지 확인하십시오. 많은 클라이언트는 사용자가 이미지를 표시하기 전에 이메일을 "안전"으로 표시하도록 요구합니다.

여기에서 위 사항의 더 자세한 버전을 읽을 수 있습니다.

— PatrikAkerstrand
소스

3

이건 정말 진실. Outlook 2007은 가장 나쁜 것 중 하나입니다 (대부분은 매우 나쁩니다 ...).

— Max

3

이러한 규칙은 HTML / CSS 이메일 작성과 관련하여 순수한 금입니다. 감사합니다.

— Miloš Đakonović

1

이메일 작성 을 위해 CSS 블록을 사용하여 이메일을 작성할 수 있지만 모든 것을 인라인 스타일로 컴파일하는 gulp-inline-css를 살펴볼 수 있습니다.

— fjdumont 2014 년

HTML과 본문을 삭제 하시겠습니까? ZenDesk와이 튜토리얼 모두 권장합니까? webdesign.tutsplus.com/articles/...

— 야콥 알렉산더 아이 흘러

1

이 진술은 2017 년에도 여전히 사실입니까? 대부분의 이메일 클라이언트 시장이 데스크톱에서 모바일로 이동했고 최신 버전의 데스크톱 클라이언트도 있기 때문에 궁금합니다. 적어도 인라인 CSS는 내가 말할 수있는 한 더 이상 필요하지 않은 것 같습니다 (gmail은 지원을 추가했으며 이것이 마지막 큰 이메일 클라이언트였습니다).

— Torsten Engelbrecht

9

여기에있는 모든 사람들이 말했듯이 테이블을 사용하고 모든 CSS를 인라인하십시오 ...하지만 이메일을 작성하는 데 도움이되는 이메일 앱 생태계가 있습니다.

내가 사용하고 Mailrox ( https://www.mailrox.com/를 최근 대부분의 이메일 빌드에 )를 하고 있으며 디자인에서 하나를 빌드하는 경우에도 꽤 멍청하고 완벽한 HTML 이메일을 출력하는 것 같습니다. 베타 버전이지만.

Mailchimp 또는 Campaign Monitor 에서 미리 빌드 된 템플릿을 사용해 볼 수도 있지만 이메일 디자인이있는 것 같으므로 Mailrox가 가장 좋을 것입니다.

이메일을 작성하고 싶다면 최신 웹 디자인 및 마스터 테이블 레이아웃에 대해 알고있는 대부분을 잊어 버리고 PatrikAkerstrand의 링크를 사용하십시오.

Litmus 는 손으로 코딩 한 디자인을 테스트하는 데에도 좋습니다. 거의 모든 이메일 클라이언트에서 이메일 미리보기를 제공합니다.

도움이 되었기를 바랍니다.

— 민트 출발
소스

4

많은 이메일 클라이언트가 CSS를 렌더링 할 수 없습니다. 표를 사용하여 메일 형식을 지정하고 이미지를 다른 용도로 사용합니다.

— fb55
소스

1

기본적으로 이메일에 이미지를 사용할 수 없습니다. 메일 클라이언트는 사용자가 보낸 사람을 안전하다고 표시 할 때까지 차단합니다. 거의 모든 일반 클라이언트는 제한된 인라인 CSS를 지원합니다.

— Rex M

오래된 클라이언트는 그렇지 않으며 많은 비즈니스 사용자가 여전히 사용합니다. 그리고 모든 클라이언트가 이미지를 표시하지 않는 것은 아닙니다. 추가 보안을위한 단계 일 뿐이지 만 iPhone과 같은 클라이언트는 이미지를 차단할 이유가 없습니다.

— fb55

Gmail은 이제 이미지를 표시합니다. :-)

— rds

1

이미 언급했듯이 HTML 이메일은 div가 아닌 테이블을 사용하여 작성해야합니다. CSS도 추가 할 수 있습니다. 둘 다 외부 스타일 시트를 사용하지만 모든 이메일 클라이언트에서 선택하지는 않으므로 실제로 CSS를 인라인으로 추가하는 것이 더 안정적입니다. 그렇게 할 때도 일부 속성은 특정 이메일 클라이언트에서 무시 될 수 있으므로 가능한 경우 HTML 속성을 사용하는 것이 가장 좋습니다. "Gmail과 같은 일부 클라이언트가 태그 내용을 무시하거나 제거하거나 무시하기 때문에이 작업을 수행해야합니다." 출처 : http://webdesign.tutsplus.com/articles/creating-a-simple-responsive-html-email--webdesign-12978

그 외에도 시행 착오를 통해 이미지조차도 이메일에 표시하려는 정확한 크기로 잘라야한다는 것을 배웠습니다. 이미지의 너비 / 높이에 대한 HTML 속성을 선택하는 것이 끔찍한 경우 Outlook은 이러한 속성이 무시되고 이미지가 전체 크기로 표시 되었기 때문에 몇 가지 불쾌한 이메일을 보았습니다.

— 알렉산드라
소스