การตลาดทางอีเมลและระบบอัตโนมัติวิดีโอการตลาดและการขาย

ทำความเข้าใจกับความท้าทาย (และความผิดหวัง) ของการออกแบบอีเมล HTML

หากคุณเปิดระบบจัดการเนื้อหาเพื่อสร้างหน้าเว็บ กระบวนการนี้ก็ค่อนข้างง่าย รองรับเว็บเบราว์เซอร์สมัยใหม่ HTML, CSSและ JavaScript ตามมาตรฐานเว็บที่เข้มงวด และเป็นเพียงเบราว์เซอร์เพียงไม่กี่ตัวที่นักออกแบบต้องกังวล แน่นอนว่ามีข้อยกเว้น… และวิธีแก้ปัญหาง่ายๆ หรือฟังก์ชันเฉพาะสำหรับเบราว์เซอร์เหล่านั้น

เนื่องจากมาตรฐานโดยรวม การพัฒนาเครื่องมือสร้างเพจในระบบการจัดการเนื้อหาจึงเป็นเรื่องง่าย เบราว์เซอร์สอดคล้องกับ HTML5, CSS และ JavaScript... และนักพัฒนาสามารถสร้างโซลูชันที่มีประสิทธิภาพอย่างเหลือเชื่อเพื่อสร้างหน้าเว็บที่ตอบสนองต่ออุปกรณ์และสอดคล้องกันในเบราว์เซอร์ สองทศวรรษที่แล้ว นักออกแบบเว็บไซต์แทบทุกคนใช้ซอฟต์แวร์เดสก์ท็อปเพื่อพัฒนาหน้าเว็บ ตอนนี้ เป็นเรื่องปกติที่นักออกแบบเว็บไซต์จะพัฒนาเว็บเพจ โดยส่วนใหญ่แล้วพวกเขากำลังพัฒนาเทมเพลตและใช้โปรแกรมแก้ไขในระบบเนื้อหาเพื่อกรอกเนื้อหา บรรณาธิการเว็บไซต์ยอดเยี่ยมมาก

แต่โปรแกรมแก้ไขอีเมลล้าหลังอย่างมาก นี่คือเหตุผล...

การออกแบบอีเมล HTML นั้นซับซ้อนกว่าสำหรับเว็บไซต์มาก

