การออกแบบ เทมเพลต และตัวอย่างสำหรับปี 2023

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

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

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

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

ที่นี่ เราได้จัดทำแนวทางปฏิบัติที่ดีที่สุดและเทมเพลตที่พร้อมใช้งาน รวมถึงบทแนะนำสั้นๆ เกี่ยวกับพื้นฐานของอีเมลตอบกลับ

อีเมลตอบกลับยังเข้าถึงได้มากขึ้น เนื่องจากอนุญาตให้สมาชิกอ่านบนอุปกรณ์ที่พวกเขาต้องการ

ต่อไปนี้คือลักษณะอีเมลส่งเสริมการขายที่ฉันได้รับบนเดสก์ท็อป

อีเมลนี้มีภาพที่ยอดเยี่ยม ไอคอนที่ซื้อได้ และจัดรูปแบบอย่างสวยงาม พอเปิดอีเมลบนมือถือก็เจอแบบนี้

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

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

ด้วยอีเมลที่ตอบสนอง ผู้ใช้สามารถปรับปรุงประสบการณ์ของผู้ใช้ เช่นเดียวกับ ROI ของแคมเปญ

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

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

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

มีหลายวิธีที่คุณสามารถออกแบบอีเมลตอบกลับได้

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

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

วิดีโอด้านล่างนี้จะอธิบายวิธีการออกแบบอีเมลด้วยเทมเพลต ในวิดีโอ ผู้ใช้อยู่ใน Klaviyo แต่แนวคิดยังคงเป็นจริงไม่ว่าคุณจะใช้ซอฟต์แวร์ใด

การเข้ารหัสอีเมลตอบกลับ

หากคุณต้องการสร้างองค์ประกอบต่างๆ ของอีเมลที่ตอบสนอง คุณจะต้องทำงานกับคำค้นหาสื่อ

ข้อความค้นหาสื่อเป็นเทคนิค CSS อนุญาตให้คุณตั้งค่ากฎลักษณะที่ปรากฏเฉพาะเมื่อเงื่อนไขบางอย่างเป็นจริงเท่านั้น ตัวอย่างเช่น คุณสามารถระบุขนาดแบบอักษรและขนาดภาพที่จะใช้เมื่อหน้าจอกว้าง 600px หรือเล็กกว่า

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

• ใช้ตัวเลือก “@media” และระบุ “หน้าจอ” สิ่งนี้บ่งชี้ว่ารหัสจะมีผลกับอุปกรณ์ที่มีหน้าจอ
• ตั้งค่า "ความกว้างสูงสุด" ของคุณเป็นพิกเซล สิ่งนี้ระบุขนาดหน้าจอที่รหัสจะมีผล
• ระบุคำแนะนำสไตล์ CSS ที่คุณต้องการให้หน้าจอนั้นติดตาม

ลองมาดูโค้ดด้านล่างกัน

หน้าจอ @media และ (ความกว้างสูงสุด: 600px)

ร่างกาย

ขนาดตัวอักษร: 30px;

เมื่อนำไปใช้กับ CSS ของอีเมล เนื้อความจะปรากฏที่ขนาด 30px สำหรับหน้าจอที่มีความกว้าง 600px หรือเล็กกว่า

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

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

หากคุณไม่เชี่ยวชาญด้านเทคนิคหรือต้องการวิธีที่ง่ายกว่านี้ ให้ลองใช้เครื่องมือการตลาดผ่านอีเมลที่มีเทมเพลตตอบสนองในตัว ตัวอย่างเช่น ซอฟต์แวร์อีเมลฟรีของ HubSpot มีเทมเพลตแบบลากและวางที่ตอบสนองตามค่าเริ่มต้น

ตัวอย่างการออกแบบอีเมลที่ตอบสนอง

ได้เวลาสำรวจตัวอย่างแล้ว เริ่มด้วยวิดีโอนี้ ซึ่งจะกล่าวถึงแคมเปญการตลาดผ่านอีเมลที่ดีที่สุดบางส่วน

จากนั้น คุณสามารถอ่านเกี่ยวกับการออกแบบอีเมลตอบกลับที่เราชื่นชอบ

1. จดหมายข่าว TOMS

ในจดหมายข่าวของ TOMS ข้อแตกต่างหลักระหว่างเวอร์ชันเดสก์ท็อปและเวอร์ชันมือถือคือการวางซ้อนและขนาดของโฆษณาแบบรูปภาพ

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

