반응형 이메일에서 열을 쌓는 방법

게시 됨: 2021-10-04

Sooooo, 나는 여기서 잠시 나 자신과 데이트를 할 것이지만, 나와 함께 있어라.

스마트폰이 처음으로 이메일 마케팅 담당자가 처리해야 하는 대상이 되기 시작했을 때 모든 사람에게서 공통적으로 본 솔루션은 단일 열 이메일이었습니다. 많은 모바일 이메일 클라이언트가 미디어 쿼리를 지원하지 않았기 때문에 이는 의미가 있습니다. 가장 쉬운 선택은 모바일용으로 쉽게 크기를 조정할 수 있는 데스크톱의 단일 열 디자인을 고수함으로써 문제를 완전히 피하는 것이었습니다.

그러나 요즘에는 더 많은 미디어 쿼리가 지원되므로 반응형 코딩을 활용하여 이메일 디자인이 구독자가 보고 있는 화면 크기에 응답하도록 하는 더 흥미로운 디자인을 만들 수 있습니다.

다음을 안내해 드리겠습니다.

일반 대 역 스태킹 순서
쌓이는 콘텐츠를 코딩하는 2가지 방법
모바일 콘텐츠를 쌓으면 안 되는 경우

모바일에서 열을 쌓아야 하는 이유

모바일 장치는 보기 화면이 매우 제한적이며 모바일 장치에 이상적인 디자인은 한 열입니다. 그러나 우리는 공간이 많은 데스크탑에서 단일 열 디자인으로 제한하고 싶지 않습니다. 콘텐츠가 더 작은 화면에 최적화되도록 모바일에 콘텐츠를 쌓을 수 있도록 미디어 쿼리를 입력하세요.

데스크탑	이동하는

출처: 정말 좋은 이메일

이메일 콘텐츠를 동일한 데스크탑 레이아웃으로 유지하면 모바일 장치에서 매우 작은 텍스트와 이미지 또는 찌그러진 콘텐츠가 생성됩니다. 일부 휴대전화의 화면 너비만큼 넓은 이 이메일과 같이 구독자가 콘텐츠를 읽는 데 어려움을 겪을 가능성이 높기 때문에 사용자 경험이 좋지 않습니다.

구독자에게 호의를 베풀고 이메일이 모든 읽기 환경에서 최상의 상태로 보이도록 하십시오.

이메일 디자인을 위한 스태킹 방법

열을 서로의 위에 쌓고 싶을 때 콘텐츠를 쌓을 수 있는 두 가지 방법이 있습니다. 왼쪽 열이 위에 오도록(일반 쌓기) 또는 오른쪽 열이 위에 오도록(역 쌓기).

일반 스태킹

일반 스태킹은 가장 일반적인 스태킹 형태입니다. 다음과 같이 왼쪽 열의 내용을 가져와 오른쪽 열의 내용 위에 쌓습니다.

일반 스태킹

역 스태킹

역 스태킹은 왼쪽 열의 내용이 오른쪽 열의 내용 아래 쌓이는 것입니다. 데스크탑에는 Z 패턴이 있지만 모바일에서는 행이 모두 동일하게 보이도록 하려는 경우 중간 행에 가장 일반적으로 사용됩니다. 이 예에서 첫 번째 행과 마지막 행은 일반 스태킹이지만 두 번째 행은 역 스태킹 열입니다.

역 스태킹

모바일에서 쌓이는 열을 코딩하는 2가지 방법

스택 열을 코딩하는 몇 가지 다른 방법이 있습니다. CSS 미디어 쿼리를 사용한 다음 하이브리드 코딩 방법을 사용하여 안내하겠습니다. 그것들을 테스트하고 당신에게 가장 적합한 것이 무엇인지 확인하십시오.

CSS 미디어 쿼리 사용

두 개의 열로 구성된 테이블을 만든 다음 클래스를 사용하여 열을 쌓으면 두 개의 열을 만들 수 있습니다.

CSS는 다음과 같습니다.

 <style>
     @media screen and (max-width:600px) {
          .block { display: block !important; width: 100% !important; }
     }
  </style>

그리고 HTML은 다음과 같이 보일 것입니다:

 <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width:600px;">
     <tr>
          <td class="block" align="left" valign="top" style="padding:10px 0;" width="50%">
                <img src="http://via.placeholder.com/300">
        </td>
          <td class="block" align="left" valign="top" style="padding:10px 0 10px 10px;" width="50%">
               <p style="font-family: Helvetica, Arial, sans-serif;font-size:18px;line-height:28px;mso-line-height-rule:exactly;color:#262524;">Somebody once told me the world is gonna roll me. I ain't the sharpest tool in the shed. She was looking kind of dumb with her finger and her thumb in the shape of an "L" on her forehead.</p>
        </td>
     </tr>
 </table>

