HTML 이메일 디자인에 대한 어떤 지침이 있습니까? [닫은]

101

많은 클라이언트와 웹 기반 이메일 인터페이스에서 우수한 시각적 안정성을 유지하면서 이메일의 풍부한 HTML 형식에 대해 어떤 지침을 제공 할 수 있습니까?

Stack Overflow에 대한 질문에 대한 관련없는 답변이 제안되었습니다.

http://www.campaignmonitor.com/blog/archives/2008/05/2008_email_design_guidelines.html

다음 지침이 포함되어 있습니다.

  1. <body><head>
    일부 이메일 클라이언트 대신 스타일 시트를 넣으면 머리에서 CSS가 제거되지만 스타일 블록이 본문에 (잘못된) 경우 그대로 둡니다.
  2. 가능한 경우 인라인 스타일을 사용합니다.
    Gmail은에서 <head>또는에서 모든 스타일 시트를 제거 <body>하지만 style=""속성을 사용하여 할당 된 인라인 스타일을 준수 합니다.
  3. 표로 돌아 가기
    이메일 표준은 실제로 Microsoft Word 렌더링 엔진을 사용하는 Outlook 2007 덕분에 최근 몇 년 동안 크게 뒤로 물러났습니다. 스타일 시트없이 포지셔닝에 대해 배운 내용의 대부분을 배우지 마십시오.
  4. 이미지에 의존하지 마십시오.
    대부분의 클라이언트와 대부분의 웹 기반 이메일 클라이언트는 사용자가 특별히 표시하도록 요청하지 않는 한 이미지를 표시하지 않습니다.

또한 내가 어디서 읽었는지 기억이 나지 않는 몇 가지 "확인되지 않은"진실이 있습니다.

  1. 테이블에서 두 개 이상의 중첩 수준을 사용하지 마십시오
    . 사실입니까? 그렇게하면 어떻게 될까요? 이것에 질식하는 특정 클라이언트 / 클라이언트가 있습니까?
  2. 셀 / 테이블에 배경 이미지를 중첩하지 않도록주의하십시오.
    내가 이해하는 것처럼 배경 이미지가 단순히 "빛나는"것이 아니라 완전히 새로이 하강하는 테이블 / 셀에 적용되는 상황이 발생할 수 있습니다. 다시 말하지만 사실인가요? 어떤 클라이언트?

참호에서 얻은 더 많은 지침과 경험으로이 목록을 구체화하고 싶습니다.

추가 제안이 있으십니까?

업데이트 : HTML 의 디자인 부분 과 일관성에 대한 지침을 구체적으로 요청하고 있습니다. 스팸 필터 를 피하기 위한 일반적인 지침에 대한 질문 과 일반적인 예의 는 이미 SO에 있습니다.

html  email 
— 카아
소스
— John

답변:

63

'현대적인 HTML 및 CSS'관점에서 접근하면 괜찮은 HTML 이메일을 만드는 것은 실제로 정말 어렵습니다.

최상의 결과를 얻으려면 1999 년이라고 상상해보십시오.

  • 레이아웃을 위해 테이블로 돌아 가기 (또는 가급적이면 복잡한 레이아웃을 시도하지 마십시오)
  • 배경 이미지를 두려워하십시오 (Outlook 2007 및 Gmail에서 중단됨).
  • 몸에 태그를 붙이는 것은 Hotmail이 그런 식으로 받아 들였기 때문입니다.하지만 지금은 그들이 그것을 제거한다고 확신합니다. styleCSS를 사용해야하는 경우 속성 과 함께 인라인 스타일을 사용하십시오 .
  • 완전히 잊어 버려 float
  • 이미지가 차단 될 수 있음을 기억하십시오. 배경 및 텍스트 색상을 유리하게 사용하십시오. 이미지가 비활성화 된 읽을 수있는 텍스트가 있는지 확인하십시오.
  • 아무것도 특히주의해야 링크와 매우 조심하는 링크 텍스트에 URL 같은 외모 - 당신이 필터를 '피싱'분노합니다 (예 <a href="http://domain.tld">www.someotherdomain.tld</a>입니다 나쁜 )
  • 웹 메일 클라이언트의 "접힘"은 페이지에서 매우 높은 경향이 있다는 점을 기억하십시오 (1024x768 화면에서 대부분의 인터페이스는 100 픽셀 이상을 표시하지 않음). ID 항목을 맨 위에 표시하여 수신자가 당신이 누군지 압니다.
  • 최신 버전의 Outlook에는 예상보다 훨씬 좁은 "세로"미리보기 창이 있습니다. 고정 너비 레이아웃을 매우 조심해야합니다. 사용해야하는 경우 가능한 한 좁게 만듭니다.
  • 플래시, 자바 스크립트, SVG, 캔버스 또는 이와 비슷한 것에 대해 생각 하지 마십시오 .
  • 많이 테스트 해보세요. 최신 Outlook에서 테스트해야합니다 (많은 변화가 생겼습니다! 이제 Word를 HTML 렌더링 엔진으로 사용하고 기능이 손상되었습니다 : Word 2007 HTML / CSS 지원 ). Gmail도 꽤 까다 롭습니다. 놀랍게도 Yahoo의 웹 메일은 멋진 CSS 지원과 함께 매우 훌륭합니다.

