Outlook 마스터하기: 일반적인 렌더링 문제 되돌아보기

Microsoft는 이메일 업계에서 가장 큰 기업 중 하나입니다. Microsoft Outlook과 웹 기반 Outlook.com은 총 10% 이상의 시장 점유율을 보유하고 있습니다. 이것은 꽤 거대합니다!

사용자가 매우 다양한 전자 메일 클라이언트 중에서 선택할 수 있는 세상에서 Outlook은 어떻게 그렇게 인기를 유지하고 있습니까? Microsoft Office는 일반적으로 전 세계 기업의 컴퓨터에 설치되어 있을 뿐만 아니라 Windows를 실행하는 많은 가정용 컴퓨터와 랩톱에는 MS Office가 사전 설치되어 있습니다. MS Office와 함께 제공되는 기본 이메일 클라이언트는...Outlook입니다.

그리고 1996년에 Hotmail로 이메일 클라이언트로 경력을 시작한 Outlook.com이 있습니다. 1997년에 Microsoft는 Hotmail을 약 4억 달러에 인수하고 Hotmail을 MSN Hotmail로 출시했습니다. 나중에 Windows Live Hotmail로 다시 브랜드가 변경되었습니다. 마지막으로 2013년에 Hotmail은 Outlook.com으로 완전히 대체되었습니다. Outlook.com의 역사가 Hotmail과 엮여 있기 때문에 2015년 현재 Outlook.com의 활성 사용자가 4억 명이 넘는다는 사실은 놀라운 일이 아닙니다.

Outlook의 일반적인 렌더링 문제

Outlook용 이메일을 작성하는 것은 항상 어려운 일이었습니다. Outlook 2007부터 Microsoft는 Internet Explorer를 사용하여 전자 메일을 렌더링하는 것을 중단하고 대신 Microsoft Word를 렌더링 엔진으로 사용하기로 결정했습니다. Word 또는 Excel의 항목을 Outlook 전자 메일에 원활하게 복사하여 붙여넣을 수 있는 Microsoft Office 사용자를 위한 희소식입니다. HTML을 사용하여 이메일을 작성하는 이메일 마케팅 담당자와 개발자에게는 그리 좋은 소식이 아닙니다. HTML 웹 페이지를 복사하여 Word 문서에 붙여넣으면 Word에서 HTML을 번역하는 방법을 엿볼 수 있습니다.

당연히 재능 있는 이메일 개발자들은 아름다운 HTML 이메일이 Outlook에서 똑같이 아름답게 렌더링되도록 하기 위해 수많은 이메일 해킹을 개발하는 데 마법을 걸기 시작했습니다. 많은 해킹이 VML(벡터 마크업 언어)을 사용하는 경향이 있기 때문에 쉬운 작업이 아닙니다. VML은 이메일 개발을 위한 하드 노크 학교에서 배우는 경향이 없습니다!

다음은 Outlook용 전자 메일을 개발할 때 전자 메일 개발자가 직면하는 몇 가지 인기 있는 문제에 대한 간략한 설명입니다.

이메일 개발에서 테이블 사용

최신 웹 개발에서는 div와 같은 컨테이너를 사용하여 콘텐츠를 포함할 수 있으며 테이블은 테이블 형식 데이터에만 사용할 수 있습니다. 그러나 HTML 페이지 내에서 div와 같은 요소를 올바르게 배치하려면 float 및 position과 같은 CSS 속성이 필요한 경우가 많습니다.

Outlook은 이러한 특성을 지원하지 않습니다. 최대 교차 기기/클라이언트/브라우저 렌더링 가능성을 위해 이메일을 적절하게 구성하기 위해 개발자는 테이블을 사용하여 이메일을 작성합니다.

테이블은 이메일 개발자를 위해 수년 동안 작동했지만 이메일 디자인 측면에서 수행할 수 있는 작업은 제한적입니다. 디자이너는 테이블을 사용하여 디자인을 쉽게 만들 수 있도록 행과 열의 관점에서 생각해야 합니다.

VML이 있는 배경 이미지

라이브 텍스트. 라이브 텍스트. 라이브 텍스트. 이메일 마케터의 만트라입니다. 이메일에 가능한 한 많은 라이브 텍스트를 포함하여 이메일이 스팸이 아닌 받은 편지함에 도착하고 모든 사람이 액세스할 수 있으며 이미지를 끈 상태에서 읽을 수 있도록 합니다.

배경 이미지를 사용하면 패턴이든 아름다운 사진이든 상관없이 이미지 위에 라이브 텍스트를 오버레이할 수 있습니다. 배경 이미지는 액세스할 수 있으면서도 이메일 디자인에 아름다운 깊이감을 줄 수 있습니다.

그러나 Outlook은 순수 HTML이 있는 배경 이미지를 지원하지 않습니다. Outlook에서 배경 이미지가 작동하려면 VML을 사용해야 합니다. 고맙게도 이메일에서 배경 이미지를 사용하기 위해 VML을 완전히 배울 필요는 없습니다. Campaign Monitor에는 이메일에 방탄 배경 이미지를 제공하기 위해 VML 및 HTML 코드를 생성하는 훌륭한 도구가 있습니다.

애니메이션 GIF는 지원하지 않습니다.

이메일에서 비디오 지원이 부족하고 이메일 마케팅 담당자가 이메일을 보다 역동적이고 매력적으로 만들기 위해 노력하는 상황에서 소박한 애니메이션 GIF는 이메일에 생기를 불어넣는 완벽한 방법입니다.

그러나 Outlook은 애니메이션 GIF를 지원하지 않습니다. 이미지가 로드되어 사용자에게 표시되는 동안 애니메이션의 첫 번째 프레임만 렌더링됩니다.

