이메일 마케팅 및 자동화모바일 및 태블릿 마케팅

받은 편지함 배치 및 참여를 극대화하는 16가지 모바일 친화적인 HTML 이메일 모범 사례

2023년에는 이메일을 여는 기본 장치로서 모바일이 데스크톱을 능가할 가능성이 높습니다. 실제로 HubSpot은 46 비율 의 모든 이메일 열기가 이제 모바일에서 발생합니다. 모바일용 이메일을 디자인하지 않는다면 많은 참여와 비용을 테이블에 남겨두고 있는 것입니다.

  1. 이메일 인증: 당신의 보장 이메일이 인증되었습니다 발신 도메인 및 IP 주소는 받은 편지함으로 이동하는 데 중요하며 정크 또는 스팸 폴더로 라우팅되지 않습니다. 물론 구독 취소 링크가 포함된 플랫폼을 사용하여 이메일 수신을 거부할 수 있는 수단을 제공하는 것도 중요합니다.
  2. 반응 형 디자인 : 최대 XNUMXW 출력을 제공하는 HTML 이메일은 반응형으로 설계즉, 보고 있는 장치의 화면 크기에 맞게 조정할 수 있습니다. 이렇게 하면 이메일이 데스크탑과 모바일 장치 모두에서 보기 좋게 표시됩니다.
  3. 명확하고 간결한 제목: 이메일 미리보기 창에서 제목의 처음 몇 단어만 볼 수 있기 때문에 모바일 사용자에게는 명확하고 간결한 제목이 중요합니다. 간결하고 이메일 내용을 정확하게 반영해야 합니다. 이메일 제목의 최적 문자 길이는 이메일 내용, 대상 및 사용 중인 이메일 클라이언트와 같은 여러 요인에 따라 달라질 수 있습니다. 그러나 대부분의 전문가들은 이메일 제목을 짧고 간결하게 유지하는 것이 좋습니다(일반적으로 41-50자 또는 6-8단어). 모바일 장치에서는 50자보다 긴 제목이 잘릴 수 있으며 경우에 따라 제목의 처음 몇 단어만 표시될 수 있습니다. 이렇게 하면 수신자가 이메일의 주요 메시지를 이해하기 어려워지고 이메일이 열릴 가능성이 줄어들 수 있습니다.
  4. 프리헤더: 이메일 프리헤더는 이메일 클라이언트의 받은 편지함에서 제목 옆이나 아래에 표시되는 이메일 내용의 짧은 요약입니다. 최적화될 때 이메일을 여는 비율에 영향을 줄 수 있는 중요한 요소입니다. 대부분의 클라이언트는 HTML과 CSS를 통합하여 프리헤더 텍스트가 올바르게 설정되었는지 확인합니다.
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      /* CSS for desktop styles */
      @media only screen and (min-width: 600px) {
        /* desktop styles here */
      }
      /* CSS for mobile styles */
      @media only screen and (max-width: 599px) {
        /* mobile styles here */
      }
    </style>
  </head>
  <body>
    <!-- Intro text for preview -->
    <div style="display:none; max-height:0px; overflow:hidden;">
      This is the intro text that will appear in the email preview, but won't be visible in the email itself.
    </div>
    
    <!-- Main email content -->
    <div style="max-width:600px; margin:0 auto;">
      <!-- Content goes here -->
    </div>
  </body>
</html>
  1. 단일 열 레이아웃: 단일 열 레이아웃으로 디자인된 이메일은 모바일 장치에서 더 쉽게 읽을 수 있습니다. 내용은 논리적인 순서로 구성되어야 하며 단순하고 읽기 쉬운 형식으로 제시되어야 합니다. 여러 열이 있는 경우 CSS를 활용하면 단일 열 레이아웃으로 열을 우아하게 구성할 수 있습니다.

