이메일의 대화형 핫스팟: 단계별 가이드

게시 됨: 2020-03-30

상호 작용은 계속해서 이메일 디자인에서 가장 인기 있는 트렌드 중 하나이며, 상호 작용 핫스팟은 마케터의 툴킷에서 가장 인기 있는 상호 작용 요소 중 하나입니다. 핫스팟을 사용하면 구독자가 이메일에서 항목을 가리키거나 클릭할 때 추가 정보를 발견할 수 있으며 마케팅 담당자는 이메일 디자인이 너무 복잡하게 느껴지지 않으면서 이메일에 추가 세부 정보 계층을 제공할 수 있습니다.

월간 뉴스레터 2월호에서 대화형 핫스팟의 기능을 사용하여 Litmus 플랫폼에 대한 몇 가지 흥미로운 업데이트를 선보였습니다.

캠페인을 보낸 후 동료 이메일 괴짜들로부터 핫스팟을 정확히 어떻게 만들고 Gmail에서 작동하게 만드는지에 대한 많은 질문을 받았습니다. 이것이 바로 우리가 단계별 가이드를 공유하기 위해 모인 이유입니다.

아래에서 핫스팟을 설계하고 코딩한 방법에 대한 자세한 내용을 읽거나 Litmus Builder 에서 핫스팟 코드를 확인하십시오. 여기에서 아래에서 설명하는 모든 코드 요소의 정확한 위치를 찾을 수 있습니다.

1. 시작하기 전에: 중요한 고려 사항

호버 또는 클릭?

이메일에서 대화형 핫스팟을 코딩하는 방법에는 여러 가지가 있습니다. 클릭하거나 탭할 때만 활성화되는 핫스팟을 원한다면 예를 들어 Checkbox Hack 사용을 고려할 것 입니다. 그러나 몇 가지 이유로 호버 에서 활성화되는 핫스팟을 사용했습니다 .

첫째, :hover 는 :checked 보다 이메일 클라이언트, 특히 가장 큰 이메일 클라이언트 중 하나인 Gmail 에서 더 잘 지원됩니다 . 둘째, 상호작용은 여전히 ​​이메일에서 흔하지 않으므로 사용자가 이메일 과 상호작용할 수 있음을 최대한 쉽게 알 수 있도록 하고 싶었 습니다. 결국 핫스팟 위로 마우스를 가져가서 툴팁이 즉시 나타나는 것을 보는 것은 마우스를 가져간 다음 클릭하는 것보다 적은 노력이 필요 합니다. 가능한 한 가장 많은 청중을 위해 균형 잡힌 기능과 지원을 제공하는 방법을 찾고 싶었기 때문에 호버링 핫스팟이 갈 길이었습니다.

이메일 클라이언트 지원 : 핫스팟은 청중에 효과적입니까?

대화형 핫스팟은 이메일을 더 흥미롭고 효과적으로 만드는 좋은 방법이지만 많은 대화형 기술과 마찬가지로 모든 이메일 클라이언트에서 지원되지는 않습니다.

이 기술을 레퍼토리에 통합하기 전에 어떤 이메일 클라이언트가 귀하와 이해 관계자에게 가장 중요한지 확실히 고려해야 합니다. 이메일 클라이언트 시장 점유율 에 따르면 모든 이메일 클라이언트 의 79% 가 이 핫스팟 기술의 완전한 대화형 버전을 지원합니다. 그러나 청중의 이메일 클라이언트 사용량은 전 세계 평균과 완전히 다르게 보일 수 있습니다. 가장 정확한 데이터를 얻으려면 귀사의 시장 점유율을 자세히 살펴보십시오.

Litmus에서는 이메일 분석 추적을 사용하여 주요 고객이 Gmail(36.8%), Apple Mail(20.0%), iPhone(13.2%)으로 전체 잠재고객의 대다수(70%)를 구성하고 있음을 확인했습니다. 대체 버전을 표시할 이메일 클라이언트는 청중의 30%에 불과합니다.

이 데이터를 사용하면 사용자를 위한 훌륭한 대화형 환경을 만드는 데 중점을 두는 것이 합리적이지만 청중이 Windows용 Outlook에 더 많이 치우친 경우에는 그렇지 않을 수 있습니다. 그러나 가장 정확하고 최신의 분석 데이터를 보유하고 있는지 확인하기 위해 지속적으로 추적하고 테스트해야 합니다! 이메일 클라이언트 시장 점유율은 시간이 지남에 따라 특정 클라이언트와 장치가 대중화됨에 따라 변하므로(예를 들어 많은 회사에서 Outlook에서 G Suite로 전환) 항상 작업이 어떻게 수행되었는지에 대한 과거 지식에 의존하지 않는 것이 가장 좋습니다.