블록 클래스는 모바일에서 테이블 셀을 블록으로 변환하고 콘텐츠는 그에 따라 동작하고 모바일에서 자동으로 스택됩니다. 그 결과 정상적인 스택이 생성됩니다.

역 스택을 생성하려면 다음과 같이 table-header-group 및 table-footer-group을 CSS의 표시 속성 값으로 사용할 수 있습니다.

 <style>
     @media screen and (max-width:600px) {
          .top { display: table-header-group !important; width: 100% !important; }
          .bottom { display: table-footer-group !important; width: 100% !important; }
     }
  </style>

HTML은 다음과 같이 됩니다.

<table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width:600px;">
      <tr>
            <td class="bottom" align="left" valign="top" style="padding:10px 0;" width="50%">
                     <img src="http://via.placeholder.com/300">
            </td>
            <td class="top" align="left" valign="top" style="padding:10px 0 10px 10px;" width="50%">
                  <p style="font-family: Helvetica, Arial, sans-serif;font-size:18px;line-height:28px;mso-line-height-rule:exactly;color:#262524;">Well the years start coming and they don't stop coming. Fed to the rules and I hit the ground running. Didn't make sense not to live for fun. Your brain gets smart but your head gets dumb.</p>
            </td>
      </tr>
 </table>

하이브리드 코딩

이것은 내가 사용하는 방법입니다. 훨씬 더 많은 코드를 사용하지만 이메일 클라이언트가 미디어 쿼리를 지원하지 않을 때 여러 번 내 엉덩이를 절약했습니다. (나에게 하이브리드 코딩을 처음 소개한 그녀의 튜토리얼에 대해 Nicole Merlin에게 미친 소도구를 제공했습니다.)

이 경우 display: inline-block 과 함께 두 개의 div를 사용합니다. 이렇게 하면 콘텐츠가 데스크톱에서 나란히 배치되고 모바일에서 스택으로 푸시됩니다. 코드는 다음과 같습니다.

<div style="display:inline-block;vertical-align:top;">
      <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 300px;">
            <tr>
                  <td align="left" valign="top">
                        <img src="http://via.placeholder.com/300">
                  </td>
            </tr>
      </table>
</div>
<div style="display:inline-block;vertical-align:top;">
      <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width:300px;">
            <tr>
                  <td align="left" valign="top" style="padding-left: 10px;">
                        <p style="font-family: Helvetica, Arial, sans-serif;font-size:18px;line-height:28px;mso-line-height-rule:exactly;color:#262524;">So much to do, so much to see, so what's wrong with taking the back streets? You'll never know if you don't go. You'll never shine if you don't glow.</p>
                  </td>
            </tr>
      </table>
</div>

그런 다음 이 모든 것을 테이블 셀에 래핑하고 글꼴 크기를 0으로 설정하여 div 주위에 추가 공간이 추가되지 않도록 하고 전체를 테이블 셀의 중앙에 정렬합니다.

     <tr>
          <td style="font-size:0;" align="center" valign="top">
               <div style="display:inline-block;vertical-align:top;">
                     <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 300px;">
                           <tr>
                                 <td align="left" valign="top">
                                       <img src="http://via.placeholder.com/300">
                                 </td>
                           </tr>
                     </table>
               </div>
               <div style="display:inline-block;vertical-align:top;">
                     <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width:300px;">
                           <tr>
                                 <td align="left" valign="top" style="padding-left: 10px;">
                                       <p style="font-family: Helvetica, Arial, sans-serif;font-size:18px;line-height:28px;mso-line-height-rule:exactly;color:#262524;">So much to do, so much to see, so what's wrong with taking the back streets? You'll never know if you don't go. You'll never shine if you don't glow.</p>
                                 </td>
                           </tr>
                     </table>
               </div>
          </td>
     </tr>

