이메일 마케팅 및 자동화마케팅 및 영업 동영상

HTML 이메일 디자인의 도전(그리고 좌절) 이해하기

웹 페이지를 구축하기 위해 콘텐츠 관리 시스템을 열면 매우 간단한 프로세스입니다. 최신 웹 브라우저 지원 HTML, CSS, JavaScript를 엄격한 웹 표준으로 준수합니다. 그리고 디자이너가 걱정해야 할 브라우저는 소수에 불과합니다. 물론 예외도 있습니다. 그리고 해당 브라우저에 특정한 몇 가지 간단한 해결 방법이나 기능도 있습니다.

전반적인 표준으로 인해 콘텐츠 관리 시스템에서 페이지 빌더를 개발하는 것은 간단합니다. 브라우저는 HTML5, CSS 및 JavaScript를 준수하며 개발자는 놀라울 정도로 강력한 솔루션을 구축하여 장치에 반응하고 브라우저 전반에 걸쳐 일관된 웹 페이지를 만들 수 있습니다. XNUMX년 전에는 거의 모든 웹 디자이너가 데스크톱 소프트웨어를 사용하여 웹 페이지를 개발했습니다. 이제 웹 디자이너가 웹 페이지를 개발하는 것은 매우 드문 일입니다. 대개 그들은 템플릿을 개발하고 콘텐츠 시스템의 편집기를 사용하여 콘텐츠를 채웁니다. 웹사이트 편집자는 환상적입니다.

그러나 이메일 편집자들은 뒤처져 있습니다. 여기에 이유가 있습니다 ...

HTML 이메일 디자인은 웹사이트보다 훨씬 더 복잡합니다.

회사에서 아름다운 HTML 이메일 디자인을 원할 경우 다음과 같은 몇 가지 이유로 인해 프로세스가 웹 페이지를 구축하는 것보다 훨씬 더 복잡해집니다.

  • 기준 없음 – HTML 이메일을 표시하는 이메일 클라이언트는 웹 표준을 엄격하게 준수하지 않습니다. 거의 모든 이메일 클라이언트와 모든 이메일 클라이언트의 모든 버전은 다르게 작동합니다. 일부는 CSS, 외부 글꼴 및 최신 HTML을 존중합니다. 다른 것들은 일부 인라인 스타일을 존중하고 글꼴 모음만 표시하며 테이블 기반 구조를 제외한 모든 것을 무시합니다. 이 문제에 대해 아무도 작업하지 않는다는 것은 정말 우스꽝 스럽습니다. 결과적으로 클라이언트와 장치 전반에 걸쳐 일관되게 렌더링되는 템플릿을 디자인하는 것이 큰 사업이 되었으며 비용이 상당히 많이 들 수 있습니다.
  • 이메일 클라이언트 보안 – 최근 Apple Mail은 이메일에 포함되지 않은 HTML 이메일의 모든 이미지를 기본적으로 차단하도록 업데이트되었습니다. 한 번에 이메일을 로드할 수 있는 권한을 부여하거나 이 설정을 비활성화하려면 설정을 활성화해야 합니다. 이메일 클라이언트 보안 설정과 함께 회사 설정도 있습니다.
  • IT 보안 – IT 팀은 이메일에서 실제로 렌더링할 수 있는 개체에 대한 엄격한 규칙 집합을 배포할 수 있습니다. 예를 들어 이미지가 회사 방화벽에 허용되지 않은 특정 도메인에서 가져온 경우 이미지는 이메일에 표시되지 않습니다. 때때로 우리는 이메일을 개발하고 회사 서버에서 모든 이미지를 호스팅하여 직원들이 이미지를 볼 수 있도록 해야 했습니다.
  • 이메일 서비스 제공 업체 – 설상가상으로, 서비스 제공자에게 이메일을 보내는 이메일 빌더(ESPs) 실제로 문제를 제한하기보다는 문제를 도입합니다. WYSIWYG(What You See Is What You Get) 편집자를 홍보하는 반면 이메일 디자인에서는 그 반대인 경우가 많습니다. 해당 플랫폼에서 이메일을 미리 볼 수 있으며 수신자는 모든 디자인 문제를 볼 수 있습니다. 회사에서는 더 많은 기능이 있다고 생각하여 잠겨 있는 편집기 대신 기능이 풍부한 편집기를 무의식적으로 선택하는 경우가 많습니다. 그 반대는 사실입니다. 모든 이메일 클라이언트에서 일관되게 렌더링되는 이메일을 원한다면 더 간단할수록 더 좋습니다. 잘못될 가능성이 적기 때문입니다.
  • 이메일 클라이언트 렌더링 – 수백 개의 이메일 클라이언트가 데스크톱, 앱, 모바일 장치 및 웹 메일 클라이언트에 걸쳐 HTML을 다르게 렌더링합니다. 이메일 서비스 제공업체의 멋진 텍스트 편집기에는 이메일에 제목을 입력하는 설정이 있을 수 있지만 여백, 여백, 줄 높이 및 글꼴 크기는 이메일 클라이언트마다 다를 수 있습니다. 결과적으로 이메일을 일관되게 렌더링하려면 HTML을 단순화하고 모든 단일 요소를 다르게 코딩해야 하며(아래 예 참조) 이메일 클라이언트별 예외를 작성하는 경우가 많습니다. 단순한 블록 유형이 없으며, 30년 전 웹용 구축과 동일한 테이블 기반 레이아웃을 수행해야 합니다. 이것이 바로 새로운 레이아웃에 개발과 이메일 간 클라이언트 및 장치 테스트가 모두 필요한 이유입니다. 귀하의 받은 편지함에 표시되는 내용은 내가 받은 편지함에 표시되는 내용과 완전히 다를 수 있습니다. 그렇기 때문에 다음과 같은 렌더링 도구가 있습니다. 산성에 대한 이메일 or 리트머스 새 디자인이 모든 이메일 클라이언트에서 작동하도록 하려면 반드시 필요합니다. 다음은 인기 있는 이메일 클라이언트 및 해당 렌더링 엔진의 간단한 목록입니다.
    • Apple Mail, Mac용 Outlook, Android 메일 및 iOS 메일 사용 웹킷.
    • Outlook 2000, 2002 및 2003 사용 인터넷 익스플로러.
    • Outlook 2007, 2010 및 2013 사용 마이크로 소프트 워드 (예, 워드!).
    • 웹메일 클라이언트는 브라우저의 해당 엔진을 사용합니다(예: Safari는 WebKit을 사용하고 Chrome은 Blink를 사용).