아래에서 상위 이메일 클라이언트가 지원하는 기능 수준을 확인하십시오.

완전 대화형 – 데스크탑
 이것은 핫스팟이 데스크탑 뷰포트에서 완전히 작동하는 곳입니다.

  • 애플 메일
  • 아이패드
  • 지메일
  • 아웃룩(맥OS)

완전한 대화형 – 모바일
 모바일 뷰포트에서 핫스팟이 완전히 작동하는 곳입니다.

  • 아이폰 메일
  • Gmail 앱(Android)*
  • 삼성 메일

대체 - 애니메이션 PNG
 이러한 클라이언트(별표 **가 있는 클라이언트 제외)는 애니메이션 PNG 및 다크 모드 타겟팅을 지원 하므로 모든 배경에서 애니메이션 되는 사용자 지정 대체 투명 애니메이션 PNG 를 사용했습니다.

  • 아웃룩닷컴
  • 아웃룩 앱
  • AOL
  • AOL 앱
  • 야후
  • 야후 앱
  • 아웃룩(윈도우즈)**
  • 윈도우 메일**

* Gmail 앱(iOS)은 핫스팟을 표시하지만 탭할 수 없습니다.

** 이러한 클라이언트는 애니메이션 PNG의 첫 번째 프레임만 표시하며 다크 모드 타겟팅을 지원하지 않습니다. 애니메이션 GIF를 사용하더라도 단색 배경은 다크 모드 보기와 일치하지 않습니다. 게다가 이 클라이언트도 다크 모드 타겟팅을 지원하지 않기 때문에 라이트/다크 모드 GIF를 교체할 수 없습니다. 이러한 클라이언트의 경우 애니메이션 PNG의 첫 번째 프레임이 여전히 잘 보이도록 했습니다.

2. 디자인 계획: 모든 사용 사례에 대한 가입자 경험 매핑

당신은 당신이 대화 형 핫스팟을 사용하기위한 견고한 비즈니스 사례가 있는지, 그리고 청중의 큰 부분이 그것을 즐길 수있을 것입니다 결정 했습니까? 엄청난! 이제 구축할 잠재적인 뷰를 설계할 수 있습니다.

왜 다른 견해가 필요합니까? 핫스팟 요소는 모바일과 데스크톱에서 동일하게 보이지 않습니다. 또한 요소의 대화형 버전을 볼 수 없는 모든 사람을 위해 대체를 디자인해야 합니다. 우리는 설계 단계에서 처리한 4가지 주요 사용 사례를 식별했습니다.

대화형: 데스크탑 너비

이를 위한 디자인을 배치할 때 툴팁과 핫스팟을 너무 많이 겹치지 않도록 하십시오.

우리는 PNG 파일은 그래서 그들은 배경 이미지, 그리고 약간의 오버레이 수 있음을 제공 할 수있는 부드러운 알파 채널의 투명성을 달성하는 데 필요한 때문에 우리는 핫스팟 이미지를 애니메이션 PNG 파일로 갔다 애니메이션 - 당신은 핫스팟이 볼 수있는 사실에주의를 펄스는-제공 당신이 그들과 상호 작용할 수 있습니다.

대체: 모바일 너비로 유동적으로 조정되는 데스크탑 너비

대체 버전은 또한 전체 영웅 섹션의 애니메이션 PNG 버전을 사용하여 트리거되는 핫스팟의 효과를 에뮬레이트합니다.

Litmus에서는 모바일 크기 조정을 위해 이미 하이브리드 유동 방식을 사용하고 있으므로 이러한 모든 대체 이미지는 특정 모바일 반응 버전 없이도 모든 화면 너비로 부드럽게 크기 조정될 것으로 기대할 수 있습니다.

대화형: 모바일 너비

더 작은 화면에서도 툴팁을 계속 읽을 수 있기를 원하기 때문에 핫스팟을 개별적으로 연결하는 대신 핫스팟을 가리킬 때마다 모든 툴팁이 하나의 중앙 위치에 표시되도록 디자인을 재구성해야 했습니다.

다크 모드

물론 다크 모드 보기 를 무시하고 싶지는 않습니다 .

3. 핵심 구성 요소의 프레임워크 구축