하지만 기다려! Outlook은 div를 지원하지 않기 때문에 Outlook에서 작동하려면 모든 항목에 대해 일부 고스트 테이블을 추가해야 합니다.

     <tr>
          <td style="font-size:0;" align="center" valign="top">
               <!--[if (gte mso 9)|(IE)]>
               <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 100%;">
               <tr>
               <td valign="top" style="width: 300px;">
               <![endif]-->
                    <div style="display:inline-block;vertical-align:top;">
                          <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 300px;">
                                <tr>
                                      <td align="left" valign="top">
                                            <img src="http://via.placeholder.com/300">
                                      </td>
                                </tr>
                          </table>
                    </div>
               <!--[if (gte mso 9)|(IE)]>
               </td><td valign="top" style="width:300px;">
               <![endif]-->
                    <div style="display:inline-block;vertical-align:top;">
                          <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width:300px;">
                                <tr>
                                      <td align="left" valign="top" style="padding-left: 10px;">
                                            <p style="font-family: Helvetica, Arial, sans-serif;font-size:18px;line-height:28px;mso-line-height-rule:exactly;color:#262524;">So much to do, so much to see, so what's wrong with taking the back streets? You'll never know if you don't go. You'll never shine if you don't glow.</p>
                                      </td>
                                </tr>
                          </table>
                    </div>
               <!--[if (gte mso 9)|(IE)]>
               </td>
               </tr>
               </table>
               <![endif]-->
          </td>
     </tr>

이 코드는 포함하는 테이블의 50%에 해당하는 열을 사용하는 경우 미디어 쿼리 없이도 잘 작동합니다. 그러나 더 작은 열을 사용하는 경우 모바일에서 너비를 100%로 업데이트하려면 일부 미디어 쿼리를 추가해야 합니다. 자세한 내용은 아래에서 확인하세요.

이것의 역 스택 버전은 dir 속성을 이용하여 div를 반대 순서로 정렬합니다. 두 개의 열이 포함된 셀에 dir="rtl"을 추가한 다음 콘텐츠가 올바르게 표시되도록 하려면 각 열에 dir="ltr"을 테이블에 추가해야 합니다.

     <tr>
          <td style="font-size:0;" align="left" valign="top" dir="rtl">
               <!--[if (gte mso 9)|(IE)]>
               <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 100%;">
               <tr>
               <td valign="top" style="width: 300px;">
               <![endif]-->
                    <div style="display:inline-block;vertical-align:top;">
                          <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 300px;" dir=”ltr”>
                                <tr>
                                      <td align="left" valign="top">
                                            <p style="font-family: Helvetica, Arial, sans-serif;font-size:18px;line-height:28px;mso-line-height-rule:exactly;color:#262524;">Hey now, you're an all-star, get your game on, go play. Hey now, you're a rock star, get the show on, get paid. And all that glitters is gold. Only shooting stars break the mold.</p>
                                      </td>
                                </tr>
                          </table>
                    </div>
               <!--[if (gte mso 9)|(IE)]>
               </td><td valign="top" style="width:300px;">
               <![endif]-->
                    <div style="display:inline-block;vertical-align:top;">
                          <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width:300px;" dir=”ltr”>
                                <tr>
                                      <td align="left" valign="top" style="padding-left: 10px;">
                                            <img src="http://via.placeholder.com/300">
                                      </td>
                                </tr>
                          </table>
                    </div>
               <!--[if (gte mso 9)|(IE)]>
               </td>
               </tr>
               </table>
               <![endif]-->
          </td>
     </tr>

리버스 스태킹 하이브리드 버전으로 코딩할 때 염두에 두어야 할 사항: 첫 번째 <div>에 있는 것이 무엇이든 오른쪽 열에 있게 되며, 이는 직관적이지 않고 익숙해지는 데 시간이 걸립니다. 또한 접근성이 항상 최상인 것은 아닙니다.

두 개의 다른 열 너비에 대한 코딩

위에서 언급했듯이 다른 크기의 테이블 셀을 사용하려면 미디어 쿼리를 추가하여 모바일용 테이블 셀을 변경해야 합니다. 가장 일반적인 경우는 CSS에서 이미 설정했을 수 있는 100% 클래스를 사용하는 것입니다. 그렇지 않은 경우 다음과 같이 보일 수 있습니다.

.w100p { width: 100% !important; }

그런 다음 HTML의 div 및 테이블에 다음과 같이 해당 클래스를 추가합니다(이 예제에는 너비가 100px인 열과 너비가 500px인 열이 있습니다).

     <tr>
          <td style="font-size:0;" align="center" valign="top">
               <!--[if (gte mso 9)|(IE)]>
               <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 100%;">
               <tr>
               <td valign="top" style="width: 100px;">
               <![endif]-->
                    <div class=”w100p” style="display:inline-block;vertical-align:top;">
                          <table class=”w100p” cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 100px;">
                                <tr>
                                      <td align="left" valign="top">
                                            <img src="http://via.placeholder.com/300">
                                      </td>
                                </tr>
                          </table>
                    </div>
               <!--[if (gte mso 9)|(IE)]>
               </td><td valign="top" style="width:500px;">
               <![endif]-->
                    <div class=”w100p” style="display:inline-block;vertical-align:top;">
                          <table class=”w100p” cellpadding="0" cellspacing="0" border="0" role="presentation" style="width:500px;">
                                <tr>
                                      <td align="left" valign="top" style="padding-left: 10px;">
                                            <p style="font-family: Helvetica, Arial, sans-serif;font-size:18px;line-height:28px;mso-line-height-rule:exactly;color:#262524;">So much to do, so much to see, so what's wrong with taking the back streets? You'll never know if you don't go. You'll never shine if you don't glow.</p>
                                      </td>
                                </tr>
                          </table>
                    </div>
               <!--[if (gte mso 9)|(IE)]>
               </td>
               </tr>
               </table>
               <![endif]-->
          </td>
     </tr>

