อีเมลตอบกลับ 101 การสัมมนาผ่านเว็บ ถาม & ตอบ: ข้อมูลพื้นฐานเกี่ยวกับ HTML & CSS

ในขณะที่การเปิดมือถือเพิ่มขึ้นอย่างต่อเนื่อง (เพิ่มขึ้นมากกว่า 500% ในช่วงสี่ปีที่ผ่านมา!) ดังนั้นการพูดถึงกลยุทธ์อีเมลบนมือถือเช่นการออกแบบที่ตอบสนองก็มีการพูดคุยกัน ในการสัมมนาผ่านเว็บเกี่ยวกับอีเมลที่ตอบสนอง 101: ข้อมูลพื้นฐานเกี่ยวกับ HTML และ CSS เราได้พิจารณาภาพรวมอีเมลบนมือถือ รากฐานของการสร้างอีเมลที่ตอบสนอง และเหตุใดเทคนิคเหล่านี้จึงมีความสำคัญต่อการปรับปรุงประสบการณ์ของสมาชิก เรายังครอบคลุมถึงการสนับสนุนไคลเอ็นต์อีเมลและสาธิตวิธีเขียนโค้ดอีเมลที่ตอบสนองตั้งแต่ต้น

ทำไม่ได้? ไม่ต้องกังวล เราบันทึกสิ่งทั้งหมด! นอกจากนี้ เรายังทำให้สไลด์พร้อมใช้งานอีกด้วย

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

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

เริ่มต้นการออกแบบที่ตอบสนองฉับไว

คุณคิดว่าการเพิ่มขึ้นของการเปิดบนมือถือได้มาถึงความอิ่มตัวแล้วหรือคุณคิดว่าจะเพิ่มขึ้นต่อไปหรือไม่?

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

อะไรคือความแตกต่างระหว่างการออกแบบที่ลื่นไหล ปรับได้ และตอบสนอง?

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

• ปรับขนาดได้ ไหลลื่น หรือตอบสนอง? การทำความเข้าใจแนวทางอีเมลมือถือ
• คงที่เทียบกับของไหลเทียบกับ Adaptive vs. Responsive
• เลย์เอาต์ไหน? คงที่, ของเหลว, ปรับตัวหรือตอบสนอง?
• Liquidapsive

วิธีใดมีการสนับสนุนไคลเอ็นต์อีเมลที่ดีที่สุด—แบบไหล แบบปรับเปลี่ยนได้ หรือแบบตอบสนอง

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

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

แบบสอบถามสื่อคืออะไร?

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

• คู่มือวิธีใช้การออกแบบอีเมลที่ตอบสนองตามอุปกรณ์
• ทำความเข้าใจการสืบค้นสื่อในอีเมล HTML

มีข้อมูลใดๆ เกี่ยวกับผลกระทบที่การออกแบบแบบตอบสนองมีต่ออีเมลหรือไม่

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

ด้วยการสนับสนุนแบบผสมและวิธีแก้ปัญหาชั่วคราวจำนวนมาก การมุ่งสู่การออกแบบที่ตอบสนองจึงดูเหมือนล้นหลาม ฉันจะเริ่มต้นได้อย่างไร

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

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

หากคุณรู้สึกสบายใจในการเขียนโค้ด ให้ลองดู Litmus Builder ซึ่งเป็นโปรแกรมแก้ไขโค้ดที่สร้างมาเพื่อการออกแบบอีเมลโดยเฉพาะ ลองใช้เทคนิคอีเมลแบบโต้ตอบพื้นฐานเป็นจุดเริ่มต้น—จะมอบประสบการณ์ที่ยอดเยี่ยมให้กับผู้ใช้ที่เปิดอีเมลในไคลเอนต์ที่รองรับการออกแบบที่ตอบสนอง (โดยเฉพาะอุปกรณ์ Apple)

อย่าลืมดูตัวอย่างอีเมลของคุณก่อนส่ง! คุณสามารถส่งอีเมลถึงตัวคุณเองโดยใช้ PutsMail หรือดูว่าอีเมลของคุณเป็นอย่างไรในไคลเอนต์อีเมลต่างๆ กว่า 40 รายการด้วย Litmus

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

คุณแนะนำเฟรมเวิร์กที่ตอบสนองหรือไม่?

