HTML & CSS: แนวคิดการเข้ารหัสอีเมล

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

ฉันจำเป็นต้องเข้ารหัสอีเมลของฉันหรือไม่

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

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

คำศัพท์น่ารู้

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

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

CSS เป็นภาษาที่มีผลต่อการนำเสนอเนื้อหาของคุณ เมื่อใช้ CSS คุณสามารถกำหนดสไตล์ให้กับองค์ประกอบ HTML CSS ย่อมาจาก Cascading Style Sheet คำว่า cascade มีความสำคัญเนื่องจากการประกาศรูปแบบหรือกฎเกณฑ์ จะได้รับเกียรติจากลำดับของรูปลักษณ์ หากคุณทำการประกาศสองครั้งสำหรับองค์ประกอบเดียวกัน สิ่งหลังจะได้รับเกียรติเพราะจะเขียนทับสิ่งที่มาก่อนองค์ประกอบนั้น

ต่อไปนี้คือวิธีผูก CSS ของคุณกับ HTML:

CSS ภายนอก: ใช้สไตล์ชีตภายนอก (ไฟล์ที่ชื่อทั่วไปคือ style.css) ที่อ้างอิงภายในไฟล์ HTML ของคุณ นี่เป็นสิ่งที่ดีสำหรับเว็บไซต์ เพราะถ้าคุณมีองค์ประกอบทั่วไป 100 รายการที่ครอบคลุมมากกว่า 100 หน้า คุณสามารถเปลี่ยนองค์ประกอบทั้งหมดพร้อมกันด้วยการประกาศ CSS เดียว

CSS ภายในหรือที่เรียกว่า CSS แบบฝัง: รวมโค้ด CSS ของคุณไว้ในแท็ก <style> ที่ด้านบนสุดของไฟล์ HTML เมื่อเขียนโค้ดอีเมล วิธีนี้เหมาะสำหรับการกำหนดสไตล์ทั่วไปที่ใช้กับองค์ประกอบทั่วไป อย่างไรก็ตาม อีเมลไม่รองรับวิธีนี้เสมอไป

CSS แบบอินไลน์: การแนบโค้ด CSS กับองค์ประกอบ HTML เดียวภายในโค้ด HTML ในการเข้ารหัสอีเมล วิธีนี้ช่วยให้แน่ใจว่ารูปแบบบางอย่างจะไม่ถูกเขียนทับโดยค่าเริ่มต้นของเบราว์เซอร์และไคลเอนต์อีเมล

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

ความสัมพันธ์ระหว่าง HTML และ CSS

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

กำลังเข้าใกล้การเข้ารหัสอีเมล

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

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

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

เริ่มเรียนที่ไหนดี

มีบทช่วยสอนออนไลน์มากมายที่คุณสามารถเรียนรู้เชิงปฏิบัติโดยละเอียดเกี่ยวกับวิธีเขียนโค้ดอีเมล วิธีหนึ่งที่ดีในการเรียนรู้การเขียนโค้ดอีเมลคือ หาเทมเพลตง่ายๆ ที่คุณชอบและใช้เวลาตรวจสอบโค้ด ทำความคุ้นเคยกับแท็กหลัก เช่น <body>, <head> และ <div> ก่อน จากนั้นสังเกตว่าบางครั้งแท็กมีการกำหนดเพิ่มเติมใน ID หรือคลาส เช่น <div class=”half-column”> โปรดสังเกตว่าการตั้งชื่อในเทมเพลต HTML ที่มีคุณภาพจะมีความชัดเจนและสมเหตุสมผล เพื่อให้ง่ายต่อการบอกว่าเกิดอะไรขึ้นเมื่อปรากฏใน CSS

หากคุณพร้อมสำหรับบทเรียนทีละขั้นตอน ให้มองหาบทช่วยสอนล่าสุด (ภายในปีที่แล้ว) แนวทางในการเขียนโค้ดได้รับการพิจารณาใหม่อย่างต่อเนื่อง ตัวอย่างเช่น วิธีที่เหมาะกับอุปกรณ์เคลื่อนที่ซึ่งได้รับความนิยมในช่วงสองสามปีที่ผ่านมาคือแนวทางแบบไหลลื่น/แบบไฮบริด บทช่วยสอนแบบไหล/ไฮบริดจาก Envato Tuts+ นั้นยอดเยี่ยมสำหรับผู้ที่มีความเข้าใจ HTML อยู่แล้ว สำหรับผู้เริ่มต้น Lynda.com มีหลักสูตรการเขียนโค้ดเฉพาะอีเมลหลายหลักสูตร หลักสูตรที่ดีจะแนะนำคุณเกี่ยวกับการฝึกเขียนโค้ดและจัดเตรียมไฟล์ตัวอย่างที่ดาวน์โหลดได้ซึ่งคุณสามารถใช้เป็นข้อมูลอ้างอิงได้

ใช้เวลาน้อยลงในการเข้าถึงลูกค้ามากขึ้น

ลองใช้การตอบสนองแนวตั้งวันนี้

(แจกฟรี!)

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