반응형 이메일 101 웨비나 Q&A: HTML 및 CSS 기본 사항

게시 됨: 2015-03-16

모바일 열기가 계속 증가함에 따라(지난 4년 동안 500% 이상 증가했습니다!) 반응형 디자인과 같은 모바일 이메일 전략에 대한 이야기도 증가하고 있습니다. 반응형 이메일 101: HTML 및 CSS 기본 웨비나에서 모바일 이메일 환경, 반응형 이메일 생성의 기초, 그리고 이러한 기술이 구독자 경험을 개선하는 데 중요한 이유를 살펴보았습니다. 또한 이메일 클라이언트 지원을 다루었고 반응형 이메일을 처음부터 코딩하는 방법을 시연했습니다.

성공하지 못했습니까? 걱정하지 마세요. 우리는 모든 것을 녹음했습니다! 또한 슬라이드를 사용할 수 있도록 했습니다.

슬라이드 가져오기 + 녹음 →

우리는 웨비나를 위한 풀 하우스가 있었기 때문에 Q&A 부분에서 가능한 한 많은 질문에 답하려고 노력했지만 모든 질문에 답할 수 없었습니다. 아래에서 가장 자주 묻는 질문을 정리했습니다.

반응형 디자인 시작하기

모바일 오픈의 증가세가 포화 상태에 이르렀다고 생각하십니까, 아니면 계속 증가할 것으로 보십니까?

지난 4년 동안 모바일 시장이 500% 이상 크게 성장한 것을 보았지만 이미 그 성장이 다소 평평해지기 시작했습니다. 그러나 더 많은 모바일 장치가 확산됨에 따라 모바일 개방은 계속해서 천천히 증가할 것이라고 생각합니다.

유동적, 적응형 및 반응형 디자인의 차이점은 무엇입니까?

유체 디자인은 미디어 쿼리가 없는 상대적 너비로 구성됩니다. 적응형 디자인은 여러 뷰포트/중단점에서 고정 또는 상대 너비로 구성됩니다. 반응형 디자인은 여러 뷰포트/중단점에서 상대적 너비로 구성됩니다. 다음은 이들 간의 차이점을 더 잘 이해하는 데 도움이 되는 몇 가지 훌륭한 리소스입니다.

확장성, 유동성 또는 반응성? 모바일 이메일 접근 방식 이해
고정 vs. 유동 vs. 적응 vs. 반응
어떤 레이아웃? 정적, 유동적, 적응형 또는 반응형?
액상형

유동적, 적응형 또는 반응형 중 이메일 클라이언트 지원이 가장 우수한 접근 방식은 무엇입니까?

순수한 지원의 관점에서 보면 유동적인 이메일이 최고의 지원을 제공합니다. 적응형 디자인과 반응형 디자인 모두 지원이 제한된 미디어 쿼리를 사용해야 합니다.

그러나 유동적인 디자인이 이메일에 대한 최상의 접근 방식이라는 의미는 아닙니다. 유동적인 디자인은 이메일의 모바일 친화적 버전을 만들기 위한 좋은 절충안이지만 핵심에서 이메일의 전체 너비 디자인을 유지합니다. 그것은 정말로 특정 청중이 이메일을 여는 위치와 구독자 경험을 최적화하기 위한 디자인 전략에 달려 있습니다.

미디어 쿼리란?

미디어 쿼리(@media)는 특정 규칙 집합에 대해 CSS 집합을 트리거하는 조건문입니다. 다음 리소스를 통해 미디어 쿼리 및 이메일에 대해 자세히 알아볼 수 있습니다.

반응형 이메일 디자인 방법 가이드
HTML 이메일의 미디어 쿼리 이해

반응형 디자인이 이메일에 미치는 영향에 대한 데이터가 있습니까?

물론이지! 최근에 우리는 반응형 디자인과 이메일 테스트가 클릭에 미치는 영향에 대해 MailChimp와 함께 보고서를 작성했습니다. 반응형 디자인을 사용하면 모바일 사용자의 클릭이 15% 증가하는 것으로 나타났습니다.

혼합된 지원과 수많은 해결 방법으로 인해 반응형 디자인으로 이동하는 것이 압도적으로 보입니다. 시작하려면 어떻게 해야 하나요?