Outlook에서 이메일을 여는 구독자가 있고 애니메이션 GIF를 사용하는 경우 애니메이션의 첫 번째 프레임을 계산합니다. GIF를 단순하게 유지하고 애니메이션은 메시지에 필수적인 것이 아니라 전체 애니메이션을 볼 수 있는 사람들에게 추가 혜택처럼 유지하십시오.

p, div 및 a 태그의 패딩을 지원하지 않습니다.

패딩은 요소에 공간을 도입할 수 있는 훌륭한 CSS 속성입니다. 이메일에서 요소를 배치하거나 디자인을 향상시키기 위해 요소 주위에 숨을 공간을 만드는 데 유용한 CSS 속성입니다.

이에 대한 쉬운 해결 방법은 테이블의 HTML 속성 cellspacing 및 cellpadding을 사용하여 테이블 내부의 요소 주위에 공간을 만드는 것입니다.

단락에 패딩(p 태그)을 도입하려면 스타일 속성 mso-line-height-rule:exactly를 사용하십시오. 줄 높이와 결합하여 사본과 텍스트에 숨을 쉴 수 있는 공간을 제공하여 더 쉽게 따라갈 수 있습니다.

 <p>Your text here</p>

아웃룩 뿐만이 아니다.

데스크톱 클라이언트가 수년 동안 이메일 개발자에게 문제를 제기했지만 이제 이메일 개발자가 해결할 수 있는 새로운 버전의 Outlook.com이 있습니다. 그 중 많은 부분이 Outlook의 단점과 다릅니다. (물론이야.)

한 가지 변경 사항은 올바른 방향으로 나아가지 못한 것입니다. Outlook.com은 일련의 미디어 쿼리에 포함된 모든 내용을 제거합니다. 따라서 이메일의 모바일 버전과 데스크톱 버전을 구별할 방법이 없습니다.

그래도 좋은 소식이 있습니다. 이전 버전의 Outlook.com에 있던 몇 가지 렌더링 버그가 수정되었습니다. 가장 주목할 만한 것은 float/margin 해킹입니다. 이전 버전의 Outlook.com에서 이러한 CSS 특성을 이해하려면 대문자 또는 대문자와 소문자를 혼합하여 작성해야 했습니다. 이제 케이스는 중요하지 않습니다.

이전에는 Outlook.com에서 여백 특성을 이해하기 위해 다음을 사용해야 했습니다.

 Margin: 10px;

그러나 이제 다음을 사용할 수 있습니다.

 margin: 10px;

변경 사항의 전체 목록을 보려면 전자 메일 개발자 Remi Parmentier가 새로운 Outlook.com에 대해 알아야 할 사항과 전자 메일 개발자가 주의해야 할 사항을 훌륭한 블로그에 작성했습니다.
마스터링 아웃룩

코드 관련성 유지

이메일 개발자로 일한 적이 있다면 이메일 렌더링 가능성의 목표 게시물이 생각보다 많이 움직이는 것처럼 느껴질 수 있습니다. 전자 메일 개발이 계속 발전함에 따라 Outlook으로 "번역"해야 하는 새로운 기술이 항상 있을 것입니다.

예를 들어, Gmail 모바일 앱이 이메일의 모바일 버전을 렌더링하도록 하기 위해 하이브리드/스폰지 이메일 개발이 도입되었을 때 이메일 개발자는 Outlook에서 이러한 이메일을 렌더링할 수 있도록 하는 새로운 기술도 개발했습니다.

전자 메일 개발자가 테이블이 없는 전자 메일을 만들려는 열망과 함께 한계를 더 확장함에 따라 이러한 새로운 기술은 여전히 ​​사용 중인 Outlook의 여러 버전에 대해 단순화되어야 합니다.

혁신적이고 재능 있는 이메일 개발자에 대한 수요가 그 어느 때보다 높아졌습니다. VML은 아직 전자 메일에 숙달되지 않았으며 Outlook이 Word를 렌더링 엔진으로 사용하는 한 전자 메일 개발자가 계속해서 지식과 가치를 높일 수 있는 핵심 영역이 될 것입니다.

이메일 작성에는 시간이 걸립니다

Outlook이 이메일 개발자에게 부과하는 이러한 모든 문제와 지원해야 하는 이메일 클라이언트 및 장치의 목록이 증가함에 따라 이메일 마케팅에서 상당한 시간을 HTML 이메일을 개발하고 테스트하는 데 소비하는 것은 놀라운 일이 아닙니다.

2016년 이메일 생산 현황에서 응답자의 44% 이상이 이메일 개발에 3시간 이상을 소비했다고 보고했습니다. 이것은 짧은 시간이 아니며 전체 이메일 마케팅 워크플로를 볼 때 고려해야 합니다.

Outlook은 항상 전자 메일 개발자가 논쟁을 벌이는 까다로운 야수였습니다. 불행히도 이메일 클라이언트 시장 점유율이 상당하기 때문에 무시할 수 없습니다. B2B 마케팅 부문에서 일하는 경우 더 커질 수 있습니다. 간단히 말해 Outlook은 무시할 수 없습니다.

Outlook에서 이메일이 작동하도록 하는 데 어려움을 겪고 계십니까?

Microsoft와 협력하여 Outlook에서 전자 메일 렌더링 버그의 우선 순위를 지정하고 문제를 더 빠르게 식별하며 커뮤니티에 개선 사항 및 수정 사항을 발표했습니다.

Outlook을 개선하고 렌더링 버그를 제출할 수 있도록 도와주세요.

Outlook 렌더링 버그 제출 →