ที่มาของภาพ

2. พิพิธภัณฑ์ศิลปะเมโทรโพลิทัน

ดังที่เห็นในจดหมายข่าว TOMS การออกแบบอีเมลที่ตอบสนองจะช่วยจัดเรียงเนื้อหาในลักษณะที่ดึงดูดสายตาและง่ายต่อการแยกแยะ ตัวอย่างจาก MET นี้ไม่แตกต่างกัน

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

ที่มาของภาพ

3. มัลเบอร์รี่

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

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

ที่มาของภาพ

เทมเพลตอีเมลตอบกลับ

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

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

เทมเพลตอีเมลตอบกลับช่วยคุณประหยัดเวลาในการออกแบบอีเมลที่สามารถเลือกได้ ตัวอย่างเช่น เครื่องมือการตลาดผ่านอีเมลของ HubSpot มีเทมเพลตมากกว่า 60 แบบสำหรับอีเมลตอบกลับเท่านั้น

มาดูตัวเลือกเทมเพลตกันบ้าง

1. ฮับสปอต

HubSpot มีเทมเพลตอีเมลตอบกลับ ฟรี สองสามแบบ หากคุณเป็นลูกค้า HubSpot หรือผู้ใช้ฟรี คุณสามารถดาวน์โหลดและทดลองใช้ด้วยตนเอง

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

ที่มาของภาพ

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

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

2. การตรวจสอบแคมเปญ

เทมเพลตที่นำเสนอโดย CampaignMonitor นั้นคล้ายกับเทมเพลตอื่นๆ ซึ่งผลลัพธ์ของอีเมลตอบกลับจะแสดงในเครื่องมือแสดงตัวอย่าง ตัวอย่างเช่น นี่คือเทมเพลต CampaignMonitor:

ที่มาของภาพ

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

เทมเพลต CampaignMonitor มักจะฟรี ดังนั้นจึงเป็นทางเลือกที่ดีหากคุณมีงบประมาณน้อย

3. สไตรโป

Stripo มีเทมเพลตอีเมล HTML ฟรีมากกว่า 300 แบบ คุณสามารถเลือกแม่แบบตามอุตสาหกรรม ฤดูกาล ประเภท และคุณสมบัติ ตัวอย่างเช่น นี่คือเทมเพลตจากส่วนอุตสาหกรรมธุรกิจของพวกเขา

ที่มาของภาพ

สัญญาณที่ดีของเทมเพลตอีเมลตอบกลับที่มั่นคงคือตัวเลือกในการดูตัวอย่างในรูปแบบต่างๆ ของเดสก์ท็อปและสมาร์ทโฟน ดังที่แสดงในโหมดแสดงตัวอย่างของ Stripo

สังเกตว่ามีการใช้เลย์เอาต์แบบคอลัมน์เดียวในการแสดงตัวอย่างมือถือเพื่อให้พอดีกับข้อกำหนดของโทรศัพท์อย่างไร

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

4. การติดต่ออย่างต่อเนื่อง

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

ที่มาของภาพ

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

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

ตอนนี้เราได้ดูตัวเลือกเทมเพลตบางส่วนแล้ว มาดูวิธีอื่นในการทำให้อีเมลตอบกลับทำงานพร้อมกับแนวทางปฏิบัติที่ดีที่สุด

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

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

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

อย่าลืมทดสอบอีเมลของคุณก่อนที่จะกด "กำหนดเวลา" ทำการออกแบบให้เสร็จสิ้นเมื่อคุณเห็นลักษณะที่ปรากฏบนความละเอียดหน้าจอหลายระดับเท่านั้น ผู้คนจำนวนมากเข้าถึงอีเมลด้วยมือถือเพียงเพื่อความสะดวก

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

เริ่มต้นใช้งานอีเมลตอบกลับ

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

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

สุดท้ายอย่ากลัวที่จะทดลอง คุณสามารถทดสอบ A/B กับการออกแบบที่ปรับเปลี่ยนตามอุปกรณ์ต่างๆ ได้จนกว่าคุณจะพบเค้าโครงที่ตรงใจมากที่สุด

ในไม่ช้า คุณจะส่งอีเมลตอบกลับและเพิ่มอัตราการเปิดอ่าน