완벽한 HTML 뉴스 레터를 디자인하는 9 가지 기법

전자 우편 뉴스 레터는 고객 또는 추종자들과 연락을 유지하는 가장 좋은 방법입니다. 종종 회사 나 웹 사이트에는 수많은 제품 업데이트 또는 예정된 예정된 이벤트가 있습니다. 블로그 또는 소셜 미디어 스트림에 항상 새로운 정보를 게시 할 수 있지만 잠재 고객은 지금까지만 정보를 얻을 수 있습니다. 이 경우 전자 메일은 확실히 죽은 기술이 아니며 단순히 잠재 된 기술입니다..

뉴스 레터를 만들고 보내는 과정은 생각보다 훨씬 쉽지만 맞춤 템플릿을 디자인하고 나만의 코드를 작성하는 것이 더 오래 걸릴 수 있습니다..

예전과 같이 고품질의 HTML 뉴스 레터를 디자인 할 수있는 환상적인 팁을 모았습니다. 비록 당신이 주제에 초보자 인 경우에 당신은 확실하게 당신을 전자 우편 매매 과정에서 시작되는 얻는 몇몇 귀중한 정보를 찾아 낼 것이다.

뉴스 레터의 목표

디자인 측면에 들어가기 전에 뉴스 레터 작성의 목적을 분명히해야합니다. 귀하가 운영하는 웹 사이트 유형에 따라 뉴스 레터에 포함 된 정보가 다른 정보와 크게 다를 수 있지만 뉴스 레터의 핵심 목적 독자의받은 편지함에 바로 편리한 업데이트를 전달하는 것입니다..

중무장 인터넷 사용자는 하루에 두 번 이상 전자 메일을 확인합니다. 끊임없이 바쁜 사람들조차도 적어도 하루에 한 번씩 메시지를 전달할 시간을 갖습니다. 이것은 완벽한 시간입니다. 주의를 끌다 귀하의 사이트를 방문하지 않아도됩니다. 아무도 귀하의 링크를 클릭하지 않아도 정보는 여전히받은, 브랜드 이름을 짓는 데 적합합니다..

디자인에서 제공해야하는 주제를 고려하십시오. 귀하는 귀하의 서비스 가입을위한 링크를 포함하고 있습니까? 블로그 링크 또는 가장 최근에 게시 한 기사를 사이트에 게시 하시겠습니까? 뉴스 레터의 레이아웃은 독자가 응답하기를 원하는 방식을 반영하지만 궁극적으로 관심사를 끌어 올려 대중에게 흥미로운 정보를 전달할 것입니다..

1. 레이아웃에서 테이블 활용하기

이것은 오늘날의 웹 표준과 약간 모순되는 것처럼 보일지 모르지만 전자 메일은 여전히 렌더링 엔진에 고풍 스럽습니다. 따라서 오래된 모델로 구축해야합니다. 불행히도 테이블은 가장 쉬운 방법 다양한 전자 메일 클라이언트간에 모든 것이 올바르게 작동하도록합니다. 테이블 기반 레이아웃을 작성하는 지식에 따라 실제로 좋은 소식이 올 수 있습니다.!

왜 그런지 궁금해 할 수도 있습니다. div 그리고 다른 블록 요소들은 그렇게 좋은 생각이 아닙니다. 대부분의 전자 메일 클라이언트는 불필요한 CSS 제거 함유량. 즉, 다음을 제외하고는 다른 것을 많이 사용할 수 없습니다. 인라인 CSS (심지어 완전한 지원도 엉망입니다.) Microsoft Outlook 2007 및 Google Gmail과 같은 클라이언트는 부유 요소 및 직접 배치를 지원하지 않습니다..

가장 좋은 해결책은 서로 여러 테이블을 중첩. 패딩 및 여백은 많은 전자 메일 클라이언트간에 특정 척도로 설정되지 않습니다. 이것은 사용법에 집착하는 이유입니다. width = "값" 모든 표 셀 요소에 대해 이것들은 당신의 독자가 어떤 전자 메일 클라이언트를 사용 하든지간에 항상 같은 너비를 표시합니다. 더 안전한 과 보다 일관된 빈 테이블 셀을 사용하여 패딩 및 여백을 설정하는 방법.

2. 고정 폭 위치 지정

뉴스 레터 레이아웃의 초안을 작성할 때 몇 가지 옵션이 있지만 가장 좋은 옵션은 다음과 같습니다. 포함하는 테이블에 고정 폭을 설정하는 방법. 다양한 모니터 해상도가 있습니다 - 당신은 모두를 기쁘게 할 수 없습니다. 정적 너비가있는 특정 요소가 없으면 항상 사용할 수 있습니다. 너비 = "100 %" 귀하의 포함 된 테이블에. 이렇게하면 콘텐츠가 모든 전자 메일 클라이언트의 전체 너비를 채울 수 있습니다..

