기다리다. 내 이메일에 무슨 일이 일어났습니까? 웨비나 녹화

게시 됨: 2016-02-11

거의 모든 디자이너와 개발자는 원하든 원하지 않든 경력의 어느 시점에서 이메일을 작성해야 합니다. 그러나 각각 고유한 렌더링 문제가 있는 이메일 클라이언트의 수는 많은 사람들이 이메일 디자인 문제의 맹공격에 당황하여 패배에 머리를 흔들고 있습니다.

그러한 많은 시나리오를 겪은 후 우리는 Sendwithus의 Alex Mohr과 협력하여 이메일을 처음 접하는 사람들이 직면하는 가장 일반적인 문제와 더 중요한 것은 이러한 문제에 대한 몇 가지 솔루션에 대해 설명했습니다.

웨비나에 참석할 기회가 없었다면 “잠깐만요. 내 이메일에 무슨 일이 생긴 거죠?”라고 걱정하지 마십시오. 아래에서 슬라이드를 다운로드하고 녹음을 확인할 수 있습니다.

슬라이드 및 녹음 보기 →

웨비나에서 질문한 모든 질문에 답할 수 없었습니다. 그리고 몇 가지 훌륭한 것들이 있었습니다. 그래서 저는 이 기회를 사용하여 이메일 마케팅과 디자인에 발을 담그고 있는 사람들이 자주 묻는 질문에 답하고 있습니다.

Google과 Microsoft가 이메일을 렌더링하는 데 왜 그렇게 서툴까요?

모든 이메일 클라이언트는 이메일 캠페인을 코딩하는 데 사용되는 두 가지 언어인 일부 HTML 및 CSS를 렌더링하는 데 문제가 있습니다. 이는 모두 다른 렌더링 엔진을 사용하기 때문입니다. 렌더링 엔진은 화면에 렌더링되는 코드와 실제로 렌더링되는 방법을 결정하는 전자 메일 응용 프로그램의 기본 부분입니다.

렌더링 엔진

Google Gmail의 경우 보안상의 이유로 이메일에서 코드의 특정 부분을 제거하는 데 전처리기가 사용됩니다. 지금쯤이면 거의 모든 다른 웹메일 클라이언트가 알아냈지만 Gmail은 기본적으로 이메일의 < head >에 포함된 CSS 스타일을 제거합니다. 또한 많은 디자이너가 이러한 스타일을 사용하여 캠페인 모양을 결정하기 때문에 이러한 이메일은 Gmail에서 문제가 됩니다.

이는 Gmail 모바일 클라이언트에서 특히 두드러질 수 있습니다. 미디어 쿼리(기존 반응형 디자인에서 사용되는 CSS 트리거)가 해당 섹션에 있기 때문입니다. 이것이 Gmail의 열악한 렌더링 기능에 대한 직접적인 솔루션으로 하이브리드(또는 스폰지) 코딩과 같은 기술이 개발된 이유입니다.

Microsoft Outlook 클라이언트의 경우 문제는 Outlook이 실제로 Microsoft Word를 렌더링 엔진으로 사용한다는 사실에 있습니다. 맞습니다. 학생과 비즈니스 사람들이 모두 사용하는 서식 있는 텍스트 편집기는 HTML 및 CSS 코드를 렌더링하는 데 사용됩니다(또는 적어도 시도합니다). 이전 버전의 Outlook은 설치된 버전의 Microsoft 웹 브라우저인 Internet Explorer를 사용하여 전자 메일 코드를 렌더링했지만 Outlook 2007에서는 Word를 사용하여 Outlook 사용자가 서식 있는 텍스트를 더 쉽게 편집할 수 있습니다.

이메일 디자이너에게 불행히도 Word는 웹 및 이메일 캠페인에서 일반적으로 사용되는 HTML 및 CSS에 대한 지원이 매우 제한적입니다. 웹 표준에 대한 이러한 제한된 지원으로 인해 Outlook에서 손상된 것처럼 보이는 이메일 캠페인이 발생합니다. 이 지원을 이해하는 것은 Outlook이나 모든 이메일 클라이언트에서 이메일이 보기 좋게 보이도록 하는 첫 번째 단계입니다.

