이메일 디자인 팟캐스트 #60: CodePen이 Chris Coyier와 함께 이메일 디자인 및 마케팅에 접근하는 방법

Email Design Podcast의 60번째 에피소드에서 호스트 Kevin Mandeville과 Jason Rodriguez는 CSS 전문가 Chris Coyier와 함께 CodePen이 이메일 디자인 및 마케팅에 접근하는 방법과 웹 디자이너의 관점에서 HTML 이메일 개발에 대한 생각에 대해 토론합니다. 팔로우하고 #EmailDesignPodcast를 사용하여 Twitter에서 토론에 참여하십시오.

위의 전체 비디오를 보거나 아래의 오디오 전용 버전을 들으십시오.

MP3 다운로드

이 에피소드에서:

• (1:44) HTML과 CSS는 어떻게 배우셨나요? Chris는 실제로 고등학교에서 프로그래밍 수업을 듣고 대학에서 계속 공부했습니다. 그는 궁극적으로 백엔드 프로그래밍을 좋아하지 않았고 예술 전공으로 전환했습니다. 그는 그의 유명한 CSS Tricks 사이트를 포함하여 WordPress 사이트를 구축하면서 HTML과 CSS에 빠져들게 되었습니다.
• (8:05) 배우기 위해 사용했던 초기 리소스가 있습니까? Chris는 Dan Cederholm과 그의 책 Bulletproof Web Design의 열렬한 팬입니다.
• (9:27) CSS Tricks를 만드는 핵심 영감은 무엇이며 비전은 무엇이었습니까? Chris는 원래 아이디어가 InDesign 도움말과 같은 인기 있는 기술을 통해 콘텐츠로 WordPress 사이트 전체를 스핀업하여 트래픽을 생성하여 수익을 창출하는 것이라고 말했습니다. CSS Tricks는 처음에는 실제로 인기가 없었지만 Chris가 정말 즐겼고 이러한 다양한 사이트를 구축하면서 배운 내용을 개인 일기장으로 남기고 싶어했습니다.
• (11:48) 코드펜이란? CodePen은 "프론트엔드 웹을 위한 놀이터"입니다. HTML, CSS 및 JavaScript 세트인 "펜"을 생성할 수 있게 함으로써 작동하며 개발자를 위한 소셜 네트워크이기도 합니다. 코드용 Dribbble이나 프론트엔드 개발용 Litmus Builder와 유사합니다. 그들은 더 최근에 프로젝트를 시작하여 로컬 프론트 엔드 개발 환경에서 작업할 수 있습니다.
• (14:30) CodePen의 비전은 무엇입니까? 균형을 잡는 행위입니다. CodePen은 비즈니스로 성장하기를 원하지만 커뮤니티를 강력하고 행복하며 건강하게 유지해야 합니다. 특히 자원이 제한된 8명으로 구성된 소규모 팀으로서 핵심 우선순위에 집중해야 합니다.
• (17:15) CodePen의 이메일 마케팅은 어떤가요? 어떤 유형의 이메일을 보내나요? 이메일 분야의 최근 노력은 가장 멋진 최신 펜의 주간 컬렉션인 CodePen Spark입니다. CodePen은 실제로 이메일을 관리하고 구축하는 데 도움이 되는 맞춤형 CMS를 구축했으며, 이 이메일은 아카이브를 위해 CodePen 웹사이트에도 게시됩니다. 이메일은 CSS를 인라인하고 CMS 데이터에서 컴파일하는 Rails 템플릿으로 구성됩니다. 그런 다음 Chris는 이메일을 Litmus에 입력하여 테스트하고 필요한 조정 작업을 수행합니다. CodePen은 Sparkpost를 사용하여 이메일을 보냅니다. Chris가 CodePen에서 이메일에 대해 수행하기를 희망하는 최근 프로젝트는 CodePen 웹 앱 내에서 이메일 기본 설정을 병합하고 사용자 활동을 기반으로 온보딩 및 트리거 이메일을 구축하는 것입니다.
• (23:53) 다른 이메일 플랫폼 및 서비스를 구매하는 것과 사용자 지정 솔루션을 구축하는 것을 어떻게 비교했습니까? Chris는 대부분의 이메일 서비스 제공업체가 정당화하기에는 너무 비싸다고 생각합니다. CodePen은 팀 규모는 작지만 비용이 정말 많이 드는 1백만 명 이상의 대규모 사용자 기반을 보유해야 하는 고유한 문제가 있습니다. 따라서 현재 CodePen의 경우 도구를 구축하는 데 시간을 투자하는 것이 더 합리적입니다.
• (28:31) 보내야 할 이메일은 어떻게 계획하시나요? CodePen은 Google 문서를 사용하여 이메일 마케팅 활동을 계획합니다.
• (32:47) 구독자 시청자 구성이 뭔지 아세요? CodePen은 현재 구독자 청중에게 많은 관심을 기울이지 않고 있으며 모든 인기 있는 이메일 클라이언트에서 이메일을 렌더링하는 데만 집중하고 있습니다. 그들은 모바일 우선 접근 방식을 사용하여 이메일 개발에 접근합니다.
• (35:00) 이메일 디자인 및 개발의 핵심 애로점은 무엇입니까? 어떻게 당신을 위해 더 쉬울 수 있습니까? Chris는 HTML 이메일에 적합한 추상화 계층이 무엇인지 파악하는 데 어려움을 겪고 있습니다. 그는 HTML 이메일을 수동으로 작성하는 것을 원하지 않지만 너무 추상화되어 문제 해결 시 오류를 찾아내거나 편집하기가 너무 어려워지고 싶지 않습니다. 그는 테스트 과정에서 단일 소스의 진실이 리트머스여야 한다고 믿습니다.
• (36:59) 발생하는 렌더링 문제를 어떻게 해결하려고 합니까? Chris는 최근에 ~100px 임의의 공간 블록이 있는 Outlook 버그에 부딪쳤습니다. Chris는 코드 자체에서 버그를 발견하지 못했고 특정 종류의 버그를 온라인에서 조사하는 방법을 몰랐습니다. 그는 Litmus를 사용하여 제대로 렌더링될 때까지 문제 해결을 위해 여러 가지를 시도했습니다.
• (39:10) 당신이 만난 가장 이상한 버그는 무엇입니까? Chris는 이메일에서 망막 이미지를 사용하는 데 문제가 있었습니다. 주로 Outlook 동작과 반응형 이메일에서 제대로 작동하게 하기 때문입니다.
• (41:13) CodePen 이메일의 성공을 어떻게 측정합니까? 소규모 팀의 특성을 감안할 때 팀에 전담 이메일 마케팅 또는 분석 담당자가 없기 때문에 모든 단일 이메일의 이메일 분석을 살펴보지는 않습니다. 그들은 사용자의 피드백에서 보다 질적인 관점에서 접근합니다.
• (45:00) 웹 디자인 세계가 HTML 이메일에 대해 부정적인 시각을 갖는 이유는 무엇입니까? Chris는 웹이 이메일을 싫어하는 이유는 미스터리가 아니라고 말합니다. 왜냐하면 그것은 현대적이지 않고 원하는 방식으로 코딩할 수 없기 때문입니다. 그는 또한 웹 디자인에서도 사람들이 브라우저 간 테스트를 즐기지 않는다는 사실을 지적합니다. 렌더 테스트는 대부분의 작업에서 즐거운 부분이 아니며 이메일의 경우 더욱 그렇습니다.
• (48:54) 어떻게 하면 웹 세계를 이메일에 대해 더 많이 교육할 수 있습니까? Chris는 이메일이 렌더링 지원에서 얼마나 발전했으며 얼마나 간단할 수 있는지 알아보는 것이 도움이 될 것이라고 믿습니다. CSS를 인라인하거나 테이블을 사용할 필요가 없다고 말할 수 있다는 것은 이메일에 대한 인식에 큰 영향을 미칠 것입니다.

이메일 디자인 팟캐스트 팔로우

• SoundCloud에서 팔로우
• iTunes에서 구독
• YouTube에서 구독

받은편지함으로 바로 최신 소식 받기

이와 같은 팁과 조언을 더 받고 싶으십니까? 주간 뉴스레터를 구독하고 이메일 디자인 전문가를 위한 최신 콘텐츠를 받은 편지함으로 바로 받아보세요. 매주.