웹 대 HTML의 예. 이메일

이메일과 웹 디자인의 복잡성을 보여주는 예가 필요하면 Mailbakery 기사의 완벽한 예가 있습니다. 이메일과 웹 HTML의 19가지 큰 차이점:

이메일 HTML

버튼을 적절하게 배치하고 이메일 클라이언트에서 보기 좋게 표시하는 데 필요한 모든 인라인 스타일을 통합하는 일련의 테이블을 구축해야 합니다. 클래스를 통합하기 위해 함께 제공되는 스타일 태그도 이 이메일 상단에 표시됩니다.

<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>

HTML 웹

클래스가 있는 외부 스타일시트를 활용하여 버튼으로 표시되는 앵커 태그의 대소문자, 정렬, 색상 및 크기를 정의할 수 있습니다.

<div class="center">
   <a href="#" class="button">Find Out More</a>
</div>

이메일 디자인 문제를 피하는 방법

적절한 프로세스를 따르면 이메일 디자인 문제를 피할 수 있습니다.

  1. 템플릿 테스트 – 구독자가 사용하는 이메일 클라이언트를 이해하고 템플릿을 배포하기 전에 HTML 이메일이 모바일과 데스크톱에서 완전히 테스트되었는지 확인하는 것이 중요합니다. 문자 그대로 Photoshop 레이아웃에서 이메일을 디자인할 수 있습니다. 그러나 최적이고 일관된 이메일 디자인을 배포하려면 이를 테이블 중심의 크로스 이메일 클라이언트로 쪼개고 쪼개는 것이 필수적입니다.
  2. 내부 테스트 – 템플릿이 설계 및 테스트되면 검토 및 승인을 위해 조직 내의 내부 시드 목록으로 보내야 합니다. 이메일을 내부적으로 렌더링하는 것과 관련된 방화벽이나 보안 문제가 없는지 먼저 확인하기 위해 매우 제한된 개인 하위 집합으로 시작하고 싶을 수도 있습니다. 이것이 새로운 이메일 서비스 제공업체에서 인스턴스를 구축하는 경우 이메일을 받은 편지함으로 가져오는 것과 관련된 일부 필터링 또는 차단 문제를 찾을 수도 있습니다.
  3. 템플릿 버전 관리 – 설계, 적절하게 테스트 및 배포할 수 있는 새 버전의 템플릿을 작업하지 않고 레이아웃이나 디자인을 변경하지 마십시오. 많은 기업이 모든 캠페인에 대해 일회성 디자인을 선호하지만, 이를 위해서는 각 캠페인에 대해 모든 이메일을 디자인, 개발 및 배포해야 합니다. 이것은 내부 이메일 마케팅 프로세스에 많은 시간을 추가합니다. 그리고 이메일의 어떤 요소가 그렇지 않은 요소보다 잘 작동하는지 이해하지 못할 위험이 있습니다. 일관성은 프로세스를 쉽게 만드는 방법일 뿐만 아니라 구독자의 행동에도 중요합니다.
  4. 이메일 서비스 제공자 예외 – 거의 모든 이메일 서비스 제공업체에는 이메일 빌더에서 발생하는 문제를 해결할 수 있는 수단이 있습니다. 회사에서 기본 제공 이메일 편집기를 활용하고 이메일 디자인을 손상시키지 않도록 하기 위해 계정에 원시 CSS를 추가하거나 모든 이메일에 콘텐츠 블록을 포함해야 하는 경우가 많습니다. 물론 이러한 단계를 배포하여 준수하도록 하려면 약간의 교육과 프로세스 제어가 필요할 수 있습니다. 또는 – 말 그대로 클라이언트와 장치에서 작동하는 것으로 입증된 솔루션에서 이메일 디자인을 개발한 다음 이메일 서비스 제공업체에 다시 붙여넣고 싶을 수도 있습니다.

