모바일 우선 접근 방식을 위한 이메일 디자인 방법

게시 됨: 2015-05-21

우리는 끊임없는 이메일 흐름의 끝없는 싸움인 선의의 싸움을 하고 있습니다. 우리가 어디를 가든지, 어떤 장치를 가지고 있든 이메일은 우리를 어디에서나 찾을 수 있습니다. 이 기사를 읽은 후 10개의 이메일을 더 받게 될 가능성이 있습니다. 그리고 디자이너로서 우리는 받은 편지함의 양면에 있습니다. 우리는 지속적으로 이메일을 수신하지만 실제 이메일 디자인을 디자인하고 생성하는 책임도 있습니다.

이메일로 누구를 대상으로 하든 목표는 구독자, 고객 및 잠재 고객에게 이메일을 보낼 때 최고의 사용자 경험을 제공하는 것입니다. 그리고 대부분의 이메일은 모바일 장치에서 열리기 때문에 열 수 있는 모든 장치를 수용할 수 있도록 이메일을 디자인해야 합니다.

우리는 반응형 웹 디자인과 최고 수준의 모바일 응용 프로그램에 너무 익숙해져서 어떤 장치라도 선택하여 맞춤형 경험을 디자인할 수 있다는 것을 당연하게 여깁니다. 이메일을 사용하면 상황이 잘 정리되고 건조하지 않습니다. 기술 면에서 현대 웹 디자인보다 광년 뒤쳐져 있습니다. HTML 속성, 테이블 기반 레이아웃 및 인라인 스타일을 사용하여 디자인해야 하며, 이는 각 이메일 클라이언트에서 동일하게 작동한다고 보장되지 않습니다.

모든 장치에 대한 이메일 디자인, 내 옵션은 무엇입니까?

CD-ROM 컬렉션을 정리하기 전에 제한 사항이 있더라도 성공적인 "반응형" 이메일을 디자인할 수 있다는 희망이 있음을 기억하십시오. 진정으로 반응하는 이메일을 만드는 것은 확실히 선택 사항이지만 성공적인 모바일 우선 디자인을 만들 때 다음 세 가지 접근 방식을 모두 고려하는 것이 중요합니다.

  • 확장 가능한 디자인
  • 유체 설계
  • 반응형 디자인

요구 사항에 가장 적합한 접근 방식을 선택하려면 이 세 가지 형태의 디자인 간의 차이점과 제한 사항을 이해하는 것이 중요합니다. 결정을 내리려면 청중과 그들이 사용하는 기기와 이메일 클라이언트에 대한 지식이 필요합니다. 모든 이메일 클라이언트가 동일한 CSS 지원을 제공하는 것은 아니므로 사용자에게 가장 적합한 접근 방식을 결정하는 데 도움이 됩니다.

확장 가능한 디자인

확장 가능한 디자인

확장 가능한 이메일 레이아웃은 모든 화면 크기에서 읽고 클릭할 수 있기 때문에 다목적입니다. 잠재고객이 모바일, 태블릿 및 데스크톱과 같은 다양한 기기에서 이메일을 여는 경향이 있는 경우 이는 훌륭한 옵션입니다.

<table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; width=&quot;100%&quot;>
<p>Email content goes here.</p>
</table>

이 옵션은 미디어 쿼리를 사용하지 않고 조정해야 할 테이블 너비가 없기 때문에 일반적으로 구현하기 가장 쉽습니다. 한 가지 장점은 이러한 유형의 이메일을 디자인할 때 학습 곡선이 크지 않다는 것입니다. 대부분의 경우 모바일은 이메일을 읽는 가장 일반적인 장치이므로 모바일을 먼저 고려하기 쉽습니다. 더 큰 버튼, 읽기 쉬운 텍스트 및 명확한 클릭 유도문안은 더 작은 화면 크기에 대한 요구를 수용하기 위해 모바일 우선 순위를 제공합니다.

확장 가능한 이메일 디자인은 모든 장치에서 잘 작동하려면 단일 열이어야 한다는 점에서 제한적일 수 있습니다. 그 이유는 디자인에 여러 열이 있는 경우 모바일 장치에서 매우 작아져 가독성에 영향을 미치기 때문입니다. 그러나 받은 편지함을 스크롤하면 매우 일반적이기 때문에 단일 열 레이아웃을 많이 볼 수 있습니다.

콘텐츠는 모든 이메일의 핵심이므로 텍스트 크기는 모바일 및 더 큰 화면에서 잘 작동하는 크기여야 합니다. 대부분의 이메일 클라이언트에서는 전체 이메일이 화면을 채우므로 사용자가 세로로 스크롤할 필요가 없습니다. 그러나 이메일이 의도한 대로 화면을 채우지 못하는 경우를 대비하여 핵심 정보와 행동 유도 문구를 이메일의 왼쪽 상단에 배치하는 것이 좋습니다.

유체 설계

유동적 이메일 디자인

웹 디자인의 "액체" 레이아웃에 익숙할 것입니다. 디자인 구성 요소에는 백분율 너비가 있으며 동일한 너비를 유지하면서 사용자의 화면 해상도에 맞게 조정됩니다. 유동적인 이메일 디자인은 이와 동일한 아이디어를 활용합니다.