หากบริษัทของคุณต้องการการออกแบบอีเมล HTML ที่สวยงาม กระบวนการนี้จะซับซ้อนกว่าการสร้างเว็บเพจแบบทวีคูณด้วยเหตุผลหลายประการ:

  • ไม่มีมาตรฐาน – ไม่มีการปฏิบัติตามมาตรฐานเว็บอย่างเข้มงวดโดยไคลเอนต์อีเมลที่แสดงอีเมล HTML โปรแกรมรับส่งเมลแทบทุกเครื่องและทุกเวอร์ชันของโปรแกรมรับส่งอีเมลทุกเครื่องทำหน้าที่ต่างกัน บางส่วนจะใช้ CSS, แบบอักษรภายนอก และ HTML สมัยใหม่ บางรูปแบบใช้สไตล์แบบอินไลน์บางแบบ แสดงเฉพาะชุดแบบอักษร และไม่สนใจทุกอย่างยกเว้นโครงสร้างที่ขับเคลื่อนด้วยตาราง มันค่อนข้างไร้สาระที่ไม่มีใครแก้ไขปัญหานี้ ด้วยเหตุนี้ การออกแบบเทมเพลตที่แสดงผลบนไคลเอนต์และอุปกรณ์ต่างๆ อย่างสม่ำเสมอจึงกลายเป็นธุรกิจขนาดใหญ่และอาจมีราคาค่อนข้างแพง
  • ความปลอดภัยของไคลเอนต์อีเมล – ล่าสุด Apple Mail อัปเดตให้บล็อกรูปภาพทั้งหมดในอีเมล HTML ตามค่าเริ่มต้นที่ไม่ได้ฝังอยู่ในอีเมล คุณให้สิทธิ์ในการโหลดอีเมลในแต่ละครั้งหรือต้องเปิดใช้งานการตั้งค่าเพื่อปิดใช้งานการตั้งค่านี้ นอกจากการตั้งค่าความปลอดภัยของอีเมลไคลเอ็นต์แล้ว ยังมีการตั้งค่าขององค์กรอีกด้วย
  • ความปลอดภัยด้านไอที – ทีมไอทีของคุณอาจปรับใช้กฎเกณฑ์ที่เข้มงวดกับสิ่งที่สามารถแสดงผลในอีเมลได้จริง ตัวอย่างเช่น หากรูปภาพของคุณมาจากโดเมนใดโดเมนหนึ่งที่ไม่อยู่ในรายการที่อนุญาตพิเศษในไฟร์วอลล์ของบริษัท รูปภาพก็จะไม่ปรากฏในอีเมลของคุณ ในบางครั้ง เราต้องพัฒนาอีเมลและโฮสต์รูปภาพทั้งหมดบนเซิร์ฟเวอร์ของบริษัท เพื่อให้พนักงานของตนได้เห็นภาพ
  • ผู้ให้บริการอีเมล์ – ที่แย่กว่านั้นคือผู้สร้างอีเมลที่ผู้ให้บริการอีเมล (ESPs) ก่อให้เกิดปัญหาอย่างแท้จริงมากกว่าที่จะจำกัดปัญหาเหล่านั้น แม้ว่าพวกเขาจะโปรโมตบรรณาธิการของพวกเขาคือ What You See Is What You Get (WYSIWYG) แต่สิ่งที่ตรงกันข้ามมักจะเกิดขึ้นกับการออกแบบอีเมล คุณจะดูตัวอย่างอีเมลในแพลตฟอร์มของพวกเขา และผู้รับจะเห็นปัญหาการออกแบบทั้งหมด บริษัทต่างๆ มักจะเลือกใช้โปรแกรมแก้ไขที่มีฟีเจอร์มากมายโดยไม่รู้ตัว แทนที่จะเลือกใช้โปรแกรมแก้ไขที่ถูกล็อคไว้ โดยคิดว่าโปรแกรมแก้ไขนั้นมีคุณสมบัติมากกว่า สิ่งที่ตรงกันข้ามคือ... หากคุณต้องการให้อีเมลแสดงผลอย่างสม่ำเสมอในไคลเอนต์อีเมลทั้งหมด ยิ่งง่ายกว่าก็ยิ่งดีเท่านั้น เพราะอาจผิดพลาดได้น้อยลง
  • การแสดงผลไคลเอนต์อีเมล – ไคลเอนต์อีเมลหลายร้อยรายแสดงผล HTML ที่แตกต่างกันบนเดสก์ท็อป แอพ อุปกรณ์มือถือ และไคลเอนต์เว็บเมล แม้ว่าโปรแกรมแก้ไขข้อความที่เก๋ไก๋ของคุณบนผู้ให้บริการอีเมลของคุณอาจมีการตั้งค่าให้ใส่หัวเรื่องในอีเมลของคุณ แต่การเติม ขอบ ความสูงของบรรทัด และขนาดตัวอักษรอาจแตกต่างกันสำหรับไคลเอนต์อีเมลทุกราย ด้วยเหตุนี้ คุณจะต้องลดขนาด HTML และเขียนโค้ดทุกองค์ประกอบให้แตกต่างกัน (ดูตัวอย่างด้านล่าง) และมักจะเขียนเป็นข้อยกเว้นเฉพาะไคลเอ็นต์อีเมล เพื่อรับอีเมลที่แสดงผลอย่างสม่ำเสมอ ไม่มีประเภทบล็อกง่ายๆ คุณต้องสร้างเค้าโครงที่ขับเคลื่อนด้วยตารางซึ่งเทียบเท่ากับการสร้างเว็บเมื่อสามสิบปีก่อน นั่นเป็นเหตุผลว่าทำไมรูปแบบใหม่จึงต้องมีทั้งการพัฒนาและการทดสอบไคลเอ็นต์อีเมลข้ามและอุปกรณ์ สิ่งที่คุณเห็นในกล่องจดหมายของคุณอาจแตกต่างไปจากที่ฉันเห็นในกล่องจดหมายของฉันอย่างสิ้นเชิง นั่นเป็นเหตุผลว่าทำไมเครื่องมือเรนเดอร์เช่นนี้ อีเมลเกี่ยวกับกรด or สารสีน้ำเงิน เป็นสิ่งจำเป็นเพื่อให้แน่ใจว่าการออกแบบใหม่ของคุณใช้ได้กับไคลเอนต์อีเมลทั้งหมด นี่คือรายการสั้น ๆ ของไคลเอนต์อีเมลยอดนิยมและเอ็นจิ้นการเรนเดอร์:
    • ใช้ Apple Mail, Outlook สำหรับ Mac, Android Mail และ iOS Mail WebKit.
    • การใช้งาน Outlook 2000, 2002 และ 2003 Internet Explorer.
    • การใช้งาน Outlook 2007, 2010 และ 2013 Microsoft Word (ใช่ เวิร์ด!)
    • ไคลเอ็นต์เว็บเมลใช้กลไกของเบราว์เซอร์ที่เกี่ยวข้อง (เช่น Safari ใช้ WebKit และ Chrome ใช้ Blink)

