電子郵件設計播客 #60：CodePen 如何與 Chris Coyier 一起進行電子郵件設計和營銷

在 The Email Design Podcast 的第 60 集中，主持人 Kevin Mandeville 和 Jason Rodriguez 與 CSS 大師 Chris Coyier 坐下來討論 CodePen 如何處理電子郵件設計和營銷以及從網頁設計師的角度對 HTML 電子郵件開發的想法。 請務必關注並使用#EmailDesignPodcast 加入 Twitter 上的討論。

觀看上面的完整視頻或收聽下面的純音頻版本。

下載 MP3

在這一集中：

• (1:44) 您是如何學習 HTML 和 CSS 的？ 克里斯實際上在高中時上過編程課，然後在大學裡繼續學習。 他最終不喜歡後端編程，轉而主修藝術。 他最終通過構建 WordPress 網站（包括他著名的 CSS Tricks 網站）進入了 HTML 和 CSS。
• (8:05) 有沒有您用來學習的早期資源？ Chris 是 Dan Cederholm 和他的書 Bulletproof Web Design 的忠實粉絲。
• (9:27) 您創建 CSS Tricks 的核心靈感是什麼？您的願景是什麼？ Chris 說，最初的想法是建立一大堆 WordPress 網站，內容超過流行技術，例如 InDesign Help，以產生流量並從中賺錢。 CSS Tricks 最初實際上並不流行，但它是 Chris 真正喜歡的一個，並希望將其作為個人日誌記錄他在構建所有這些不同站點時的學習情況。
• (11:48) 什麼是 CodePen？ CodePen 是“前端網絡的遊樂場”。 它的工作原理是允許您創建“筆”，即 HTML、CSS 和 JavaScript 的集合，也是開發人員的社交網絡，類似於代碼的 Dribbble，甚至是前端開發的 Litmus Builder。 他們最近推出了項目，允許您在本地前端開發環境中工作。
• (14:30) CodePen 的願景是什麼？ 這是一種平衡行為。 CodePen 想要成長為一家企業，但也需要保持其社區的強大、快樂和健康。 特別是作為一個資源有限的八人小團隊，他們真的需要專注於核心優先事項。
• (17:15) CodePen 的電子郵件營銷是什麼樣的？ 你發送什麼類型的電子郵件？ 最近在電子郵件方面的一項努力是 CodePen Spark，這是一個每週收集的最酷的近期 Pens。 CodePen 實際上構建了一個自定義 CMS 來幫助管理和構建電子郵件，該電子郵件還會發佈到 CodePen 網站以供存檔。 電子郵件是基於 Rails 模板構建的，該模板從 CMS 數據內聯和編譯 CSS。 Chris 然後將電子郵件輸入 Litmus 進行測試並進行任何必要的調整。 CodePen 使用 Sparkpost 發送電子郵件。 Chris 最近希望在 CodePen 為電子郵件做的項目是將他們的電子郵件首選項合併到 CodePen Web 應用程序中，並根據用戶活動構建入職和触發電子郵件。
• (23:53) 您如何權衡構建自定義解決方案與購買其他電子郵件平台和服務？ Chris 認為大多數電子郵件服務提供商都過於昂貴，無法證明其合理性。 CodePen 面臨著獨特的挑戰，即擁有一個小團隊但擁有 100 萬以上的龐大用戶群，而成本卻非常高。 所以對於目前的 CodePen 來說，投入時間來構建他們的工具更有意義。
• (28:31) 您如何計劃必鬚髮送的電子郵件？ CodePen 使用 Google Docs 來規劃電子郵件營銷活動。
• (32:47) 您知道您的訂閱者受眾構成是什麼嗎？ CodePen 目前並不太關注他們的訂閱者受眾，只是專注於讓電子郵件在所有流行的電子郵件客戶端中呈現。 他們使用移動優先的方法來進行電子郵件開發。
• (35:00) 您在電子郵件設計和開發方面的核心痛點是什麼？ 怎麼可能對你更容易？ Chris 正在努力弄清楚 HTML 電子郵件的正確抽象層是什麼。 他不想手動構建 HTML 電子郵件，但也不想變得如此抽象，以至於在故障排除時它變得過於移除並且難以查明或編輯錯誤。 他認為，測試過程中唯一的真實來源應該是 Litmus。
• (36:59) 您如何嘗試解決遇到的渲染問題？ Chris 最近遇到了一個帶有 ~100px 隨機空間塊的 Outlook 錯誤。 Chris 沒有在代碼本身中看到任何錯誤，也不知道如何在線研究這種特定類型的錯誤——他只是使用 Litmus 嘗試了一系列故障排除方法，直到它正確呈現。
• (39:10) 您遇到過的最奇怪的錯誤是什麼？ Chris 在電子郵件中使用 Retina 圖像時遇到了麻煩，主要是因為 Outlook 行為並使它們在響應式電子郵件中正常工作。
• (41:13) 您如何衡量 CodePen 電子郵件是否成功？ 鑑於其小團隊的性質，並且團隊中沒有專門的電子郵件營銷或分析人員，他們不會查看每封電子郵件的電子郵件分析。 他們更多地從用戶反饋的定性角度來處理它。
• (45:00) 為什麼網頁設計界對 HTML 電子郵件持負面看法？ 克里斯說，網絡討厭電子郵件的原因並不神秘：因為它不是現代的，而且他們無法按照他們想要的方式進行編碼。 他還指出，即使在網頁設計中，人們也不喜歡跨瀏覽器測試。 渲染測試對於大多數人來說並不是工作中令人愉快的部分，而在電子郵件方面則被放大了。
• (48:54) 我們如何才能讓網絡世界更多地了解電子郵件？ Chris 認為，了解電子郵件在呈現支持方面的發展程度以及它的簡單程度將是有益的。 能夠說您不必內聯 CSS 或使用表格將對電子郵件的感知產生巨大影響。

關注電子郵件設計播客

• 關注 SoundCloud
• 在 iTunes 上訂閱
• 在 YouTube 上訂閱

將最新的郵件直接發送到您的收件箱

想要獲得更多這樣的提示和建議嗎？ 訂閱我們的每週時事通訊，獲取直接發送到您的收件箱的電子郵件設計專業人士的最新內容。 每週。