วิธีสร้างเทมเพลตอีเมลที่ตอบสนองต่อหน้าจอใน Braze

Email designer comparing a responsive email layout on a laptop and smartphone

การสร้างเทมเพลตอีเมลแบบตอบสนอง (Responsive) ใน Braze ให้เริ่มจากการตัดสินใจก่อนว่าคุณต้องการใช้ CSS ตามขนาดหน้าจอซึ่งต้องใส่ในตัวแก้ไข HTML หรือต้องการใช้การซ่อน/แสดงแถว (Row-level) ซึ่งตัวแก้ไขแบบลากและวาง (Drag-and-drop) รองรับอยู่แล้ว จากนั้นให้สร้างคอลัมน์เดี่ยวที่แคบซึ่งยังคงอ่านง่ายแม้ว่าไคลเอนต์อีเมลจะตัดสไตล์ของคุณออกไป กำหนดสีพื้นหลังให้ชัดเจนสำหรับโหมดมืด (Dark mode) แล้วจึงทดสอบตามลำดับที่กำหนดไว้

‍

ประเด็นสำคัญ

เทมเพลตแบบตอบสนองจะยังคงอ่านง่ายบนโทรศัพท์ แม้ว่าไคลเอนต์อีเมลจะตัด CSS บางส่วนของคุณออกไปก็ตาม
เลือกตัวแก้ไขตามการควบคุมที่คุณต้องการ: ใช้แถวที่มีฟังก์ชันซ่อนบนมือถือในตัวแก้ไขแบบลากและวาง หรือใช้ CSS ตามขนาดหน้าจอในตัวแก้ไข HTML
รักษาความกว้างของเทมเพลตที่ใช้ร่วมกันทั้งบนมือถือและเดสก์ท็อปให้ไม่เกิน 500 พิกเซล โดยสร้างด้วยตารางซ้อนกัน (Nested tables) และสไตล์แบบอินไลน์ (Inline styles)
กำหนดสีพื้นหลังให้กับคอนเทนเนอร์ด้านนอกและทุกส่วนสำคัญ เพื่อไม่ให้โหมดมืดซ่อนเนื้อหาของคุณไป
HTML ที่ส่งกลับมาจาก Connected Content จะไม่ถูกทำเป็นอินไลน์ ดังนั้นควรส่งกลับมาพร้อมกับสไตล์ที่ทำเป็นอินไลน์เรียบร้อยแล้ว
ทดสอบตามลำดับที่กำหนด: มุมมองมือถือ, โหมดมืด, ดูตัวอย่างในมุมมองผู้ใช้, Inbox Vision และสุดท้ายคือบนอุปกรณ์จริง

‍

อะไรที่ทำให้เทมเพลตอีเมลใน Braze เป็นแบบตอบสนอง?

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

คำแนะนำด้านอีเมลของ Braze ก็ชี้ไปในทิศทางเดียวกัน โดยแนะนำให้ใช้รูปแบบการตอบสนองแบบเน้นมือถือเป็นหลัก (Mobile-first) ซึ่งไม่พึ่งพาเพียงแค่ Media queries สำหรับการแสดงผลบนมือถือเท่านั้น ให้ถือว่าประโยคนั้นเป็นโจทย์หลักสำหรับทุกเทมเพลต และเนื้อหาที่เหลือในโพสต์นี้จะอ้างอิงตามหลักการดังกล่าว

‍

คุณควรสร้างเทมเพลตแบบตอบสนองในตัวแก้ไขใด?

เลือกตัวแก้ไขตามประเภทการควบคุมที่คุณต้องการ เนื่องจากทั้งสองแบบจัดการการแสดงผลบนมือถือต่างกัน ตารางนี้จะแสดงสิ่งที่ Braze ระบุไว้สำหรับแต่ละแบบ

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

‍

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

‍

ทำไมเลย์เอาต์ถึงควรทำงานได้โดยไม่ต้องพึ่งพา Media queries?

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

อาการที่เห็นได้ชัดคืออีเมลแสดงผลในมุมมองเดสก์ท็อปภายในแอป Gmail ซึ่ง Braze ได้ระบุถึงผลลัพธ์นี้ไว้โดยตรง และนั่นคือเหตุผลว่าทำไมเลย์เอาต์สำรอง (Fallback layout) ถึงมีความสำคัญมากกว่า Media queries

กฎ 4 ข้อที่บันทึกไว้จะช่วยรักษาเลย์เอาต์สำรองนั้นให้ใช้งานได้ดี

