이것이 이메일 디자인의 미래입니다

이메일 디자인이 과거에 갇혔다는 이야기가 많이 나옵니다. 첫 번째 프로젝트를 처리하는 디자이너는 테이블과 인라인 스타일의 사용을 한탄합니다. 첫 번째 캠페인을 계획하는 마케터는 일괄 처리 사고 방식 이상을 생각하는 것을 거부합니다.

그러나 몇몇 대담한 발신자들은 이메일 디자인을 둘러싼 (때때로) 구식 기술과 사고방식이 자신을 억제하는 것을 거부합니다. 그들은 고급 웹 디자인에서 흔히 볼 수 있는 기술을 사용하여 이메일 디자인의 한계를 뛰어넘어 구독자에게 놀라움과 즐거움을 선사하고 연결합니다.

실험적인 이메일 디자인과 관련된 문제를 살펴보고 우리가 가장 좋아하는 미래 지향적인 이메일 캠페인을 정리하겠습니다.

2020년 이메일 마케팅 20명의 주요 전문가의 통찰력과 수천 명의 마케터와 소비자의 설문 조사 결과를 통해 이메일 마케팅의 미래를 준비하십시오. 지금 다운로드

이메일 디자인은 제한적일 필요가 없습니다.

대부분의 사람들은 이메일 마케팅을 생각할 때 무언가를 판매하려는 회사에서 발송하는 지루하고 지루한 뉴스레터를 생각합니다. 그리고 이메일 캠페인을 작성해야 하는 경우 HTML 테이블과 인라인 CSS 더미를 보고 어디에서나 제대로 작동하는 이메일 해킹을 완료할 때까지 시간을 세고 있을 것입니다.

이메일 디자인의 기초가 다소 오래된 것은 사실이지만 약간의 창의성, 계획 및 많은 테스트를 고려할 때 이메일 디자인으로 할 수 있는 작업에는 제한이 없습니다. 예, 이메일 디자이너는 테이블 기반 디자인(Outlook, 감사합니다!), 인라인 CSS를 사용해야 하며 수많은 해킹을 헤쳐나가야 합니다.

요점을 증명하기 위해 규칙을 위반하고 이메일 디자인의 한계를 뛰어 넘는 이메일의 가장 좋아하는 몇 가지 예가 있습니다.

이메일의 회전 목마?

얼마 전 영국의 소매업체인 B&Q는 업계를 불태운 이메일을 보냈습니다.

이 캠페인에서 사용자는 버튼 위로 마우스를 이동하거나 탭하여 다양한 콘텐츠 섹션이 이메일에서 매끄럽게 들어오고 나가는 것을 볼 수 있습니다. 일반적으로 회전 목마라고 하는 이 기술은 웹 세계에서 널리 사용되었지만 이메일 캠페인에서는 드뭅니다. 어떤 사람들은 캐러셀이 비효율적이고 단지 보여주기 위한 것이라고 불평할 수도 있지만 B&Q 캠페인은 최첨단 기술을 사용하여 이메일 구독자를 놀라게 하는 방법의 좋은 예입니다.

이메일은 몇 가지 영리한 타겟팅과 함께 여러 CSS3 속성을 사용하여 마법을 수행합니다. CSS 전환, 애니메이션, Z-색인 및 오버플로 속성을 사용하여 디자이너는 탭하기만 하면 되는 영리한 이메일을 만들었습니다.

더욱 인상적인 것은 이러한 고급 기술을 지원하지 않는 이메일 클라이언트의 경우 모든 것이 훌륭하게 대체된다는 것입니다.

미친 색상과 스타워즈

영국 이메일 에이전시 Action Rocket은 한동안 이메일 디자인을 주도해 왔습니다. 영리한 제목의 주간 이메일 뉴스 요약인 Email Weekly를 통해 그들은 결국 클라이언트 캠페인에 적용될 수 있는 몇 가지 창의적인 기술을 테스트합니다.

우리가 가장 좋아하는 예 중 하나는 "이 이메일은 무슨 색입니까?"라는 질문을 한 이메일입니다.

CSS 키프레임 애니메이션을 사용하여 제목 섹션의 배경색에 애니메이션을 적용하여 매혹적인 환각 효과를 만듭니다. 처음에는 미묘하지만 구독자는 애니메이션에 한번 빠져들면 헤어나지 못합니다.