다음은 HTML 및 CSS에 대한 이메일 클라이언트 지원을 더 잘 이해하는 데 도움이 되는 몇 가지 리소스입니다.

  • CSS에 대한 Campaign Monitor의 궁극적인 가이드
  • Gmail 및 CSS 이해: 1부 및 2부
  • Microsoft Outlook 클라이언트의 렌더링 차이 가이드
  • 장치, 운영 체제, 앱 및 엔진이 렌더링에 미치는 영향
  • 데스크탑 렌더링 문제? 소수의 렌더링 엔진에 대한 초기 테스트 집중
  • 웹메일 렌더링 설명: 전처리기가 적인 이유

웹 글꼴을 사용할 때 Outlook이 적절한 글꼴을 표시하지 않는 경우 어떻게 처리합니까?

웹 글꼴, 사용자의 장치에 설치되는 대신 웹을 통해 제공되는 글꼴의 인기가 높아지고 있습니다. 회사가 타이포그래피로 브랜드를 유지하고 라이브 텍스트를 장려할 수 있기 때문에 이메일 마케팅 담당자에게 이상적인 도구입니다. 불행히도 모든 이메일 클라이언트에서 지원되지는 않습니다. 그리고 Outlook의 경우 지원이 부족하면 HTML에 선언된 대체 글꼴 대신 Times New Roman이 표시되는 상황이 발생합니다.

영향을 받는 텍스트와 일부 Outlook 관련 CSS에 HTML 클래스가 필요한 솔루션으로 이 문제를 해결한 적이 있습니다. 이 솔루션은 여전히 ​​잘 작동하지만 더 깨끗하고 유지 관리가 쉬운 솔루션이 인기를 얻고 있습니다. 원래 Action Rocket의 사람들이 제안한 이 솔루션은 @font-face 규칙을 사용하여 글꼴을 제공하고 이메일 헤드의 미디어 쿼리에 래핑해야 합니다.

 <style type="text/css"> @media screen { @font-face { font-family: 'Family Name'; font-style: normal; font-weight: 400; src: local(), local(), url() format(); } } </style>

이 솔루션은 코드를 오염시키는 HTML 클래스 속성이 필요하지 않은 동시에 Outlook이 선언된 글꼴 스택으로 대체되도록 보장하기 때문에 탁월한 접근 방식입니다. 이 기술에 대한 자세한 내용은 Action Rocket의 원본 기사를 확인하십시오.

모바일에서 파란색 링크가 발생하지 않도록 하려면 어떻게 합니까?

모바일 장치는 유용한 도구입니다. 이를 더욱 유용하게 만들기 위해 Apple과 같은 회사는 사용자가 연락처, 캘린더 또는 지도 앱에 정보를 빠르게 추가할 수 있는 기능을 이메일 클라이언트에 추가했습니다. 이메일에서 다음과 같은 내용을 본 적이 있을 가능성이 높습니다.

ios_links

특정 텍스트와 같은 주소, 날짜, 시간 및 전화번호는 파란색으로 강조 표시되고 링크가 밑줄이 그어져 상호 작용할 수 있음을 보여줍니다. 불행히도 이러한 파란색 링크는 때때로 디자인 관점과 접근성 관점 모두에서 문제를 일으킵니다. 어두운 배경의 밝은 텍스트가 파란색으로 바뀌면 해당 링크는 상호 작용은 고사하고 읽기가 어렵습니다(불가능하지는 않더라도).

블루링크-접근성

우리는 당신이 그 텍스트에 스타일을 유지할 수 있게 하는 이 문제에 대한 해결책에 대해 전에 썼지만, 다시 새로운 해결책이 인기를 얻고 있습니다. 다음 스니펫을 포함하면 HTML에 추가 마크업이 필요 없이 iOS에서 파란색 링크가 종료됩니다. 이메일 머리글에 포함하고 보내십시오.

 a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important; }