데스크톱용 Outlook 전용이므로 조건부 코드의 너비를 변경하는 것에 대해 걱정할 필요가 없습니다.

어떤 방법을 사용할 것인가?

모바일 이메일 클라이언트가 미디어 쿼리를 지원하므로 이 두 가지 방법 모두 잘 작동합니다.

	미디어 쿼리 방법	하이브리드 방식
장점	적은 코드 무거움 화면 판독기가 콘텐츠를 순서대로 소리내어 읽습니다.	이메일 클라이언트의 변경 및 업데이트로 인해 엉망이 될 가능성이 적습니다.
단점	이메일 클라이언트의 변경 및 업데이트로 인해 엉망이 되기 쉽습니다.	더 많은 코드 화면 판독기에서 콘텐츠를 순서대로 읽지 않음

미디어 쿼리 기반 방법은 코드가 덜 무겁고 클래스를 두 열에 둘 수 있기 때문에 화면 판독기에 적합한 순서로 콘텐츠를 남겨두면서도 시각적으로 의미 있는 방식으로 표시할 수 있습니다. .

따라서 접근성이 큰 문제라면 미디어 쿼리 버전이 가장 좋은 선택일 것입니다.

그러나 전자 메일 클라이언트의 변덕에 덜 취약하고 완벽한 버전을 사용하는 것이 걱정된다면 하이브리드 버전을 선택하는 것이 좋습니다.

모바일에 콘텐츠를 쌓지 말아야 할 때

그렇다고 모든 것이 모바일에 쌓여 있어야 한다는 것은 아닙니다. 스택을 미쳐 가지 마십시오. 다음 이메일 서명과 같이 모바일에서 스택할 필요가 없는 경우가 있습니다.

제이나 이메일 서명 — *많은 이메일에 있는 서명은 모바일에서 쌓이지 않는 두 개의 열입니다.*

또는 데스크탑의 스택형에서 모바일의 스택형이 아닌 것으로 전환하려는 경우.

2021년 1월 뉴스레터에는 각 섹션이 세 개의 열로 겹쳐져 있는 모든 결의안이 포함되어 있습니다. 모바일에 쌓을 때 공간을 더 잘 활용하고 싶었습니다. 그래서 이미지, 이름, 제목이 "unstacked"되고 각 열이 새 행이 되도록 했습니다.

데스크탑	이동하는

보시다시피 모든 것을 쌓는 것이 항상 정답은 아닙니다. 모바일용으로 디자인할 때 공간을 최대한 활용하고 있는지 확인하세요. 어떤 경우에는 콘텐츠를 스태킹하지 않는 것이 포함됩니다.

흥미로운 스택 변형 코딩하기

하이브리드 스태킹 코드의 수정 버전을 사용하여 위의 효과를 만들었습니다. 이 경우 하이브리드 3열로 시작했습니다.

<tr>
     <td align="center" valign="top" style="font-size:0; padding-bottom: 60px;">
     <!--[if (gte mso 9)|(IE)]>
     <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 100%;">
     <tr>
     <td valign="top" style="width: 180px;">
     <![endif]-->
          <div style="display:inline-block;">
               <table class="wFull" cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 180px;">
                     <tr>
                         <td align="center" valign="middle">
                              [--column 1 content  goes here--]
                         </td>
                     </tr>
               </table>
          </div>
     <!--[if (gte mso 9)|(IE)]>
     </td><td style="width: 30px;">
     </td><td valign="top" style="width: 180px;">
     <![endif]-->
          <div style="display:inline-block;">
               <table class="wFull" cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 180px;">
                     <tr>
                         <td align="center" valign="middle">
                              [--column 2 content  goes here--]
                         </td>
                     </tr>
               </table>
          </div>
     <!--[if (gte mso 9)|(IE)]>
     </td><td style="width: 30px;">
     </td><td valign="top" style="width: 180px;">
     <![endif]-->
          <div style="display:inline-block;">
               <table class="wFull" cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 180px;">
                     <tr>
                         <td align="center" valign="middle">
                              [--column 3 content  goes here--]
                         </td>
                     </tr>
               </table>
          </div>
     <!--[if (gte mso 9)|(IE)]>
     </td>
     </tr>
     </table>
     <![endif]-->
     </td>