현재 이메일 클라이언트의 제한된 지원으로 인해 반응형 이메일 디자인을 구현하기 어려울 수 있습니다. 첫 번째 권장 사항은 다이빙을 시작하기 전에 반응형 이메일 디자인에 대해 최대한 스스로 교육하는 것입니다. 도움이 되는 MailChimp, Campaign Monitor 및 Litmus의 리소스를 확인하는 것이 좋습니다.

반응형 이메일의 실제 개발에 뛰어드는 것이 불편하다면 간단한 드래그 앤 드롭 이메일 편집기를 사용하여 이메일을 작성하는 것을 고려해 보십시오. StampReady, Canvas 및 MailChimp와 같은 제품을 사용하면 번거로운 이메일 코딩을 해결할 수 있습니다.

코드에 익숙해지면 이메일 디자인을 위해 특별히 제작된 코드 편집기인 Litmus Builder를 확인하십시오. 기본 반응형 이메일 기술을 먼저 구현해 보십시오. 반응형 디자인을 지원하는 클라이언트(주로 Apple 장치)에서 이메일을 여는 사용자에게 훌륭한 경험을 제공할 것입니다.

또한 보내기 전에 이메일을 미리 확인하십시오! PutsMail을 사용하여 자신에게 이메일을 보내거나 Litmus를 사용하여 40개 이상의 다른 이메일 클라이언트에서 이메일이 어떻게 보이는지 확인할 수 있습니다.

반응형 이메일 디자인에 대해 질문이 있거나 코딩 문제가 발생하면 Litmus Community로 이동하여 도움을 받으십시오.

반응형 프레임워크를 추천하시나요?

예! ZURB의 반응형 프레임워크 Ink를 확인하는 것이 좋습니다(주의: 이 프레임워크를 Outlook 2007-2013에서 올바르게 렌더링하려면 해결 방법이 필요함). Sass를 좋아한다면 Faust Gertz는 Sass 버전의 Ink를 만들고 Alex Ilhan은 Zenith라는 Sass 이메일 프레임워크를 가지고 있습니다. 또한 Code School의 Dan Denney는 Emayll이라는 멋진 이메일 워크플로를 보유하고 있으며 Brian Graves는 반응형 이메일 패턴의 놀라운 컬렉션을 보유하고 있습니다.

미디어 쿼리를 지원하지 않는 클라이언트에 대한 최적화

클라이언트가 반응형 디자인을 지원하지 않는 경우 해당 클라이언트에 무엇이 표시됩니까?

모든 단일 이메일 클라이언트는 특히 모바일 이메일 앱과 관련하여 이메일을 다르게 렌더링합니다. 기본적으로 반응형 디자인을 지원하지 않는 경우 전자 메일의 일부 버전으로 대체됩니다. 때로는 "확대" 전폭 버전이 될 수도 있고, 때로는 확대된 "확대" 버전이 될 수도 있으며, 때로는 Gmail과 같은 클라이언트가 자동으로 글꼴 크기를 늘려 이메일의 "모바일 친화적인" 버전을 만들 수도 있습니다.

가장 좋은 방법은 항상 이메일을 보내기 전에 미리 보는 것입니다. PutsMail을 사용하여 자신에게 이메일을 보내거나 Litmus를 사용하여 40개 이상의 다른 이메일 클라이언트에서 이메일이 어떻게 보이는지 확인할 수 있습니다.

Android용 Gmail 앱과 같이 반응형 디자인을 지원하지 않는 클라이언트를 위해 반응형 디자인에 접근하는 가장 좋은 방법은 무엇입니까? 어떤 유형의 "백업"이 있어야 합니까?

처음에는 이메일을 모바일 친화적으로 만드는 것이 좋습니다. 이는 이메일 콘텐츠를 최소화하고 더 큰 글꼴 및 버튼 크기와 같은 모바일 사용 사례에 맞게 디자인해야 함을 의미합니다. 기본적으로 사용할 수 있는 1열 디자인으로 Gmail 앱용 이메일도 쉽게 렌더링할 수 있습니다.

