현재 HTML 이메일 개발 워크 플로우

HTML 이메일 개발 워크 플로 : 효율성 향상을위한 실용 가이드

각 웹 개발자는 선호하는 편집자, 보조 도구, 개인 프로젝트 프로세스 등 자신의 고유 한 작업 방식을 가지고 있습니다. 크거나 복잡한 프로젝트의 경우 명확한 개발 경로가 중요하므로 시간을 절약하고 오류를 최소화합니다.

이것은 내 경험에 따라 HTML 이메일 프로젝트에서 특히 중요합니다. 이메일에는 특히 복잡하지 않은 많은 반복적 인 작업이 필요하지만 (적어도 항상 그런 것은 아니지만) 점검 해야하는 많은 요소와 작업으로 인해 까다로울 수 있습니다.

여기서 나는 개인 HTML 이메일 개발 워크 플로를 설명하려고 노력할 것입니다. 나는 당신이 그들에게서 좋아하는 섹션을 선택할 수 있기를 바랍니다.

키 포인트

저자는 HTML 이메일 프로젝트에서 명확한 개발 경로의 중요성을 강조하여 시간을 절약하고 많은 반복적 인 작업으로 인한 오류를 최소화합니다.

HTML 용 Jade 및 CSS의 경우 적은 전처리를 사용하면 특히 중첩 테이블 측면에서 긴 코드의 필요성을 줄임으로써 개발 프로세스를 단순화 할 수 있습니다. Codekit 및 Coda와 같은 도구를 사용하여 파일을 컴파일하고 미리보기 작업을 실시간으로 사용하는 것이 좋습니다.

GULP 이메일 빌더 패키지를 사용하여 CSS 파일을 인라인 또는 임베드, Litmus API로 테스트하고 추가 테스트 이메일을 보내는 등의 마지막 몇 단계를 자동화하는 것이 좋습니다. 좋은 HTML 이메일 개발 워크 플로우는 생산성을 크게 향상시킬 수 있습니다. 저자의 워크 플로에는 로컬 테스트 생성, CSS 인라인 및 Gulp 이메일 빌더를 사용한 자동 테스트가 포함됩니다. 이러한 단계를 사용자 정의하는 것은 귀하의 개인적인 취향과 요구에 맞게 권장됩니다.

일반적인 이메일 개발 워크 플로
고전적인 이메일 개발 워크 플로는 세 가지 주요 단계로 구성됩니다.
• 창조 (예비 지역 테스트를 수행) CSS 인라인
• 테스트
최종 테스트 (인라인 CSS 사용)는 여러 번 반복해야 할 수 있으므로 가장 시간이 많이 걸리는 단계입니다. "CSS Inline"및 "Test"작업에는 추가 작업 및주의가 필요합니다. 첫째, 원래 작업 사본을 인라인 사본과 구별해야합니다. 또한 최종 테스트를 통해 다양한 이메일 클라이언트에 대한 디자인을 확인하기 위해 Inline HTML을 다양한 계정으로 보내야합니다.

대부분의 고객은 HTML 코드를 신체에 붙여서 이메일을 작성할 수 없기 때문에 이메일로 코드를 전송하는 것은 약간 까다 롭습니다. 그러나 모든 테스트는 이메일, 인라인 CSS, 페이스트 코드 등을 작성하기 위해 많은 작업이 필요합니다.

테스트 베드 계정 (Litmus, Acid on Acid, Campaign Monitor 또는 기타)이있는 경우, 인라인 코드를 테스트 베드에 제출하여 최종 테스트 작업을 단순화 할 수 있지만보다 정확한 테스트를 위해서는 여전히 코드를 보내야합니다. 우편. 과거에는 작은 PHP 스크립트를 사용하여 테스트 이메일을 보내서 시간을 절약했지만 여전히 특정 작업의 반복이 필요했습니다.

CSS로 돌아 가면 두 개의 파일에서 작업해야 할 수도 있습니다. 하나는 인라인과 하나는 미디어 쿼리를 지원하는 클라이언트를위한 것입니다.

CSS를 HTML 파일로 직접 편집 한 다음 인라인 도구 (예 : MailChimp Inline 도구와 같은)를 시작하고 마지막으로 두 번째 CSS를 인라인 파일에 포함시켜야합니다 (그냥 작성하는 것이 성가신 느낌이 듭니다!).

이제 우리는 이제 워크 플로 계획을 더 자세히 검토 할 수 있습니다.