ใช่! เราขอแนะนำให้ตรวจสอบ Ink เฟรมเวิร์กที่ตอบสนองของ ZURB (โปรดทราบ: เฟรมเวิร์กนี้ต้องใช้วิธีแก้ปัญหาชั่วคราวเพื่อให้แสดงผลอย่างถูกต้องใน Outlook 2007-2013) ถ้าคุณชอบ Sass เฟาสท์ เกิร์ตซ์ได้สร้าง Ink เวอร์ชัน Sass และ Alex Ilhan มีเฟรมเวิร์กอีเมล Sass ชื่อ Zenith นอกจากนี้ Dan Denney จาก Code School ยังมีเวิร์กโฟลว์อีเมลที่ยอดเยี่ยมที่เรียกว่า Emayll และ Brian Graves มีคอลเล็กชันรูปแบบอีเมลที่ตอบสนองได้อย่างน่าทึ่ง

การเพิ่มประสิทธิภาพสำหรับลูกค้าที่ไม่สนับสนุนคำถามเกี่ยวกับสื่อ

หากไคลเอนต์ไม่รองรับการออกแบบที่ตอบสนอง สิ่งที่จะแสดงในไคลเอนต์นั้น?

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

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

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

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

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

• แนวทางการเข้ารหัสแบบไฮบริด
• การเข้ารหัสแบบไฮบริด Redux-Raising Bar
• บทเรียนที่ชนะรางวัลในการออกแบบอีเมลที่ตอบสนองตามอุปกรณ์

รหัสคำถาม

คุณสามารถใส่ข้อความค้นหาสื่อของคุณในเอกสาร CSS แยกต่างหากและเชื่อมโยงไปยังเอกสารนั้นในส่วนหัวได้หรือไม่?

ไม่แนะนำให้ใช้สไตล์ชีตที่เชื่อมโยง (แท็ก <link>) สำหรับอีเมลเนื่องจากการสนับสนุนไคลเอ็นต์อีเมลที่จำกัด ควรฝังสไตล์ทั้งหมดไว้ใน <head> ของอีเมล

เบรกพอยต์ทั่วไปสำหรับการออกแบบอีเมลที่ตอบสนองคืออะไร มีเบรกพอยต์กี่จุดที่เหมาะสมที่สุด?

ด้วยการเปิดบ่อยที่สุดบน iPhone อีเมลของคุณจึงควรเริ่มใช้เบรกพอยต์อย่างน้อย 414px ซึ่งเป็นความกว้างของ iPhone 6 Plus ใหม่

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

คุณแนะนำให้ใช้ตารางหรือ divs หรือไม่?

การออกแบบอีเมลต้องใช้เค้าโครงและโครงสร้างแบบตารางอย่างแน่นอน เหตุผลคือขาดการสนับสนุนสำหรับ <div> โดยไคลเอ็นต์อีเมล เช่น ไคลเอ็นต์เดสก์ท็อป Outlook เนื่องจากเกี่ยวข้องกับโครงสร้างและรากฐานที่แท้จริงของ HTML โปรแกรมรับส่งเมลบางตัวรองรับ <div> และสามารถใช้สำหรับการแฮ็กและวิธีแก้ปัญหาบางอย่างได้อย่างมีประสิทธิภาพ โดยเฉพาะอย่างยิ่งสำหรับอีเมลที่ตอบสนอง

คุณสามารถเปลี่ยนแอตทริบิวต์ align=“left” หรือ align=“right” ภายในตารางโดยใช้การสืบค้นสื่อได้หรือไม่ หรือเป็นเพียงการเปลี่ยนแปลงรูปแบบ?

คุณไม่สามารถเปลี่ยนแอตทริบิวต์ align HTML ใน CSS ในทางเทคนิคได้ แต่มีวิธีแก้ไขปัญหาเฉพาะหน้าอื่นๆ คุณสามารถห่อแต่ละตารางใน <div> ที่ว่างเปล่าและใช้คุณสมบัติ float หรือคุณสมบัติ display เพื่อสลับตารางไปรอบๆ ActionRocket มีบล็อกโพสต์ที่ยอดเยี่ยมเกี่ยวกับการใช้เทคนิคขั้นสูงนี้

ด้วยอีเมลที่ตอบสนอง การรองรับภาพพื้นหลังเป็นอย่างไร ขนาดใดในอุดมคติสำหรับการบันทึกภาพพื้นหลัง หากฉันต้องการให้มีขนาดเต็มความกว้าง

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

สไตล์ต้องอยู่ในบรรทัดเพื่อให้ทำงานกับไคลเอนต์อีเมลจำนวนมากได้หรือไม่?