이 작업을 수행하는 데 필요한 요소는 무엇입니까? 여기에서는 각 클래스가 하는 일을 설명하겠습니다. (특이성 또는 연결과 같은 다른 방법으로 CSS 선택기를 대상으로 지정하는 대신 클래스를 사용하는 이유는 무엇입니까? 더 짧은 선택기를 사용 하면 성능이 빨라지고 좋은 클래스 명명법을 사용하면 이해하고 유지 관리하기 쉬워 반복해서 사용할 수 있습니다!)

.wrapper-기본

  • 전체 대화형 섹션에 대한 래퍼입니다.

.bgimg

  • 모든 핫스팟과 툴팁을 배치할 배경 이미지 기반입니다.

.wrapper-secondary

  • 절대 위치 해킹이 있는 각 섹션의 래퍼. (아래 "포지셔닝" 섹션의 설명을 참조하십시오.)

.hot-tool-wrapper

  • 데스크탑 레이아웃 내에 배치되는 인라인 스타일과 함께 각 개별 핫스팟/도구 설명 섹션을 포함하는 래퍼.

.hotspot-01 , .hotspot-02 , .hotspot-03 등…

  • 핫스팟 아이콘의 실제 이미지입니다. 개별적으로 배치해야 하기 때문에 개별 클래스 지정이 있습니다. 또한 이미지를 사용할 필요가 없습니다. 원하는 경우 코딩된 모양을 사용할 수도 있습니다.

.tooltip-래퍼

  • 도구 설명 및 첨부된 선택적 캐럿에 대한 래퍼입니다.

.caret (선택 사항)

  • 디자인에 캐럿을 원할 수도 있고 원하지 않을 수도 있기 때문에 선택 사항입니다. 여기에는 여백을 사용하여 .tooltip-wrapper 내에 배치하는 사용자 정의 인라인 CSS가 있습니다.
  • 이것은 새로운 레이아웃에 맞지 않기 때문에 모바일 반응형 보기 아래에 숨겨져 있습니다.
  • 핫스팟 이미지와 마찬가지로 원하는 경우 코딩된 CSS 모양일 수도 있습니다.

.tooltip-content

  • 핫스팟이 활성화될 때 나타나는 실제 툴팁 내용입니다.

4. 모든 것을 합치기

핫스팟 및 도구 설명 위치 지정

