แนวทางปฏิบัติที่ดีที่สุดสำหรับการกำหนดสไตล์อีเมล HTML [ปิด]

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

การตรวจสอบแคมเปญมีเมทริกซ์การสนับสนุนที่ดีเยี่ยมโดยมีรายละเอียดสิ่งที่สนับสนุนและสิ่งที่ไม่ได้อยู่ในไคลเอนต์อีเมลต่างๆ

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

ฉันเคยต่อสู้การรบทางอีเมล์ HTML มาก่อน นี่คือเคล็ดลับของฉันเกี่ยวกับการออกแบบเพื่อความเข้ากันได้สูงสุดระหว่างไคลเอนต์อีเมล

• สไตล์อินไลน์เป็นเพื่อนที่ดีที่สุดของคุณ อย่าเชื่อมโยงสไตล์ชีทอย่างเด็ดขาดและอย่าใช้<style>แท็ก (GMail เช่นแถบแท็กนั้นและเนื้อหาทั้งหมด)

• กับการตัดสินที่ดีกว่าของคุณใช้งานและตารางการละเมิด <div>เพียงแค่จะไม่ตัดมัน (โดยเฉพาะใน Outlook)

• อย่าใช้ภาพพื้นหลังพวกมันขาดๆ หาย ๆ และจะรบกวนคุณ

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

• ระวังการเชื่อมโยงหลายมิติที่เกี่ยวข้องกับสิ่งที่แตกต่าง ยกตัวอย่างเช่นไม่ต้องพิมพ์ออกมาแล้วเชื่อมโยงไปยังhttp://www.google.com https://gmail.com/ลูกค้าบางรายจะตั้งค่าสถานะข้อความว่าเป็นสแปมหรือขยะ

• บันทึกภาพของคุณในสีน้อยที่สุดเท่าที่จะทำได้เพื่อประหยัดขนาด

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

และสุดท้ายทดสอบทดสอบทดสอบ ! ไคลเอนต์อีเมลแต่ละรายทำสิ่งที่แตกต่างจากเบราว์เซอร์

ชิมแปนซี Mail ได้บทความค่อนข้างดีในสิ่งที่ไม่ควรทำ (ฉันรู้ว่ามันฟังดูผิดสำหรับสิ่งที่คุณต้องการ)

http://kb.mailchimp.com/article/common-html-email-coding-mistakes

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

พื้นฐานคือ:

• มีเส้นทางที่แน่นอนสำหรับรูปภาพ (เช่น https://stackoverflow.com/random-image.png )
• ใช้ตารางสำหรับการจัดวาง (ไม่เคยคิดว่าจะแนะนำ!
• ใช้รูปแบบอินไลน์ (และโรงเรียนเก่าด้วยเช่นกันที่มากที่สุด 2.1, กล่องเงาจะไม่ทำงานเช่น;))

เพียงทดสอบไคลเอนต์อีเมลให้มากที่สุดเท่าที่คุณจะทำได้หรือใช้ Litmus ตามที่คนอื่นแนะนำข้างต้น! (ให้เครดิตกับจิม)

แก้ไข:

Mail chimp ทำงานได้ยอดเยี่ยมโดยทำให้เครื่องมือนี้พร้อมใช้งานสำหรับชุมชน

มันใช้คลาส CSS ของคุณกับองค์ประกอบ HTML ของคุณแบบอินไลน์สำหรับคุณ!

นอกเหนือจากคำตอบที่โพสต์ที่นี่โปรดอ่านบทความนี้:

http://24ways.org/2009/rock-solid-html-emails

ทรัพยากรที่ฉันมักจะกลับไปเกี่ยวกับอีเมล HTML คือคู่มือ CSS ของ CampaignMonitorคู่มือ

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

กลัวมาก ฉันจะสร้างหน้า HTML ที่มีสไตล์ชีทแล้วใช้ jQuery เพื่อใช้สไตล์ชีทกับ attr สไตล์ของแต่ละองค์ประกอบ บางสิ่งเช่นนี้

var styleAttributes = ['color','font-size']; // all the attributes you've applied in your stylesheet
for (i in styleAttributes) {
    $('body *').css(styleAttributes[i],function () {
        $(this).css(styleAttributes[i]);
    });
}

จากนั้นคัดลอก DOM และใช้สิ่งนั้นในอีเมล

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

ขึ้นอยู่กับว่าคุณกำลังคัดลอกเนื้อหาจากคำหรือ google Doc ที่ใช้ร่วมกันให้แน่ใจว่า (คำสั่ง + F) ค้นหาทั้งหมด (') และ (") และแทนที่พวกเขาภายในซอฟต์แวร์แก้ไขของคุณ (โดยเฉพาะ dreemweaver) เพราะพวกเขาจะแสดงเป็นรหัส และมันก็ไม่ดี

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

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

นอกจากนี้ฉันยังพบบรรทัดใต้ลิงก์ที่น่ารำคาญเป็นพิเศษดังนั้นหากคุณใช้ <style = "การตกแต่งข้อความ: none; color: #whwhale สีที่คุณต้องการที่นี่!" > มันจะลบบรรทัดและให้รูปลักษณ์ที่ต้องการ

มีมากที่สามารถยุ่งกับรูปลักษณ์และความรู้สึกทั้งหมด