ใช่. โปรแกรมรับส่งเมลหลายตัวลบสไตล์ CSS ใน <head> ของอีเมล โดยเฉพาะอย่างยิ่ง Gmail ทำให้รูปแบบ CSS ในบรรทัดมีความจำเป็นสำหรับอีเมล

ควรใช้พิกเซลหรือ ems สำหรับขนาดตัวอักษรในอีเมลหรือไม่

ควรใช้พิกเซลเพื่อกำหนดขนาดแบบอักษรในอีเมล เนื่องจากไคลเอ็นต์อีเมลจำนวนมากไม่รองรับ ems

เป็นไปได้ไหมที่จะแทนที่รูปภาพโดยใช้คิวรี่สื่อ?

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

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

สำหรับเรตินา โดยปกติคุณต้องการทำให้ภาพมีขนาดใหญ่เป็นสองเท่าของการแสดงผลสุดท้าย ตัวอย่างเช่น รูปภาพขนาด 100×100 ควรมีขนาด 200×200 แต่ลดขนาดลงเป็น 100×100 โดยใช้แอตทริบิวต์ HTML หรือการจัดรูปแบบ CSS โดยปกติ เทคนิคนี้ควรใช้สำหรับภาพขนาดเล็กที่ต้องการความคมชัดเท่านั้น ไม่ใช่ภาพขนาดใหญ่ เช่น ภาพถ่าย มีการพูดคุยที่ดีสองสามข้อเกี่ยวกับ Litmus Community เกี่ยวกับการออกแบบเรตินา:

• การออกแบบสำหรับ Retina
• รูปภาพพร้อมข้อความเรียกร้องให้ดำเนินการและแสดงเรตินา

แสดง:ไม่มี; หรือ display:block; ทำงานในอีเมลตอบสนอง?

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

มีโปรแกรมรับส่งเมลที่เทียบเท่ากับ "องค์ประกอบการตรวจสอบ" ของเว็บเบราว์เซอร์หรือไม่ การแก้ปัญหาการออกแบบที่ตอบสนองของฉันจะเป็นประโยชน์

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

มิฉะนั้น เราขอแนะนำให้คุณแก้ไขปัญหาในเบราว์เซอร์ WebKit (Chrome หรือ Safari) เนื่องจากการเปิดมือถือส่วนใหญ่เกิดขึ้นบน WebKit ซึ่งรองรับ CSS ที่ยอดเยี่ยม การพัฒนาและแก้ไขปัญหาในเบราว์เซอร์ WebKit จึงเป็นการจำลองที่ดีของสิ่งที่จะเกิดขึ้นสำหรับไคลเอนต์อีเมลเหล่านั้น

รองรับ padding ในระดับสากลในไคลเอนต์อีเมลหรือไม่

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

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

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

ActionRocket มีโพสต์ที่ยอดเยี่ยมเกี่ยวกับเทคนิคขั้นสูงสำหรับตารางการซ้อนแบบย้อนกลับ

ผู้สร้างลิตมัส

ตัวสร้างสารสีน้ำเงินคืออะไร?

Litmus Builder เป็นโปรแกรมแก้ไขโค้ดตัวแรกของโลกที่สร้างขึ้นสำหรับนักออกแบบอีเมลโดยนักออกแบบอีเมล สร้าง แก้ไข และแชร์อีเมลได้ฟรีโดยสมบูรณ์

Emmet ถูกสร้างโดยตรงใน Litmus Builder หรือไม่?

มันคือ! การรวม Emmet ของเราทำให้การเขียนโค้ดชวเลขเป็นเรื่องง่าย

เราจะค้นหาเทมเพลตอีเมลที่ตอบสนองภายใน Litmus Builder ได้จากที่ใด

Litmus Builder มีแกลเลอรีของเทมเพลตอีเมลมากกว่า 20 แบบในส่วนเทมเพลต เทมเพลตทั้งหมดใช้งานได้ฟรีอย่างสมบูรณ์ ตรวจสอบเอกสารความช่วยเหลือฉบับสมบูรณ์สำหรับ Litmus Builder

ลองใช้เทมเพลตที่ตอบสนองต่อการทดสอบล่วงหน้าของเราได้ฟรี

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

แนะนำเทมเพลตชุมชนสารสีน้ำเงิน เริ่มต้นแคมเปญถัดไปของคุณด้วยเทมเพลตที่ทดสอบล่วงหน้าของ Litmus เข้าถึงเทมเพลต →