บทนำสู่การสร้างและส่งอีเมล HTML สำหรับนักพัฒนาเว็บ

ฉันใช้เวลาหลายปีที่ผ่านมาในการสร้างเครื่องมือในการพัฒนา — สองปีนั้นในตำแหน่งหัวหน้าฝ่ายออกแบบผลิตภัณฑ์ที่ Mailgun ซึ่งเป็นบริการอีเมลสำหรับนักพัฒนา ซึ่งฉันได้เรียนรู้มากมายเกี่ยวกับวิธีการทำงานของอีเมลและ ปัญหาที่นักพัฒนาต้องเผชิญ เมื่อสร้างอีเมล HTML ในโพสต์นี้ ฉันจะแบ่งปันความรู้ของฉันเกี่ยวกับหัวข้อนี้

อีเมล HTML: คำสองคำที่รวมกันแล้วทำให้น้ำตาของนักพัฒนาซอฟต์แวร์ต้องตาค้าง หากคุณเป็นนักพัฒนาเว็บ ย่อมหลีกเลี่ยงไม่ได้ที่การเขียนโค้ดอีเมลจะเป็นงานที่คุณพลาดไม่ได้ในบางช่วงเวลาในอาชีพการงาน ไม่ว่าคุณจะชอบหรือไม่ก็ตาม การเข้ารหัสอีเมล HTML เป็นโรงเรียนเก่า ลองนึกย้อนกลับไปในปี 2542 เมื่อเราเรียกตัวเองว่า "ผู้ดูแลเว็บ" และใช้ Frontpage, บรรณาธิการและตาราง WYSIWYG เพื่อทำเครื่องหมายเว็บไซต์ของเรา

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

ฉันใช้เวลาหลายปีที่ผ่านมาในการสร้างเครื่องมือในการพัฒนา — สองปีนั้นในตำแหน่งหัวหน้าฝ่ายออกแบบผลิตภัณฑ์ที่ Mailgun ซึ่งเป็นบริการอีเมลสำหรับนักพัฒนา ซึ่งฉันได้เรียนรู้มากมายเกี่ยวกับวิธีการทำงานของอีเมลและ ปัญหาที่นักพัฒนาต้องเผชิญ เมื่อสร้างอีเมล HTML ในโพสต์นี้ ฉันจะแบ่งปันความรู้ของฉันเกี่ยวกับหัวข้อนี้

อ่านเพิ่มเติม เกี่ยวกับ SmashingMag:

• ออกแบบและสร้างจดหมายข่าวทางอีเมลโดยไม่ทำให้คุณเสียสมาธิ
• 18 เทมเพลตอีเมลสำหรับนักออกแบบเว็บไซต์และนักพัฒนา
• ทำให้การเข้ารหัสอีเมล HTML ตอบสนองง่ายด้วย MJML
• วิธีปรับปรุงเวิร์กโฟลว์อีเมลของคุณด้วยการออกแบบโมดูลาร์
  

บทนำสู่การส่งอีเมล

ในฐานะนักพัฒนาที่รับผิดชอบแคมเปญอีเมลหรืออีเมลทั้งหมดที่บริษัทของคุณส่ง คุณจะต้องรู้วิธีการทำงานของอีเมล ข้อกำหนดทางกฎหมาย และวิธีรับอีเมลที่ส่งจริง บริษัทต่างๆ ส่งอีเมลประเภทต่างๆ สองสามประเภท ลองมาดูกัน

อีเมลการตลาด

ผู้ให้บริการอีเมล (ESP) จำนวนมากเชี่ยวชาญด้านการตลาดและอีเมลส่งเสริมการขาย: อีเมล SendPulse, Campaign Monitor, MailChimp, Emma, ​​Constant Contact เป็นต้น พวกเขาให้บริการโซลูชั่นเต็มรูปแบบสำหรับการจัดการสมาชิก การทำงานกับเทมเพลตอีเมล การเรียกใช้แคมเปญอีเมลจำนวนมาก และการรายงาน

อีเมลธุรกรรม

อีเมลธุรกรรมประกอบด้วยใบเสร็จ การแจ้งเตือน อีเมลต้อนรับ การรีเซ็ตรหัสผ่าน และอื่นๆ และโดยทั่วไปจะใช้กับเครื่องมือการพัฒนาและ API เช่น SendPulse Transactional, Mailgun, SendGrid และ Postmark เครื่องมือเหล่านี้เน้น API มากกว่า ใช้ CMS และ WYSIWYG น้อยกว่า แต่เมื่อรวมกับบริการเช่น Sendwithus พวกเขาสามารถทำให้มีประสิทธิภาพมากยิ่งขึ้น

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

อีเมลวงจรชีวิต

บริการอีเมลตามวงจรชีวิตและตามพฤติกรรมช่วยในการเริ่มต้น การมีส่วนร่วม และอื่นๆ ESP จำนวนมากที่เน้นด้านการตลาดก็ให้บริการนี้เช่นกัน แต่ฉันมักจะจัดกลุ่มบริการต่างๆ เช่น SendPulse Automation, Intercom, Customer.io, Drip, Vero และ ConvertKit ไว้ในหมวดหมู่นี้