이메일 디자인 플랫폼

이메일 서비스 플랫폼이 클라이언트 간 및 장치 간 일관되게 렌더링된 빌더를 구축하고 유지 관리하는 데 실패했기 때문에 많은 훌륭한 플랫폼이 출시되었습니다. 우리가 광범위하게 사용한 것은 스트리포.

Stripo는 이메일 빌더일 뿐만 아니라 쉽게 가져올 수 있는 900개 이상의 템플릿 라이브러리도 있습니다. 이메일을 디자인하면 다음을 포함한 60개 이상의 ESP 및 이메일 클라이언트에 이메일을 보낼 수 있습니다. 인튜이트 메일침프, HubSpot, 캠페인 모니터, AWeber, e스푸트니크, OutlookGmail. 무엇보다도 Stripo 템플릿에는 이메일 렌더링 테스트가 포함되어 있으므로 40개가 넘는 이메일 클라이언트에서 테스트를 거쳐 일관되게 작동하는지 확인할 수 있습니다.

Stripo 편집기 데모에 로그인

Douglas Karr

Douglas Karr 의 CMO입니다. 오픈인사이트 그리고 설립자 Martech Zone. Douglas는 수십 개의 성공적인 MarTech 스타트업을 도왔고, Martech 인수 및 투자에서 5억 달러가 넘는 실사를 도왔으며, 기업이 판매 및 마케팅 전략을 구현하고 자동화하도록 지속적으로 지원하고 있습니다. Douglas는 국제적으로 인정받는 디지털 혁신이자 MarTech 전문가이자 연설가입니다. Douglas는 Dummie's Guide와 비즈니스 리더십 서적을 집필한 작가이기도 합니다.

관련 기사

맨 위로 가기 버튼
닫기

애드블록 감지됨

Martech Zone 은(는) 광고 수익, 제휴 링크 및 후원을 통해 사이트에서 수익을 창출하기 때문에 이 콘텐츠를 무료로 제공할 수 있습니다. 사이트를 볼 때 광고 차단기를 제거해 주시면 감사하겠습니다.