이러한 핫스팟과 도구 설명 섹션은 불가피하게 서로 겹칠 수 있으므로 절대 위치 지정과 유사한 배치를 위한 솔루션이 필요했습니다. 불행히도 이메일에서는 잘 지원되지 않습니다. 운 좋게도 Mark Robbins와 Justin Khoo (내가 가장 좋아하는 #EmailGeeks 두 명!)의 기술에서 영감을 얻었습니다. 이 기술은 이메일에서 요소를 배치하기 위해 max-height:0 , max-width:0 및 여백을 사용합니다!

CSS

 .wrapper-secondary { max-height: 0px; max-width: 0px; } .hot-tool-wrapper { position: relative; display: inline-block; max-width: 0px; }

HTML

 <div class="wrapper-secondary"> <div class="hot-tool-wrapper"> [Hotspot & Tooltip content in here] </div> </div>

호버 상호 작용 설정

툴팁을 표시하는 메커니즘은 실제로 매우 간단합니다. 툴팁( .tooltip-wrapper )은 기본적으로 숨겨져 있으며 핫스팟( .hot-tool-wrapper ) 위에 마우스를 올리면 툴팁이 나타납니다. 그게 다야!

불투명도 및 전환 스타일, 상호 작용에 약간의 페이드를 추가 더 느낌이 부드럽게 만들기.

CSS

 .tooltip-wrapper { max-height: 0; opacity: 0; overflow: hidden; transition: 0.3s; } .hot-tool-wrapper:hover .tooltip-wrapper { max-height: none !important; opacity: 1 !important; transition: 0.3s; }

이메일에서 호버 효과를 사용하는 방법에 대한 새로 고침을 찾고 계십니까? 이 블로그 게시물을 확인하세요.

모바일 반응형으로 만들기

데스크탑 디자인을 모바일 디자인으로 변환하려면 다음이 필요했습니다.

  1. .wrapper-primary , .bgimg
     래퍼 및 배경 이미지 크기 조정
  2. .hot-tool-wrapper
     모바일에서 핫스팟과 툴팁 위치를 쉽게 구분할 수 있도록 원래 데스크탑 위치를 0으로 만듭니다.
  3. .핫스팟-01
     더 작은 배경 이미지에 맞게 개별 핫스팟의 위치를 ​​조정합니다.
  4. .탈자 부호
     캐럿 숨기기
  5. .hotspot-01 + .tooltip-wrapper
     도구 설명이 모두 하단의 한 영역에 나타나도록 재배치합니다.

CSS

 @media only screen and (max-width: 480px) { .wrapper-primary, .bgimg { width: 350px !important; height: 235px !important; } .hot-tool-wrapper { margin-top: 0 !important; margin-left: 0 !important; } .caret { display: none !important; } .hotspot-01 { margin-left: 130px !important; margin-top: 0 !important; } .hotspot-01 + .tooltip-wrapper { margin-left: 60px !important; margin-top: 130px !important; } }

대체 설정

마지막으로 대화형 및 대체 버전이 올바른 이메일 클라이언트에 표시되도록 하는 모든 부분이 있습니다. 이러한 기술 중 다수는 이메일 클라이언트를 대상 으로 하는 방법 에서 찾을 수 있습니다 . 여기에서는 진행 상황을 쉽게 볼 수 있도록 이메일 클라이언트별로 각 타겟팅 기술을 구분했습니다. 이 모든 최종 제품에 함께 결합 된 방식을 볼 수 원래의 코드로 다시 참조하십시오.

모든 Outlook 대상 지정(MacOS 제외): CSS

 .outlookshow { display: none !important; } body[data-outlook-cycle] .outlookshow { display:block !important; width: auto !important; overflow: visible !important; float: none !important; max-height:inherit !important; max-width:inherit !important; line-height: auto !important; margin-top:0px !important; visibility:inherit !important;} body[data-outlook-cycle] .outlookhide { display:none !important; display:none; overflow:hidden; float:left; width:0px; max-height:0px; max-width:0px; line-height:0px; visibility:hidden; } [class~="x_outlookshow"] { display:block !important; width: auto !important; overflow: visible !important; float: none !important; max-height:inherit !important; max-width:inherit !important; line-height: auto !important; margin-top:0px !important; visibility:inherit !important;} [class~="x_outlookhide"] { display:none !important; display:none; overflow:hidden; float:left; width:0px; max-height:0px; max-width:0px; line-height:0px; visibility:hidden; }

모든 Outlook 대상 지정(MacOS 제외): HTML

 <!--[if !mso]><! --> <div class="outlookhide"> [Interactive Content Here] </div> <!--<![endif]--> <!--[if !mso]><! --> <div class="outlookshow"> <!--<![endif]--> [Fallback Content Here] <!--[if !mso]><! --> </div> <!--<![endif]-->

야후 타겟팅: CSS
이것은 <body> 태그 내에 중첩되어야 야후 앱도 대상으로 하며 ESP에 의해 자동 변환되지 않는 한 유니코드 문자 대신 사용할 수 있습니다. 이 기술은 또한 AOL을 대상으로 하는 경우도 발생합니다. 이는 AOL이 실제로 상호 작용을 매우 잘 지원하기 때문에 불행한 부작용입니다. 그러나 AOL 시장 점유율이 우리 청중에게 그다지 중요하지 않다는 사실 때문에 나는 그것을 줄이기 위해 판단을 내려야 했습니다.

 <body> <!-- START force fallback on Yahoo --> <style> .& # .yahoohide {display: none !important;} .& # .yahooshow {display: block !important;} </style> <!-- END force fallback on Yahoo --> </body>

야후 타겟팅: HTML

 <table><tr><td> <div class="yahoohide"> [Interactive Content Here] </div> <div class="yahooshow"> [Fallback Content Here] </div> </td></tr></table>

최종 결과

이러한 모든 요소가 최종 제품에서 어떻게 결합되는지 확인하려면 요소의 전체 코드를 확인 하거나 2월 뉴스레터 의 전체 코드 를 확인하여 이메일의 맥락에서 모든 것을 확인하십시오.

이제 당신에게로!

향후 캠페인에서 핫스팟을 사용할 계획이 있습니까? 과거에 핫스팟을 사용했지만 다른 기술을 사용하여 구축한 적이 있습니까? 귀하와 같은 창의적인 이메일 마케팅 담당자가 핫스팟을 사용하여 귀하의 이메일을 더욱 특별하게 만드는 방법을 알고 싶습니다. 아래 댓글에서 생각과 아이디어를 공유하거나 Twitter @litmusapp에 연락하세요.

귀하가 구축할 아름다운 대화형 이메일을 모두 보고 싶습니다!