ทำให้การออกแบบอีเมลของคุณตอบสนองกับมือถือได้ใน 5 ขั้นตอนง่ายๆ

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

ตั้งค่าความกว้างของคอลัมน์เป็นเปอร์เซ็นต์ ไม่ใช่พิกเซล

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

ใช้กริดของเหลว

วิธีกริดแบบไหลใช้เปอร์เซ็นต์สำหรับความกว้างของคอลัมน์ เพื่อให้สามารถขยายและย่อได้ตามต้องการตามขนาดหน้าจอ สำหรับเลย์เอาต์แบบสองคอลัมน์ธรรมดา ให้คอลัมน์ด้านซ้ายกว้าง 60-70% และคอลัมน์ด้านขวากว้าง 30-40% ตัวอย่างเช่น:

<ตาราง>

<tr>

<td width=”65%”>เนื้อหาคอลัมน์ 1 ที่นี่</td>

<td width=”35%”>เนื้อหาคอลัมน์ 2 ที่นี่</td>

</tr>

</ตาราง>

ซึ่งจะทำให้คอลัมน์ 1 ใช้พื้นที่ว่าง 65% และคอลัมน์ 2 ที่เหลือ 35% บนหน้าจอเดสก์ท็อปขนาดใหญ่ คอลัมน์ 1 อาจมีความกว้าง 650px ในขณะที่หน้าจอมือถือขนาดเล็กอาจมีความกว้างเพียง 200px เท่านั้น แต่สัดส่วนสัมพัทธ์จะยังคงเท่าเดิม

เพิ่มคำสั่งสื่อสำหรับเบรกพอยต์ที่ตอบสนอง

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

/* สำหรับโทรศัพท์มือถือ: */

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

ตาราง td {

ความกว้าง: 100% !สำคัญ;

}

}

/* สำหรับแท็บเล็ต: */

@media เท่านั้น หน้าจอ และ (ความกว้างขั้นต่ำ: 601px) และ (ความกว้างสูงสุด: 900px) {

ตาราง td {

ความกว้าง: 80% !สำคัญ;

}

}

ซึ่งจะทำให้ตารางและคอลัมน์ขยายได้เต็ม 100% ของความกว้างหน้าจอบนโทรศัพท์ขนาดเล็กและ 80% บนแท็บเล็ต ทำให้การออกแบบตอบสนองได้อย่างเต็มที่

ใช้รูปภาพและสื่อที่ลื่นไหลซึ่งปรับขนาดได้

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

ใช้ขนาดภาพที่ตอบสนอง

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

ตัวอย่างเช่น แทนที่จะรวมเฉพาะรูปภาพกว้างขนาดใหญ่ 1,000px ให้รวม:

• ขนาดกลาง (ประมาณ 600px)
• ขนาดเล็กสำหรับคอลัมน์แคบ (ประมาณ 400px)
• ขนาดเล็กสำหรับหน้าจอมือถือขนาดเล็ก (ประมาณ 200px)

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

ทำให้สื่อเหมาะกับมือถือ

สำหรับสื่ออื่นๆ เช่น วิดีโอหรือ GIF ก็มีตัวเลือกหลายขนาดเช่นกัน วิดีโอควรมีแหล่ง MP4 ที่มีความละเอียดต่างกัน GIF และ iframe (เช่น การฝัง YouTube) ควรมีข้อจำกัดด้านความกว้างที่ปรับขนาดให้พอดีกับหน้าจอ

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

ขนาดตัวอักษรเป็น ems ไม่ใช่พิกเซล

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

ใช้กรอบอีเมลที่ตอบสนอง

เฟรมเวิร์กอีเมลตอบสนองมีส่วนประกอบที่สร้างไว้ล่วงหน้าซึ่งจะปรับขนาดความกว้างของหน้าจอโดยอัตโนมัติ ตัวเลือกยอดนิยมได้แก่ MJML, Foundation for Emails และ Ink เฟรมเวิร์กเหล่านี้ใช้ ems ในการกำหนดขนาด ดังนั้นคุณจึงไม่ต้องกังวลกับการแปลงไฟล์ด้วยตัวเอง