일부 웨비나 참석자는 위의 CSS가 특히 Apple 장치를 대상으로 한다고 예리하게 지적했습니다. 최근 테스트에서 Android에서는 파란색 링크가 문제가 되지 않는 것으로 나타났지만 일부 Litmus Community 회원은 전화번호와 같은 Android와 Gmail을 연결하는 데 문제가 발생했습니다. 커뮤니티 토론에서 몇 가지 현명한 해결 방법을 확인하세요.

반응형 이미지를 처리하는 가장 좋은 방법은 무엇입니까? 망막 이미지는 어떻습니까?

더 많은 사람들이 반응형 이메일 디자인을 채택함에 따라 반응형 이미지의 필요성이 증가했습니다. 반응형 이미지를 다루는 데 가장 좋은 조언은 멋진 이메일 개발 뉴스레터의 개발자인 Julie Ng에게 배운 기술입니다.

기본적으로 img 태그 내에서 다양한 방법으로 이미지 크기를 선언합니다. 일부 이메일 클라이언트가 더 큰 레티나 이미지를 전체 크기로 표시하지 못하도록 하려면 너비 속성을 사용하여 너비를 선언합니다. 이것은 픽셀 단위로 좋은 기준선 너비를 제공합니다. 반응형 이메일의 경우 이미지의 너비, 최대 너비 및 최소 너비를 인라인 CSS로 선언합니다. 다음은 예입니다.

 <img alt="Hello" src="http://example.com/image.png" width="600" border="0">

당연히 이미지가 비활성화되고 display:block을 선언할 때 ALT 텍스트를 제공하고 싶을 것입니다. 이미지 주변의 불필요한 공백을 방지합니다. 이미지에 대한 추가 제어가 필요한 경우 이메일 헤드에 클래스 및 CSS를 사용하여 이미지를 대상으로 지정할 수 있습니다. 임베디드 CSS는 모든 곳에서 지원되지 않는다는 것을 기억하십시오.

망막 이미지의 경우 가장 좋은 방법은 이메일의 이미지에 대해 의도한 표시 크기의 두 배로 이미지를 만드는 것입니다. 예를 들어 600px x 200px 이미지가 있는 경우 1200px x 400px 이미지로 생성하여 저장합니다. 이메일에 일반적으로 포함합니다. 앞에서 언급한 너비 속성은 Outlook과 같은 클라이언트에서 터무니 없이 큰 이미지로 표시되는 것을 방지하고 이미지는 망막 화면이 있는 장치에서 멋지고 선명하게 보입니다.

이메일에 애니메이션 GIF를 사용하려는 사람을 위한 조언이 있습니까?

그것을 위해 가십시오! 애니메이션 GIF는 이메일 캠페인에 움직임과 관심을 더할 수 있는 환상적인 방법입니다. 우리는 이 기술을 너무 좋아해서 이메일에서 애니메이션 GIF를 사용하기 위한 광범위한 가이드를 작성했습니다.

애니메이션의 첫 번째 프레임만 표시하는 Microsoft Outlook에서 가장 눈에 띄는 모든 곳에서 지원되지 않는다는 점을 이해하고 들어가십시오. GIF의 이미지는 구독자에게 중요한 정보를 전달하기 위한 것이 아니라 설명 목적으로 사용하는 것이 좋습니다. 이러한 종류의 정보는 GIF 및 이미지와 같은 항목이 비활성화된 경우에도 구독자가 읽을 수 있도록 항상 이메일에 라이브 텍스트로 표시되어야 합니다.

많은 사람들이 GIF가 단지 재미를 위한 것이라고 생각하지만 수많은 제품 회사에서 애니메이션 GIF를 사용하여 제품과의 상호 작용을 과시하고 본질적으로 사람들에게 제품을 만지기 전에 제품 사용법을 가르치고 있습니다. 다음은 MailChimp의 훌륭한 예입니다.