여기에 HTML 이메일 레이아웃 데스크톱에서는 2열이고 모바일 화면에서는 XNUMX열로 축소됩니다.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      /* CSS for desktop styles */
      @media only screen and (min-width: 600px) {
        .container {
          display: flex;
          flex-wrap: wrap;
        }
        .col {
          flex: 1;
          padding: 10px;
        }
        .col.left {
          order: 1;
        }
        .col.right {
          order: 2;
        }
      }
      /* CSS for mobile styles */
      @media only screen and (max-width: 599px) {
        .container {
          display: block;
        }
        .col {
          width: 100%;
          padding: 10px;
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="col left">
        <!-- Content for left column -->
      </div>
      <div class="col right">
        <!-- Content for right column -->
      </div>
    </div>
  </body>
</html>

여기에 HTML 이메일 레이아웃 데스크톱에서는 3열이고 모바일 화면에서는 XNUMX열로 축소됩니다.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      /* CSS for desktop styles */
      @media only screen and (min-width: 600px) {
        .container {
          display: flex;
          flex-wrap: wrap;
        }
        .col {
          flex: 1;
          padding: 10px;
        }
        .col.left {
          order: 1;
        }
        .col.middle {
          order: 2;
        }
        .col.right {
          order: 3;
        }
      }
      /* CSS for mobile styles */
      @media only screen and (max-width: 599px) {
        .container {
          display: block;
        }
        .col {
          width: 100%;
          padding: 10px;
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="col left">
        <!-- Content for left column -->
      </div>
      <div class="col middle">
        <!-- Content for middle column -->
      </div>
      <div class="col right">
        <!-- Content for right column -->
      </div>
    </div>
  </body>
</html>
  1. 라이트 앤 다크 모드: 다리 이메일 클라이언트는 밝은 모드와 어두운 모드를 지원합니다. CSS prefers-color-scheme 사용자의 선호도를 수용하기 위해. 배경이 투명한 이미지 유형을 활용하십시오. 다음은 코드 예제입니다.
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      /* Light mode styles */
      body {
        background-color: #ffffff;
        color: #333333;
      }
      .container {
        background-color: #f9f9f9;
      }
      .text {
        border: 1px solid #cccccc;
      }
      /* Dark mode styles */
      @media (prefers-color-scheme: dark) {
        body {
          background-color: #333333;
          color: #f9f9f9;
        }
        .container {
          background-color: #333333;
        }
        .text {
          border: 1px solid #f9f9f9;
        }
      }
      /* Common styles for both modes */
      .container {
        display: flex;
        flex-wrap: wrap;
        padding: 10px;
      }
      .col {
        flex: 1;
        margin: 10px;
      }
      img {
        max-width: 100%;
        height: auto;
      }
      h2 {
        font-size: 24px;
        margin-bottom: 10px;
      }
      p {
        font-size: 16px;
        line-height: 1.5;
        margin: 0;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="col">
        <img src="image1.jpg" alt="Image 1">
        <div class="text">
          <h2>Heading 1</h2>
          <p>Text for column 1 goes here.</p>
        </div>
      </div>
      <div class="col">
        <img src="image2.jpg" alt="Image 2">
        <div class="text">
          <h2>Heading 2</h2>
          <p>Text for column 2 goes here.</p>
        </div>
      </div>
      <div class="col">
        <img src="image3.jpg" alt="Image 3">
        <div class="text">
          <h2>Heading 3</h2>
          <p>Text for column 3 goes here.</p>
        </div>
      </div>
    </div>
  </body>
</html>
  1. 크고 읽기 쉬운 글꼴: 글꼴 크기와 스타일은 작은 화면에서 텍스트를 쉽게 읽을 수 있도록 선택해야 합니다. 최소 14pt 글꼴 크기를 사용하고 작은 화면에서 읽기 어려운 글꼴은 사용하지 마십시오. 일반적으로 사용되는 글꼴은 여러 이메일 클라이언트에서 일관되게 렌더링될 가능성이 높으므로 Arial, Helvetica, Times New Roman, Georgia, Verdana, Tahoma 및 Trebuchet MS를 사용하는 것이 일반적으로 안전한 글꼴입니다. 맞춤 글꼴을 사용하는 경우 CSS에서 대체 글꼴을 식별해야 합니다.
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      /* Custom font */
      @font-face {
        font-family: 'My Custom Font';
        src: url('my-custom-font.woff2') format('woff2'),
             url('my-custom-font.woff') format('woff');
        font-weight: normal;
        font-style: normal;
      }
      /* Fallback font */
      body {
        font-family: 'My Custom Font', Arial, sans-serif;
      }
      /* Other styles */
      h1 {
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 10px;
      }
      p {
        font-size: 16px;
        line-height: 1.5;
        margin: 0;
      }
    </style>
  </head>
  <body>
    <h1>My Custom Font Example</h1>
    <p>This text uses the custom font 'My Custom Font'. If the font is not supported, the fallback font 'Arial' will be used instead.</p>
  </body>
</html>
  1. 최적의 이미지 사용: 이미지는 로드 시간을 늦출 수 있으며 모든 모바일 장치에서 제대로 표시되지 않을 수 있습니다. 이미지를 드물게 사용하고 크기와 크기가 올바른지 확인하십시오. 압축 된 모바일 보기용. 이메일 클라이언트가 이미지를 차단하는 경우 이미지에 대한 대체 텍스트를 입력해야 합니다. 모든 이미지는 안전한 웹사이트(SSL). 다음은 HTML 이메일에 있는 반응형 이미지의 예제 코드입니다.
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      /* CSS for desktop styles */
      @media only screen and (min-width: 600px) {
        .container {
          display: flex;
          flex-wrap: wrap;
        }
        .col {
          flex: 1;
          padding: 10px;
        }
        .col.left {
          order: 1;
        }
        .col.middle {
          order: 2;
        }
        .col.right {
          order: 3;
        }
        .single-pane {
          width: 100%;
        }
        img {
          max-width: 100%;
          height: auto;
        }
      }
      /* CSS for mobile styles */
      @media only screen and (max-width: 599px) {
        .container {
          display: block;
        }
        .col {
          width: 100%;
          padding: 10px;
        }
      }
    </style>
  </head>
  <body>
    <!-- 3-column section with images -->
    <div class="container">
      <div class="col left">
        <img src="image1.jpg" alt="Image 1">
        <!-- Content for left column -->
      </div>
      <div class="col middle">
        <img src="image2.jpg" alt="Image 2">
        <!-- Content for middle column -->
      </div>
      <div class="col right">
        <img src="image3.jpg" alt="Image 3">
        <!-- Content for right column -->
      </div>
    </div>
  </body>
</html>
  1. 명확한 클릭 유도문안(CTA): 명확하고 눈에 띄는 CTA는 모든 이메일에서 중요하지만 특히 모바일 친화적인 이메일에서 중요합니다. CTA는 쉽게 찾을 수 있고 휴대기기에서 클릭할 수 있을 만큼 충분히 커야 합니다. 버튼을 통합하면 인라인 스타일 태그를 사용하여 CSS로 작성했는지 확인할 수 있습니다.
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      /* Desktop styles */
      .button {
        display: inline-block;
        background-color: #4CAF50;
        color: #ffffff;
        padding: 10px 20px;
        text-align: center;
        text-decoration: none;
        border-radius: 5px;
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 20px;
      }
      /* Mobile styles */
      @media only screen and (max-width: 600px) {
        .button {
          display: block;
          width: 100%;
        }
      }
    </style>
  </head>
  <body>
    <h1>Sample Responsive Email</h1>
    <p>This is an example of a responsive email with a button.</p>
    <a href="#" class="button" style="background-color: #4CAF50; color: #ffffff; text-decoration: none; padding: 10px 20px; border-radius: 5px; font-size: 16px; font-weight: bold;">Click Here</a>
  </body>
</html>
  1. 짧고 간결한 콘텐츠: 이메일 내용은 짧고 요점만 유지하십시오. HTML 이메일의 문자 제한은 사용 중인 이메일 클라이언트에 따라 다를 수 있습니다. 그러나 대부분의 이메일 클라이언트는 일반적으로 1024-2048킬로바이트(KB), 여기에는 HTML 코드와 이미지 또는 첨부 파일이 모두 포함됩니다. 작은 화면에서 스크롤하고 읽는 동안 콘텐츠를 쉽게 스캔할 수 있도록 부제, 글머리 기호 및 기타 서식 지정 기술을 사용합니다.
  2. 대화형 요소: 통합 인터랙티브 요소 구독자의 관심을 끄는 것은 이메일에서 참여, 이해 및 전환율을 높일 것입니다. 애니메이션 GIF, 카운트다운 타이머, 비디오 및 기타 요소는 대부분의 스마트폰 이메일 클라이언트에서 지원됩니다.
  3. 개인 : 특정 구독자를 위한 인사말과 콘텐츠를 개인화하면 참여를 크게 높일 수 있습니다. 예. 이름 필드에 데이터가 없는 경우 대비책을 갖는 것이 중요합니다.
  4. 동적 콘텐츠: 콘텐츠의 세분화 및 사용자 정의는 구독 취소율을 줄이고 구독자의 참여를 유지할 수 있습니다.
  5. 캠페인 통합: 대부분의 최신 이메일 서비스 제공업체는 자동으로 추가할 수 있는 기능이 있습니다. UTM 캠페인 쿼리스트링 모든 링크에 대해 이메일을 분석의 채널로 볼 수 있습니다.
  6. 환경 설정 센터: 이메일 마케팅은 이메일에 대한 옵트인 또는 옵트아웃 접근 방식에 너무 중요합니다. 구독자가 이메일 수신 빈도와 중요한 콘텐츠를 변경할 수 있는 기본 설정 센터를 통합하는 것은 참여 구독자로 강력한 이메일 프로그램을 유지하는 환상적인 방법입니다!
  7. 테스트, 테스트, 테스트: 여러 기기에서 이메일을 테스트하거나 애플리케이션을 활용하여 이메일 클라이언트에서 이메일 미리보기 보내기 전에 다른 화면 크기와 운영 체제에서 제대로 보이고 제대로 작동하는지 확인합니다. 리트머스 가장 인기 있는 상위 3개 모바일 개방형 환경은 Apple iPhone(iOS Mail), Google Android, Apple iPad(iPadOS Mail)로 계속 동일하다고 보고합니다. 또한 제목과 콘텐츠의 테스트 변형을 통합하여 오픈율과 클릭율을 향상시키십시오. 많은 이메일 플랫폼은 이제 목록을 샘플링하고 가장 적합한 변형을 식별하고 나머지 구독자에게 최상의 이메일을 보내는 자동화된 테스트를 통합합니다.

귀하의 회사가 참여를 유도하는 모바일 응답 이메일을 설계, 테스트 및 구현하는 데 어려움을 겪고 있다면 주저하지 말고 저희 회사에 연락하십시오. DK New Media 거의 모든 이메일 서비스 제공업체 구현 경험 보유(ESP).

Douglas Karr

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

관련 기사

맨 위로 가기 버튼
닫기

애드블록 감지됨

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