[html] HTML 이메일 : 테이블 또는 div?

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

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



답변

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

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

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


답변

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

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

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

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

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

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


답변

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


답변

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

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


답변