mailchimp-인터페이스-gif

GIF는 모든 이메일 마케팅 담당자의 도구 상자에 추가할 수 있는 훌륭한 도구입니다. 그러나 조언의 한 단어는 그것들을 아껴서 사용하는 것입니다. 모든 캠페인에 GIF가 많이 포함되어 있으면 금방 놀라움을 잃습니다. 캠페인이나 멋진 쇼에 관심을 끌고 싶을 때 가끔 사용하세요.

이메일에서 비디오를 사용하는 것에 대해 어떻게 생각하십니까?

애니메이션 GIF와 마찬가지로 동영상은 구독자의 관심을 끌 수 있는 훌륭한 방법입니다. 불행히도 비디오 자체는 이메일 클라이언트에서 지원이 훨씬 적습니다. 한때 이메일에서 비디오 배경을 사용할 수 있었지만 Apple Mail과 Mac용 Outlook에서만 지원되었습니다.

그렇다고 해서 이메일과 함께 비디오를 사용하는 것을 막을 수는 없습니다. 사람들은 비디오를 절대적으로 사랑하고 회사는 점점 더 많은 사용자와의 참여를 늘리는 방법으로 비디오 마케팅을 사용하고 있습니다. 이메일에서 비디오를 사용하는 가장 좋은 방법은 방문 페이지로 연결되는 이메일 캠페인에 재생 버튼이 있는 비디오 정지 이미지를 포함하는 것입니다. 사용자는 동영상임을 즉시 이해하고 방문 페이지에서 동영상을 볼 수 있습니다.

이메일에 포함된 비디오를 사용하면 좋은 사용자 경험을 제공할 수 있지만 Wistia의 친구들은 방문 페이지가 더 나은 솔루션인 이유에 대해 몇 가지 좋은 점을 지적했습니다.

  • 방문 페이지의 동영상은 다른 곳에서 재사용할 수 있습니다. 영구적인 콘텐츠 리소스입니다.
  • 방문 페이지는 추가 상호 작용을 용이하게 합니다. 받은편지함에서 비디오 시청을 마치면 무엇을 해야 합니까?
  • 사람들은 랜딩 페이지에서 더 쉽게 비디오를 공유할 수 있습니다.

따라서 이메일 캠페인에 비디오를 사용하십시오. 그러나 적어도 지금으로서는 이것이 이메일에서 비디오를 보는 것을 의미하지 않는다는 사실에 동의하십시오.

추천하는 반응형 이메일 프레임워크가 있습니까?

웨비나에서 더 나은 이메일 캠페인을 구축하기 위한 몇 가지 리소스를 언급했지만 여기에서 반복하고 확장할 가치가 있습니다.

반응형 이메일 프레임워크와 템플릿에 대해 다음과 같이 사용할 수 있습니다.

  • 테드 고아스의 케르베로스
  • MailChimp의 이메일 청사진
  • Zurb의 이메일 기반
  • 메일젯의 MJML

우리가 가장 좋아하는 것 중 하나는 다양한 전송 시나리오를 위한 5가지 반응형 템플릿이 포함된 자체 Slate입니다. 어떤 옵션을 선택하든 이메일 클라이언트 전체에서 테스트하여 구독자가 놀라지 않도록 하십시오.

슬라이드 및 녹음 보기

우리는 "잠깐. 방금 내 이메일에 무슨 일이 생긴 겁니까?” 가장 일반적인 이메일 문제 및 해결 방법을 식별하는 것과 함께 모든 이메일을 테스트하는 것의 중요성에 대해 설명하고 Sendwithus를 사용하여 트랜잭션 이메일을 테스트하는 방법도 살펴보았습니다. 처음 놓친 경우 슬라이드를 다운로드하여 아래에서 녹음을 볼 수 있습니다.

슬라이드 및 녹음 보기 →