Action Rocket의 또 다른 좋은 예는 모든 사람이 좋아하는 공상 과학 영화의 상징적인 오프닝 크롤링을 재현하기 위해 CSS 변환과 함께 실험적인 -webkit-perspective 속성을 사용한 최근 Star Wars에서 영감을 받은 다이제스트입니다.

이메일에 인포그래픽?

이메일 대행사 디스플레이 블록이 지속적으로 훌륭한 이메일을 보내는 동안, 우리의 관심을 끈 것은 최근의 인포그래픽 이메일입니다.

Email Weekly 예제의 배경색과 유사하게 display 블록은 CSS 키프레임 애니메이션을 사용하여 이미 잘 설계된 캠페인에 생명력을 더합니다. 정말 좋은 점은 이메일이 아름답게 반응하여 각 섹션을 모바일 장치에 멋지게 스태킹한다는 것입니다. 반응형 디자인과 애니메이션 아이콘은 모두 모바일 이메일 사용에 대한 훌륭한 데이터를 향상시키는 역할을 합니다.

우리는 이메일에서 이와 같은 인포그래픽을 많이 본 적이 없으며, 이는 더욱 인상적이고 획기적인 것입니다. 더 많은 인포그래픽의 예를 보고 싶습니다. 그래서 저희가 관련 커뮤니티 콘테스트를 개최합니다!

HTML5 비디오 및 인터랙티브 둘러보기

우리는 우리가 설교하는 것을 연습하는 것을 좋아합니다. 이것이 데스크톱 사용자가 압도적으로 많음에도 불구하고 이메일을 훌륭하고 반응이 좋게 만드는 이유입니다. 이는 또한 작년 이메일 디자인 컨퍼런스(올 여름 다시 개최…

우리의 디자이너인 Kevin은 다른 단순한 디자인을 점진적으로 향상시키기 위해 고급 이메일 클라이언트 타겟팅을 사용했습니다. 그가 정확히 어떻게 해냈는지 궁금하다면, 그는 과정을 자세히 설명하는 블로그 게시물을 작성했습니다.

또한 이메일 코드 편집기인 Builder의 출시를 축하하기 위해 이메일에서 바로 대화형 둘러보기를 구축하여 더욱 발전했습니다.

CSS 애니메이션, 체크박스 해킹, CSS 콘텐츠 속성의 자유로운 사용을 통해 그는 받은 편지함에서 바로 Builder의 일부 기능을 선보이며 구독자는 로그인하지 않고도 제품을 맛볼 수 있습니다. 코드를 구동하지만 빌더에서 바로 확인할 수 있습니다(예: 이메일 Inception).

더 맛있는 이메일 메뉴

캐러셀 이메일과 마찬가지로 디자이너 Jerry Martinez는 웹에서 영감을 받아 모바일 가입자를 위한 햄버거 메뉴를 구현했습니다.

탐색 요소는 특히 모바일에서 이메일 디자이너에게 항상 트릭입니다. 스택 시 상당한 공간을 차지하는 경향이 있기 때문에 캠페인의 주요 클릭 유도문안에서 주의를 산만하게 할 수 있습니다. 이 문제를 해결하기 위해 Jerry는 모바일 사용자가 탐색 항목을 선택적으로 표시할 수 있는 우아한 햄버거 메뉴를 만들었습니다.

우리는 Jerry의 솔루션에 깊은 인상을 받아 커뮤니티 경연 대회 중 하나에서 다른 창의적인 탐색 패턴을 선보일 수 있도록 사람들을 초대했습니다.

커뮤니티 콘테스트: 진정한 최첨단

커뮤니티 콘테스트는 사람들이 기발한 아이디어를 내도록 정말로 도전하는 곳입니다. 매달 테마를 주고 실력을 펼칠 수 있도록 합니다. ALT 텍스트의 창의적인 사용을 살펴보는 첫 번째 콘테스트에서 이메일의 Space Invaders와 같은 놀라운 결과를 얻었습니다.

두 번째 콘테스트에서는 사람들에게 흥미로운 탐색 패턴을 제안했습니다. 우리는 Remi Parmentier의 끈적끈적한 탐색 개념과 같은 일부 결과에 놀랐습니다.

새로운 시도?

이메일에서 새로운 것을 시도하는 것은 흥미롭지만 캠페인을 철저히 테스트하지 않으면 많은 문제가 발생할 수 있습니다. 이메일 미리보기를 사용하면 데스크톱, 웹메일 및 모바일 이메일 클라이언트에서 모든 기술을 쉽게 테스트할 수 있습니다.

리트머스 무료 체험 →