HTML 이메일 작성시 모범 사례 및 고려 사항
저는 지금 10 년 넘게 웹 사이트를 개발해 왔지만, 이메일 클라이언트 용으로 개발할 때 웹용 개발 습관 중 상당수가 쓸모있는 것을 금방 알게되었습니다. 이로 인해 엄청난 좌절감이 생겼기 때문에 Gmail, Outlook 등을 설계 할 수있는 저와 같은 다른 사람들을 위해 모범 사례와 필요한 고려 사항을 제시 할 수있는 질문을 던질 생각했습니다.
예 : <style>...</style> 대 인라인 CSS.
간단히 말해서 웹 세계에서 이메일 세계로 이전되는 것과 같은 것입니다.
HTML 이메일을 배우려는 모든 사람을 위해 일부 리소스를 갖춘 좋은 장소 인 것입니다. 이 (아마도) 웹에서 사용 가능한 리소스 목록입니다. 행복한 학습.
시작 가이드 :
CSS 지원 및 일반 가이드 :
항상 html-email에 CSS를 삽입해야합니다. 다음은 CSS 인라이닝 도구 목록입니다.
반응 형 가이드 :
템플릿 및 프레임 워크 :
- 테드 고 아스 | Cerberus 응답 이메일 패턴
- Acid에 대한 이메일 | 반응 형 템플릿
- 브라이언 그레이브스 | 반응 형 이메일 패턴
- Antwort | 반응 형 레이아웃
- Zurb | 잉크 반응 형 템플릿
- 캠페인 모니터 | 무료 이메일 템플릿
- Mailchimp | 이메일 청사진
반응 형 대체 예 :
- Tuts + | 미디어 쿼리가없는 반응 형 이메일
- 스택 오버플로 | 유체 예
- Acid에 대한 이메일 | 몬스터의 유동적 인 레이아웃
- 스타일 캠페인 | 유연한 모바일 이메일 디자인
- 스택 오버플로 | 플로팅 콘텐츠
또한 위의 Ted Goas Responsive 링크에는 훌륭한 유동적 인 예가 있습니다.
문제 해결 및 일반 가이드 :
- Acid에 대한 이메일 | Yahoo 미디어 쿼리 버그 해결 방법
- 스택 오버플로 | HTML 이메일의 Colspan 및 Rowspan
- Mailchimp | Outlook 조건부 CSS
- 리트머스 | 파란색 하이퍼 링크 금지
- 스택 오버플로 | HTML 이메일의 웹 폰트
Outlook에서 작동하는 배경 이미지를 가져 오려면 VML 을 가져옵니다 (body 태그 제외 ). 다음은 몇 가지 VML 링크입니다.
나는 한동안 나의 일을 위해 이것을 (아주 가끔) 해왔다. HTML 이메일에는 많은 함정이 있습니다. 다른 이메일 클라이언트는 HTML을 서로 다르게 렌더링하고 IE6를 고급처럼 보이게합니다.
여기 내가 지금까지 배운 내용의 여름이 있습니다.
- 인라인 CSS 사용 : 스타일이 항상 지원되는 것은 아닙니다.
- 테이블 레이아웃 사용 : 알고 있지만 div 레이아웃은 CSS에 따라 다르며 많은 이메일 클라이언트가 대처할 수 없습니다.
- 행 범위를 사용하지 마십시오 . 이로 인해 이상한 간격 문제가 발생합니다.
- 배경 이미지 사용 안함 : 지원이 제한됩니다.
- "display : block" 이 포함 된 스타일 이미지 태그 : 핫메일의 이상한 간격 문제를 해결합니다.
- 여러 테이블을 사용하는 경우 하나의 상위 테이블에 중첩 하면 더 이상한 간격 문제가 해결됩니다.
- 자바 스크립트를 사용하지 마세요 : 다시 잘 지원되지 않습니다.
- 이미지없이 이메일을 읽을 수 있는지 확인 : 사용자가 이미지를 로드하지 못할 수 있습니다.
- 온라인 버전 및 링크 제공 : 이메일 클라이언트가 좋지 않더라도 사용자가 의도 한 콘텐츠를 볼 수 있습니다.
- 테스트, 테스트, 테스트 : 하나의 이메일 클라이언트에서 작동한다고해서 다른 이메일 클라이언트에서도 작동한다는 의미는 아닙니다. 가장 큰 장점은 Outlook 2007입니다. HTML을 렌더링하는 데 단어를 사용합니다 (한숨).
이것은 포괄적 인 목록과는 거리가 멀지 만 대부분의 사람들을 올바른 방향으로 설정해야합니다.
인라인 CSS 및 테이블-2000 년경 웹 개발을 생각하면 괜찮을 것입니다. 캠페인 모니터에는 이메일 클라이언트가 처리 할 수있는 항목에 대한 훌륭한 리소스가 있습니다. 또한 테스트를 위해 http://www.emailonacid.com/ 을 사용 하여 많은 테스트를 보낼 필요가 없습니다.
나 자신도이 가이드가 매우 유용하다는 것을 알았 습니다 . 이메일 클라이언트의 CSS 지원 가이드 .
이것도 좋습니다. 어떤 이메일 브라우저에서 어떤 인라인 CSS가 지원되는지 확인하세요 : http://www.campaignmonitor.com/css/
나는 또한 litmusapp을 추천합니다 (google it!). 이것은 물건을 확인하는 좋은 도구입니다.
참고 URL : https://stackoverflow.com/questions/2229822/best-practices-considerations-when-writing-html-emails
'ProgramingTip' 카테고리의 다른 글
| 콘솔 오류. (0) | 2020.10.07 |
|---|---|
| DIV에 키보드 포커스를주고 여기에 키보드 이벤트 처리기를 연결해야합니까? (0) | 2020.10.07 |
| HTML5를 사용하여 클라이언트 확인 파일 크기? (0) | 2020.10.07 |
| GDB 중단 점을 지정된 횟수에 도달 한 후에 만 중단하는 방법은 무엇입니까? (0) | 2020.10.07 |
| Java 소켓 API : 연결이 닫혔는지 확인하는 방법은 무엇입니까? (0) | 2020.10.07 |