ตัวอย่างของ HTML สำหรับ Web Vs อีเมล

ถ้าคุณต้องการตัวอย่างที่แสดงให้เห็นความซับซ้อนของการออกแบบในอีเมลกับเว็บ ต่อไปนี้คือตัวอย่างที่สมบูรณ์แบบจากบทความของ Mailbakery 19 ข้อแตกต่างที่สำคัญระหว่างอีเมลและเว็บ HTML:

อีเมล HTML

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

<table width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td align="left">
         <table border="0" cellspacing="0" cellpadding="0" bgcolor="#43756e">
            <tr>
               <td class="text-button"  style="padding: 5px 20px; color:#ffffff; font-family: 'Oswald', Arial, sans-serif; font-size:14px; line-height:20px; text-align:center; text-transform:uppercase;">
                  <a href="#" target="_blank" class="link-white" style="color:#ffffff; text-decoration:none"><span class="link-white" style="color:#ffffff; text-decoration:none">Find Out More</a>
               </td>
            </tr>
         </table>
      </td>
   </tr>
</table>

เว็บ HTML

เราสามารถใช้สไตล์ชีตภายนอกที่มีคลาสเพื่อกำหนดกรณี การจัดตำแหน่ง สี และขนาดของแท็กสมอที่ปรากฏเป็นปุ่ม

<div class="center">
   <a href="#" class="button">Find Out More</a>
</div>

วิธีหลีกเลี่ยงปัญหาการออกแบบอีเมล

ปัญหาการออกแบบอีเมลสามารถหลีกเลี่ยงได้โดยทำตามขั้นตอนที่เหมาะสม:

  1. การทดสอบเทมเพลต – การทำความเข้าใจโปรแกรมรับส่งอีเมลที่สมาชิกของคุณใช้ และการตรวจสอบให้แน่ใจว่าอีเมล HTML ของคุณได้รับการทดสอบอย่างครบถ้วนทั้งบนมือถือและเดสก์ท็อปถือเป็นสิ่งสำคัญก่อนที่จะปรับใช้เทมเพลตใดๆ เราสามารถออกแบบอีเมลได้อย่างแท้จริงจากเลย์เอาต์ของ Photoshop… แต่การแบ่งส่วนและแบ่งเป็นไคลเอ็นต์อีเมลข้ามที่ขับเคลื่อนด้วยตารางถือเป็นสิ่งสำคัญในการปรับใช้การออกแบบอีเมลที่เหมาะสมและสม่ำเสมอ
  2. การทดสอบภายใน – เมื่อแม่แบบของคุณได้รับการออกแบบและทดสอบแล้ว ควรส่งไปยังรายการเมล็ดพันธุ์ภายในองค์กรเพื่อตรวจสอบและอนุมัติ คุณอาจต้องการเริ่มต้นด้วยกลุ่มย่อยที่จำกัด เพื่อให้แน่ใจว่าไม่มีปัญหาไฟร์วอลล์หรือความปลอดภัยที่เกี่ยวข้องกับการแสดงผลอีเมลภายใน หากสิ่งนี้กำลังสร้างอินสแตนซ์ให้กับผู้ให้บริการอีเมลรายใหม่ คุณอาจพบปัญหาการกรองหรือการบล็อกที่เกี่ยวข้องกับการรับอีเมลของคุณไปยังกล่องจดหมาย
  3. การกำหนดเวอร์ชันเทมเพลต – อย่าเปลี่ยนเลย์เอาต์หรือการออกแบบของคุณโดยไม่ได้ทำงานกับเทมเพลตเวอร์ชันใหม่ที่สามารถออกแบบ ทดสอบอย่างเหมาะสม และปรับใช้ได้ ธุรกิจจำนวนมากชอบการออกแบบเพียงครั้งเดียวสำหรับทุกแคมเปญ… แต่นั่นก็ต้องการการออกแบบ พัฒนา และปรับใช้อีเมลทุกฉบับสำหรับแต่ละแคมเปญ สิ่งนี้จะเพิ่มเวลามากมายให้กับกระบวนการการตลาดผ่านอีเมลภายใน และคุณเสี่ยงที่จะไม่เข้าใจว่าองค์ประกอบใดในอีเมลของคุณทำงานได้ดีกว่าองค์ประกอบใดที่ไม่มีประสิทธิภาพ ความสม่ำเสมอไม่ได้เป็นเพียงวิธีการทำให้กระบวนการง่ายขึ้น แต่ยังมีความสำคัญต่อพฤติกรรมของสมาชิกของคุณด้วย
  4. ข้อยกเว้นของผู้ให้บริการอีเมล – ผู้ให้บริการอีเมลแทบทุกรายมีวิธีแก้ไขปัญหาที่เครื่องมือสร้างอีเมลแนะนำ เรามักจะเพิ่ม raw CSS ลงในบัญชีได้ หรือแม้แต่บล็อกเนื้อหาที่ต้องรวมอยู่ในอีเมลทุกฉบับ เพื่อให้บริษัทใช้ตัวแก้ไขอีเมลในตัวและไม่ทำให้การออกแบบอีเมลของคุณเสียหาย แน่นอนว่าอาจต้องมีการฝึกอบรมและการควบคุมกระบวนการเพื่อปรับใช้ขั้นตอนเหล่านั้นเพื่อให้แน่ใจว่าได้ปฏิบัติตาม หรือคุณอาจต้องการพัฒนาการออกแบบอีเมลของคุณในโซลูชันที่ได้รับการพิสูจน์แล้วว่าใช้งานได้กับไคลเอนต์และอุปกรณ์ต่างๆ แล้ววางกลับเข้าไปในผู้ให้บริการอีเมลของคุณ