แนวทางปฏิบัติที่ดีที่สุดสำหรับรายชื่ออีเมล

อย่าซื้อรายชื่ออีเมล อาจมีบริการที่ถูกต้องตามกฎหมายจำนวนหนึ่ง แต่คุณควรอยู่ห่างจากรายการซื้อทั้งหมด

ประสบการณ์ของฉันคือทุกคนที่ซื้อรายชื่ออีเมลจะประสบปัญหาการตีกลับจำนวนมาก ทำให้ที่อยู่อินเทอร์เน็ตโปรโตคอล (IP) ของพวกเขาเสียชื่อเสียง และทำให้อีเมลของพวกเขาถูกบล็อกโดยผู้ให้บริการอินเทอร์เน็ต (ISP) หรือส่งไปยังสแปม 85% ของอีเมลทั่วโลกถือเป็นสแปม ตาม SenderBase; ไม่ตกลงไปในถังนี้

Double Opt-In

สมาชิกที่ต้องยืนยันที่อยู่อีเมลของพวกเขาจะเพิ่มขั้นตอนพิเศษให้กับกระบวนการ แต่ก็สมเหตุสมผลและป้องกันไม่ให้ผู้อื่นใช้ที่อยู่อีเมลในทางที่ผิดโดยการลงทะเบียนสำหรับรายการโดยไม่ได้รับอนุญาต นอกจากนี้ยังช่วย รักษารายการการสมัครของคุณให้สะอาด และเป็น "วิธีที่ถูกต้อง 100% ในการตรวจสอบที่อยู่อีเมล"

สแปมได้

นี่คือ ข้อกำหนดทางกฎหมาย ของคุณสำหรับการส่งอีเมล ซึ่งบังคับใช้โดย CAN-SPAM Act of 2003:

• อย่าใช้ข้อมูลส่วนหัวที่เป็นเท็จหรือทำให้เข้าใจผิด
• อย่าใช้หัวเรื่องหลอกลวง
• ระบุข้อความว่าเป็นโฆษณา
• บอกผู้รับว่าคุณอยู่ที่ไหน
• บอกผู้รับถึงวิธีการเลือกไม่รับอีเมลในอนาคตจากคุณ
• ให้เกียรติคำขอยกเลิกทันที
• ตรวจสอบสิ่งที่คนอื่นทำในนามของคุณ

MailChimp มีรายการข้อกำหนดทางกฎหมายทางอีเมลที่ดีตามประเทศ

การวิเคราะห์และการวัดประสิทธิภาพ

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

• 20% เป็นอัตราการเปิดที่ดี
• 3 ถึง 7% เป็นอัตราการคลิกผ่านที่ดี
• 5% เป็นอัตราตีกลับที่ไม่ดี
• 0.01% เป็นอัตราสแปมที่ไม่ดี
• 1% เป็นอัตราการยกเลิกการสมัครที่ไม่ดี

นอกจากนี้ โปรดจำไว้ว่าอัตราการเปิดและอัตราการคลิกผ่านอาจเป็น ตัวชี้วัดที่ไร้สาระ (อ่านว่า “ไม่สำคัญจริงๆ”) ในตอนท้าย สิ่งที่คุณต้องการติดตามจริงๆ คือเป้าหมายสุดท้ายหรือ Conversion ที่ Airbnb พวกเขาติดตามคะแนนคุณภาพอีเมลซึ่งเป็นตัวบ่งชี้ที่ดีเกี่ยวกับคุณภาพการมีส่วนร่วม

เครื่องมือสร้าง URL ของ Google สามารถช่วยในการติดตามหากคุณใช้ Google Analytics

ส่งคะแนนและชื่อเสียง

อีเมลของคุณมี ชื่อเสียงและคะแนนที่เกี่ยวข้อง สิ่งนี้ส่งผลต่อวิธีที่ ISP และผู้ให้บริการกล่องจดหมายจัดการกับอีเมลของคุณ ไม่ว่าพวกเขา จะยอมรับหรือปฏิเสธ และส่งไปยังกล่องจดหมายของผู้รับหรือส่งตรงไปยังสแปม

ปัจจัยสนับสนุนบางประการ ได้แก่ :

• ชื่อเสียง IP ของคุณ (ตรวจสอบของคุณด้วย SenderScore)
• ลายเซ็นชื่อโดเมนของคุณ (ดู DKIM และ SPF)
• อัตราตีกลับและอัตราการร้องเรียน

การส่งอีเมลจำนวนมาก

เมื่อคุณส่งอีเมลจำนวนมาก (ลองนึกภาพแคมเปญที่มีอีเมลนับล้านๆ ฉบับ) อีเมลเหล่านั้นจะไม่ถูกส่งในทันที สามารถส่งได้เร็วเท่าที่เซิร์ฟเวอร์และที่อยู่ IP สามารถจัดการได้ โปรดทราบว่าผู้รับของคุณอาจไม่ได้รับอีเมลในเวลา เดียวกัน ทุกประการ

ดังนั้น หากคุณส่งอีเมลหลายล้านฉบับพร้อมกัน คุณอาจต้องการ IP สองสาม ตัวเพื่อจัดการกับโหลด

ไคลเอนต์อีเมล