รักษาความกว้างให้ไม่เกิน 500 พิกเซล หากใช้เทมเพลตเดียวสำหรับทั้งมือถือและเดสก์ท็อป
ใช้ตารางซ้อนกันสำหรับเลย์เอาต์ แทนการใช้แท็ก div และหลีกเลี่ยงการจัดตำแหน่งแบบ absolute หรือ relative
ใช้ inline styles สำหรับ CSS ของคุณแทนการพึ่งพา style block
อย่ากำหนดความสูงและความกว้างให้กับรูปภาพ เพราะอาจทำให้เกิดพื้นที่ว่างในอีเมลที่แสดงผลไม่สมบูรณ์

‍

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

‍

คุณจะป้องกันไม่ให้โหมดมืด (Dark mode) ทำให้เทมเพลตของคุณแสดงผลผิดพลาดได้อย่างไร?

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

วิธีแก้ไขคือ ให้กำหนดสีพื้นหลังให้กับคอนเทนเนอร์ด้านนอกและส่วนประกอบหลักแต่ละส่วน แทนที่จะพึ่งพาภาพพื้นหลังเพียงอย่างเดียวสำหรับพื้นที่สว่าง จากนั้นให้เปิดโหมดมืดในส่วน Preview and Test ของโปรแกรมแก้ไขแบบลากและวาง แล้วตรวจสอบทุกส่วน ไม่ใช่แค่ส่วนฮีโร่เท่านั้น

ข้อความที่มีความต่างของสีต่ำ (Low-contrast) มีความเสี่ยงเป็นพิเศษ เนื่องจาก Braze ตั้งข้อสังเกตว่าโปรแกรมรับอีเมลบางตัวจะกลับสีข้อความในโหมดมืด หากเนื้อหาของคุณอ่านได้เฉพาะบนพื้นหลังสีขาว ให้สันนิษฐานไว้ก่อนเลยว่าธีมมืดจะทำให้อ่านยาก ดังนั้นควรเพิ่มความต่างของสีตั้งแต่แรก

‍

Content Blocks และ Connected Content ส่งผลต่อผลลัพธ์อย่างไร?

Shared blocks จะมาพร้อมกับความกว้างของตัวเอง Braze แนะนำให้ปรับความกว้างของ Content Block ให้ตรงกับความกว้างของเทมเพลตอีเมล เพราะบล็อกที่สร้างมาสำหรับเทมเพลตที่กว้างกว่าจะทำให้คอลัมน์แคบๆ ที่คุณออกแบบไว้พังได้

การดูตัวอย่าง (Preview) อาจทำให้เข้าใจผิดได้ ในกรณีที่คุณใช้ Liquid สร้างเทมเพลต Content Block ทาง Braze ระบุว่า media queries สำหรับมือถือในบล็อกอาจไม่แสดงผลในหน้าตัวอย่างเหมือนกับของจริง ดังนั้นควรตรวจสอบบล็อกเหล่านั้นบนอุปกรณ์จริงก่อนที่จะเชื่อผลลัพธ์ในหน้าตัวอย่าง

Connected Content จำเป็นต้องมีการจัดสไตล์ของตัวเอง การทำ CSS inlining จะทำงานก่อนที่ Connected Content จะถูกประมวลผล และ HTML ที่ได้จาก Connected Content จะไม่ผ่านขั้นตอนการทำ inlining เดียวกัน ดังนั้น HTML ใดๆ ที่ส่งกลับมาจาก endpoint ของคุณควรมีสไตล์แบบ inline มาให้เรียบร้อยแล้ว

‍

คุณควรทดสอบเทมเพลตที่ตอบสนองต่ออุปกรณ์ต่างๆ (Responsive template) ตามลำดับอย่างไร?

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

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

‍

Inbox Vision มีข้อจำกัดสองประการที่ควรวางแผนไว้ คือบริษัทของคุณมีขีดจำกัดในการดูตัวอย่าง ดังนั้นควรเก็บไว้ใช้กับเทมเพลตที่ผ่านการทดสอบสามขั้นตอนแรกมาแล้วเท่านั้น นอกจากนี้ยังไม่รองรับข้อความที่มีตรรกะการยกเลิก (abort logic) และ Braze แนะนำให้เพิ่มค่าเริ่มต้น (default values) ลงใน Liquid ก่อนที่จะเริ่มใช้งาน

‍

การตรวจสอบเทมเพลตควรเน้นหาข้อผิดพลาดประเภทใดบ้าง?

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

"Vanishing paragraph" หมายถึงเนื้อหาที่หายไปเมื่อเปิดใช้งานโหมดมืด (Dark mode) ของไคลเอนต์อีเมล หากต้องการตรวจสอบปัญหานี้ ให้ใช้ฟีเจอร์สลับโหมดมืดร่วมกับไคลเอนต์ที่รองรับโหมดมืดอย่างน้อยหนึ่งรายการใน Inbox Vision