แพลตฟอร์มการออกแบบอีเมล

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

Stripo ไม่ได้เป็นเพียงเครื่องมือสร้างอีเมลเท่านั้น แต่ยังมีคลังเทมเพลตมากกว่า 900 แบบที่สามารถนำเข้าได้อย่างง่ายดาย เมื่อคุณออกแบบอีเมลแล้ว คุณสามารถส่งอีเมลถึง 60+ ESP และไคลเอนต์อีเมล ซึ่งรวมถึง Intuit Mailchimp, HubSpot, การตรวจสอบการรณรงค์, AWeber, สปุตนิก, Outlookและ Gmail. เทมเพลต Stripo ที่ดีที่สุดมาพร้อมกับการทดสอบการเรนเดอร์อีเมล เพื่อให้คุณมั่นใจได้ว่าได้รับการทดสอบและทำงานอย่างสม่ำเสมอกับไคลเอนต์อีเมลมากกว่า 40 รายการ

เข้าสู่ระบบเพื่อสาธิต Stripo Editor

Douglas Karr

Douglas Karr เป็น CMO ของ เปิดข้อมูลเชิงลึก และผู้ก่อตั้ง Martech Zone. Douglas ได้ช่วยเหลือสตาร์ทอัพ MarTech ที่ประสบความสำเร็จหลายสิบราย ได้ช่วยเหลือในการตรวจสอบสถานะมูลค่ากว่า 5 พันล้านดอลลาร์ในการซื้อกิจการและการลงทุนของ Martech และยังคงช่วยเหลือบริษัทต่างๆ ในการปรับใช้และทำให้กลยุทธ์การขายและการตลาดเป็นไปโดยอัตโนมัติ Douglas เป็นผู้เชี่ยวชาญด้านการเปลี่ยนแปลงทางดิจิทัลและ MarTech ที่ได้รับการยอมรับในระดับสากล ดักลาสยังเป็นผู้เขียนหนังสือ Dummie's Guide และหนังสือความเป็นผู้นำทางธุรกิจที่ได้รับการตีพิมพ์อีกด้วย

บทความที่เกี่ยวข้อง

กลับไปด้านบนปุ่ม
ปิดหน้านี้

ตรวจพบการบล็อกโฆษณา

Martech Zone สามารถจัดหาเนื้อหานี้ให้คุณโดยไม่มีค่าใช้จ่าย เนื่องจากเราสร้างรายได้จากไซต์ของเราผ่านรายได้จากโฆษณา ลิงก์พันธมิตร และการสนับสนุน เรายินดีอย่างยิ่งหากคุณจะลบตัวปิดกั้นโฆษณาของคุณเมื่อคุณดูไซต์ของเรา