</td>

그런 다음 각 열에 2열 스택이 있는 행과 견적에 대한 두 번째 일반 행을 추가했습니다. 이미지와 이름이 바탕 화면에 나란히 표시되는 것을 원하지 않았기 때문에 div 사이에 고스트 열 구분 기호를 생략했습니다. 그리고 div의 테이블을 최대 너비로 설정하여 모바일에서 div가 인라인되도록 했습니다.

열 자체는 모바일에서 훨씬 더 작은 180px 너비로 설정되었으므로 모바일에서 미디어 쿼리에 의해 해당 테이블이 100%로 설정될 때까지 div가 누적되었습니다. 이제 각 열은 다음과 같이 보입니다.

          <div style="display:inline-block;">
               <table class="wFull" cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 180px;">
                    <tr>
                         <td style="font-size:0; padding-top: 30px;" align="center" valign="middle">
                         <!--[if (gte mso 9)|(IE)]>
                         <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 100%;">
                         <tr>
                         <td valign="top" align="center" style="width: 180px;">
                         <![endif]-->
                              <div style="display:inline-block;vertical-align:middle;">
                                   <table cellpadding="0" cellspacing="0" border="0" role="presentation">
                                             <tr>
                                                  <td align="left" valign="middle">
                                                       <img src="https://via.placeholder/79" alt="" width="79" height="79" >
                                                  </td>
                                             </tr>
                                   </table>
                              </div>
                              <div style="display:inline-block;vertical-align:middle;">
                                   <table cellpadding="0" cellspacing="0" border="0" role="presentation">
                                             <tr>
                                                  <td align="left" valign="middle">
                                                       [-- content that stacks on desktop, but not on mobile goes here--]
                                                  </td>
                                           </tr>
                                   </table>
                              </div>
                         <!--[if (gte mso 9)|(IE)]>
                         </td>
                         </tr>
                         </table>
                         <![endif]-->
                         </td>
               </tr>
               <tr>
                         <td align="left" valign="top">
                              [--content that stacks on both desktop and mobile goes here--]
                         </td>
                    </tr>
               </table>
          </div>

그런 다음 모바일에서 테이블이 서로 옆에 위치하도록 최대 너비 값을 갖도록 테이블을 설정했습니다. 그러나 데스크탑에서는 포함하는 셀이 너무 작아서 나란히 배치되지 않아 데스크탑에 콘텐츠가 쌓이게 되었습니다.

          <div style="display:inline-block;">
               <table class="wFull" cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 180px;">
                    <tr>
                         <td style="font-size:0; padding-top: 30px;" align="center" valign="middle">
                         <!--[if (gte mso 9)|(IE)]>
                         <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 100%;">
                         <tr>
                         <td valign="top" align="center" style="width: 180px;">
                         <![endif]-->
                              <div style="display:inline-block;vertical-align:middle;">
                                   <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 79px;">
                                             <tr>
                                                  <td align="left" valign="middle">
                                                       <img src="https://via.placeholder/79" alt="" width="79" height="79" >
                                                  </td>
                                             </tr>
                                   </table>
                              </div>
                              <div style="display:inline-block;vertical-align:middle;">
                                   <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="max-width: 221px;">
                                             <tr>
                                                  <td align="left" valign="middle">
                                                       [-- content that stacks on desktop, but not on mobile goes here--]
                                                  </td>
                                           </tr>
                                   </table>
                              </div>
                         <!--[if (gte mso 9)|(IE)]>
                         </td>
                         </tr>
                         </table>
                         <![endif]-->
                         </td>
               </tr>
               <tr>
                         <td align="left" valign="top">
                              [--content that stacks on both desktop and mobile goes here--]
                         </td>
                    </tr>
               </table>
          </div>

이 버전을 포함하여 모든 다른 버전의 스택에 대한 실제 코드를 참조하십시오.

마지막 생각들

보시다시피, 이러한 다양한 방법을 결합하면 콘텐츠를 쌓고 정렬하는 모든 종류의 흥미로운 방법을 생각해낼 수 있습니다. 따라서 구독자에게 최상의 시청 경험을 제공하고 최적의 가독성을 위해 해당 열을 쌓아 모바일에서 디자인이 눈에 띄게 하십시오. 그것을 시도하고 무엇을 생각해 냈는지 알려주십시오!