HTML 전자 메일 스타일 설정 모범 사례
저는 이메일 뉴스레터의 HTML 템플릿을 디자인하고 있습니다.저는 많은 이메일 고객들이 링크된 스타일시트를 무시하고, 다른 많은 고객들(Gmail 포함)은 CSS 블록 선언을 완전히 무시한다는 것을 배웠습니다.인라인 스타일 속성이 유일한 선택입니까?HTML 전자 메일을 스타일링하는 가장 좋은 방법은 무엇입니까?
저는 전에 HTML 이메일 배틀을 해본 적이 있습니다.다음은 이메일 클라이언트 간의 호환성을 극대화하기 위한 스타일링에 대한 몇 가지 팁입니다.
인라인 스타일은 당신의 가장 친한 친구입니다.스타일 시트를 연결하거나 사용하지 마십시오.
<style>태그(예: GMail은 해당 태그와 모든 내용을 제거합니다.)당신의 더 나은 판단과 대조적으로, 사용 및 남용 테이블.
<div>(특히 Outlook에서는) 잘리지 않습니다.배경 이미지를 사용하지 마십시오. 이미지가 얼룩덜룩하고 짜증이 날 수 있습니다.
를 링크로
<a>영향을 수 (를 들어 각 색으로 ).이 경우 부정적인 효과가 발생할 수 있습니다(예: 각 하이퍼링크에 스타일을 추가하여 다른 색상으로 표시하는 경우).실제 링크를 다른 링크와 하이퍼링크로 연결하는 것에 주의하십시오., 지않하음을 .
http://www.google.com에 연합니다에 연결해 주세요.https://gmail.com/일부 클라이언트는 메시지에 스팸 또는 정크로 플래그를 지정합니다.이미지를 가능한 한 적은 색상으로 저장하여 크기를 절약할 수 있습니다.
가능한 경우 전자 메일에 이미지를 포함합니다.전자 메일을 다운로드하기 위해 외부 웹 서버에 연락할 필요가 없으며 전자 메일에 첨부 파일로 표시되지 않습니다.
그리고 마지막으로 시험,시험,시험!각 전자 메일 클라이언트는 브라우저와 다른 방식으로 작업을 수행합니다.
Campaign Monitor는 다양한 메일 클라이언트에서 지원되는 항목과 지원되지 않는 항목을 자세히 설명하는 탁월한 지원 매트릭스를 제공합니다.
Litmus와 같은 서비스를 사용하여 여러 클라이언트에서 전자 메일이 나타나는 방식과 필터 등에 의해 탐지되는지 여부를 볼 수 있습니다.
메일침프는 하지 말아야 할 것에 대한 꽤 좋은 기사를 얻었습니다. (당신이 원하는 것에 대해 잘못된 방향으로 들린다는 것을 압니다.)
http://kb.mailchimp.com/article/common-html-email-coding-mistakes
일반적으로 당신이 배운 웹 디자인에 대한 나쁜 관행은 HTML 이메일의 유일한 옵션인 것 같습니다.
기본 사항은 다음과 같습니다.
- 이미지에 대한 절대 경로가 있어야 합니다(예:https://stackoverflow.com/random-image.png)
- 레이아웃에 테이블 사용(권장할 줄은 생각지도 못했습니다!)
- 인라인 스타일 사용(그리고 오래된 학교 CSS도 최대 2.1, 예를 들어 박스섀도우는 작동하지 않습니다 ;)
손에 넣을 수 있는 한 많은 이메일 클라이언트를 테스트하거나 위에서 제안한 다른 사람과 같이 리트머스를 사용하십시오! (짐에게 크레딧을 제공)
편집:
메일침프는 이 도구를 지역사회에서 사용할 수 있게 함으로써 훌륭한 일을 했습니다.
그것은 당신을 위해 당신의 css 클래스를 당신의 HTML 요소에 인라인으로 적용합니다!
여기에 게시된 답변 외에도 다음 기사를 반드시 읽어 보십시오.
http://24ways.org/2009/rock-solid-html-emails
제가 HTML 이메일에 대해 항상 되돌아보게 되는 자료는 CampaignMonitor의 CSS 가이드입니다.
그들의 사업은 오로지 이메일 전달에만 초점을 맞추고 있기 때문에, 그들은 누구나 할 수 있는 것처럼 그들의 물건을 알고 있습니다.
유감스럽게도 그렇습니다.스타일시트로 HTML 페이지를 만든 다음 jQuery를 사용하여 각 요소의 스타일 특성에 스타일시트를 적용합니다.이와 같은 것:
var styleAttributes = ['color','font-size']; // all the attributes you've applied in your stylesheet
for (i in styleAttributes) {
$('body *').css(styleAttributes[i],function () {
$(this).css(styleAttributes[i]);
});
}
그런 다음 DOM을 복사하여 이메일에 사용합니다.
저는 이미지 매핑이 꽤 잘 작동한다는 것을 알게 되었습니다.이미지인 머리글이나 바닥글이 있는 경우 대부분의 경우 아웃룩에서 이미지를 로드하지 않고 투명한 머리글이 남게 되므로 bgcolor="공백 채우기"를 적용해야 합니다.적어도 이메일의 전체적인 느낌에 맞는 색상을 지정하면 사용자에게 충격이 덜할 것입니다.절대 스타일링 시트를 사용하지 마십시오.아니면 CSS라도!그냥 피하세요.
워드 또는 공유 Google에서 콘텐츠를 복사하는 경우에 따라 Doc은 (명령+F) 모든 (') 및 (")를 찾아 편집 소프트웨어(특히 dreamweaver) 내에서 해당 콘텐츠를 교체해야 합니다. 이는 해당 콘텐츠가 코드로 표시되고 좋지 않기 때문입니다.
ALT는 당신의 가장 친한 친구입니다.ALT 태그를 사용하여 모든 이미지에 텍스트를 추가합니다.적재가 제대로 되지 않을 가능성이 높기 때문입니다.그리고 그 ALT 텍스트는 사람들이 (이미지 참조) 버튼을 클릭하도록 하는 것입니다.또한 이미지의 너비, 높이를 정의하고 이미지 주위에 이상한 선이 생기지 않도록 보더를 0으로 만듭니다.
이미지의 각 면에 15px 보더가 있는 Photoshop 내의 모든 이미지를 편집하는 것을 고려합니다(배경을 투명하게 하고 PNG 24로 저장).때때로 전자 메일 클라이언트는 사용자가 이미지에 적용한 패딩 스타일을 읽지 않기 때문에 이상한 형식 지정을 피할 수 있습니다.
또한 링크 아래 라인이 특히 귀찮아서 <style="text-decoration:filename; color:#filename color you want here!>를 적용하면 라인이 제거되어 원하는 룩을 얻을 수 있습니다.
전체적인 모양과 느낌을 엉망으로 만들 수 있는 것들이 많이 있습니다.
언급URL : https://stackoverflow.com/questions/4829254/best-practices-for-styling-html-emails
'programing' 카테고리의 다른 글
| 처리기에서 서비스를 자동으로 연결할 수 없음인터셉트어댑터 (0) | 2023.09.02 |
|---|---|
| 문자열에서 첫 번째 x 문자를 제거하시겠습니까? (0) | 2023.09.02 |
| Jquery - Ajax jSON 응답을 변수로 저장 (0) | 2023.09.02 |
| Powershell을 사용하여 VPN에 연결 (0) | 2023.09.02 |
| Android - 오류:':app:transformClassesWithDexForRelease' 작업을 실행하지 못했습니다. (0) | 2023.09.02 |