고급 코딩 기술에 익숙한 사용자를 위해 Gmail 앱의 응답 지원 부족을 설명하고 이메일을 개발하는 가장 좋은 방법은 "하이브리드 코딩 접근 방식"입니다. 본질적으로 모바일 우선 접근 방식을 사용하고 일부 이메일 관련 해킹을 사용하여 이메일을 데스크톱 너비까지 확장합니다. 여기에서 하이브리드 코딩 접근 방식을 구현하는 방법에 대해 자세히 알아볼 수 있습니다.

하이브리드 코딩 접근 방식
하이브리드 코딩 Redux - 기준을 높이다
반응형 이메일 디자인에서 어렵게 얻은 교훈

코드 질문

미디어 쿼리를 별도의 CSS 문서에 넣고 해당 문서에 대한 링크를 헤드에 넣을 수 있습니까?

제한된 이메일 클라이언트 지원으로 인해 이메일에 연결된 스타일시트(<link> 태그)를 사용하지 않는 것이 좋습니다. 모든 스타일은 이메일의 <head>에 포함되어야 합니다.

반응형 이메일 디자인을 위한 가장 일반적인 중단점은 무엇입니까? 몇 개의 중단점이 이상적입니까?

iPhone에서 가장 많이 열리기 때문에 이메일이 새로운 iPhone 6 Plus의 너비인 최소 414px에서 중단점 구현을 시작하는 것이 중요합니다.

주어진 디자인에 "이상적인" 중단점 수는 없습니다. 모든 것은 개별 디자인과 구독자를 위한 경험 최적화에 달려 있습니다. 이메일을 반응형으로 만들려면 최소한 하나의 중단점을 고려하는 것이 이상적입니다.

테이블이나 div를 사용하는 것이 좋습니까?

이메일 디자인은 절대적으로 테이블 기반 레이아웃과 구조를 사용해야 합니다. 그 이유는 HTML의 실제 구조 및 기초와 관련하여 Outlook 데스크톱 클라이언트와 같은 이메일 클라이언트에서 <div>에 대한 지원이 부족하기 때문입니다. 일부 이메일 클라이언트는 <div>를 지원하며 특히 응답 이메일의 경우 특정 해킹 및 해결 방법에 사용하기에 매우 강력할 수 있습니다.

미디어 쿼리를 사용하여 테이블 내에서 align="left" 또는 align="right" 속성을 변경할 수 있습니까? 아니면 스타일 변경에만 해당됩니까?

CSS에서 align HTML 속성을 기술적으로 변경할 수는 없지만 다른 해결 방법이 있습니다. 각 개별 테이블을 빈 <div>로 래핑하고 float 속성이나 display 속성을 사용하여 테이블을 바꿀 수 있습니다. ActionRocket에는 이 고급 기술 사용에 대한 훌륭한 블로그 게시물이 있습니다.

반응형 이메일에서 배경 이미지는 어떻게 지원되나요? 배경 이미지를 전체 너비로 저장하려는 경우 이상적인 크기는 무엇입니까?

배경 이미지는 모바일 이메일 클라이언트에서 매우 잘 지원됩니다. 배경 이미지를 저장하기 위한 "이상적인" 치수는 없습니다. 구독자가 이메일을 빠르게 다운로드할 수 있도록 항상 파일 크기를 비교적 작게 설정해야 합니다. Litmus의 이미지 확인 기능을 사용하여 이미지 다운로드 속도를 테스트할 수 있습니다.

많은 이메일 클라이언트와 작동하려면 스타일이 인라인이어야 합니까?

예. 여러 이메일 클라이언트는 이메일의 <head>, 특히 Gmail에서 CSS 스타일을 제거하므로 인라인 CSS 스타일이 이메일에 필요합니다.

이메일의 글꼴 크기에 픽셀이나 em을 사용하는 것이 더 낫습니까?

많은 이메일 클라이언트가 em을 지원하지 않기 때문에 이메일에서 글꼴 크기를 정의하는 데 픽셀을 사용하는 것이 좋습니다.

미디어 쿼리를 사용하여 이미지를 교체할 수 있습니까?

미디어 쿼리를 사용하여 배경 이미지를 교체할 수 있지만 인라인 이미지는 교체할 수 없습니다( <img> 태그).

이미지가 망막 디스플레이에서 선명하게 렌더링되도록 이미지를 최적화하는 가장 좋은 방법은 무엇입니까?

