วิธีสร้างอีเมล HTML

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

หากคุณเคยใช้ตัวแก้ไขอีเมล WYSIWYG (สิ่งที่คุณเห็นคือสิ่งที่คุณได้รับ) แสดงว่าคุณได้สร้างอีเมล HTML แล้ว แต่ละโมดูลที่คุณลากและวางประกอบด้วย HTML และ CSS ในบรรทัด กำหนดว่าองค์ประกอบอีเมลที่แตกต่างกันควรมีลักษณะและการทำงานอย่างไร

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

คำถามที่ดี.

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

• ขนาดตัวอักษร
• ข้อความแสดงแทน
• พรมแดน
• ระยะขอบ
• การขยายความ
• ขนาดรูปภาพ
• สี

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

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

เคล็ดลับ 5 ข้อในการเขียนโค้ดอีเมล HTML

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

1. ทำให้อีเมลของคุณตอบสนอง

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

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

• รวมข้อความค้นหาสื่อ: ข้อความค้นหา สื่อช่วยให้คุณปรับเทมเพลตอีเมลของคุณให้เข้ากับอุปกรณ์ต่างๆ
• ใช้คอลัมน์เดียว: การอ่านอีเมล 2 คอลัมน์บนเดสก์ท็อปอาจเป็นเรื่องง่าย แต่อุปกรณ์เคลื่อนที่อาจดูหนาแน่นเล็กน้อย
• เพิ่มขนาดฟอนต์: อย่าใช้ฟอนต์ที่เล็กกว่าฟอนต์ 13 หรือ 14 พอยท์
• เว้นวรรคลิงก์ของคุณ: คุณไม่ต้องการให้ผู้อ่านคลิกลิงก์ผิดโดยไม่ได้ตั้งใจเพราะลิงก์ของคุณอยู่ใกล้กันเกินไป
• เพิ่มแท็ก alt: แท็ ก Alt อธิบายรูปภาพของคุณในกรณีที่ไม่สามารถโหลดรูปภาพได้

2. เพิ่มภาพเท่าที่จำเป็น

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

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

3. ทำให้มันง่าย

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

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

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

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

4. ใช้เทมเพลตอีเมลที่สร้างไว้ล่วงหน้า

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

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

5. ทดสอบอีเมลของคุณ

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

โชคดีที่มีวิธีที่ดีกว่าในทุกวันนี้

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

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

โครงสร้างอีเมล HTML

อีเมล HTML มีโครงสร้างที่เรียบง่าย:

• DOCTYPE
• หัวข้อ
• ตัว

DOCTYPE

ใช้ <!DOCTYPE> เพื่อบอกเบราว์เซอร์ว่าจะเกิดอะไรขึ้น ในกรณีนี้ จะเป็นอีเมล HTML

หัวข้อ

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

ตัว

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

เทมเพลตอีเมลพร้อมโค้ด HTML

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

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

ดูเทมเพลตอีเมลอื่นๆ จาก Twilio SendGrid

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

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

เริ่มสร้างอีเมล HTML ที่ดีขึ้นวันนี้ ด้วยเทมเพลตที่สร้างไว้ล่วงหน้า