Foundation for Email Framework를 사용하여 반응형 이메일 디자인을 만드는 방법

게시 됨: 2017-06-26

반응형 이메일 디자인을 쉽게 만들 수 있는 마케팅 도구가 많이 있습니다. 문제는 이메일이 어떻게 보이는지 더 많이 제어하는 것을 선호할 수 있으며 그렇게 하는 가장 좋은 방법은 처음부터 이메일을 디자인하는 것입니다. Foundation for Email과 같은 프레임워크를 사용하면 최상의 절충안을 얻을 수 있습니다. 당신은 처음부터 모든 단일 구성 요소를 설계 할 필요가 없습니다,하지만 당신이 그들을 사용하는 방법, 언제, 어디서 완벽하게 제어를받을 수 있나요.

이 기사에서는 먼저 이메일 프레임워크가 무엇이며 어떻게 도움이 되는지 설명합니다. 그런 다음 Foundation for Emails와 이를 사용하여 맞춤형 반응형 이메일 캠페인을 만드는 방법에 대해 설명합니다. 일하러 가자!

이메일 프레임워크의 정의(그리고 더 나은 이메일을 만드는 데 어떻게 도움이 되는지)

프레임워크는 여전히 약간의 코딩이 필요하지만 이메일의 경우 프로세스가 매우 간단합니다.

일반적으로 프레임워크는 특정 유형의 제품 개발을 지원하도록 설계된 사례, 파일 및 코드의 모음입니다. 매번 수레바퀴를 다시 만들 필요가 없도록 하여 복잡한 프로젝트를 더 빠르게 생성하는 데 도움이 되는 코드의 빌딩 블록으로 생각하십시오.

이메일을 위한 프레임워크도 있으며, 이것이 이 기사에서 다룰 내용입니다. 몇 가지 이점을 살펴보겠습니다.

미리 만들어진 요소를 사용하면 이메일을 더 빠르게 디자인할 수 있습니다. 오늘날 대부분의 이메일에는 버튼과 메뉴와 같이 이미지와 텍스트 이상의 요소가 포함되어 있습니다. 이러한 요소를 포함하는 것은 시간이 많이 걸릴 수 있지만 프레임워크를 사용하면 즉시 삽입하고 사용자 지정할 수 있습니다.
즉시 반응합니다. 점점 더 많은 사람들이 모바일 장치를 사용함에 따라 이메일이 화면에 잘 표시되도록 해야 합니다. 대부분의 최신 프레임워크는 기본적으로 반응형이므로 걱정할 일이 한 가지 줄어듭니다.
템플릿은 디자인을 시작하는 데 도움이 될 수 있습니다. 많은 최신 이메일 프레임워크에는 캠페인을 빠르게 생성하는 데 도움이 되는 다양한 템플릿이 포함되어 있습니다.

보시다시피 여기의 공통 주제는 프레임워크를 통해 시간을 절약할 수 있다는 것입니다. 프로젝트를 처음부터 코딩하고 싶은 경우가 많이 있지만 더 높은 품질로 작업을 더 빨리 완료할 수 있는 프레임워크를 사용할 가치가 있습니다.

Foundation for Email Framework 소개

이메일 재단 홈페이지.

더 진행하기 전에 Foundation for Sites와 Foundation for Emails의 두 가지 Foundation 프레임워크가 온라인에서 제공된다는 점에 유의하는 것이 중요하며 이 기사에서는 후자에 중점을 둘 것입니다. 주요 판매 포인트는 반응형 그리드입니다. 이러한 유형의 시스템은 혁신적이지 않지만 Foundation의 인기는 사용 용이성에 기반합니다.

프레임워크를 선택하는 것은 매우 간단하며(코딩 경험이 없더라도) 두 가지 버전 중에서 선택할 수 있습니다. 하나는 CSS(Cascading Stylesheets) 기반이고 다른 하나는 Sass 기반입니다. 당연히, 말대꾸 버전은 CSS의 stylings가를 반복 할 필요가 없어 더 많은 시간을 절약 할 수 있습니다,하지만 Node.js.에 어느 정도 익숙을 필요로하지 않습니다

마지막으로 Foundation for Email은 버튼 및 메뉴와 같은 많은 '패턴'을 제공하여 작업을 더욱 간단하게 만듭니다. 더 많은 시간을 절약하기 위해 처음부터 레이아웃을 디자인하는 대신 템플릿을 사용할 수도 있습니다.

주요 특징들:

