웹 페이지를 구축하기 위해 콘텐츠 관리 시스템을 열면 매우 간단한 프로세스입니다. 최신 웹 브라우저는 HTML, CSS 및 JavaScript를 지원합니다. 엄격한 웹 표준의 집합입니다. 그리고 디자이너가 걱정해야 하는 몇 안 되는 브라우저에 불과합니다. 물론 예외가 있습니다... 그리고 해당 브라우저에 특정한 몇 가지 간단한 해결 방법이나 기능이 있습니다.
전반적인 표준 때문에 콘텐츠 관리 시스템에서 페이지 빌더를 개발하는 것은 정말 쉽습니다. 브라우저는 HTML5, CSS 및 JavaScript…를 준수하며 개발자는 장치에 반응하고 여러 브라우저에서 일관된 웹 페이지를 구축하기 위해 믿을 수 없을 정도로 강력한 솔루션을 구축할 수 있습니다. XNUMX년 전에는 거의 모든 웹 디자이너가 데스크톱 소프트웨어를 사용하여 웹 페이지를 개발했습니다. 이제 웹 디자이너가 웹 페이지를 개발하는 것은 매우 드문 일입니다. 종종 템플릿을 개발하고 콘텐츠 시스템의 편집기를 사용하여 콘텐츠를 채우고 있습니다. 웹사이트 편집자는 훌륭합니다.
그러나 이메일 편집자들은 뒤처져 있습니다. 여기에 이유가 있습니다 ...
HTML 이메일 디자인은 웹사이트보다 훨씬 더 복잡합니다.
회사에서 디자인된 멋진 HTML 이메일을 원하는 경우 다음과 같은 여러 가지 이유로 웹 페이지를 구축하는 것보다 프로세스가 기하급수적으로 더 복잡합니다.
- 기준 없음 – 어떤 웹에도 엄격한 준수가 없습니다. 기준 HTML 이메일을 표시하는 이메일 클라이언트에 의해. 사실 사실상 모든 이메일 클라이언트 및 모든 이메일 클라이언트의 모든 버전 다르게 행동합니다. 일부는 CSS, 외부 글꼴 및 최신 HTML을 존중합니다. 다른 것들은 일부 인라인 스타일을 존중하고 글꼴 모음만 표시하며 테이블 기반 구조를 제외한 모든 것을 무시합니다. 이 시점에서 아무도 이 문제에 대해 작업하지 않는다는 것은 실제로 매우 우스꽝스럽습니다. 결과적으로 클라이언트와 장치 전반에 걸쳐 일관되게 렌더링되는 템플릿을 디자인하는 것은 큰 사업이 되었으며 상당한 비용이 들 수 있습니다.
- 이메일 클라이언트 보안 – 이번 주에만 Apple Mail이 이메일에 포함되지 않은 HTML 이메일의 모든 이미지를 기본적으로 차단하도록 업데이트되었습니다. 한 번에 이메일을 로드할 수 있는 권한을 부여하거나 이 설정을 비활성화하려면 설정을 활성화해야 합니다. 이메일 클라이언트 보안 설정과 함께 회사 설정도 있습니다.
- IT 보안 – IT 팀은 이메일에서 실제로 렌더링할 수 있는 개체에 대한 엄격한 규칙 집합을 배포할 수 있습니다. 예를 들어 이미지가 회사 방화벽에 허용되지 않은 특정 도메인에서 가져온 경우 이미지는 이메일에 표시되지 않습니다. 때때로 우리는 이메일을 개발하고 회사 서버에서 모든 이미지를 호스팅하여 직원들이 이미지를 볼 수 있도록 해야 했습니다.
- 이메일 서비스 제공 업체 – 설상가상으로, 서비스 제공자에게 이메일을 보내는 이메일 빌더(ESPs) 문제를 제한하기보다는 실제로 문제를 도입합니다. 그들이 편집자를 홍보하는 동안 당신이 보는 것은 당신이 얻는 것입니다 (WYSIWYG) 이메일 디자인에서는 그 반대의 경우가 많습니다. 플랫폼에서 이메일을 미리 본 다음 이메일 수신자는 모든 종류의 디자인 문제를 보게 됩니다. 회사는 종종 한 편집자가 다른 것보다 더 많은 기능을 가지고 있다고 생각하는 잠긴 편집기 대신 기능이 풍부한 편집기를 무의식적으로 선택합니다. 그 반대가 사실입니다… 모든 이메일 클라이언트에서 일관되게 렌더링되는 이메일을 원한다면 잘못될 가능성이 적기 때문에 단순할수록 좋습니다.
- 이메일 클라이언트 렌더링 – 수백 개의 이메일 클라이언트가 있으며 각각은 데스크탑, 앱, 모바일 및 웹메일 클라이언트에서 HTML을 다르게 렌더링합니다. 이메일 서비스 제공업체의 멋진 텍스트 편집기에는 이메일에 제목을 넣는 설정이 있을 수 있지만… 패딩, 여백, 줄 높이 및 글꼴 크기는 이메일 클라이언트마다 다를 수 있습니다. 결과적으로 이메일이 일관되게 렌더링되도록 하려면 HTML을 축소하고 모든 단일 요소를 다르게 코딩해야 하며(아래 예 참조) 종종 이메일 클라이언트에 특정한 예외를 작성해야 합니다. 단순한 블록 유형은 없습니다. XNUMX년 전 웹용으로 구축한 것과 동일한 테이블 기반 레이아웃을 수행해야 합니다. 그렇기 때문에 모든 새로운 레이아웃에는 개발 및 교차 이메일 클라이언트 및 장치 테스트가 모두 필요합니다. 받은 편지함에 표시되는 내용은 받은 편지함에 표시되는 내용과 완전히 다를 수 있습니다. 이것이 다음과 같은 렌더링 도구를 사용하는 이유입니다. 산성에 대한 이메일 or 리트머스 새 디자인이 모든 이메일 클라이언트에서 작동하도록 하려면 반드시 필요합니다. 다음은 인기 있는 이메일 클라이언트 및 해당 렌더링 엔진의 간단한 목록입니다.
- Apple Mail, Mac용 Outlook, Android 메일 및 iOS 메일 사용 웹킷.
- Outlook 2000, 2002 및 2003 사용 인터넷 익스플로러.
- Outlook 2007, 2010 및 2013 사용 마이크로 소프트 워드 (예, 워드!).
- 웹메일 클라이언트는 브라우저의 해당 엔진을 사용합니다(예: Safari는 WebKit을 사용하고 Chrome은 Blink를 사용).
웹 대 HTML의 예. 이메일
이메일과 웹 디자인의 복잡성을 보여주는 예가 필요하면 Mailbakery 기사의 완벽한 예가 있습니다. 이메일과 웹 HTML의 19가지 큰 차이점:
이메일
버튼을 적절하게 배치하고 이메일 클라이언트에서 보기 좋게 보이도록 하는 데 필요한 모든 인라인 스타일을 통합하는 일련의 테이블을 작성해야 합니다. 또한 이 이메일 상단에 클래스를 통합하기 위한 스타일 태그가 함께 제공됩니다.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left">
<table border="0" cellspacing="0" cellpadding="0" bgcolor="#43756e">
<tr>
<td class="text-button" style="padding: 5px 20px; color:#ffffff; font-family: 'Oswald', Arial, sans-serif; font-size:14px; line-height:20px; text-align:center; text-transform:uppercase;">
<a href="#" target="_blank" class="link-white" style="color:#ffffff; text-decoration:none"><span class="link-white" style="color:#ffffff; text-decoration:none">Find Out More</a>
</td>
</tr>
</table>
</td>
</tr>
</table>Web
클래스가 있는 외부 스타일시트를 활용하여 버튼으로 표시되는 앵커 태그의 대소문자, 정렬, 색상 및 크기를 정의할 수 있습니다.
<div class="center">
<a href="#" class="button">Find Out More</a>
</div>이메일 디자인 문제를 피하는 방법
적절한 프로세스를 따르면 이메일 디자인 문제를 피할 수 있습니다.
- 템플릿 디자인 – 이메일 디자인에서 만들고자 하는 모든 스타일을 포괄하는 다양한 레이아웃과 콘텐츠 블록으로 템플릿을 만드십시오. 클라이언트를 구현할 때 항상 클라이언트를 다음으로 푸시합니다. 미래를 위한 이메일 디자인 – 발송되는 다음 이메일 캠페인 뿐만이 아닙니다. 그렇게 하면 필요한 해결 방법을 완전히 설계, 개발, 테스트 및 구현할 수 있습니다. 전에 그들은 그 첫 번째 이메일을 보냅니다.
- 템플릿 테스트 – 가입자가 활용하는 이메일 클라이언트를 이해하고 템플릿을 배포하기 전에 HTML 이메일이 모바일 및 데스크톱에서 완전히 테스트되었는지 확인하는 것이 중요합니다. 우리는 포토샵 레이아웃에서 문자 그대로 이메일을 디자인할 수 있지만… 테이블 기반의 교차 이메일 클라이언트로 자르고 쪼개는 것은 최적의 일관된 이메일 디자인을 배포하는 데 필수적입니다.
- 내부 테스트 – 템플릿이 설계 및 테스트되면 검토 및 승인을 위해 조직 내의 내부 시드 목록으로 보내야 합니다. 이메일을 내부적으로 렌더링하는 것과 관련된 방화벽이나 보안 문제가 없는지 먼저 확인하기 위해 매우 제한된 개인 하위 집합으로 시작하고 싶을 수도 있습니다. 이것이 새로운 이메일 서비스 제공업체에서 인스턴스를 구축하는 경우 이메일을 받은 편지함으로 가져오는 것과 관련된 일부 필터링 또는 차단 문제를 찾을 수도 있습니다.
- 템플릿 버전 관리 – 설계, 적절하게 테스트 및 배포할 수 있는 새 버전의 템플릿을 작업하지 않고 레이아웃이나 디자인을 변경하지 마십시오. 많은 기업이 모든 캠페인에 대해 일회성 디자인을 선호하지만, 이를 위해서는 각 캠페인에 대해 모든 이메일을 디자인, 개발 및 배포해야 합니다. 이것은 내부 이메일 마케팅 프로세스에 많은 시간을 추가합니다. 그리고 이메일의 어떤 요소가 그렇지 않은 요소보다 잘 작동하는지 이해하지 못할 위험이 있습니다. 일관성은 프로세스를 쉽게 만드는 방법일 뿐만 아니라 구독자의 행동에도 중요합니다.
- 이메일 서비스 제공자 예외 – 거의 모든 이메일 서비스 제공업체에는 이메일 빌더에서 발생하는 문제를 해결할 수 있는 수단이 있습니다. 회사에서 기본 제공 이메일 편집기를 활용하고 이메일 디자인을 손상시키지 않도록 하기 위해 계정에 원시 CSS를 추가하거나 모든 이메일에 콘텐츠 블록을 포함해야 하는 경우가 많습니다. 물론 이러한 단계를 배포하여 준수하도록 하려면 약간의 교육과 프로세스 제어가 필요할 수 있습니다. 또는 – 말 그대로 클라이언트와 장치에서 작동하는 것으로 입증된 솔루션에서 이메일 디자인을 개발한 다음 이메일 서비스 제공업체에 다시 붙여넣고 싶을 수도 있습니다.
이메일 디자인 플랫폼
이메일 서비스 플랫폼이 클라이언트 간 및 장치 간 일관되게 렌더링된 빌더를 구축하고 유지 관리하는 데 실패했기 때문에 많은 훌륭한 플랫폼이 출시되었습니다. 우리가 광범위하게 사용한 것은 스트리포.
Stripo는 이메일 빌더일 뿐만 아니라 쉽게 가져올 수 있는 900개 이상의 템플릿 라이브러리도 있습니다. 이메일을 디자인하면 다음을 포함한 60개 이상의 ESP 및 이메일 클라이언트에 이메일을 보낼 수 있습니다. Mailchimp, HubSpot, Campaign Monitor, AWeber, eSputnik, Outlook 및 Gmail. 무엇보다도 Stripo 템플릿에는 이메일 렌더링 테스트가 포함되어 있어 40개 이상의 이메일 클라이언트에서 테스트를 거쳐 일관되게 작동하는지 확인할 수 있습니다.
공개: 나는 내 마케팅 컨설팅 회사 거의 모든 이메일 서비스 제공업체의 주요 브랜드에 대한 교차 클라이언트 이메일을 설계하고 배포하는 사람입니다. 나도 제휴 스트리포 이 기사에서 내 링크를 사용하고 있습니다.
