2023년 디자인, 템플릿 및 예시

휴대폰에서 이메일을 열었는데 이미지 품질이 낮고 텍스트가 너무 작으며 클릭 유도문안 버튼이 깨져본 적이 있습니까? 그것들은 모두 정적 이메일 디자인의 결함입니다. 반응형 이메일이 답입니다.

미국 거주자의 절반 이상이 휴대폰으로 이메일 마케팅 메시지를 본다는 점을 감안할 때 모바일 및 태블릿을 포함한 여러 화면에 맞게 이메일을 최적화해야 합니다.

반응형 이메일은 유연한 이미지와 표를 사용하여 다양한 화면 크기에서 유연하게 유지됩니다. 궁극적으로 각 사용자의 최적 경험을 위해 설계된 콘텐츠를 제공합니다.

반응형 이메일은 CSS 미디어 쿼리를 사용하여 디자인할 수 있지만 이를 만드는 데 코딩 경험이 필요하지 않습니다. 반응형 이메일을 만드는 것은 코더만의 일이 아닙니다.

여기에 몇 가지 모범 사례와 바로 사용할 수 있는 템플릿, 반응형 이메일의 기본 사항에 대한 빠른 자습서가 정리되어 있습니다.

반응형 이메일은 구독자가 선호하는 장치에서 읽을 수 있으므로 접근성이 더 좋습니다.

설명을 위해 제가 받은 프로모션 이메일이 데스크톱에서 어떻게 보이는지 보여줍니다.

이 이메일에는 멋진 이미지, 쇼핑 가능한 아이콘이 포함되어 있으며 멋진 형식입니다. 모바일에서 이메일을 열면 이렇게 반갑게 맞이합니다.

나는 여전히 같은 정보와 같은 사진과 쇼핑 가능한 아이콘을 가지고 있습니다. 유일한 눈에 띄는 차이점은 이메일 형식입니다. 모바일 경험에 더 잘 맞도록 하는 것은 다릅니다.

이제 동일한 데스크탑 레이아웃이 모바일에 적용된다고 상상해 보십시오. 사진이나 텍스트를 보려면 휴대폰을 확대해야 했습니다. 대신 구독을 취소하겠습니다.

반응형 이메일을 사용하면 캠페인 ROI뿐만 아니라 사용자 경험도 향상될 수 있습니다.

생각해보세요. 최적화된 모바일 이메일 디자인에 만족하는 구독자는 액세스가 가능하고 보기에도 좋을 것이라는 사실을 알기 때문에 더 많은 마케팅 메시지를 열게 될 것입니다.

따라서 반응형 이메일에 대한 이 모든 이야기를 들으면서 자신만의 이메일을 만들고 싶어 안달이 날 것입니다. 다음으로 몇 가지 반응형 이메일 예제와 템플릿을 살펴보겠습니다.

반응형 이메일 디자인

반응형 이메일을 디자인하는 방법에는 여러 가지가 있습니다.

코딩 지식이 있는 경우 다양한 화면 크기에 대해 다양한 이메일 템플릿을 코딩할 수 있습니다. 모든 화면 크기에서 작동하는 미리 만들어진 템플릿을 사용할 수도 있습니다.

접근 방식에 관계없이 이메일 마케팅 소프트웨어가 필요합니다. 여기에서 이메일을 디자인한 다음 여러 장치에서 해당 이메일을 미리 볼 수 있습니다. 대부분의 이메일 소프트웨어는 디자인이 여러 장치에서 어떻게 보이는지 보여줍니다.

아래 비디오는 템플릿으로 이메일을 디자인하는 방법을 안내합니다. 비디오에서 사용자는 Klaviyo에 있지만 어떤 소프트웨어를 사용하든 개념은 그대로 적용됩니다.

반응형 이메일 코딩

이메일의 요소를 반응형으로 만들려면 미디어 쿼리로 작업해야 합니다.

미디어 쿼리는 CSS 기술입니다. 특정 조건이 참인 경우에만 나타나는 스타일 규칙을 설정할 수 있습니다. 예를 들어 화면 너비가 600px 이하일 때 사용할 글꼴 크기와 이미지 크기를 지정할 수 있습니다.

이메일로 작업할 때 미디어 쿼리를 사용하여 데스크톱, 태블릿 및 모바일 장치에서 디자인이 어떻게 보일지 지정할 수 있습니다. 이렇게 하려면 다음을 지정해야 합니다.

• 선택기 "@media"를 사용하고 "화면"을 지정합니다. 이것은 코드가 화면이 있는 장치에 영향을 미친다는 것을 나타냅니다.
• "최대 너비"를 픽셀 단위로 설정합니다. 코드가 적용될 화면 크기를 지정합니다.
• 특정 화면이 따라야 할 CSS 스타일 가이드를 지정하세요.