반응형 그리드를 사용하여 최신 이메일 캠페인을 만듭니다.
CSS 또는 Sass 버전의 프레임워크를 제공합니다.
패턴을 활용하여 이메일에 공통 요소를 빠르게 추가할 수 있습니다.
레이아웃을 사용하여 이메일 생성 프로세스를 더욱 간소화합니다.

가격: 무료 | 추가 정보

Foundation for Email을 사용하여 현대적인 디자인을 만드는 방법(4단계)

언급했듯이 Foundation for Email에는 두 가지 버전이 있습니다. 이 섹션에서는 설정 작업이 덜 필요하기 때문에 CSS 변형을 사용할 것입니다. 또한 최종 결과는 동일해야 합니다. 변경 사항은 도달 방법뿐입니다.

Sass 버전이 실제로 작동하는지 확인하거나 사용 방법에 대해 자세히 알아보려면 이 훌륭한 자습서로 시작할 수 있습니다.

1단계: Foundation for Email 파일 다운로드

먼저 Foundation for Email 시작하기 페이지로 이동하여 CSS 버전 부제 아래에 있는 Download Starter Kit 버튼을 클릭합니다.

Foundation for Emails 시작하기 페이지.

파일을 얻었으면 압축을 풀고 내용을 새 폴더에 추출합니다. 이 단계에서 폴더에는 index.html 파일과 두 개의 하위 폴더가 있어야 합니다. 하나는 CSS용이고 다른 하나는 템플릿용입니다.

지금은 즐겨 사용하는 텍스트 편집기를 실행하고 index.html 파일을 엽니다. 그것은 꽤 맨손이어야하지만 우리는 잠시 후에 그것을 고칠 것입니다.

2단계: 그리드 시스템에 익숙해지기

Foundation for Email의 응답성은 유연한 그리드 시스템을 기반으로 합니다. 이메일을 처음부터 모으는 경우 이메일 섹션을 분할하기 위해 자체 그리드를 만들고 싶을 것입니다. 이를 위해 컨테이너, 행 및 열의 세 가지 구성 요소를 사용합니다.

텍스트 편집기에서 Foundation의 index.html 파일을 열고 본문 섹션까지 아래로 스크롤합니다.

<body>
<!-- <style> -->
<table class="body" data-made-with-foundation>
<tr>
<td class="float-center" align="center" valign="top">
<center>
<!--  Your grid goes here  -->          
</center>
</td>
</tr>
</table>
</body>
</html>

보시다시피 이메일 본문에는 우리가 건드리지 않을 사전 설정된 표가 있습니다. 대신에 <!– 귀하의 그리드가 여기에 갑니다 –> 라는 섹션에 자체 그리드 요소를 추가하기만 하면 됩니다. 컨테이너에 사용해야 하는 코드부터 시작하겠습니다.

<table class="container">
<tr>
<td></td>
</tr>
</table>

이제 행을 추가해 보겠습니다.

<table class="row"> <tr> <th></th> </tr> </table>

마지막으로 해당 행을 열로 나눌 수 있습니다.

<table class="row">
<tr>
<th class="small-12 large-6 first columns">
Column One
</th>
<th class="expander"></th>
</tr>
</table>

각 행은 최대 12개의 열로 구성됩니다. 위의 코드는 모바일 장치( small-12 )와 같은 작은 화면에서 전체 12개 열을 사용하여 콘텐츠를 표시해야 하지만 데스크톱( large-6 )에서는 6개만 차지해야 한다고 이메일 클라이언트에 알려줍니다.

문제는 이메일이 큰 화면에 표시되는 경우 6개의 빈 열이 있으므로 이를 수정하기 위해 두 번째 테이블을 추가해야 한다는 것입니다.

<table class="row">
<tr>
<th class="small-12 large-6 first columns">
Column One
</th>
<th class="small-12 large-6 last columns">
Column Two
</th>
<th class="expander"></th>
</tr>
</table>

보시다시피 두 열은 기본적으로 동일합니다. 그러나 첫 번째 열과 마지막 열 이라는 두 가지 다른 클래스가 있습니다 . 이것은 행의 첫 번째 열과 마지막 열이 무엇인지 이메일 클라이언트에 알리고 그 사이의 열은 사용할 필요가 없습니다.

이제 브라우저에서 index.html 파일을 열면 다음과 같이 표시됩니다.

기본 그리드 시스템 예.

그것은 꽤 맨손입니다. 그렇습니다. 그러나 이 단계에서 역학은 분명해야 합니다. 각 이메일은 원하는 만큼의 행을 가질 수 있으며 각 행에 대해 최대 12개의 열을 가질 수 있습니다. 지금은 원하는 레이아웃을 찾을 때까지 그리드 시스템을 계속 사용하고 요소를 추가하기 시작할 때까지 텍스트 자리 표시자를 사용하여 식별하는 데 도움을 줍니다.