레티나의 경우 일반적으로 이미지를 최종 디스플레이 크기의 두 배로 만들고 싶습니다. 예를 들어, 100×100 이미지는 실제로 200×200이어야 하지만 HTML 속성이나 CSS 스타일을 사용하여 100×100으로 축소됩니다. 일반적으로 이 기술은 사진과 같은 큰 이미지가 아니라 선명해야 하는 작은 이미지에만 사용해야 합니다. 리트머스 커뮤니티에는 망막 디자인에 대한 몇 가지 훌륭한 토론이 있습니다.

망막을 위한 디자인
텍스트 클릭 유도문안 및 레티나 디스플레이가 있는 이미지

표시 여부:없음; 또는 표시:차단; 반응형 이메일로 작업하시겠습니까?

표시 속성이 반응형 이메일에서 작동하는지 여부가 문제가 아니라 이메일 클라이언트에서 지원하는지 여부입니다. 대부분의 CSS와 마찬가지로 일부에서는 지원하고 나머지는 지원하지 않습니다. 특히 Gmail에서는 지원하지 않습니다.

웹 브라우저의 "요소 검사"에 해당하는 이메일 클라이언트가 있습니까? 반응형 디자인 문제를 해결하는 데 유용할 것입니다.

웹 브라우저의 "검사 요소"와 정확히 일치하는 것은 없습니다. 그러나 Litmus의 Interactive Testing 기능은 매우 유용합니다. 또한 Litmus Builder에는 원클릭 테스트 및 재테스트 기능이 있어 이메일을 매우 빠르게 반복할 수 있습니다.

그렇지 않으면 WebKit 브라우저(Chrome 또는 Safari)에서 문제를 해결하는 것이 좋습니다. 대부분의 모바일 열기는 CSS 지원이 뛰어난 WebKit에서 발생하기 때문에 WebKit 브라우저에서 개발 및 문제 해결은 해당 이메일 클라이언트에서 발생할 일을 잘 복제합니다.

패딩은 이메일 클라이언트에서 보편적으로 지원됩니까?

패딩은 이메일 클라이언트에서 거의 보편적으로 지원됩니다. 반면 마진 속성은 큰 지지를 받지 못하고 있다. 패딩을 사용하는 것이 좋습니다.

정렬을 사용하여 세 개의 열을 올바르게 쌓는 방법은 무엇입니까? 왼쪽과 오른쪽 외에 가운데 정렬을 사용해야 합니까? 아니면 3열 레이아웃을 전혀 사용하지 않는 것이 좋습니까?

예, 반응형 이메일 디자인에서 3개의 열을 쌓을 수 있지만 스택 및 반전 옵션은 2열 디자인보다 제한적이거나 더 어렵습니다. 테이블 정렬은 스택 방식에 따라 다르지만 일반적으로 세 개의 테이블을 모두 왼쪽에 정렬합니다.

ActionRocket에는 역 스택 테이블을 위한 고급 기술에 대한 훌륭한 게시물이 있습니다.

리무스 빌더

리트머스 빌더란?

Litmus Builder는 이메일 디자이너가 이메일 디자이너를 위해 만든 세계 최초의 코드 편집기입니다. 이메일을 작성, 편집 및 공유하는 것은 완전 무료입니다.

Emmet은 Litmus Builder에 직접 내장되어 있습니까?

그것은이다! Emmet 통합으로 단축 코딩이 간편해집니다.

Litmus Builder 내에서 반응형 이메일 템플릿을 어디에서 찾을 수 있습니까?

Litmus Builder의 템플릿 섹션에는 20개 이상의 이메일 템플릿 갤러리가 있습니다. 모든 템플릿은 완전히 무료로 사용할 수 있습니다. Litmus Builder에 대한 전체 도움말 문서를 확인하십시오.

사전 테스트를 거친 무료 반응 템플릿을 사용해 보세요.

반응형 이메일을 사용하면 모바일 사용자가 증가하는 사용자를 위해 디자인을 미세 조정할 수 있습니다. Litmus Community에서 사전 테스트된 무료 템플릿 호스트를 사용하여 이메일 디자인 프로세스를 간소화하십시오.

리트머스 커뮤니티 템플릿 소개

Litmus의 사전 테스트된 템플릿 중 하나로 다음 캠페인을 시작하세요.

템플릿 액세스 →