행운을 빕니다 ;)

추가 질문에 답변하려면 업데이트하십시오.

표에서 두 개 이상의 중첩 수준을 사용하지 마십시오.

이것은 Lotus Notes와 관련된 오래된 지침이라고 생각합니다. 중첩 된 테이블 은 괜찮을 것입니다.하지만 실제로 필요한만큼 복잡한 레이아웃이 있다면 어쨌든 문제가 생길 것입니다. 레이아웃을 단순하게 유지하십시오 .

셀 / 테이블에 배경 이미지 중첩주의

이것은 위의 내용과 관련이있을 수 있으며 동일하게 적용됩니다. 복잡해 지면 문제가 발생합니다. 최신 버전의 Outlook은 배경 이미지를 전혀 지원하지 않으므로 완전히 잊어 버리는 것이 가장 좋습니다.

— 단
소스
3
HTML 이메일 지원이 그다지 발전하지 않은 이유는 무엇입니까? 1999 년에 돌아온 것처럼이 모든 나쁜 관행을 계속해서 실행해야하는 이유는 무엇입니까?
— smonff 2013 년
bgimages stackoverflow.com/a/17358553/413032 지원에 대한 해결 방법이 있습니다. . ms-word html. @ smonff 대체 나는 당신과 완전히 동의합니다. ........ 왜 html이 MS-Word로 렌더링 되는가!
— Davut Gürbüz
1
검사 litmus의 Email Coding 101 을 . 희망이 도움이됩니다.
— shaijut
13

항상 다중 부분 MIME을 사용하고 일반 텍스트 대안을 제공하십시오.

— 지비
소스
2

나는 이것이 당신이 묻는 질문보다 낮은 수준이라고 생각하지만, 가능한 한 많은 클라이언트가 html 이메일을 올바르게 볼 수 있도록하려면 유효한 MIME를 사용하고 있는지 확인하십시오. 특히, 이메일이 유효한 MIME로 간주 되려면 헤더 (단어의 RFC 의미에서)는 다음 두 헤더를 모두 포함해야합니다.

MIME-Version:
Content-Type:

매우 엄격한 클라이언트는 이들 중 하나가 누락 된 경우 HTML을 원시 텍스트로 표시합니다. 이 문제를 더 잘 알고 있어야하는 대규모 온라인 공급 업체가 얼마나 많은지 놀라실 것입니다 (특히, MIME-Version : 이전에 Amazon 및 ACM의 헤더가 누락 된 HTML 이메일을 받았습니다).

— jj33
소스
1
  • 배경 이미지는 신뢰할 수 없습니다.
  • 실질적으로 생각할 필요는 없지만 자바 스크립트는 없습니다. .
  • 현재 파일 / 버퍼를 이메일로 보내거나 최소한 파일 내용을 HTML 이메일로 보낼 수있는 프로그램을 찾을 수있는 편집기를 사용하십시오. HTML을 복사하여 Outlook (또는 해당 문제에 대한 다른 메일 프로그램)에 붙여 넣어 이메일을 테스트하지 마십시오 .
— 조나단 아켈
소스
1

세 단어의 조언 : 테스트, 테스트, 테스트.

LitmusApp.com의 이메일 테스트 서비스를 확인하십시오. 당신은 그들에게 메시지를 보내고 그들은 여러 클라이언트에서 그것을 렌더링하고 결과의 스크린 샷을 보여줍니다. 완벽하지는 않지만 꽤 좋습니다.

(8.0 이전의 로터스 노트는 실제로 HTML 메일에 악취가납니다.)

또한 인라인 CSS 스타일 외에도 가능한 한 태그로 전환하는 것이 좋습니다.

— 일라이
소스
0

스타일 블록을 포함하는 경우 ".classname"또는 "."로 새 줄을 시작하지 마십시오. 아무것도. 기간 전에 중괄호 또는 무언가를 넣으십시오. 이렇게하지 않으면 일부 웹 메일 시스템이 스타일 시트를 제대로 표시하지 않습니다.

많은 사람들이이 동작 때문에 이메일에 CSS 블록을 사용할 수 없다고 잘못 생각했습니다. IIRC "." SMTP의 본문 구분 기호입니다. 시스템은 한 메시지의 내용이 새 메시지로 잘못 인식되는 것을 방지하기 위해 메일 저장소에서 이스케이프하는 경향이 있습니다. 이것이 처리되는 방식은 마침표가있는 새 줄에서 시작하는 모든 스타일을 깨는 경향이 있습니다.

— 아인슈타인
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.