이메일과 HTML: 피해야 할 10가지 실수

게시 됨: 2019-12-03

이 기사에서

다음은 HTML 코드와 밀접하게 관련된 것부터 이미지의 민감한 주제와 관련된 것까지 이메일을 만들 때 저지를 수 있는 가장 큰 실수의 목록입니다.

모바일에 완벽하게 최적화된 효과 적이고 완벽한 이메일을 만드는 것이 웹 디자이너와 코더의 특권입니까? 우리를 위해 코드를 작성하는 최신 드래그 앤 드롭 편집기의 출현 덕분에 더 이상은 아닙니다. 그러나 기본적인 HTML 및 CSS 지식을 갖추는 것은 이메일 마케팅에 종사하는 사람들에게 기본적인 기술입니다.

이것이 우리가 이메일 세계의 좀 더 기술적인 측면 에 초점을 맞추고자 한 이유입니다. 우리는 종종 어둠 속에 남아 있지만 전략의 성공에 근본적으로 중요한 것들을 조사할 것입니다.

#1 지나치게 장황한 코드 사용

어떤 면에서 HTML과 CSS 태그는 동일한 기능을 수행합니다. HTML과 CSS 모두 에서 테이블의 배경색을 설정하는 실용적인 예를 살펴보겠습니다.

주황색은 두 가지 점에서 배경에 대해 정의 됩니다.

bgcolor="#e75c00" (태그 테이블에서);
배경색 (CSS에서).

이 두 속성 은 동일한 작업을 수행합니다 . 주황색 배경을 명령합니다. 그것들은 중복되어 동일한 기능을 수행하는 중복 속성으로 이메일 을 무겁게 만듭니다.

권장 사항:

코드를 최대한 깔끔하게 유지
불필요한 반복을 피하라
들여쓰기를 통해 코드를 가능한 한 순서 대로 유지하십시오(HTMLformatter 또는 Clean CSS와 같이 이를 수행하는 여러 온라인 서비스가 있음). 통신 구조의 개요를 볼 수 있습니다.
템플릿에 대한 매크로 변경 기록을 추적합니다.

#2 코드에 과도한 주석 달기

대부분의 언어와 마찬가지로 HTML에 주석을 추가하여 작성된 코드에 " 서비스 커뮤니케이션 "을 추가하거나 단순히 완료하거나 개선해야 할 사항에 대한 " 메모 "를 추가하는 것도 가능합니다.

댓글은 유용할 수 있지만 남용 하지 마십시오. 이메일 수신자는 댓글을 볼 수 없지만 댓글은 커뮤니케이션에 남아 있어 부담이 됩니다.

#3 이메일 내용을 정의하지 않음

이메일을 디자인할 때 코드를 작성하기 전에도 후속 커뮤니케이션을 위한 지침 역할을 하고 구현 단계에서 수정해서는 안 되는 몇 가지 매개변수 를 정의하는 것을 항상 기억하십시오.

몇 가지 매개변수를 살펴보겠습니다.

이메일 너비
이미지 크기
이미지 수
헤더에 사용된 글꼴 크기
기본 텍스트의 글꼴 크기입니다.

이소룡의 말을 인용하자면 “ 내용은 물과 같아서 컵에 물을 넣으면 컵이 됩니다. 병에 물을 넣으면 병이 된다."

따라서 텍스트, 이미지 또는 클릭 유도문안은 구조에 맞게 조정되어야 하며 그 반대도 마찬가지 입니다.

권장 사항:

템플릿의 모든 부분 정의
커뮤니케이션의 서로 다른 부분 간에 일관성 유지
자신에게 주어진 규칙을 존중하십시오
규칙은 어길 수 있지만 이것은 완전히 인식하고 이루어져야 합니다.
템플릿이 요구 사항을 충족하지 않으면 새 템플릿을 정의하는 것이 좋습니다.

#4 전화번호 및 대화형 주소가 잘못되었습니다.

아시다시피 많은 회사에서 바닥글에 연락처 정보 를 포함합니다. 이는 특히 모바일에서 주소와 전화번호와 관련하여 중요한 요소입니다. 왜요?

실행 가능하다 정보: 데이터(캘린더, 전화, 내비게이터)를 관리할 앱을 열려면 클릭만 하면 됩니다.
디스플레이 공간이 줄어듭니다 .

문제는 종종 보기 흉한 파란색 링크 와 임의의 밑줄 사이의 그래픽 렌더링 입니다.

이러한 그래픽 차이를 극복하기 위해 작은 해결 방법 을 사용하여 HTML 코드의 일부 규칙을 위반할 수 있습니다.

전화번호 의 경우 간단합니다. 앵커 태그를 사용하면 href 속성에서 tel을 사용하여 전화번호를 정의할 수 있으므로 공백이나 선을 구분하지 않고 전화번호를 추가합니다.