3단계: 이메일에 구성 요소 추가

Foundation for Email은 많은 구성 요소로 구성되어 있으며 가장 일반적으로 사용되는 것은 버튼, 배경 이미지 및 부제목입니다. 매우 간단하므로 순서대로 살펴보겠습니다. 버튼을 추가하려면 하나 이상의 열에서 다음 코드를 사용해야 합니다.

<table class="button tiny success">
<tr>
<td>
<table>
<tr>
<td><a href="#">The text of your button</a></td>
</tr>
</table>
</td>
</tr>
</table>

이 코드는 이메일에 녹색 배경의 간단한 작은 버튼을 추가합니다. 여기서 핵심 요소는 소규모 및 성공 클래스입니다. 첫 번째는 버튼의 크기를 제어하고 두 번째는 색상을 제어합니다. 여기에 사용 가능한 모든 클래스를 추가하는 대신 여가 시간에 읽을 수 있는 버튼에 대한 재단의 공식 리소스에 연결하겠습니다.

이제 배경 이미지로 넘어 갑시다. 래퍼 클래스를 사용하여 행의 전체 너비를 차지하고 CSS를 사용하여 특정 배경을 할당해야 하기 때문에 이것들은 조금 더 까다롭습니다.

<table class="wrapper" align="center">
<tr>
<td class="wrapper-inner">
Your content
</td>
</tr>
</table>

마지막으로 소제목에 대해 이야기해 보겠습니다. 이것들은 무리 중 가장 간단합니다. 필요한 태그 내에서 텍스트를 래핑하기만 하면 됩니다.

<h1>h1. This is a very large header.</h1>
<h2>h2. This is a large header.</h2>
<h3>h3. This is a medium header.</h3>

그것만큼 쉽습니다! 이 세 가지 요소를 사용하면 멋진 이메일을 만들 수 있습니다. 물론 비밀은 CSS를 사용하여 원하는 대로 스타일을 지정하는 것이므로 최종 단계로 넘어갑니다.

4단계: CSS를 사용하여 이메일 스타일 지정

일부 이메일 클라이언트(예: Microsoft Outlook)는 HTML 파일에서 일부 스타일 태그를 제거합니다. 이는 이메일이 문제 없이 렌더링되고 잠재적인 보안 위협을 제거하기 위해 수행됩니다. 그러나 결과는 CSS를 HTML에 직접 추가(또는 인라인 )하지 않는 한 이메일이 꽤 지루해 보일 것입니다.

그렇게 하면 콘텐츠와 스타일이 모두 단일 파일로 로드되며 대부분의 최신 이메일 클라이언트에서 완벽하게 작동합니다. 인라인 CSS가 있는 HTML 요소는 다음과 같습니다.

<table class="wrapper" align="center"><tbody><tr><td class="wrapper-inner" style="padding:20px">content</td></tr>

이것은 약간 지저분해질 수 있으므로 HTML 및 CSS 파일을 별도로 작업한 다음 Foundation Inliner와 같은 도구를 사용하여 결합하는 것이 좋습니다. 코드를 붙여넣고 버튼을 클릭하기만 하면 나머지는 자동으로 처리됩니다.

인라인 HTML 파일이 있으면 구독자에게 보내기 전에 항상 좋은 생각인 이메일 마케팅 도구를 사용하여 테스트할 수 있습니다.

결론

기능적이고 반응이 빠른 이메일을 만드는 방법에는 여러 가지가 있습니다. 그러나 유연성을 찾고 있다면 Foundation for Emails와 같은 프레임워크를 사용하는 것이 좋습니다. 사전 구축된 구성 요소를 사용하여 처음부터 이메일을 디자인하거나 템플릿을 사용하여 프로세스 속도를 높일 수 있습니다. 무엇을 선택하든 이메일 작성에 소요되는 시간을 크게 줄여야 합니다.

요약하자면, Foundation for Emails를 사용하여 최신 이메일을 만드는 데 필요한 4단계는 다음과 같습니다.

프레임워크의 파일을 다운로드합니다.
그리드 시스템을 숙지하십시오.
이메일에 구성 요소를 사용하십시오.
CSS를 사용하여 이메일 스타일을 지정하십시오.

Foundation for Emails 프레임워크를 사용하는 방법에 대해 질문이 있습니까? 아래 댓글 섹션에서 문의하세요!

Faberr Ink/Shutterstock.com의 기사 축소판 이미지.