아래 코드를 살펴보겠습니다.

@media 화면 및 (최대 너비: 600px)

몸

글꼴 크기: 30px;

이메일의 CSS에 적용하면 너비가 600px 이하인 화면에서 본문 텍스트가 30px 크기로 표시됩니다.

이 접근 방식은 이메일 응답의 특정 요소를 만드는 데 도움이 될 수 있지만 가능하면 템플릿을 사용하는 것이 좋습니다.

포괄적인 웹 디자인 경험이 없는 경우 여러 미디어 화면을 코딩하는 것은 시간이 많이 걸리고 답답할 수 있습니다.

기술에 익숙하지 않거나 더 쉬운 방법을 원하는 경우 내장된 반응형 템플릿이 있는 이메일 마케팅 도구를 사용해 보십시오. 예를 들어 HubSpot의 무료 이메일 소프트웨어는 기본적으로 반응하는 드래그 앤 드롭 템플릿을 제공합니다.

반응형 이메일 디자인 예제

예를 살펴보는 시간입니다. 최고의 이메일 마케팅 캠페인을 살펴보는 이 비디오부터 시작하세요.

그런 다음 우리가 가장 좋아하는 반응형 이메일 디자인에 대해 읽을 수 있습니다.

1. TOMS 뉴스레터

TOMS 뉴스레터에서 데스크톱 버전과 모바일 버전의 주요 차이점은 디스플레이 광고의 스택과 크기입니다.

반응형 디자인으로 모바일 버전은 복잡한 내비게이션이 없으며 이미지가 화면에 잘 맞습니다. 더 나은 가시성을 위해 CTA도 이동되었습니다.

이미지 출처

2. 메트로폴리탄 미술관

TOMS 뉴스레터에서 볼 수 있듯이 반응형 이메일 디자인은 시각적으로 매력적이고 소화하기 쉬운 방식으로 콘텐츠를 쌓는 데 도움이 됩니다. MET의 이 예도 다르지 않습니다.

모바일에서는 메뉴의 위치가 변경됩니다. 다른 선물 가게 항목에 대한 링크는 페이지 하단에 있습니다. 이것은 사용 가능한 기념품의 이미지를 전면과 중앙에 유지합니다.

이미지 출처

3. 뽕나무

다시 한 번 반응형 이메일 디자인으로 게임의 이름이 쌓입니다. 누군가가 콘텐츠를 보고 있는 장치가 아무리 작더라도 콘텐츠를 읽기 쉽고 시각적으로 매력적으로 만드는 것이 전부입니다.

사진과 텍스트가 번갈아 나타나는 것은 데스크톱에서 의미가 있는 반면, 모바일에서는 구분선과 함께 관련 텍스트 위에 사진을 일관되게 쌓아서 보는 사람이 혼동하지 않도록 합니다.

이미지 출처

반응형 이메일 템플릿

반응형 템플릿은 모든 화면 크기에 자동으로 적응하므로 이메일이 스마트폰, 태블릿 또는 컴퓨터에서 열리든 관계없이 멋지게 보이고 완전한 기능을 갖출 것입니다.

코딩 배경이 적거나 디자인에 시간을 덜 사용하려는 사람들에게 제 조언은 템플릿을 사용하는 것입니다. 이메일이 전문적 으로 보이고 응답성이 있는지 확인하는 확실한 방법입니다.

반응형 이메일 템플릿을 사용하면 선택 항목에서 선택할 수 있는 이메일을 디자인하는 시간을 절약할 수 있습니다. 예를 들어 HubSpot의 이메일 마케팅 도구에는 반응형 이메일 전용 템플릿이 60개 이상 포함되어 있습니다.

이제 몇 가지 템플릿 옵션을 살펴보겠습니다.

1. 허브스팟

HubSpot은 몇 가지 무료 반응형 이메일 템플릿을 제공합니다 . HubSpot 고객이거나 무료 사용자인 경우 직접 다운로드하여 사용해 볼 수 있습니다.

예를 들어 반응형 이메일 템플릿 중 하나는 여러 장치에서 템플릿을 미리 볼 수 있는 사이드바입니다.

이미지 출처

장치 유형을 클릭하고 그에 따라 이메일 형식이 지정되었는지 확인하는 것은 디자인 프로세스의 마지막 단계 중 하나이며 HubSpot과 같은 소프트웨어를 사용할 때 반응형 이메일 프로세스의 유일한 단계입니다.

예를 들어 미리 보기를 위해 스마트폰 장치를 클릭하면 글꼴 크기 및 이미지 해상도를 포함한 콘텐츠가 모바일에 적합한 방식으로 포맷되어 있는지 확인할 수 있습니다.

2. 캠페인 모니터

CampaignMonitor에서 제공하는 템플릿은 반응형 이메일 결과가 미리보기 도구에 표시되는 다른 많은 템플릿과 유사합니다. 예를 들어 다음은 CampaignMonitor 템플릿입니다.

