HTML 이메일 디자인에 대한 어떤 지침이 있습니까? [닫은]
많은 클라이언트와 웹 기반 이메일 인터페이스에서 우수한 시각적 안정성을 유지하면서 이메일의 풍부한 HTML 형식에 대해 어떤 지침을 제공 할 수 있습니까?
Stack Overflow에 대한 질문에 대한 관련없는 답변이 제안되었습니다.
http://www.campaignmonitor.com/blog/archives/2008/05/2008_email_design_guidelines.html
다음 지침이 포함되어 있습니다.
<body><head>
일부 이메일 클라이언트 대신 스타일 시트를 넣으면 머리에서 CSS가 제거되지만 스타일 블록이 본문에 (잘못된) 경우 그대로 둡니다.- 가능한 경우 인라인 스타일을 사용합니다.
Gmail은에서<head>또는에서 모든 스타일 시트를 제거<body>하지만style=""속성을 사용하여 할당 된 인라인 스타일을 준수 합니다. - 표로 돌아 가기
이메일 표준은 실제로 Microsoft Word 렌더링 엔진을 사용하는 Outlook 2007 덕분에 최근 몇 년 동안 크게 뒤로 물러났습니다. 스타일 시트없이 포지셔닝에 대해 배운 내용의 대부분을 배우지 마십시오. - 이미지에 의존하지 마십시오.
대부분의 클라이언트와 대부분의 웹 기반 이메일 클라이언트는 사용자가 특별히 표시하도록 요청하지 않는 한 이미지를 표시하지 않습니다.
또한 내가 어디서 읽었는지 기억이 나지 않는 몇 가지 "확인되지 않은"진실이 있습니다.
- 테이블에서 두 개 이상의 중첩 수준을 사용하지 마십시오
. 사실입니까? 그렇게하면 어떻게 될까요? 이것에 질식하는 특정 클라이언트 / 클라이언트가 있습니까? - 셀 / 테이블에 배경 이미지를 중첩하지 않도록주의하십시오.
내가 이해하는대로 배경 이미지가 단순히 "빛나는"것이 아니라 완전히 새로이 하강하는 테이블 / 셀에 적용되는 상황이 발생할 수 있습니다. 다시 말하지만 사실인가요? 어떤 클라이언트?
참호에서 얻은 더 많은 지침과 경험으로이 목록을 구체화하고 싶습니다.
추가 제안이 있으십니까?
업데이트 : HTML 의 디자인 부분 과 일관성에 대한 지침을 구체적으로 요청하고 있습니다. 스팸 필터 를 피하기 위한 일반적인 지침에 대한 질문 과 일반적인 예의 는 이미 SO에 있습니다.
'현대적인 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은 배경 이미지를 전혀 지원하지 않으므로 완전히 잊어 버리는 것이 가장 좋습니다.
항상 다중 부분 MIME을 사용하고 일반 텍스트 대안을 제공하십시오.
Campaign Monitor 를 만든 사람들은 좋은 정보가 많은 이메일 표준 프로젝트 웹 사이트 도 시작했습니다 .
html5boilerplate와 비슷하지만 이메일의 경우 http://htmlemailboilerplate.com/ 과 같은 상용구를 살펴보십시오 .
I think this is lower level than the question you are asking, but if you really want an html email to be correctly viewed by as many clients as possible, make sure it's using valid MIME. In particular, for an email to be considered as valid MIME, the headers MUST (in the RFC sense of the word) contain both of these headers:
MIME-Version:
Content-Type:
Very strict clients will display your HTML as raw text if one or the other of these is missing. You'd be surprised how many large online vendors who should know better have screwed this up (notably, I've gotten HTML emails w/ missing MIME-Version: headers from Amazon and the ACM in the past)
- Background images are not reliable.
- Practically a no-brainer, but no javascript.
- Use an editor that lets you send the current file/buffer as an email, or at the very least, find a program that would let you send the contents of a file as an HTML email. do not test your emails by copying the HTML, and pasting it into outlook (or any other mail program for that matter).
Three words of advice: test, test, test.
Check out LitmusApp.com's email testing service. You send them a message and they render it in a bunch of clients and show you screenshots of the results. It's not perfect, but it's pretty good.
(Lotus Notes prior to 8.0 really, really stinks for HTML mail, by the way)
Also, beyond just inline CSS styles, I recommend switching to tags wherever possible.
Embed your images, don't link to them.
This is bad :
<img src="http://myserver.com/myImage.jpg" alt="Lolkat"/>
This is good :
<img src=cid:myImage/>
Yeah, it looks weird but check out this guide regarding embedding images in emails.
If you're including a style block don't begin any new line with ".classname" or "." anything. Put a brace or something before the period. If you don't do this some web mail systems will not properly display your style sheets.
Many people have incorrectly assumed they cannot use CSS blocks in emails because of this behavior... IIRC "." is the body delimiter for SMTP. Systems will tend to escape in their mail stores to prevent the contents of one message from being misrecognized as a new message. The way this is handled tends to break any style starting on a new line with a period.
참고URL : https://stackoverflow.com/questions/127498/what-guidelines-for-html-email-design-are-there
'developer tip' 카테고리의 다른 글
| 이 사람이 Microsoft Paint로 "Hello World"를 어떻게 코딩 했습니까? (0) | 2020.08.24 |
|---|---|
| MSBuild 스크립트에 대한 좋은 자습서가 있습니까? (0) | 2020.08.24 |
| CSS : x 축에 고정 된 위치이지만 y가 아님? (0) | 2020.08.24 |
| 이 이상한 결장 행동은 무엇을하고 있습니까? (0) | 2020.08.24 |
| sed, awk 또는 gawk를 사용하여 일치하는 항목 만 인쇄하는 방법은 무엇입니까? (0) | 2020.08.24 |