รอ. เกิดอะไรขึ้นกับอีเมลของฉัน บันทึกการสัมมนาทางเว็บ

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

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

หากคุณไม่มีโอกาสเข้าร่วมการสัมมนาทางเว็บ "เดี๋ยวก่อน เกิดอะไรขึ้นกับอีเมลของฉัน” ไม่ต้องกังวล คุณสามารถดาวน์โหลดสไลด์และดูการบันทึกด้านล่าง

ดูสไลด์ & การบันทึก →

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

เหตุใด Google และ Microsoft จึงแสดงอีเมลได้ไม่ดีนัก

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

ในกรณีของ Gmail ของ Google มีการใช้ตัวประมวลผลล่วงหน้าเพื่อดึงรหัสบางส่วนออกจากอีเมลเพื่อความปลอดภัย ในขณะที่ไคลเอนต์เว็บเมลอื่น ๆ เกือบทั้งหมดสามารถเข้าใจได้ในตอนนี้ Gmail แยกสไตล์ CSS ที่ฝังอยู่ใน < head > ของอีเมลเป็นหลัก และเนื่องจากนักออกแบบจำนวนมากใช้สไตล์เหล่านั้นเพื่อกำหนดรูปลักษณ์ของแคมเปญ อีเมลเหล่านั้นจึงประสบปัญหาใน Gmail

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

ในกรณีของไคลเอนต์ Outlook ของ Microsoft ปัญหาอยู่ที่ข้อเท็จจริงที่ว่า Outlook ใช้ Microsoft Word เป็นเครื่องมือในการเรนเดอร์ ใช่แล้ว Rich-text Editor ที่ใช้โดยนักเรียนและนักธุรกิจใช้เพื่อแสดงโค้ด HTML และ CSS (หรืออย่างน้อยก็พยายามทำ) แม้ว่า Outlook เวอร์ชันเก่าจะใช้เว็บเบราว์เซอร์ของ Microsoft เวอร์ชันที่ติดตั้งไว้ เพื่อแสดงโค้ดอีเมล ในขณะที่ Outlook 2007 มีการใช้ Word เพื่อให้การแก้ไข Rich-Text ง่ายขึ้นสำหรับผู้ใช้ Outlook

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

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

• คู่มือขั้นสูงสุดของตัวตรวจสอบแคมเปญสำหรับ CSS
• ทำความเข้าใจ Gmail และ CSS: ตอนที่ 1 และตอนที่ 2
• คู่มือการแสดงความแตกต่างในไคลเอนต์ Microsoft Outlook
• วิธีที่อุปกรณ์ ระบบปฏิบัติการ แอพ และเอ็นจิ้นส่งผลต่อการแสดงผล
• ปัญหาการแสดงผลเดสก์ท็อป? เน้นการทดสอบเบื้องต้นกับเครื่องมือแสดงผลจำนวนหนึ่ง
• คำอธิบายการแสดงผลเว็บเมล: เหตุใดตัวประมวลผลล่วงหน้าจึงเป็นศัตรู

คุณจัดการกับ Outlook ที่ไม่แสดงแบบอักษรที่เหมาะสมเมื่อใช้แบบอักษรเว็บได้อย่างไร

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

เราได้แก้ไขปัญหานี้มาก่อนด้วยโซลูชันที่ต้องใช้คลาส HTML ในข้อความที่ได้รับผลกระทบและ CSS เฉพาะของ Outlook แม้ว่าโซลูชันนี้จะยังใช้งานได้ดี แต่โซลูชันที่สะอาดกว่าและดูแลรักษาง่ายกว่าก็ได้รับแรงฉุดลาก เดิมทีเสนอโดยคนที่ Action Rocket โซลูชันนี้ต้องใช้กฎ @font-face เพื่อให้บริการแบบอักษรและรวมไว้ในข้อความค้นหาสื่อในส่วนหัวของอีเมลของคุณ

 <style type="text/css"> @media screen { @font-face { font-family: 'Family Name'; font-style: normal; font-weight: 400; src: local(), local(), url() format(); } } </style>

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

คุณจะหยุดลิงก์สีน้ำเงินไม่ให้เกิดขึ้นบนมือถือได้อย่างไร

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

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

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

 a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important; }

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

วิธีใดดีที่สุดในการจัดการกับรูปภาพที่ตอบสนอง ภาพเรตินาเป็นอย่างไร?

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

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

 <img alt="Hello" src="http://example.com/image.png" width="600" border="0">

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

เมื่อพูดถึงภาพเรตินา ทางออกที่ดีที่สุดของคุณคือเพียงแค่สร้างภาพของคุณในขนาดสองเท่าของขนาดที่แสดงไว้สำหรับภาพในอีเมลของคุณ ตัวอย่างเช่น หากคุณมีรูปภาพขนาด 600px x 200px คุณจะต้องสร้างและบันทึกเป็นรูปภาพขนาด 1200px x 400px รวมไว้ในอีเมลของคุณตามปกติ แอตทริบิวต์ width ที่ฉันได้กล่าวถึงก่อนหน้านี้จะป้องกันไม่ให้แสดงเป็นรูปภาพขนาดใหญ่อย่างไร้เหตุผลในไคลเอนต์อย่าง Outlook และรูปภาพของคุณจะดูดีและคมชัดบนอุปกรณ์ที่มีหน้าจอเรตินา

มีคำแนะนำสำหรับผู้ที่ต้องการใช้ GIF แบบเคลื่อนไหวในอีเมลหรือไม่

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

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

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

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

คุณคิดอย่างไรกับการใช้วิดีโอในอีเมล

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

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

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

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

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

มีกรอบงานอีเมลตอบสนองที่คุณแนะนำหรือไม่?

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

เท่าที่เฟรมเวิร์กอีเมลและเทมเพลตที่ตอบสนองได้มีอยู่มากมาย:

• เซอร์เบอรัส จาก Ted Goas
• พิมพ์เขียวอีเมลของ MailChimp
• มูลนิธิ Zurb สำหรับอีเมล
• MJML . ของ Mailjet

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

ดูสไลด์และการบันทึก

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

ดูสไลด์ & การบันทึก →