이미지 출처

다양한 장치를 나란히 볼 수 있어 디자인 요소를 쉽게 비교할 수 있습니다. 모든 구독자에게 최상의 경험을 제공하기 위해 약간의 편집을 할 수 있습니다.

CampaignMonitor 템플릿은 무료인 경우가 많으므로 예산이 적은 경우 좋은 선택입니다.

3. 스트리포

Stripo는 300개가 넘는 무료 HTML 이메일 템플릿을 제공합니다. 산업, 계절, 유형 및 기능별로 템플릿을 선택할 수 있습니다. 예를 들어, 다음은 비즈니스 산업 섹션의 템플릿입니다.

이미지 출처

견고한 반응형 이메일 템플릿의 좋은 신호는 Stripo의 미리보기 모드에서 볼 수 있는 것처럼 데스크톱 및 스마트폰 변형 모두에서 미리보기를 볼 수 있는 옵션입니다.

휴대폰 사양에 맞게 모바일 미리 보기에서 단일 열 레이아웃이 어떻게 채택되었는지 확인하십시오.

Stripo는 목표에 맞는 템플릿을 찾기 위해 빠르게 방문할 수 있는 웹사이트입니다. 반응형 이메일을 시도하거나 디자인 영감을 얻고 싶다면 Stripo를 고려할 수 있습니다.

4. 지속적인 접촉

Constant Contact는 가입 후 액세스할 수 있는 200개 이상의 전문 이메일 템플릿을 제공합니다. 아래 예를 보면 플랫폼이 반응형 이메일 템플릿을 제공한다는 것을 알 수 있습니다.

이미지 출처

Constant Contact의 템플릿에는 끌어서 놓기 편집, 설문 조사 추가 옵션, 전자 상거래 기능 및 사진 라이브러리 도구가 있습니다. 이러한 기능은 모두 보고 싶은 이메일 구독자를 만드는 데 도움이 될 수 있습니다.

특정 도구를 사용하면 위의 예와 같이 일관성을 유지할 수 있으므로 Constant Contact와 같은 서비스를 사용하는 것이 좋습니다. 이메일의 응답 특성이 디자인 요소를 손상시키지 않는다는 것을 알 수 있습니다.

몇 가지 템플릿 옵션을 살펴보았으므로 모범 사례와 함께 반응형 이메일을 작동시키는 다른 방법을 살펴보겠습니다.

반응형 이메일 모범 사례

반응형 이메일의 정확한 디자인은 캠페인의 목표에 따라 달라집니다. 그러나 이러한 팁은 독자에게 최상의 경험을 제공하는 데 도움이 될 수 있습니다.

• 반응형 이메일이 확장 가능하고 유연한지 확인하세요. 메시지가 반응하는지 확인하기 위해 다른 장치에서 이메일을 미리 봅니다.
• 자신의 이메일을 코딩하는 경우 CSS 미디어 쿼리가 유동적인 필드로 고정된 필드를 변경한다는 점을 기억하십시오.
• 작은 화면에서 쉽게 읽을 수 있는 큰 글꼴을 사용하십시오.
• 단일 열 레이아웃은 확장하기가 더 쉽습니다. 간단한 레이아웃이 웹 페이지에 적합하다면 반응형 이메일에 대해 확실히 고려하십시오.

"일정"을 누르기 전에 이메일을 테스트하십시오. 여러 화면 해상도에서 디자인이 어떻게 보이는지 확인한 후에만 디자인을 마무리합니다. 너무 많은 사람들이 모바일로 쉽게 이메일에 액세스합니다.

이메일의 효과를 확인하는 간단한 방법은 이메일을 자신이나 팀에 테스트로 보내는 것입니다. 이메일이 받은 편지함에 있는 다른 반응형 마케팅 이메일과 겹치나요? 그렇다면 보낼 준비가 된 것입니다.

반응형 이메일 시작하기

반응형 이메일은 고객에게 더 좋고 접근하기 쉬운 경험을 제공합니다. 이제 막 전환하는 중이라면 사전 제작된 반응형 이메일 템플릿을 살펴보는 것부터 시작하세요. 이를 통해 설계 유연성을 제공하면서 시간을 절약할 수 있습니다.

그런 다음 두 번째 의견을 구하십시오. 동료에게 데스크탑과 휴대폰에서 이메일을 열어 달라고 요청하십시오. 두 가지 경험에 대한 솔직한 피드백을 얻을 수 있습니다.

마지막으로 실험을 두려워하지 마십시오. 가장 반응이 좋은 레이아웃을 찾을 때까지 다양한 반응형 디자인을 A/B 테스트할 수 있습니다.

곧 반응형 이메일을 발송하고 오픈율을 높일 것입니다.