그러나, 많은이 방법을 위해 너무 조금이다. 건설 뉴스 레터 대부분의 경우 고정 너비가 필요합니다. 특히 특정 크기로 설정된 배너 및 이미지를 사용하는 경우 더욱 그렇습니다. 함께 일하는 것이 좋습니다. 500px - 600px 최대 문서 너비. iPhone 및 일부 BlackBerry 모델의 가로 화면 크기는 320px로 제한되어 있으므로 500px의 전자 메일 템플릿도 가능합니다. 적절하게 맞도록 축소.

많은 모바일 사용자가 HTML없이 전자 메일을 보는 것을 고려하면 큰 문제는 아닙니다. 데스크톱 및 웹 메일 클라이언트 사용자는 사용하는 운영 체제에 관계없이 비슷한 설정을 경험할 것입니다. 확실하지 않을 때에는 몇 가지 템플릿 디자인 만들기 과 가장 좋아하는 것을 선택하십시오.!

3. 픽셀 단위

뉴스 레터에 유체 요소를 사용하지 않는 한 몇 가지 크기를 조정해야합니다. 그것을 지키려고 노력하십시오. 픽셀 (픽셀) 다른 유형의 단위보다는 오히려. 백분율은 많은 웹 메일 클라이언트 및 소프트웨어 창과 쉽게 섞일 수 있습니다. 페이지 요소가 적을수록 몇 가지 버그가 있지만 유체 레이아웃이 손상되지 않습니다..

그러나 픽셀은 항상 확실합니다. 600px 최대 너비 제한 내에서 작업하면 실제로 많은 콘텐츠를 내부에 넣을 수 있습니다. 레이아웃을 2 열 또는 3 열로 나눠서 항상 크기를 픽셀로 작성하면 노출이 더 쉽습니다. 유일한 예외는 글꼴 크기 어디에 전자 독자를 더 잘 지원할 수 있지만 여자 이름 사이징은 비슷한 방식으로 백분율이 달라집니다. 간단하게하기 위해 픽셀 기반 정렬을 고수하십시오..

4. CSS로 가능성

그것은 CSS 스타일의 사용을 파괴하려는 전자 메일 디자인처럼 보일 수 있습니다. 지원되지 않는 기능이 많이 있지만 CSS는 여전히 많은 경우에 완벽하게 수용됩니다. 캠페인 모니터에는 전자 메일 클라이언트가 나열한 지원되는 CSS 속성 테이블이 있습니다. 모두가 다음과 같은 기본 사항을 지원합니다. 글꼴 모음 과 글꼴 스타일, 그래서 당신은 원하는 경우 태그.

경계를 너무 멀리 밀지 않도록 글꼴 스타일을 조심하십시오. 인라인 스타일에 불편 함이 느껴지더라도 HTML 글꼴 태그는 더 이상 사용되지 않을 수도 있습니다. CSS 디자이너라면 시스템을 종료 할 필요는 없지만 축약 된 CSS 코딩으로 인해 버그가 발생할 수 있습니다. 예를 들어 글꼴 : 12px / 14px Arial, sans-serif; 속기는 많은 공간을 절약하는 데 도움이 될 수 있지만 인라인 스타일과 함께 사용되는 경우에도 전자 메일 디자인에는 완전히 허용되지 않습니다..