Litmus ติดตามส่วนแบ่งการตลาดของไคลเอนต์อีเมลตามสถิติภายในของตัวเอง โปรดทราบว่าฐานลูกค้าของคุณอาจไม่เหมือนกัน แต่เป็นตัวบ่งชี้ที่ดี

นี่คือสถิติ ณ เดือนธันวาคม 2559:

• ไอโฟน: 33%
• จีเมล: 19%
• ไอแพด: 12%
• แอนดรอยด์: 8%
• แอปเปิ้ลเมล: 7%

โปรดทราบว่า อีเมลบางฉบับไม่สามารถติดตาม ได้ การติดตามอีเมลทำได้โดยใช้การติดตามพิกเซล ดังนั้นเฉพาะไคลเอ็นต์ที่เปิดใช้งานรูปภาพเท่านั้นที่จะรายงานกลับ

เทมเพลต HTML

การสร้างเทมเพลตอีเมล HTML อาจเป็นเรื่องยุ่งยาก เป็นผลให้มีอีเมลที่ออกแบบมาไม่ดีจำนวนมาก — เกะกะ, ธีม, ละเอียด, ไร้จุดหมาย, เสียสมาธิ หากคุณชอบความท้าทายหรือต้องการรูปลักษณ์และความรู้สึกที่ไม่เหมือนใคร การสร้างของคุณเองอาจเป็นเรื่องที่สนุกและคุ้มค่า อีกทางหนึ่งคือมีเทมเพลตอีเมลที่ดี:

• เทมเพลตสารสีน้ำเงิน
• เทมเพลตอีเมล HTML ที่ตอบสนองง่ายจริงๆ
• เทมเพลตอีเมล HTML
• Foundation for Emails 2

การสร้างเทมเพลตอีเมล HTML

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

เอ็นจิ้นการแสดงผลไคลเอ็นต์

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

โปรแกรมรับส่งเมลใช้ เอ็นจิ้นต่าง ๆ เพื่อแสดง อีเมล HTML:

• Apple Mail, Outlook สำหรับ Mac, Android Mail และ iOS Mail ใช้ WebKit
• Outlook 2000, 2002 และ 2003 ใช้ Internet Explorer
• Outlook 2007, 2010 และ 2013 ใช้ Microsoft Word (ใช่ Word!)
• เว็บไคลเอ็นต์ใช้กลไกของเบราว์เซอร์ (เช่น Safari ใช้ WebKit และ Chrome ใช้ Blink)

ลูกค้าจะเพิ่ม รสชาติของสไตล์ของตัวเอง ลงไปด้วย ตัวอย่างเช่น Gmail ตั้งค่าแบบอักษร <td> ทั้งหมดเป็น font-family: Arial,sans-serif; .

ดูสถิติของคุณเองเพื่อที่คุณจะได้รู้ว่าต้องออกแบบอะไร

รองรับ Gmail สำหรับ Inline CSS และ Media Queries

Google เพิ่งประกาศการสนับสนุน CSS แบบฝังและคิวรีสื่อ ใน Gmail นี่เป็นเรื่อง ใหญ่ สำหรับอุตสาหกรรมการพัฒนาอีเมล

ในเดือนกันยายน 2559 Gmail จะรองรับคุณสมบัติ CSS จำนวนมาก ซึ่งทำให้การพัฒนาเทมเพลตสำหรับ Gmail ง่ายขึ้นมาก

การใช้ตาราง HTML สำหรับเลย์เอาต์

Divs มีปัญหาเรื่องตำแหน่งและโมเดลกล่องในไคลเอนต์ที่แตกต่างกัน — โดยเฉพาะโปรแกรมที่ใช้ Microsoft Word เพื่อแสดงผล (เช่น Outlook) คุณสามารถใช้ divs ได้หากต้องการ แต่จะปลอดภัยกว่าในการเขียนโค้ดเหมือนปี 1999 และ ยึดติดกับ table ซึ่งหมายความว่า:

• <table> แทนที่จะเป็น <div>
• #FFFFFF แทน #FFF
• padding แทน margin ,
• CSS2 แทน CSS3
• HTML4 แทน HTML5
• background-color แทน background ,
• แอตทริบิวต์ HTML แทน CSS
• CSS แบบอินไลน์แทนสไตล์ชีตหรือ <style> บล็อก

นี่เป็นแนวทางปฏิบัติที่ดีที่สุด คุณสามารถเพิกเฉยต่อเส้นทางที่ปลอดภัยและก้าวต่อไปได้อย่างแน่นอน

เมื่อใช้ตาราง อย่าลืม border="0" cellpadding="0" cellspacing="0" หากคุณใช้ Premailer จะมีการประกาศ CSS พิเศษสำหรับการใช้แอตทริบิวต์ HTML เหล่านี้

CSS แบบอินไลน์

ไคลเอ็นต์บางตัว (โดยเฉพาะ Gmail จนถึงล่าสุด) จะ ตัด CSS ใดๆ ที่ไม่ได้ อยู่ในไฟล์ . คุณมีสองตัวเลือกที่นี่:

• เขียน CSS แบบอินไลน์ตามที่คุณไป
• ใช้อินไลเนอร์ CSS บนเว็บ
• ใช้อินไลเนอร์ CSS แบบเป็นโปรแกรม
• ให้ ESP ของคุณจัดการอินไลน์นิ่งให้คุณ (หากรองรับ)

การเขียนแบบอินไลน์ขณะใช้งานไม่ใช่โซลูชันที่ปรับขนาดได้หรือบำรุงรักษาได้พอดี ดังนั้นฉันมักจะไม่แนะนำสิ่งนี้ แต่ฉันรู้ว่านักพัฒนาอีเมลจำนวนมากชอบสิ่งนี้เพื่อที่จะควบคุมได้ 100% หากคุณเขียน CSS แบบอินไลน์ด้วยตนเอง ฉันขอแนะนำให้ใช้ตัวอย่างและ/หรือภาษาเทมเพลตที่มีบางส่วนและตัวช่วย นี้จะช่วยให้คุณไม่ต้องทำซ้ำตัวเอง

อินไลน์เนอร์บนเว็บประกอบด้วย CSS Inliner ที่ตอบสนองของ HTML Email และ Foundation for Email Inliner ของอีเมล

สำหรับอินไลเนอร์แบบเป็นโปรแกรม ฉันแนะนำโมดูล Node.js Juice Premailer gem และ Roadie เป็นทางเลือก Ruby ที่ดี

ปุ่ม

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

ความชอบของฉันคือใช้วิธีแก้ปัญหาต่อไปนี้ ต่อไปนี้คือวิธีปกติที่คุณจะจัดรูปแบบปุ่มสำหรับเว็บ:

 <a href="#" class="btn btn-primary">Click Here</a>

ให้เขียนแบบนี้แทน

 <table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary"> <tr> <td align="center"> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td> <a href="" target="_blank">Take action now</a> </td> </tr> </table> </td> </tr> </table>

จากนั้น เมื่อ CSS ของคุณอยู่ในบรรทัดแล้ว จะมีลักษณะดังนี้:

 <table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary" width="100%"> <tr> <td align="center" valign="top"> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td valign="top" bgcolor="#3498db" align="center"> <a href="">Take action now</a> </td> </tr> </table> </td> </tr> </table> 

เกิดอะไรขึ้นที่นี่? <td> อันแรกเป็น wrapper ที่ช่วยเราให้ปุ่มอยู่ตรงกลาง <td> ที่สองคือขนาดของปุ่ม ไคลเอนต์บางตัว (เช่น Outlook) ไม่รู้จักการเติมบนแท็ก <a> ดังนั้นเราจึงเติมสีพื้นหลังของเซลล์ตาราง แท็ก <a> จะใช้พื้นที่ว่างใน <td> ที่สอง และพื้นที่ทั้งหมดจะสามารถคลิกได้ ตรวจสอบโค้ดและการทดสอบไคลเอ็นต์เกี่ยวกับ Litmus

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

VML คืออะไร? หากคุณเคยใช้เวลาในการพัฒนาอีเมล คุณก็อาจพบข้อมูลอ้างอิงบางอย่างเกี่ยวกับอีเมลนั้น Vector Markup Language (VML) ได้รับการสนับสนุนโดย Outlook เวอร์ชันเก่า จากข้อมูลของ Microsoft ใน Internet Explorer (IE) 10 VML นั้นล้าสมัย ซึ่งหมายความว่าจะไม่รองรับ IE เวอร์ชันใหม่อีกต่อไป อย่างไรก็ตาม ตราบใดที่มี Outlook 2007, 2010 และ 2013 อยู่ใกล้ๆ คุณจะเห็นว่ามีการใช้ Outlook นี้ โดยทั่วไปสำหรับ รูปภาพพื้นหลัง

วิชาการพิมพ์

