Email Design Podcast #60: CodePen เข้าถึงการออกแบบอีเมลและการตลาดกับ Chris Coyier ได้อย่างไร

เผยแพร่แล้ว: 2017-05-05

ในตอนที่ 60 ของ The Email Design Podcast เจ้าบ้าน Kevin Mandeville และ Jason Rodriguez ได้พูดคุยกับ Chris Coyier ผู้เชี่ยวชาญด้าน CSS เพื่อหารือเกี่ยวกับวิธีที่ CodePen เข้าถึงการออกแบบอีเมลและการตลาด และความคิดเกี่ยวกับการพัฒนาอีเมล HTML จากมุมมองของนักออกแบบเว็บไซต์ อย่าลืมติดตามและเข้าร่วมการสนทนาบน Twitter โดยใช้ #EmailDesignPodcast

ดูวิดีโอแบบเต็มด้านบนหรือฟังเวอร์ชันเฉพาะเสียงด้านล่าง

ดาวน์โหลด MP3

ในตอนนี้:

  • (1:44) คุณเรียนรู้ HTML และ CSS ได้อย่างไร คริสได้เข้าเรียนวิชาการเขียนโปรแกรมในโรงเรียนมัธยมศึกษาตอนปลายและไปเรียนต่อที่วิทยาลัย ในที่สุดเขาก็ไม่ชอบการเขียนโปรแกรมแบ็คเอนด์และเปลี่ยนไปเป็นสาขาวิชาศิลปะ เขาลงเอยด้วยการเข้าสู่ HTML และ CSS จากการสร้างไซต์ WordPress รวมถึงไซต์ CSS Tricks ที่มีชื่อเสียงของเขา
  • (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 ซึ่งเป็นคอลเล็กชันปากกาล่าสุดที่เจ๋งที่สุดประจำสัปดาห์ จริงๆ แล้ว CodePen ได้สร้าง CMS ที่กำหนดเองเพื่อช่วยจัดการและสร้างอีเมล ซึ่งเผยแพร่ไปยังเว็บไซต์ CodePen เพื่อเก็บถาวรด้วย อีเมลสร้างขึ้นจากเทมเพลต Rails ซึ่งรับ CSS แบบอินไลน์และรวบรวมจากข้อมูล CMS จากนั้น Chris จะใส่อีเมลลงใน Litmus เพื่อทดสอบและปรับแต่งตามความจำเป็น CodePen ใช้ Sparkpost เพื่อส่งอีเมล โปรเจ็กต์ล่าสุดที่คริสคาดหวังที่จะทำสำหรับอีเมลที่ CodePen กำลังรวมค่ากำหนดอีเมลของพวกเขาไว้ในเว็บแอป CodePen และสร้างอีเมลออนบอร์ดและทริกเกอร์ตามกิจกรรมของผู้ใช้
  • (23:53) คุณได้ชั่งน้ำหนักในการสร้างโซลูชันแบบกำหนดเองกับการซื้อในแพลตฟอร์มอีเมลและบริการอื่นๆ อย่างไร คริสรู้สึกว่าผู้ให้บริการอีเมลส่วนใหญ่มีราคาแพงเกินไปที่จะให้เหตุผล CodePen มีความท้าทายที่ไม่เหมือนใครในการมีทีมเล็กๆ แต่มีฐานผู้ใช้มากกว่า 1 ล้านคนที่มีค่าใช้จ่ายสูงมาก ดังนั้นสำหรับ CodePen ในขณะนี้ การใช้เวลาไปกับการสร้างเครื่องมือจึงเหมาะสมกว่า
  • (28:31) คุณวางแผนอย่างไรสำหรับอีเมลที่คุณต้องส่ง? CodePen ใช้ Google Docs เพื่อวางแผนกิจกรรมการตลาดทางอีเมล
  • (32:47) คุณรู้หรือไม่ว่าผู้ชมที่ติดตามคุณแต่งหน้าคืออะไร? CodePen ไม่ได้ให้ความสนใจกับผู้ชมที่สมัครรับข้อมูลมากนักในขณะนี้ และเพียงแค่มุ่งเน้นไปที่การทำให้อีเมลแสดงผลในโปรแกรมรับส่งเมลยอดนิยมทั้งหมด พวกเขาเข้าใกล้การพัฒนาอีเมลโดยใช้แนวทางที่เน้นมือถือเป็นหลัก
  • (35:00) อะไรคือจุดปวดหลักของคุณกับการออกแบบและพัฒนาอีเมล? มันจะง่ายกว่าสำหรับคุณได้อย่างไร? Chris มีปัญหากับการหาเลเยอร์ของสิ่งที่เป็นนามธรรมสำหรับอีเมล HTML ที่เหมาะสม เขาไม่ต้องการที่จะสร้างอีเมล HTML ด้วยตนเอง แต่ไม่ต้องการให้เป็นนามธรรมจนถูกลบออกและยากที่จะระบุหรือแก้ไขข้อผิดพลาดเมื่อแก้ไขปัญหา เขาเชื่อว่าแหล่งความจริงเพียงแหล่งเดียวควรเป็น Litmus ในกระบวนการทดสอบ
  • (36:59) คุณพยายามแก้ปัญหาการเรนเดอร์ที่คุณพบอย่างไร? คริสเพิ่งพบบั๊กของ Outlook ที่มีบล็อกพื้นที่สุ่มประมาณ 100px Chris ไม่เห็นข้อบกพร่องใดๆ ในโค้ดและไม่รู้ว่าจะค้นหาข้อผิดพลาดประเภทนั้นทางออนไลน์ได้อย่างไร – เขาเพิ่งใช้ Litmus เพื่อลองทำสิ่งต่างๆ เพื่อแก้ไขปัญหาจนกว่าจะแสดงผลอย่างถูกต้อง
  • (39:10) อะไรคือจุดบกพร่องที่แปลกประหลาดที่สุดที่คุณเคยเจอ? Chris มีปัญหากับการใช้ภาพเรตินาในอีเมล ส่วนใหญ่เป็นเพราะพฤติกรรมของ Outlook และทำให้พวกเขาทำงานอย่างถูกต้องสำหรับอีเมลที่ตอบสนอง
  • (41:13) คุณวัดความสำเร็จของอีเมล CodePen ได้อย่างไร ด้วยลักษณะของทีมเล็กๆ และไม่มีเจ้าหน้าที่การตลาดทางอีเมลโดยเฉพาะหรือผู้วิเคราะห์ในทีม พวกเขาไม่ได้พิจารณาการวิเคราะห์อีเมลของอีเมลทุกฉบับ พวกเขาเข้าใกล้มันจากมุมมองเชิงคุณภาพมากขึ้นจากคำติชมของผู้ใช้
  • (45:00) ทำไมโลกของการออกแบบเว็บจึงมีมุมมองเชิงลบต่ออีเมล HTML? Chris กล่าวว่าไม่ใช่เรื่องลึกลับว่าทำไมเว็บถึงเกลียดอีเมล เนื่องจากไม่ทันสมัยและไม่สามารถเขียนโค้ดได้ตามต้องการ เขายังชี้ให้เห็นถึงข้อเท็จจริงที่ว่าแม้ในการออกแบบเว็บ ผู้คนไม่ชอบการทดสอบข้ามเบราว์เซอร์ การทดสอบการแสดงผลไม่ใช่ส่วนที่สนุกสำหรับคนส่วนใหญ่ และนั่นจะขยายใหญ่ขึ้นเมื่อพูดถึงอีเมล
  • (48:54) เราจะให้ความรู้โลกเว็บเพิ่มเติมเกี่ยวกับอีเมลได้อย่างไร Chris เชื่อว่าจะเป็นประโยชน์ที่จะขับรถกลับบ้านว่าอีเมลมีการพัฒนาไปมากเพียงใดในการสนับสนุนการแสดงผลและความเรียบง่ายที่สามารถทำได้ ความสามารถในการพูดได้ว่าคุณไม่จำเป็นต้องอินไลน์ CSS หรือใช้ตารางจะสร้างผลกระทบอย่างมากต่อการรับรู้ของอีเมล

ติดตามพอดคาสต์การออกแบบอีเมล

  • ติดตามบน SoundCloud
  • สมัครสมาชิก iTunes
  • สมัครสมาชิกบน YouTube

รับข้อมูลล่าสุดที่ส่งตรงถึงกล่องจดหมายของคุณ

ต้องการรับเคล็ดลับและคำแนะนำเพิ่มเติมเช่นนี้หรือไม่? สมัครรับจดหมายข่าวรายสัปดาห์และรับเนื้อหาล่าสุดสำหรับผู้เชี่ยวชาญด้านการออกแบบอีเมลที่ส่งตรงถึงกล่องจดหมายของคุณ ทุกสัปดาห์.