귀하의 색상 선택조차도 필기체로 작성해야한다.. 16 진수 색상 (예 : #ccc 또는 # e3f 반드시 전체로 써야한다. #cccccc 또는 # ee33ff, 각기. CSS없이 필요한 것을 구축 할 수 있다면 그 길을 권하고 싶지만 대부분의 경우 대중적인 믿음과는 달리 전자 메일 디자인에서 CSS를 완전히 숨기지는 마십시오..

5. 앵커 링크 우수 사례

반드시 뉴스 레터에 몇 개의 링크를 포함 시키길 원할 것입니다. 이러한 링크는 웹 주변의 다른 페이지로의 아웃 바운드 링크 일 수도 있고 웹 사이트에서 가장 인기있는 페이지로 연결되는 링크 일 수도 있습니다. 또한 대부분의 바닥 글에는 구독자가 전자 메일 프로세스를 거부 할 수있는 수신 거부 링크가 포함되어 있지만 디자인에서 이러한 모든 링크를 어떻게 처리해야합니까??

전자 메일 클라이언트는 자신의 디자인에 매우 까다롭기 만합니다. 많은 사람들이 인라인 CSS를 사용하여 링크 스타일을 덮어 쓰도록 선택할 것입니다. 깔끔한 트릭은 앵커 요소 내에 인라인 색상과 추가 span 태그를 모두 포함하십시오.. 링크의 색상과 스타일이 전체 디자인에 중요 할 경우 추가 예방 조치를 취하는 것이 좋습니다. 아래에 작은 코드 예제를 추가했습니다.

일부 링크 텍스트

마우스 오버 효과는 Outlook 2007/2010, Gmail, iOS 또는 Android에서 지원되지 않음. 당신은 여전히 a : 마우스 오버 Outlook 2000/2003, Hotmail, Apple Mail 및 Yahoo! 개인적으로 앵커 선택자가 많이 지원되지 않기 때문에 부분적으로는 사용자 경험에별로 도움이되지 않습니다. 2-3 링크 색상 만 제공 디자인 전반에 걸쳐 사용.

추측으로 사용자는 또한 당신의 연결이 새로운 탭 또는 창에서 열리는 기대할 것이다. 이상적으로는 target = "_ blank" 모든 브라우저가이 기능을 인식 할 수 있도록 속성이 충분해야하며이 속성을 앵커 링크에 포함하면 Lotus Notes 또는 Outlook과 같은 전자 메일 소프트웨어에 부정적인 영향을 미치지 않습니다..

6. 모든 주요 고객에 대한 테스트

최근 가장 인기있는 전자 메일 클라이언트 (Campaign Monitor에서 수행)에 대한 연구에서 지난 해 가장 인기있는 전자 메일 클라이언트가 10 대가 표시되었습니다. 조금 지루해 보일 수도 있지만 디자이너는 모든 주요 전자 메일 클라이언트에서 뉴스 레터를 확인하는 습관을 갖춰야합니다., 최소한 Gmail, Hotmail 또는 Yahoo와 같은보다 일반적인 클라이언트 중 일부에서는 우편.

여기에는 웹 메일 만 포함되지 않고 Mac OS X 및 Windows 운영 소프트웨어가 포함됩니다. 또한 그들의 도표에 따르면 iOS Mail 과 기계적 인조 인간 지난 몇 년 동안 둘 다 톱 10리스트에 올랐다. 실제로 iPhone, iPod Touch 및 iPad Mail은 Outlook에서 가장 인기있는 # 2 순위입니다. 불행히도 장치 중 하나를 소유하지 않고 테스트 할 수있는 방법이 없습니다. 따라서 다른 옵션으로 해결해야합니다..

모바일 지원과 관련된 한 가지 버그는 많은 iPhone 및 Android 모델에서 발생합니다. 모바일 전자 메일 렌더링은 종종 템플릿 안의 텍스트 크기를 조정하십시오.. 이것은 디자인에 많은 영향을주지는 않지만 일부 독자에게는 짜증을 줄 수 있습니다. CSS 사용 -webkit-text-size-adjust : 없음;, 의지 모든 구문 분석 엔진에서 기본 텍스트 크기를 균일하게 유지합니다. 시험 할 필요없이.

대체 소프트웨어를 사용하는 친구 나 동료를 아는 경우 뉴스 레터 테스트에 도움을 청하십시오.. 당신은 그들에게 이메일 사본을 보내라. 기기를 확인하거나 장치 빌리다 적극적으로 코딩 버그를 제거합니다. 운 좋게 Outlook은 Mac 설치 버전을 제공하므로 Windows 사용자를 추적하여 최적화 할 필요는 없지만 Lotus Notes 또는 Windows Mail의 경우 운이 좋지 않을 수 있습니다..

대안은 솔루션 비용 지불 예를 들어 전자 메일 미리보기와 같이 무료 데모 계정을 제공하지는 않지만 유감스럽게도 자신의 서비스는 디자인 미리보기를 제공하는 것으로 유명합니다. Acid상의 전자 메일은 무료 계정을 제공하는 유사한 서비스이지만 모든 클라이언트에서 테스트를 수행 할 수는 없으며 어떤 종류의 목적을 달성 할 수 없습니다. 온라인 렌더링 서비스는 장기간에 걸쳐 다른 컴퓨터를 사용하지 않고 많은 뉴스 레터 템플릿을 테스트해야하는 경우 유용하지만 기본이 아니므로 유용합니다. 스트레스를받지 않는다. 당신이 그들 모두를 테스트 할 수 없다면!

7. 항상 웹 기반보기 제공

독자는 전자 메일을 기본적으로 볼 수 없거나 기꺼이 볼 수있는 것은 아닙니다.. 웹 어딘가에서 다른 버전 제공 쉽고 호환성있는 느낌을 줄 것입니다. 이 프로세스는 다음을 포함시키지 않으면 완전히 자동화 될 수 없습니다. 일반 텍스트 번역.

이렇게하면 모든 HTML 태그 제거 뉴스 레터 레이아웃에서. 무엇이든 링크 나 스타일을 포함 할 수 없습니다. 모든 콘텐츠는 간단하게 일반 텍스트 파일로 배치된다. 렌더링 기능이없는 독자에게 적합합니다. 이것은 확실히 좋은 대안이지만 동일한 뉴스 레터의 전체 웹 버전을 제공하면 렌더링 버그로 인한 피해를 없애줍니다.. 대부분의 독자는 최신 웹 브라우저를 실행하여 뉴스 레터를 스타일링하고 완성 할 수 있습니다..

페이지 설정 방법 전적으로 당신의 선택. 일부 웹 사이트는 전체 블로그 게시물을 전자 메일의 내용 복제에 전용, 어쩌면 추가 정보. 기타 내비게이션에서 직접 링크없이 주요 웹 사이트에서 별도의 페이지 만들기. 이 방법은 독자가 기본 웹 사이트 템플릿 또는 사이드 바 콘텐츠에주의를 기울이지 않으므로 유용 할 수 있습니다.

8. 이미지 내용 추가하기

이미지는 독자들에게 웹 기반 솔루션을 제공하는 또 다른 이유입니다. 기본적으로 전자 메일 클라이언트 내용에서 이미지를 제거하도록 설정되어 있습니다.. 주소가 안전한 목록에 추가되면 기본적으로 모든 이미지가 표시되지만 사용자는 이 설정을 수락해야합니다. 그래서 확실히 보장은 아닙니다. 다만 이미지가 주요 콘텐츠의 일부로 필요하지 않은지 확인하십시오., 페이지 미학을위한 추가 토핑으로 포함됨.

그래픽을 내보낼 때 전자 메일 전용 이미지를 작성하는 몇 가지 팁이 있습니다. 너는 항상 원할거야. 너비와 높이 속성을 둘 다 설정하십시오. img 태그들. 이러한 사양이없는 경우, 일부 클라이언트는 이미지 내용을 왜곡합니다.. 안 대체 태그도 유용 할 것이므로 방문자는 이미지 콘텐츠가로드되기 전에 무엇이 포함되어 있는지 알 수 있습니다..

앞서 언급했듯이 이미지를 이메일에 배치하는 것은 까다로울 수 있습니다.. 수레 사용을 피하십시오. 반드시! 이미지 align = "left" 속성이 훨씬 더 좋게 작동합니다. 정확한 표 셀을 맵핑 뉴스 레터의 왼쪽, 오른쪽 또는 오른쪽에 이미지를 맞 춥니 다. 이렇게 많은 고객 (특히 모바일 클라이언트)과 완벽한 매치업을 할 수는 없지만 이미지 최적화 과 최상의 결과를 얻으려면 파일 크기를 작게 유지하십시오..

이미지 저장과 관련하여 자신의 웹 서버에 모든 파일 보관. 다른 이미지 호스트를 사용하거나 파일을 온라인 뉴스 레터 서비스에 업로드하는 대신 더 좋은 옵션입니다. 또한 당신은 뉴스 레터의 콘텐츠를 폴더 구조의 나머지 이미지와 분리하십시오. 그렇게 / img / email 또는 / img / email / 2011.

9. 스팸 폴더 피하기!

이것은 듣기 어려울 수 있지만 모든 전자 메일 클라이언트가 뉴스 레터에 친숙하지 않습니다.. 매일 수십억 개의 전자 메일이 전송되며 대다수에는 스팸이나 악의적 인 콘텐츠가 포함되어있어 이러한 보안 조치를받은 편지함에 포함 시키면 안전을위한 예방 조치가됩니다..

그러나 인터넷 마케팅에 관해서는, 당신은 쉽게 당신의 최신 회보가 쓰레기로 끝나는 것을 보는 낙담 될 수있다. 이런 일이 발생할 확률을 줄이려면 단순화를 위해 디자인 정리. 성가신 이미지를 만들지 마라. 또는 수백 개의 키워드로 제목 텍스트를 날려 버리십시오..

또한 시도해보십시오. 귀하의 콘텐츠를 간략하게 유지하십시오.. 모든 기사 나 페이지에 대해 전체 내용을 포함 할 필요는 없습니다. 긴 목록 대신에 대체 링크가있는 문장을 웹 사이트에 추가하십시오. 그만큼 이메일을 더 간략하게 적 으면 스팸 검사를 통과 할 확률이 높습니다..