โดยทั่วไป การใช้แบบอักษรมาตรฐานของระบบจะง่ายที่สุด ซึ่งรวมถึง Helvetica, Arial และอื่นๆ อย่างไรก็ตาม เรา สามารถใช้แบบอักษรของเว็บ ได้ เช่น Google Fonts วางไว้หลังคิวรี สื่อแบบมีเงื่อนไขของ WebKit เพื่อไม่ให้ Outlook สับสน:

 <style> @import url(https://fonts.googleapis.com/css?family=Pacifico); /* Type styles for all clients */ h1 { font-family: Helvetica, Arial, serif; } /* Type styles for WebKit clients */ @media screen and (-webkit-min-device-pixel-ratio:0) { h1 { font-family: Pacifico, Helvetica, Arial, serif !important; } } </style>

อย่าลืม รวมกลุ่มแบบอักษร ขนาดแบบอักษรและสี สำหรับทุกๆ <td> มิฉะนั้น คุณอาจเสี่ยงที่ลูกค้าจะเขียนทับรูปแบบประเภทที่คุณเลือกอย่างระมัดระวัง

เงื่อนไข

เราสามารถใช้สไตล์ CSS เฉพาะและแสดงหรือซ่อนองค์ประกอบและเนื้อหาสำหรับ Outlook เวอร์ชันต่างๆ ได้

เป้าหมายต่อไปนี้มุ่งเป้าไปที่ Outlook เวอร์ชันที่ใช้ Microsoft Word ทั้งหมด:

 <!--[if mso]> Only Microsoft Word-based versions of Outlook will see this. <![endif]-->

ตัวอย่างต่อไปนี้กำหนดเป้าหมายเวอร์ชันที่ใช้ IE ของ Outlook:

 <!--[if (IE)]> Only IE-based versions of Outlook will see this. <![endif]-->

นอกจากนี้เรายังสามารถกำหนดเป้าหมายหมายเลขเวอร์ชันเฉพาะของ Outlook:

 <!--[if mso 12]> Only Outlook 2007 will see this. <![endif]-->

เราสามารถกำหนดเป้าหมายไคลเอนต์ที่ใช้ WebKit ด้วยแบบสอบถามสื่อ:

 .special-webkit-element { display: none; } @media screen and (-webkit-min-device-pixel-ratio:0) { .special-webkit-element { display: block !important; } }

รูปภาพและสื่อ

รูปภาพในอีเมล

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

• Outlook บล็อกการแสดงภาพ ตามค่าเริ่มต้น
• Apple Mail ไม่ได้
• Gmail ไม่มี (อีกต่อไป)

อย่าลืมใส่ข้อความแสดง alt ดีสำหรับรูปภาพทั้งหมดของคุณ ข้อความสามารถบอกผู้ใช้ว่ารูปภาพนั้นพูดอะไร หรือแค่อธิบายว่ามันคืออะไร (เช่น “โลโก้บริษัท”) คุณสามารถ alt ด้วยข้อความแสดงแทนสำหรับลูกค้าที่ปิดรูปภาพ เช่นเดียวกับ Email Monks:

อย่าลืมรวมการรีเซ็ตพื้นฐานสำหรับรูปภาพทั้งหมด:

 <img src="https://www.smashingmagazine.com/wp-content/uploads/2016/11/" alt="" width="" height="" border="0">

GIF แบบเคลื่อนไหวได้รับการสนับสนุน ในไคลเอ็นต์ส่วนใหญ่ Outlook เวอร์ชัน 2007 ถึง 2013 ไม่รองรับ GIF แบบเคลื่อนไหว แต่จะถอยกลับไปที่เฟรมแรก

อย่าลืมบีบอัดเนื้อหาสื่อของคุณและอัปโหลดไปยังเครือข่ายการจัดส่งเนื้อหา (CDN) เช่น Amazon Web Services, Cloudinary หรือ imgix ESP การตลาดส่วนใหญ่จะจัดการให้คุณ

กราฟิกแบบเวกเตอร์ที่ปรับขนาดได้ (SVG) มีข้อดีมากมายบนเว็บ อย่างที่คุณคาดหวัง การสนับสนุนทางอีเมลจะแตกต่างกันไป และ SVG ต้องการแฮ็กสำรองหรือเงื่อนไขสองสามครั้ง โดยทั่วไป ฉันแนะนำให้หลีกเลี่ยง SVG ในอีเมล แต่ถ้าคุณต้องการจริงจังกับมัน CSS-Tricks มีคำแนะนำเกี่ยวกับการสนับสนุน SVG ในอีเมล

สำหรับรูปภาพที่ใช้งานได้กับ Retina ให้ใส่รูปภาพที่ใหญ่ขึ้น (1.5× ถึง 3×) แล้วปรับขนาด โดยทั่วไป ฉันจะบันทึกรูปภาพคุณภาพต่ำที่มีขนาด 2× ซึ่งใช้ได้ดี (ฉันได้เขียนเพิ่มเติมเกี่ยวกับเทคนิคนี้แล้ว)

โปรดทราบว่าสำหรับ Outlook คุณต้องประกาศความกว้างของรูปภาพด้วยแอตทริบิวต์ width มิฉะนั้น Outlook อาจแสดงความกว้างจริงของรูปภาพและทำให้อีเมลของคุณเสียหาย

วิดีโอในอีเมล

รองรับวิดีโอใน iOS, Apple Mail และ Outlook.com คุณสามารถใช้คิวรีสื่อเพื่อแสดงหรือซ่อนวิดีโอตามไคลเอนต์ Email on Acid มีเพิ่มเติมเกี่ยวกับการสนับสนุนวิดีโออีเมล

สำหรับแรงบันดาลใจ โปรดดูบทแนะนำเกี่ยวกับการเข้ารหัสวิดีโอ HTML5 ของ Kevin Mandeville เป็นพื้นหลังในอีเมล สิ่งที่น่าประทับใจและควรค่าแก่การดู

แบบฟอร์มในอีเมล

การสนับสนุนองค์ประกอบแบบฟอร์มแตกต่างกันไป พยายามหลีกเลี่ยงและ ลิงก์ไปยังแบบฟอร์มภายนอก หากต้องการ Campaign Monitor ให้คำแนะนำเกี่ยวกับแบบฟอร์ม

แน่นอนว่ามันขึ้นอยู่กับวัตถุประสงค์ของคุณ การอยู่ห่างจากแบบฟอร์มนั้นปลอดภัยกว่า แต่ Rebelmail และ Mixmax ได้ทำสิ่งที่น่าสนใจด้วยแบบฟอร์มสำหรับแบบสำรวจและอีคอมเมิร์ซ พร้อมการสนับสนุนทางเลือกที่ดี

การดำเนินการของ Gmail

Google ทำให้การดำเนินการที่สะดวกสำหรับ Gmail คุณอาจเคยเห็นพวกเขาบน GitHub สำหรับปัญหาหรือใน Amazon สำหรับการสั่งซื้อ

การเพิ่มรหัสนั้นตรงไปตรงมา คุณมีสองตัวเลือก:

• JSON-LD
• microdata

การได้รับการอนุญาตพิเศษเกี่ยวข้องกับอีกไม่กี่ขั้นตอน คุณทดสอบการทำงานของ Gmail ด้วยที่อยู่ @gmail.com ได้

ข้อความนำหน้า

สิ่งที่สำคัญแต่มักถูกลืมคือข้อความนำหน้า ลูกค้าบางรายแสดงข้อความตัวอย่าง ถัดจากหรือใต้หัวเรื่อง ไคลเอนต์เหล่านี้รวมถึง iOS, Apple Mail, Outlook 2013, Gmail และ AOL

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

 <span>Preheader text goes here</span>

ใช้หัวเรื่องและเครื่องมือนำหน้าของ Austin Woodall เพื่อดูตัวอย่างหัวเรื่องอีเมลและหัวเรื่องล่วงหน้า

อีเมลทดสอบ

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

คุณสามารถทดสอบอีเมลของคุณได้หลายวิธี:

• ส่งอีเมลถึงตัวคุณเองและตรวจสอบบนไคลเอ็นต์เดสก์ท็อป (Outlook) เว็บไคลเอ็นต์ (Gmail) และไคลเอ็นต์มือถือ (iOS Mail)
• ทำการทดสอบอัตโนมัติโดยใช้สารสีน้ำเงินหรืออีเมลบนกรด
• ตรวจทานเนื้อหา และตรวจสอบการเรนเดอร์เลย์เอาต์
• A/B ทดสอบเนื้อหาประเภทต่างๆ ความยาวของเนื้อหา และหัวเรื่อง

คุณจะ ส่งอีเมล HTML ถึงตัวคุณเองได้อย่างไร คำถามที่ดี. มันยากกว่าที่คุณคิด PutsMail ให้คุณทำสิ่งนี้ได้ค่อนข้างง่าย และ Thunderbird ให้คุณเขียนด้วยตัวแก้ไข HTML

MIME หลายส่วน

อีเมลข้อความธรรมดาก็คือข้อความธรรมดานั่นเอง อีเมล HTML เป็นเพียง HTML อีเมลส่วนใหญ่ที่คุณส่งหรือรับคืออีเมลแบบหลายส่วน MIME (ส่วนขยายจดหมายทางอินเทอร์เน็ตอเนกประสงค์) (เพื่อไม่ให้สับสนกับประเภท MIME) มาตรฐานนี้รวมทั้งข้อความธรรมดาและ HTML โดยปล่อยให้ผู้รับเป็นผู้ตัดสินใจว่าจะแสดงผลแบบใด

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

นอกจากนี้ โปรดทราบว่าไคลเอนต์บางตัวแสดงอีเมลข้อความธรรมดาเป็น HTML ตัวอย่างเช่น Gmail จะเพิ่มรูปแบบเริ่มต้นและเปลี่ยน URL เป็นลิงก์ ESP ส่วนใหญ่จะสร้าง MIME ให้กับคุณ ดังนั้นคุณจึงไม่ต้องกังวลกับมันจริงๆ บางคนจะสร้างเวอร์ชันข้อความธรรมดาตาม HTML ของคุณ

เคล็ดลับสำหรับมือโปร: ใน Gmail ให้เลือก "แสดงต้นฉบับ" จากเมนูแบบเลื่อนลงเพื่อดู MIME แบบเต็ม

ส่วน MIME ใหม่ปรากฏขึ้น text/watch-html เนื้อหานี้จะแสดงเฉพาะใน Apple Watch เท่านั้น (และไคลเอ็นต์อื่นๆ ที่รองรับ MIME ประเภทนี้นับจากนี้เป็นต้นไป)

การช่วยสำหรับการเข้าถึง

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

ฉันเห็นการสนทนาเพียงเล็กน้อยเกี่ยวกับการเข้าถึงอีเมล แต่สิ่งหนึ่งที่โดดเด่นคือโพสต์ของ Mark Robbins เกี่ยวกับการเข้าถึง เขาแนะนำสิ่งต่อไปนี้:

• เพิ่ม role="presentation" ให้กับแต่ละตารางเพื่อให้ชัดเจนว่ามีการใช้ตารางสำหรับเลย์เอาต์
• alt ข้อความแสดงแทนพร้อมคำอธิบายที่มีความหมาย
• หากคุณไม่ต้องการหรือต้องการข้อความแสดงแทน ให้ใช้ alt alt="" เพื่อให้โปรแกรมอ่านหน้าจอทราบว่าควรเว้นว่างไว้
• ใช้แท็ก HTML เชิงความหมาย เช่น <p> และ <h1> หากมี
• ใช้แอตทริบิวต์ role สำหรับองค์ประกอบ เช่น ส่วนหัวและส่วนท้าย (เช่น role="header" )

การออกแบบอีเมลตอบสนอง

• อีเมลที่เปิดบนมือถืออยู่ที่ 50% และกำลังเพิ่มขึ้น เมตริกที่แน่นอนขึ้นอยู่กับรายงานที่คุณตรวจสอบและกลุ่มเป้าหมายที่คุณให้ความสำคัญ แต่ฉันคิดว่าเราทุกคนเห็นพ้องต้องกันว่านี่เป็นสิ่งสำคัญ
• ส่วนแบ่งการตลาดไคลเอนต์อีเมล ณ เดือนสิงหาคม 2559 ทำให้ iPhone อยู่ที่ 33%, iPad ที่ 11% และ Android ที่ 10% (นั่นคือมากกว่า 50%!)
• MailChimp พบว่าการคลิกที่ไม่ซ้ำกันในหมู่ผู้ใช้มือถือสำหรับแคมเปญที่ตอบสนองเพิ่มขึ้นจาก 2.7 เป็น 3.1% - เพิ่มขึ้นเกือบ 15%

“การออกแบบเว็บที่ตอบสนองตามอุปกรณ์” เป็นวลีที่อีธาน มาร์กอตต์ ประกาศใช้ในปี 2010:

ด้วยการผสมผสานเลย์เอาต์แบบใช้กริดและคิวรีสื่อ CSS3 เราสามารถสร้างการออกแบบเดียวที่ตอบสนองต่อรูปร่างของการแสดงผลที่แสดง

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

ก่อนหน้านี้ Gmail ไม่รองรับการสืบค้นข้อมูลสื่อ โชคดีที่ ณ เดือนกันยายน 2559 ลูกค้าส่วนใหญ่ทำ อย่างไรก็ตาม ลูกค้ามือถือหลายรายยังคงไม่มี รวมถึง Yahoo, Windows Phone 8 และ Gmail สำหรับ Android

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

ของเหลว

ทางออกที่ง่ายที่สุดคือยึดคอลัมน์เดียวและทำให้อีเมลของคุณลื่นไหล ซึ่งหมายความว่าเมื่อวิวพอร์ตหดตัว พื้นที่เนื้อหาของคุณจะลดลง

 .container { max-width: 600px; width: 100%; }

ตอบสนองและปรับตัว

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

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

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

ไฮบริดและ Spongy

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

เทคนิคนี้จัดทำโดย ActionRocket และ Nicole Merlin ได้เขียนบทช่วยสอนทีละขั้นตอนที่ยอดเยี่ยม

นี่คือตัวอย่างโค้ดที่ฉันใช้สร้างอีเมลส่วนใหญ่

 <!--[if (gte mso 9)|(IE)]> <table align="left" border="0" cellspacing="0" cellpadding="0" width="100%"> <tr> <td align="left" valign="top" width="50%"> <![endif]--> <div class="span-3">...</div> <!--[if (gte mso 9)|(IE)]> </td> <td align="left" valign="top" width="50%"> <![endif]--> <div class="span-3">...</div> <!--[if (gte mso 9)|(IE)]> </td> </tr> </table> <![endif]-->

 @media only screen and (max-width: 620px) { .span-3 { max-width: none !important; width: 100% !important; } .span-3 > table { max-width: 100% !important; width: 100% !important; } }

ดูที่เก็บโอเพ่นซอร์สแบบรูพรุนของ Fabio Carneiro บน GitHub และอ่านแนวทางของ Stig ในการเขียนโค้ดอีเมลเพื่อมือถือเป็นอันดับแรก Remi Parmentier ยังมีเทคนิคการตอบสนองอีกแบบหนึ่งซึ่งไม่ต้องการการสืบค้นสื่อและใช้ประโยชน์จากฟังก์ชัน calc()

รูปภาพที่ตอบสนอง

ดังที่กล่าวไว้ ใช้ภาพ Retina ที่ 1.5× ถึง 3× และกำหนดขนาดภาพแบบอินไลน์

 <img src="https://www.smashingmagazine.com/wp-content/uploads/2016/11/logo.png" height="100" width="600" alt="Company Logo">

เราไม่สามารถพึ่งพา max-width: 100%; เพราะลูกค้าบางคนละเลย คุณจะต้องฝัง CSS ต่อไปนี้ด้วย:

 @media only screen and (max-width: 620px) { img { height: auto !important; max-width: 100% !important; width: auto !important; } }

ทำให้เวิร์กโฟลว์ของคุณเป็นแบบอัตโนมัติ

กระบวนการรวบรวมอีเมลกันกระสุนนั้นซับซ้อน มีขั้นตอนมากมายและมีที่ว่างสำหรับสิ่งผิดพลาดมากมาย

เช่นเดียวกับงานที่ซ้ำซากจำเจที่มีขั้นตอน ฉันขอแนะนำให้ทำสิ่งที่คุณสามารถทำได้โดยอัตโนมัติ เพื่อให้คุณสร้างระบบเพียงครั้งเดียวและทำให้ง่ายขึ้นสำหรับการทำงานในอนาคต

Brian Graves มีโพสต์ที่ดีในการสร้างโมดูลอีเมลของคุณ เช่นเดียวกับที่คุณมี ระบบการออกแบบและไลบรารีรูปแบบ สำหรับเว็บไซต์หรือแอปพลิเคชัน คุณควรทำเช่นนั้นสำหรับอีเมล ทำให้ส่วนประกอบ ใช้ซ้ำได้ และอีเมลสอดคล้องกัน ในผลิตภัณฑ์และบริษัทของคุณ

Kevin Mandeville แนะนำให้ใช้ตัวอย่างโค้ดที่ใช้ซ้ำได้เพื่อเพิ่มประสิทธิภาพเวิร์กโฟลว์ของคุณ เพื่อที่คุณจะ ได้ไม่ต้องเขียนโค้ดใหม่ตลอดเวลา ในโพสต์ของเขา เขาสรุปวิธีใช้ตัวอย่างข้อมูลในบรรณาธิการสมัยใหม่ (เช่น Atom และ Sublime) และเขาชี้ไปที่คลังข้อมูลโค้ดที่ชุมชนสนับสนุนซึ่งโฮสต์โดย Litmus

สำหรับส่วนของฉันเอง ฉันได้รวบรวมและเปิดเวิร์กโฟลว์ Grunt สำหรับการสร้างอีเมลอัตโนมัติ มัน รันงานต่างๆ เช่น inlining CSS , บีบอัดรูปภาพ, อัพโหลดรูปภาพไปยัง CDN, ส่งตัวอย่าง และทดสอบด้วย Litmus ทั้งหมดนี้ทำได้ด้วยคำสั่งเดียว หากคุณเพิ่งเริ่มใช้ Grunt ฉันได้เขียนบทช่วยสอนโดยละเอียดเกี่ยวกับวิธีการทำงาน Foundation for Email ยังมีเครื่องมืออัตโนมัติที่ยอดเยี่ยมสำหรับนักพัฒนา เช่นเดียวกับ Mailjet ที่มีเฟรมเวิร์กอีเมลแบบตอบสนอง MJML

มองไปสู่อนาคต

Google เพิ่งเปิดตัวรองรับการสืบค้นสื่อ Microsoft เพิ่งร่วมมือกับ Litmus เพื่อ "ทำให้อีเมลดีขึ้น"; และตอนนี้ Alto ของ AOL รองรับอีเมลที่ตอบสนองแล้ว ดังนั้นอนาคตจึงดูสดใสขึ้นมาก

บริษัทและนักพัฒนาจำนวนมากขึ้นเรื่อยๆ กำลังทดลองกับสิ่งที่เป็นไปได้ด้วยเทคโนโลยีอีเมล: ภาพเคลื่อนไหว CSS, เสียง, ตะกร้าสินค้าในอีเมล คาดว่าจะมีอีเมลเชิงโต้ตอบและจลนศาสตร์เพิ่มขึ้นในปี 2560

บทสรุป

การออกแบบและพัฒนาอีเมลเป็นสัตว์ร้าย มัน เหมือนกับการสร้างหน้าเว็บ… 10 ปีที่แล้ว ผู้ให้บริการอีเมลไคลเอ็นต์ไม่ได้ก้าวหน้าเท่ากับผู้จำหน่ายเว็บเบราว์เซอร์ในการนำมาตรฐานใหม่มาใช้ และเราผู้ใช้และบริษัทต่างๆ ก็ไม่นำไคลเอ็นต์อีเมลใหม่มาใช้เหมือนที่เราทำกับเว็บเบราว์เซอร์ บวกกับการเพิ่มขึ้นของอุปกรณ์เคลื่อนที่ และเราอยู่ในสถานะนี้ที่ต้องสนับสนุน ลูกค้าและเวอร์ชันต่างๆ ที่สลับซับซ้อน

บทนำของฉันที่นี่คือภาพรวมระดับสูง คุณสามารถเจาะลึกทุกจุดเหล่านี้ได้ หวังว่าจะช่วยให้คุณมีความเข้าใจอย่างลึกซึ้งเกี่ยวกับโลกแห่งการสร้างและการส่งอีเมล ข้อมูลโค้ดและแหล่งข้อมูลต่างๆ ได้เพิ่มเวลาหลายชั่วโมงในชีวิตของคุณ

ทรัพยากรที่แนะนำ

• เทมเพลตอีเมล HTML ที่ตอบสนองง่ายจริง ๆ Lee Munroe (เทมเพลตอีเมลโอเพนซอร์ซฟรีของฉัน)
• ออกแบบอีเมลอย่างมืออาชีพ , Jason Rodriguez
• “การเปิดโปงอีเมล HTML” (หลักสูตร), Dan Denney, Code School
• “การออกแบบอีเมลที่ดีที่สุดในจักรวาล (ที่เข้ามาในกล่องจดหมายของฉัน)” อีเมลที่ดีจริงๆ
• “ตัวอย่างและเทคนิคอีเมลแบบไดนามิกและโต้ตอบ (Kinetic)” Justin Khoo

บล็อกที่น่าติดตาม

• การตรวจสอบแคมเปญ
• MailChimp
• สารสีน้ำเงิน
• อีเมลเกี่ยวกับกรด