이메일 뉴스 레터 용 HTML 템플릿을 디자인하고 있습니다. 많은 이메일 클라이언트가 연결된 스타일 시트를 무시하고 Gmail을 포함한 다른 이메일 클라이언트는 CSS 블록 선언을 모두 무시한다는 것을 알게되었습니다. 인라인 스타일 속성이 유일한 선택입니까? HTML 이메일 스타일링에 대한 모범 사례는 무엇입니까?
답변:
Campaign Monitor는 다양한 메일 클라이언트에서 지원되지 않는 것과 지원되지 않는 것을 자세히 설명 하는 탁월한 지원 매트릭스 를 제공합니다.
Litmus 와 같은 서비스를 사용하여 여러 클라이언트에서 전자 메일이 표시되는 방식과 필터 등에 걸리는지 확인할 수 있습니다 .
나는 전에 HTML 이메일 전투를 벌였다. 다음은 이메일 클라이언트 간의 최대 호환성을위한 스타일링에 대한 팁입니다.
인라인 스타일 은 가장 친한 친구입니다. 절대로 스타일 시트를 연결하지 말고 <style>태그를 사용하지 마십시오 (예 : Gmail은 해당 태그와 그 내용을 모두 제거합니다).
더 나은 판단, 사용 및 남용 테이블에 대해 . <div>그냥 잘라 내지 않습니다 (특히 Outlook에서).
배경 이미지를 사용하지 마십시오 . 드문 드문하고 성 가실 것입니다.
일부 이메일 클라이언트는 입력 한 하이퍼 링크를 링크로 자동 변환합니다 ( <a>직접 고정하지 않은 경우 ). 때로는 부정적인 영향을 줄 수 있습니다 (예 : 각 하이퍼 링크에 스타일을 적용하여 다른 색상으로 표시하는 경우).
실제 링크와 다른 링크를 하이퍼 링크로 연결해야합니다. 예를 들어, 입력 http://www.google.com한 다음에 연결 하지 마십시오 https://gmail.com/. 일부 클라이언트는 메시지를 스팸 또는 정크로 표시합니다.
이미지를 가능한 한 적은 색상으로 저장하여 크기를 절약하십시오.
가능하면 이미지 를 이메일에 포함 시키십시오 . 이메일을 다운로드하기 위해 이메일을 외부 웹 서버에 연결할 필요가 없으며 이메일에 첨부 파일로 표시되지 않습니다.
그리고 마지막으로 테스트, 테스트, 테스트 ! 각 이메일 클라이언트는 브라우저와 다르게 작동합니다.
<div>Outlook은 내용을 넘어서 색상을 확장하지 않으므로 패딩이 색칠되지 않습니다.
<img>태그 에서 참조되는 URL을 대체 해야합니다.<img alt="Embedded Image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA...">
cid.
메일 침팬지에는하지 말아야 할 것에 대한 훌륭한 기사가 있습니다. (나는 당신이 원하는 것에 대해 잘못된 방향으로 들린다는 것을 알고 있습니다)
http://kb.mailchimp.com/article/common-html-email-coding-mistakes
일반적으로 웹 디자인에 대한 나쁜 습관이라는 것을 배운 모든 것이 HTML 전자 메일의 유일한 옵션 인 것 같습니다.
기본 사항은 다음과 같습니다.
손에 넣을 수있는 한 많은 이메일 클라이언트를 테스트하거나 위에서 제안한 다른 사람과 Litmus를 사용하십시오! (짐에게 신용)
편집하다 :
메일 침팬지는 이 도구 를 커뮤니티에서 사용할 수있게 함으로써 훌륭한 작업을 수행했습니다 .
CSS 클래스를 HTML 요소에 인라인으로 적용합니다!
여기에 게시 된 답변 외에도이 기사를 읽으십시오.
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 문서에서 콘텐츠를 복사하고 있는지에 따라 (command + F) 모든 ( ') 및 ( ")를 찾아 편집 소프트웨어 (특히 dreemweaver)에서 코드로 표시해야합니다. 그리고 그것은 좋지 않습니다.
ALT는 가장 친한 친구입니다. ALT 태그를 사용하여 모든 이미지에 텍스트를 추가하십시오. 배당률이 높기 때문에 제대로로드되지 않습니다. 그리고 ALT 텍스트는 사람들이 (이미지 참조) 버튼을 클릭하도록하는 것입니다. 또한 이미지 너비, 높이를 정의하고 경계선을 0으로 만들어 이미지 주위에 이상한 선이 생기지 않도록하십시오.
이미지의 양쪽에 15px 경계선이있는 Photoshop 내의 모든 이미지를 편집하십시오 (배경을 투명하게 만들고 PNG 24로 저장). 때로는 이메일 클라이언트가 이미지에 적용하는 패딩 스타일을 읽지 않아 이상한 서식을 피할 수 있습니다.
또한 링크 아래에서 특히 성가신 링크를 찾았으므로 <style = "text-decoration : none; color : # 여러분이 원하는 색상을 적용하십시오!" > 라인을 제거하고 원하는 모양을 제공합니다.
모든 모양과 느낌을 엉망으로 만드는 많은 것들이 있습니다.