หากไม่ได้ใช้เฟรมเวิร์ก ให้แปลงพิกเซลเป็น em

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

1. กำหนดขนาดตัวอักษรพื้นฐานเป็นพิกเซล สมมุติว่ามันคือ 16px.
2. แปลงเป็น ems ครับ 1em = 16px (ขนาดฐานของคุณ) ดังนั้น 16px = 1em
3. ขนาดใดก็ได้ที่คุณต้องการใช้ ให้หารด้วย 16px แล้วคูณด้วย 1em ตัวอย่างเช่น สำหรับส่วนหัว 24px, 24px/16px = 1.5em
4. แทนที่ขนาดพิกเซลทั้งหมดใน CSS ของคุณด้วย em ที่เทียบเท่ากัน

จัดแนวเนื้อหาของคุณอย่างตอบสนอง

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

ใช้การวัดของเหลว

แทนที่จะใช้ความกว้างพิกเซลคงที่สำหรับคอลัมน์ รูปภาพ และคอนเทนเนอร์ ให้ใช้เปอร์เซ็นต์ ซึ่งจะช่วยให้เนื้อหาของคุณปรับขนาดตามสัดส่วนตามความกว้างของหน้าจอ ตัวอย่างเช่น แทนที่จะใช้รูปภาพที่มี width=”600px” ให้ใช้ width=”50%”

หลีกเลี่ยงการจัดแต่งทรงผมหนักๆ

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

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

ทดสอบ ทดสอบ และทดสอบเพิ่มเติมอีก

ตรวจสอบว่ามันแสดงบนอุปกรณ์มือถืออย่างไร

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

ทดสอบกับไคลเอนต์อีเมลรายใหญ่

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

ตรวจสอบว่าเนื้อหาทางเลือกปรากฏอย่างไร

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

รีวิวบริการแสดงผลอีเมล

ใช้บริการทดสอบการเรนเดอร์อีเมลฟรี เช่น Litmus, Email on Acid หรือ Mosaico เพื่อดูว่าการออกแบบอีเมลของคุณแสดงผลอย่างไรในไคลเอนต์อีเมลและอุปกรณ์ที่หลากหลายในคราวเดียว พวกเขาจัดทำรายงานที่เน้นปัญหาใดๆ ที่ต้องแก้ไขเพื่อปรับปรุงการตอบสนองของอีเมลของคุณ แก้ไขโค้ดของคุณและอัปโหลดอีเมลทดสอบอีกครั้งจนกว่ารายงานจะกลับมาสะอาดอีกครั้ง

ตรวจสอบลิงก์และองค์ประกอบเชิงโต้ตอบอีกครั้ง

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

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

การแก้ไขปัญหาอีเมลตอบสนองทั่วไป

เนื้อหาล้นบนมือถือ

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

ปัญหาความกว้างของอีเมล

ไคลเอนต์อีเมลรุ่นเก่าบางรุ่นมีปัญหาเกี่ยวกับความกว้างของอีเมลที่ตอบสนอง วิธีแก้ไขปัญหานี้:

1. ตั้งค่าความกว้างสูงสุดในคอนเทนเนอร์อีเมลของคุณ เราขอแนะนำ 600px สำหรับอีเมลส่วนใหญ่
2. เพิ่ม !important หลังการประกาศความกว้างเพื่อแทนที่ CSS ของไคลเอ็นต์อีเมลบางตัว ตัวอย่างเช่น:
3. เพิ่มรหัสทางเลือกสำหรับ Outlook 2007-2013 เวอร์ชันเก่าเหล่านี้ต้องมีสไตล์แยกกัน:

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

บทสรุป

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