ออกแบบอีเมลอย่างไรให้เหมาะกับมือถือ

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

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

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

การออกแบบอีเมลสำหรับอุปกรณ์ทั้งหมด ทางเลือกของฉันมีอะไรบ้าง?

ก่อนที่คุณจะไปกำจัดคอลเลกชั่น CD-ROM ของคุณ อย่าลืมว่าการออกแบบอีเมลที่ "ตอบสนอง" ได้สำเร็จก็เป็นไปได้ แม้ว่าจะมีข้อจำกัดก็ตาม แน่นอนว่าการสร้างอีเมลที่ตอบสนองตามอุปกรณ์จริงนั้นเป็นทางเลือกหนึ่ง แต่สิ่งสำคัญคือต้องพิจารณาแนวทางทั้งสามนี้เมื่อสร้างการออกแบบที่เน้นอุปกรณ์พกพาที่ประสบความสำเร็จ:

• การออกแบบที่ปรับขนาดได้
• การออกแบบของไหล
• การออกแบบที่ตอบสนอง

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

การออกแบบที่ปรับขนาดได้

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

<table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; width=&quot;100%&quot;>
<p>Email content goes here.</p>
</table>

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

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

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

การออกแบบของไหล

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

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

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

<table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; width=&quot;525&quot; class=&quot;wrap&quot;>
<tr>
<td>
<table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; width=&quot;100%&quot;>
<p>Wrapping table will help on larger screens.</p>
</table>
</td>
</tr>
</table>

ตัวอย่างการสืบค้นสื่อสำหรับอุปกรณ์มือถือ:

@media screen and (max-width: 525px) {
table[class="wrap"]{
width:100% !important;
}
}

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

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

ต่อไปนี้คือตัวอย่างคิวรีสื่อสำหรับเลย์เอาต์ที่ตอบสนอง:

@media only screen and (max-width: 450px) {
td[class="column"] {
display: block;
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
}

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

ก่อนที่เราจะสร้างการออกแบบที่ซับซ้อนด้วยการสืบค้นข้อมูลสื่อหลายรายการ สิ่งสำคัญคือต้องพูดคุยเกี่ยวกับข้อเสียบางประการ แบบสอบถามสื่อไม่ทำงานในไคลเอนต์อีเมลทั้งหมด อันที่จริง การสนับสนุนค่อนข้างจำกัด ตามรายการสนับสนุนการสืบค้นสื่อสารสีน้ำเงิน แอป Android Outlook.com, ไคลเอ็นต์เนทีฟ Android 4.x และ iOS (iPhone/iPad) รองรับในขณะนี้ สามารถใช้สิ่งเหล่านี้ได้อย่างเต็มศักยภาพหากผู้ดูส่วนใหญ่ของคุณเป็นผู้ใช้มือถือและแท็บเล็ต

ข้อควรพิจารณาในการออกแบบอื่นๆ

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

ต่อไปนี้เป็นแหล่งข้อมูลที่ดีบางประการสำหรับการอ่านเพิ่มเติม:

• CSS เฉพาะมือถือ
• อนาคตของอีเมล
• อีเมล iPhone และ Android

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