진정으로 효율적인 워크 플로우를 얻으려면 많은 문제가 해결되지 않은 상태로 남아 있으며 창의적인 단계보다 훨씬 반복적 인 단계로 결과가 거의 발생하지 않습니다.

운 좋게도, 우리는 여전히 전처리 및 작업 러너의 몇 가지 방법이 있습니다.

HTML 및 CSS Preprocessor를 추가하십시오 전처리기를 시작했을 때 이메일 개발에 얼마나 유용한지를 즉시 깨달았습니다. HTML 및 CSS 모두 사전 처리기는 긴 코드 (특히 HTML)의 필요성을 쉽게 단순화 할 수 있습니다.

나는 주로 HTML에 Jade를 사용하고 CSS에는 적은 비용을 사용하지만 원하는 기술을 선택할 수 있습니다. Jade는 중첩 테이블과 같은 중복 및 혼란스러운 코드를 처리 할 때 매우 유용합니다. 다음 3 계층 중첩 테이블 예제를 참조하십시오.

동일한 코드를 생성하는 Jade 코드는 다음과 같습니다. <p> <see> 알 수 있듯이, 더 이상 탈수 된 태그에 문제가 없으며 코드를 읽기 쉽습니다. </see></p> Jade를 사용하면 복잡한 템플릿을 만들고 더 많은 프로젝트에서 코드를 재사용하기 위해 고유 한 코드 스 니펫 라이브러리를 만들 수 있습니다. 적거나 Sass의 경우, 당신은 똑같이 할 수 있습니다. <p> <ile>는 Gulp 또는 Grunt로 파일을 컴파일 할 수 있지만 작업을 빠르게 미리 볼 수 있도록 Coda와 Codekit이 최상의 솔루션을 제공한다는 것을 알았습니다. </ile></p> <test> 워크 플로의 "로컬 테스트"작업은 작업에 대한 초기 피드백을 제공하며 결정적으로는 다른 조치가 필요하지 않습니다. <p> <comp> Codekit은 저장시 Jade 및 적은 파일을 컴파일하고 프로젝트를 실시간으로 미리 볼 수 있습니다. 반면에 Coda는 파일을 편집하고 별도의 창에서 자동으로 컴파일 된 파일을 미리 볼 수 있습니다. <strong> </strong> </comp></p> <p> <steps>이 모든 단계는 완전히 자동화되어 있으며, 덜 재미 있고 반복적 인 작업보다는 디자인에 작업을 집중시킬 수 있습니다. </steps></p> <j> 이제 우리는 생성을위한 Jade 및 적은 파일을 보유하고 있으며 미리보기를 위해 HTML 및 CSS 파일을 컴파일했습니다. 다음 단계는 최종 테스트를 위해 모든 것을 정리하는 것입니다. <p> Gulp 를 사용한 빠른 테스트 <at> 나는 워크 플로의 마지막 몇 단계를 자동화하기 위해 많은 gulp 또는 grunt 스크립트를 보았습니다. NPM은 많은 솔루션을 제공하지만 결국 Gulp 이메일 빌더 패키지를 선택했습니다. 이 패키지는 더 큰 프로젝트의 GULP 버전이며, 원하는 경우 Grunt 버전도 있습니다. <p> <der> 이메일 빌더를 사용하면 CSS 파일을 인라인 또는 포함시키고 Litmus API를 사용하여 테스트하고 추가 테스트 이메일을 보낼 수 있습니다. <strong> <bu> 이메일 빌더를 사용하려면 물론 Gulp를 설치해야합니다. 나는 이것을 내 게시물 "Gulp로 Bootstrap 아이콘 사용자 정의"에서 다루었으므로 게시물을 확인할 수 있습니다. 또한 Gulp 및 Grunt Workflows에 대한 Etienne Margraff의 기사를 읽을 수 있습니다. </bu></strong> <email> 이메일 빌더 외에도 Gulp-Replace 패키지도 사용하므로 설치해야합니다. </email></der></p> <gul> 모든 gulp 작업과 마찬가지로 Gulpfile.js를 설정해야합니다. <p> <include> 먼저, 우리는 필요한 모든 패키지를 포함하고 4 가지 변수를 설정합니다. </include></p> <ate> current_date는 현재 날짜를 나타내는 문자열입니다. <p> <ub> email_subject <g> remote_imgs_basepath는 이미지를 포함하는 원격 폴더의 URL입니다. 이미지의 상대 경로를 설정하여 (필요한 모든 변경을 쉽게 변경할 수 있도록) 로컬 테스트를 수행하는 데 사용하지만 최종 테스트 (및 Send Task)에는 이미지를 원격 폴더에 업로드해야하므로 사용합니다. gulp 교체 모든 SRC 속성이 remote_imgs_basepath로 변경하십시오. <u u> email_builder_options </u></g></ub></p> 이 예에서는 email_builder_options 객체에는 세 가지 요소가 있으며 이메일 빌더 코어 페이지에서 사용 가능한 모든 옵션의 전체 목록을 확인할 수 있습니다. <p> <enc> 최초의 요소 인코딩 차단은 모든 특수 문자가 HTML 숫자 형태로 인코딩되도록합니다. </enc></p> <element> 이메일 테스트 요소는 이메일 테스트를 설정하는 데 사용됩니다. 일부 매개 변수가 필요합니다 : <p> </p> <a> 이메일 : 테스트 이메일을 보내는 Comma 분리 이메일 주소. 웹 메일 페이지 및 모바일 앱에서 신속하게 확인하기 위해 테스트 해야하는 모든 이메일 서비스 (Gmail, Outlook, Yahoo 등)에 대한 계정이 있습니다. <p> <subject> 주제 : 메일의 주제 (현재 _Date 변수를 추가하여 작업중인 버전을 신속하게 식별했습니다). </subject></p> <send> 전송 : 발신자는 매개 변수를 수행해야합니다 <pre class="brush:php;toolbar:false">&lt;code class=&quot;language-html&quot;&gt;&lt;table&gt; width=&quot;100%&quot; id=&quot;wrapper&quot;&gt; &lt;tbody&gt;&gt; &lt;tr&gt;&gt; &lt;td&gt; width=&quot;100%&quot;&gt; &lt;table&gt; align=&quot;center&quot; class=&quot;header&quot;&gt; &lt;tbody&gt;&gt; &lt;tr&gt;&gt; &lt;td&gt; width=&quot;100%&quot;&gt; &lt;table&gt; width=&quot;100%&quot;&gt; &lt;tbody&gt;&gt; &lt;tr&gt;&gt; &lt;td&gt;&gt;cell 1&lt;/td&gt;&gt; &lt;td&gt;&gt;cell 2&lt;/td&gt;&gt; &lt;td&gt;&gt;cell 3&lt;/td&gt;&gt; &lt;/tr&gt;&gt; &lt;/tbody&gt;&gt; &lt;/table&gt;&gt; &lt;/td&gt;&gt; &lt;/tr&gt;&gt; &lt;/tbody&gt;&gt; &lt;/table&gt;&gt; &lt;/td&gt;&gt; &lt;/tr&gt;&gt; &lt;/tbody&gt;&gt; &lt;/table&gt;&gt;&lt;/code&gt;</pre> <p> <g> gmail을 전송 매개 변수로 사용하는 경우 Google 계정 설정에서 "보안 앱 허용"을 활성화해야합니다. 그렇지 않으면 전송 작업이 실패합니다 (이를 위해 개인 계정을 사용하지 않는 것이 좋습니다) : </g></p> <ul><eter> 세 번째 매개 변수를 사용하면 리트머스 플랫폼에서 테스트를 설정할 수 있습니다 (물론 리트머스 계정이 필요합니다). 계정 매개 변수, 선택적 주제 (여러 테스트를 수행하는 경우 그룹화 된 테스트에 사용됨) 및 테스트 할 이메일 클라이언트 목록을 표시해야합니다. <p> <client> 클라이언트를 추가하려면 응용 프로그램 코드를 테스트하려면 해당 </client></p>를 사용해야합니다. https://litmus.com/emails/clients.xml 파일의 application_code 필드 에서이 코드를 가져올 수 있습니다 (이 파일에 액세스하려면 로그인해야 함). <p> <above> 위의 예에서, 선은 입니다 <em> <s>는 Litum에 Gmail 앱 (Android), Gmail (Explorer) 및 iPhone 5S (iOS7)를 사용하여 이메일을 테스트하도록 지시합니다. </s></em> <be> 결과는 수제 수제와 마찬가지로 리트머스에서 볼 수 있습니다. </be></above></p> <p> 물론 <if> 이메일 테스트를 수행하려면 email_builder_options에서 Litmus 매개 변수를 제거 할 수 있습니다. </if></p> <lines> gulpile의 마지막 몇 줄은 모든 작업을 수행합니다. <pre class="brush:php;toolbar:false">&lt;code class=&quot;language-html&quot;&gt;&lt;table&gt; width=&quot;100%&quot; id=&quot;wrapper&quot;&gt; &lt;tbody&gt;&gt; &lt;tr&gt;&gt; &lt;td&gt; width=&quot;100%&quot;&gt; &lt;table&gt; align=&quot;center&quot; class=&quot;header&quot;&gt; &lt;tbody&gt;&gt; &lt;tr&gt;&gt; &lt;td&gt; width=&quot;100%&quot;&gt; &lt;table&gt; width=&quot;100%&quot;&gt; &lt;tbody&gt;&gt; &lt;tr&gt;&gt; &lt;td&gt;&gt;cell 1&lt;/td&gt;&gt; &lt;td&gt;&gt;cell 2&lt;/td&gt;&gt; &lt;td&gt;&gt;cell 3&lt;/td&gt;&gt; &lt;/tr&gt;&gt; &lt;/tbody&gt;&gt; &lt;/table&gt;&gt; &lt;/td&gt;&gt; &lt;/tr&gt;&gt; &lt;/tbody&gt;&gt; &lt;/table&gt;&gt; &lt;/td&gt;&gt; &lt;/tr&gt;&gt; &lt;/tbody&gt;&gt; &lt;/table&gt;&gt;&lt;/code&gt;</pre> <gul> 우리는 먼저 Gulp에게 explore_and_taste.html 파일을 사용하여 우리의 작업을하도록 Gulp에게 말했습니다 (이것은 Jade 파일에서 Codekit에서 생성 한 html입니다. 첫 번째 미리보기에 사용했습니다) <p>. </p> 교체 모듈을 사용하여 모든 로컬 경로는 이전에 설정 한 원격 경로로 대체됩니다 (/src = "imgs // g, 'src ="'remote_imgs_basepath)) . <ute> 마지막으로, 이메일 빌더 작업을 실행하고, 테스트를 리트머스 및 이메일 주소로 보내고, 준비된 파일을 등록하십시오. <p> </p> <c> CSS 파일은 어디에 있습니까? <p> <der> 이메일 빌더는이 작업을 실제로 단순화합니다. 링크 또는 스타일 태그에 데이터 속성을 추가하여 간단히 관리 할 수 ​​있습니다. <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174027350388373.jpg" class="lazy" alt="My Current HTML Email Development Workflow "> 데이터 속성이없는 링크 또는 스타일 태그는 가 인쇄됩니다. <data> 데이터 멤버 속성이 있으면 CSS 규칙에 포함됩니다 . 마지막으로, 데이터 엠제이드-디너를 사용하면 개발 목적으로 만 일부 CSS 규칙을 설정할 수 있습니다 (처리 된 경우 무시됩니다). <p> </p> 마찬가지로 Coda는 Gulp 처리를 단순화하여 내부 터미널 응용 프로그램을 사용할 수 있습니다. <p> </p> 결론 <ul> <li> <finally> 이제 우리는 마침내 워크 플로를 다시 예약 할 수 있습니다 : </finally> </li> <li> <ize> 필요에 따라 각 단계를 사용자 정의하고 Codekit 대신 다른 편집기를 사용하고 Gulp 대신 Grunt를 사용하고 더 적은 대신 Sass를 사용하십시오. 어떤 기술을 선택하든 그러한 워크 플로는 실제로 생산성을 높일 수 있습니다. <em> <your> 자신의 HTML 이메일 워크 플로우 와이 튜토리얼에서 다루는 것과 어떻게 다른지, 의견에 알려주십시오. </your></em> </ize> </li> HTML 이메일 개발에 대한 자주 질문 <li> </li> <best> HTML 이메일 개발의 모범 사례는 무엇입니까? <h3> <l> HTML 이메일 개발은 코딩 및 설계 원칙에 대한 심층적 인 이해가 필요한 복잡한 프로세스입니다. 일부 모범 사례에는 인라인 CSS를 사용하여 스타일을 올바르게 적용하고 테이블을 사용하여 모든 이메일 클라이언트와의 호환성을 보장하고 여러 플랫폼 및 장치에서 이메일을 테스트하여 어디에서나 좋아 보이는지 확인하는 것이 포함됩니다. 또한 코드를 간결하고 순서대로 유지하고 이미지에 Alt 태그를 사용하며 HTML 이메일을 보지 않거나 원하지 않는 사용자를위한 일반 텍스트 버전의 이메일 버전을 포함하는 것이 중요합니다. </l> </h3> <learn> HTML 이메일 개발을 어떻게 배우나요? <p> <resources> HTML 이메일 개발을 배우는 데 사용할 수있는 많은 리소스가 있습니다. Udemy와 Skillshare가 제공하는 온라인 과정은 주제에 대한 포괄적 인 소개를 제공 할 수 있습니다. 또한, Sitepoint 및 Acid의 이메일에 대한 블로그와 기사는 귀중한 팁과 통찰력을 제공 할 수 있습니다. 연습도 중요합니다 - 프로세스를 이해하기 위해 자신의 이메일을 처음부터 작성하십시오. </resources></p> <m> 어떤 HTML 이메일 개발 도구가 필요합니까? <h3> HTML 이메일 개발에는 코드 작성 텍스트 편집기, 이메일 테스트를위한 이메일 클라이언트 및 이메일 레이아웃을 만들기위한 설계 도구가 필요합니다. 이러한 도구의 경우 무료 및 유료 옵션을 사용할 수 있으므로 귀하의 요구와 예산에 가장 적합한 옵션을 선택할 수 있습니다. </h3> <my> 내 HTML 이메일을 응답하는 방법은 무엇입니까? <p> <t> HTML 이메일 응답을 만드는 데는 미디어 쿼리를 사용하여 이메일을 보는 장치의 화면 크기를 기반으로 레이아웃을 조정하는 것이 포함됩니다. 여기에는 이미지의 크기 변경, 테이블 레이아웃 조정 등이 포함될 수 있습니다. 프로세스를 안내하기 위해 온라인으로 제공되는 많은 리소스가 있습니다. </t></p> <common> HTML 이메일 개발에서 몇 가지 일반적인 과제는 무엇입니까? <h3> <es> HTML 이메일 개발의 일반적인 과제에는 다양한 이메일 클라이언트 간의 불일치 처리, 다양한 장치에서 이메일이 훌륭하게 보이고 코드를 간결하고 순서대로 유지하는 것이 포함됩니다. 또한 매력적인 디자인 요구 사항을 이메일 코딩의 한계와 균형을 잡는 것도 어려울 수 있습니다. </es> </h3> <my> 내 HTML 이메일을 테스트하는 방법은 무엇입니까? <p> <h> HTML 이메일 테스트는 개발 프로세스의 중요한 부분입니다. 이는 자신에게 이메일을 보내고 다른 장치 및 이메일 클라이언트에서 이메일을 보면 수행 할 수 있습니다. 다양한 장치와 이메일 클라이언트를 시뮬레이션 할 수있는 온라인 도구도 있습니다. </h></p> <form> HTML 이메일 개발에서 양식을 사용하는 방법은 무엇입니까? <h3> <a> 테이블은 모든 이메일 클라이언트와 호환되는 레이아웃을 만들 수있는 방법을 제공하기 때문에 HTML 이메일 개발의 핵심 도구입니다. 여기에는 HTML 테이블 태그를 사용하여 이메일의 그리드와 같은 구조를 작성한 다음 콘텐츠를이 구조에 배치하는 것이 포함됩니다. </a> </h3> <in> HTML 이메일 개발에서 인라인 CSS를 사용하는 방법은 무엇입니까? <h3> <s> 인라인 CSS에는 별도의 스타일 시트가 아닌 HTML 태그에 CSS 스타일을 직접 배치해야합니다. 일부 이메일 클라이언트는 외부 스타일 시트를 지원하지 않기 때문에 HTML 이메일 개발에서 중요합니다. 인라인 CSS를 사용하려면 HTML 태그의 "스타일"속성에 스타일을 포함하십시오. </s> </h3> <images> 내 HTML 이메일에 이미지를 포함시키는 방법은 무엇입니까? <p> "IMG"태그와 "SRC"속성을 사용하여 이미지의 URL을 지정하여 HTML 이메일에 이미지를 포함시킬 수 있습니다. "ALT"속성을 포함하여 이미지를보고 싶지 않은 사용자에게 이미지에 대한 텍스트 설명을 제공하는 것이 중요합니다. </p> <a> HTML 이메일의 일반 텍스트 버전을 만드는 방법은 무엇입니까? <h3> <text> HTML 이메일의 일반 텍스트 버전 생성에는 모든 HTML 태그를 제거하고 텍스트 내용 만 남기는 것이 포함됩니다. 이것은 수동으로 수행 할 수 있거나이를 수행 할 수있는 온라인 도구가 있습니다. 이메일이 포함 된 일반 텍스트 버전은 HTML 이메일을 보지 않는 사용자에게 중요합니다. </text> </h3></a></images></in> </form></my></common></my></m></learn></best> </ul></data></der></p></c></ute></gul></lines></eter></ul></send></a></element></ate></gul></at></p></j></test>

위 내용은 현재 HTML 이메일 개발 워크 플로우의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!