이 이메일 옵션은 확장 가능한 옵션과 진정으로 책임 있는 옵션 사이의 격차를 해소합니다. 확장 가능한 옵션보다 더 많은 선행 설계를 수행해야 합니다. 그 이유는 백분율 기반 크기 조정이 테이블과 이미지의 너비를 이메일이 표시되는 화면 크기에 맞게 조정하기 때문입니다. 테이블은 다른 크기에서 레이아웃을 변경하지 않지만 콘텐츠는 공간을 흐르고 채웁니다. 이것은 복사와 이미지가 서로 관련되는 방식에 대한 제어가 덜하기 때문에 텍스트가 많은 이메일에 대한 훌륭한 옵션입니다. 레이아웃을 단순하게 유지하는 것은 여전히 ​​좋은 생각이며, 이메일의 가독성을 최우선으로 유지하기 위해 단일 테이블 레이아웃을 선호합니다.

이것이 고정형과 응답형 사이의 간극을 메운다고 우리가 말한 것을 기억하십니까? 그 이유는 더 큰 화면에서는 크기를 제한해야 하기 때문입니다. 이메일이 너무 넓어지면 텍스트 줄이 시각적으로 너무 길어지고 독자가 이메일을 쉽게 읽을 수 있도록 하고 싶습니다. 고정 너비 컨테이너 테이블에 이메일 내용을 래핑하면 더 큰 화면 크기에 표시되는 데 도움이 됩니다. 그러면 유용한 미디어 쿼리가 더 작은 화면 크기를 대상으로 합니다.

<table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; width=&quot;525&quot; class=&quot;wrap&quot;>
<tr>
<td>
<table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; width=&quot;100%&quot;>
<p>Wrapping table will help on larger screens.</p>
</table>
</td>
</tr>
</table>

모바일 장치에 대한 미디어 쿼리의 예:

@media screen and (max-width: 525px) {
table[class="wrap"]{
width:100% !important;
}
}

응답 이메일

반응형 디자인

확장 가능하고 유동적인 이메일에서 우리가 알고 있는 것을 가져와서 몇 가지 규칙을 더 추가해 보겠습니다. 반응형을 사용하면 CSS 미디어 쿼리를 사용하여 다양한 중단점에 표시되는 내용을 더 잘 제어할 수 있습니다. 이 옵션을 사용하면 레이아웃을 변경할 수 있고 다른 요소도 특정 중단점에 대한 조건부 스타일로 사용자 지정할 수 있습니다.

다음은 반응형 레이아웃에 대한 미디어 쿼리의 예입니다.

@media only screen and (max-width: 450px) {
td[class="column"] {
display: block;
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
}

다른 옵션과 마찬가지로 하나의 기둥이나 단순한 디자인에 국한되지 않습니다. 이메일은 레이아웃과 이미지 양에 대한 제한이 적어 더 복잡할 수 있습니다. 예를 들어 이메일 디자인은 더 큰 장치에서는 여러 열이 될 수 있지만 모바일에서는 단일 열이 될 수 있습니다. 텍스트 크기, 이미지 및 기타 대부분은 최상의 경험을 위해 최적화될 수 있습니다.

여러 미디어 쿼리로 복잡한 디자인을 만들기 전에 몇 가지 장단점에 대해 이야기하는 것이 중요합니다. 미디어 쿼리는 모든 이메일 클라이언트에서 작동하지 않습니다. 실제로 지원은 매우 제한적입니다. Litmus 미디어 쿼리 지원 목록에 따르면 현재 Android Outlook.com 앱, Android 4.x 기본 클라이언트 및 iOS(iPhone/iPad)에서 지원합니다. 시청자의 대다수가 모바일 및 태블릿 사용자인 경우 이러한 기능을 최대한 활용할 수 있습니다.

기타 설계 고려 사항

이메일 디자인을 만들기 전에 분석을 살펴보고 사용자의 이메일 클라이언트와 장치를 결정하는 것이 중요합니다. 이를 자주 확인하고 변경 사항에 따라 디자인 접근 방식을 발전시키는 것이 좋습니다. 제한이 있더라도 이메일은 진화하고 있으므로 현재 지원되는 내용을 확인하는 것이 중요합니다.

다음은 더 읽을 수 있는 몇 가지 훌륭한 리소스입니다.

  • 모바일 전용 CSS
  • 이메일의 미래
  • iPhone 및 Android 이메일

좋은 소식은 현재 이메일의 한계로 모바일 퍼스트 접근이 가능하다는 것입니다. 디자인이 "반응형"의 진정한 형태가 아니더라도 몇 가지 지정된 비율과 약간의 미디어 쿼리만 있으면 어떤 장치에서든 깊은 인상을 주는 이메일 디자인을 만들 수 있습니다. 대부분의 경우 대부분의 사용자는 모바일 장치에서 이메일을 확인하므로 모바일 우선 접근 방식을 취하는 것이 이메일 디자인의 강력한 기반이 됩니다.