"Wide block" หมายถึง Content Block ที่ใช้ร่วมกันซึ่งสร้างขึ้นสำหรับเทมเพลตที่มีความกว้างต่างกัน หากต้องการตรวจสอบปัญหานี้ ให้เปรียบเทียบการตั้งค่าความกว้างของบล็อกกับเทมเพลตก่อนทำการแทรก ส่วน "Uninlined fragment" หมายถึง HTML ของ Connected Content ที่ไม่มีสไตล์แบบอินไลน์ หากต้องการตรวจสอบปัญหานี้ ให้ทำการทดสอบส่งจริงโดยที่ปลายทางจะส่งคืนมาร์กอัปจริงกลับมา

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

‍

What does a mobile-first structure look like?

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

<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:#ffffff;">
  <tr>
    <td align="center" style="background-color:#ffffff;">
      <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="max-width:480px;background-color:#ffffff;">
        <tr>
          <td style="padding:16px;font-family:Arial,sans-serif;font-size:16px;line-height:24px;color:#1a1a1a;background-color:#ffffff;">
            สวัสดี {{ ${first_name} | default: 'คุณ' }} คำสั่งซื้อของคุณกำลังเดินทางไปหาคุณแล้ว
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

‍

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

‍

ส่วนนี้เชื่อมต่อกับส่วนอื่นๆ ของโปรแกรมอย่างไร?

เลย์เอาต์เป็นเพียงส่วนหนึ่งของการทำให้อีเมลทำงานได้อย่างมีประสิทธิภาพ คู่มือของเราเกี่ยวกับ แคมเปญอีเมลที่สร้างอัตราการแปลงสูงcover content and calls to action (CTA), andEmail deliverability settings ครอบคลุมเรื่องการทำให้อีเมลของคุณส่งถึงกล่องจดหมายของผู้รับ

บล็อกที่นำกลับมาใช้ใหม่ได้ครอบคลุมอยู่ใน7 วิธีในการส่งคอนเทนต์แบบไดนามิก. การทดสอบรูปแบบเลย์เอาต์ที่แตกต่างกันอยู่ใน A/B testing your email campaignsand measuring results is inการรายงานผลแคมเปญอีเมล.

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

‍

คำถามที่พบบ่อย
‍

1. Can I preview dark mode in the Braze drag-and-drop editor?

ได้ คุณสามารถไปที่ Preview and Test ในโปรแกรมแก้ไขแบบลากและวาง เปิดใช้งาน Dark mode แล้วตรวจสอบผลลัพธ์ใน Inbox Vision ผ่านไคลเอนต์ต่างๆ ได้เลย

2. ฉันสามารถตั้งค่าระยะห่าง (padding) สำหรับมือถือแยกต่างหากในโปรแกรมแก้ไขแบบลากและวางได้หรือไม่?

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

3. ทำไมอีเมลของฉันถึงแสดงผลเป็นเลย์เอาต์เดสก์ท็อปในแอป Gmail?

Gmail อาจลบบล็อกสไตล์ทั้งหมดออกหากอีเมลของคุณมี CSS มากเกินไปหรือมี CSS ที่ไม่รองรับ ดังนั้นคุณควรออกแบบเลย์เอาต์ที่ยังคงอ่านง่ายแม้ไม่มีบล็อกสไตล์ดังกล่าว

4. เทมเพลตอีเมลแบบตอบสนอง (Responsive) ควรมีความกว้างเท่าใด?

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

5. Braze ทำการ Inline CSS ในการตอบกลับของ Connected Content หรือไม่?

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

‍

แหล่งข้อมูล

Brazeเครื่องมือแก้ไขแบบลากและวาง. สืบค้นเมื่อ 14 ต.ค. 2026
Brazeคำถามที่พบบ่อยเกี่ยวกับเครื่องมือแก้ไขแบบลากและวาง. สืบค้นเมื่อ 14 ต.ค. 2026
Brazeแนวทางการใช้งานอีเมล. สืบค้นเมื่อ 14 ต.ค. 2026
Brazeการแทรก CSS แบบอินไลน์. สืบค้นเมื่อ 14 ต.ค. 2026
BrazeInbox Vision. สืบค้นเมื่อ 14 ต.ค. 2026
Brazeการตั้งค่ารูปแบบอีเมลให้เป็นมาตรฐานเดียวกัน. สืบค้นเมื่อ 14 ต.ค. 2026
Brazeคำถามที่พบบ่อยเกี่ยวกับ Liquid. สืบค้นเมื่อ 14 ต.ค. 2026

‍

CustomerIK คือพันธมิตรด้านการติดตั้งใช้งาน Braze ที่มีความเชี่ยวชาญทั้งในด้านการเริ่มต้นใช้งาน การเชื่อมต่อทางเทคนิค การดำเนินงานด้านการตลาด และการจัดการข้อมูลลูกค้า

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

‍