대신 주소 또는 날짜를 다르게 처리해야 합니다. 이를 위해 앵커 태그를 부과하는 클래스(주소)를 정의하여 클라이언트 내에 자동으로 색상을 삽입해야 합니다(color: #ffffff;). 무엇보다 각 링크의 기본 기능인 밑줄을 제거해야 합니다(text-decoration:none;). 주소 클래스의 두 속성에는 속성에 관계없이 클라이언트가 적용해야 하는 !important 가 있습니다. 이것이 없으면 해결 방법이 제대로 작동한다는 보장이 없습니다.

#5 버려진 태그나 빈 태그를 정리하지 않음

이메일의 전체 무게를 최소로 유지하려는 목표를 계속 유지 하면서 기존 코드에서 더 이상 내용이 없는 부분에 주의를 기울이십시오 . 예가 필요하십니까? 어떤 텍스트도 포함하지 않는 일련의 인라인 스타일이 있는 <font> 태그. 이메일에서 아무 것도 읽지 않지만 태그는 계속 존재하여 이메일을 불필요하게 무겁게 만듭니다.

#6 검증되지 않은 HTML 사용

코드 유효성 검사는 디자이너와 개발자가 CSS(Cascading Style Sheet)를 확인할 수 있도록 W3C 에서 만든 무료 응용 프로그램입니다.

W3C는 오류 를 표시하고 수정 사항을 제안함으로써 우리를 돕습니다. 이 도구 덕분에 더 큰 구조적 오류를 식별하고 수정할 수 있습니다.

W3C 표준에 최대한 가까운 깨끗한 코드를 갖는 것이 합리적이지만 이것이 항상 가능한 것은 아니며 회사는 종종 견고한 구조에 일련의 해결 방법 을 추가해야 합니다. 가능한 한 많은 클라이언트에게 올바른 디스플레이를 제공합니다.

#7 너무 무거운 이미지 사용

우리는 모두 이메일에 그래픽 이 표시되는 방식과 수신자에게 미치는 영향에 대해 주의를 기울이고 있습니다. 그러나 이메일이라는 매체가 고려되지 않는 경우 이 모든 주의가 무효화될 수 있습니다.

특히 대역폭 이 무한하지 않기 때문에 지나치게 무거운 이미지를 삽입하지 않는 것이 중요합니다.

몇 가지 권장 사항:

약 50KB 의 최대 가중치 유지
이미지 해상도가 72dpi 인지 확인하십시오.
JPG, GIF, PNG 형식으로 이미지 저장

#8 지나치게 무거운 이메일

마케터는 종종 다른 목적이나 다른 지원 (광고 캠페인, 웹사이트 등)을 위해 만든 이미지를 이메일에 삽입합니다. 특정 예방 조치를 취하지 않으면 이러한 이미지의 높이 와 너비 가 이메일 내에서 작동하지 않습니다.

HTML 태그 img 이미지의 높이와 너비를 정의할 수 있도록 하여 최적화하는 데 도움이 됩니다. 예를 들어 다음 코드 줄은 높이를 123픽셀로 설정하고 너비를 456픽셀로 설정합니다.

<img src=”[percorsoImmagine]” 높이=”123″ 너비=”456″>

매개변수가 설정되면 실제 크기에 관계없이 이미지가 지정된 높이와 너비로 브라우저에 표시됩니다.

#9 최적화되지 않은 애니메이션 GIF 삽입

애니메이션 GIF는 확실히 메시지에 많은 강조점을 더합니다. 즉, 주의를 끌기 위한 매우 효과적인 수단입니다. 또한 이메일에 삽입하는 것은 매우 간단합니다.

그러나 애니메이션 GIF의 크기는 애니메이션 의 프레임 수와 크기에 따라 급격히 증가한다는 점을 고려하면 매우 주의해야 합니다 .

그러나 무엇보다도 일부 클라이언트는 애니메이션을 전혀 볼 수 없기 때문입니다. Outlook 2007-2013 은 첫 번째 프레임 만 표시합니다. 그러면 우리는 무엇을 해야 합니까? 애니메이션이 활성화되지 않은 경우에도 메시지를 이해할 수 있도록 첫 번째 프레임이 포괄적이고 완전해야 합니다.

#10 이미지의 대체 텍스트를 잊어버리기

아시다시피 기본적으로 일부 이메일 클라이언트 는 이미지를 표시하지 않지만 많은 사용자가 (여러 가지 이유로) 이미지 를 비활성화하는 것을 선호하기 때문에 그게 전부는 아닙니다.

이러한 상황을 버퍼링하는 방법은 무엇입니까? 몇 가지 코드 속성 :

title , 마우스 포인터가 이미지 영역(마우스오버) 위에 있을 때 이미지의 내용을 표시할 수 있습니다.
alt 이미지가 업로드되지 않은 경우 표시할 텍스트를 정의합니다(대체 텍스트).

권장 사항:

이미지에 항상 alt 및 title 속성이 설정되어 있는지 확인하십시오.
삽입된 텍스트를 너무 길게 만들지 마십시오. 커뮤니케이션 레이아웃(alt의 경우)을 망치거나 사용하기 어려울 수 있습니다(제목의 경우).
특히 배경색이 있는 경우 대체 텍스트의 색상이 크기와 색상 면에서 모두 쉽게 읽을 수 있는지 확인하십시오.
통신 내에서 기능을 쉽게 인식할 수 있도록 대체 텍스트에 링크에 밑줄을 긋는 것이 좋습니다.