วิธีใช้ Foundation for Emails Framework เพื่อสร้างการออกแบบอีเมลที่ตอบสนอง

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

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

กรอบงานอีเมลคืออะไร (และจะช่วยให้คุณสร้างอีเมลที่ดีขึ้นได้อย่างไร)

กรอบงานยังคงต้องการให้คุณทำการเข้ารหัส แต่กระบวนการนี้ง่ายมากสำหรับอีเมล

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

มีกรอบงานสำหรับอีเมลด้วย และนั่นคือสิ่งที่เราจะพูดถึงในบทความนี้ มาสำรวจประโยชน์บางประการ:

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

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

บทนำสู่พื้นฐานสำหรับ Emails Framework

ก่อนที่จะดำเนินการใดๆ เพิ่มเติม สิ่งสำคัญที่ควรทราบคือมีเฟรมเวิร์ก Foundation สองแบบที่ พร้อมใช้งานออนไลน์ – Foundation for Sites และ Foundation for Emails – และเราจะเน้นที่ส่วนหลังตลอดทั้งบทความนี้ จุดขายหลักคือกริดที่ตอบสนอง ระบบประเภทนี้ไม่มีการปฏิวัติ แต่ความนิยมของ Foundation ขึ้นอยู่กับความง่ายในการใช้งาน

การเลือกเฟรมเวิร์กนั้นค่อนข้างตรงไปตรงมา (แม้ว่าคุณจะไม่มีประสบการณ์ในการเขียนโค้ดใดๆ ก็ตาม) และคุณสามารถเลือกระหว่างสองเวอร์ชัน – เวอร์ชันหนึ่งอิงตาม Cascading Stylesheets (CSS) และอีกเวอร์ชันบน Sass ธรรมชาติรุ่น Sass ช่วยให้คุณประหยัดเวลามากยิ่งขึ้นโดยไม่จำเป็นต้องทำซ้ำสไตล์ CSS, แต่จะต้องมีความคุ้นเคยกับ Node.js. บาง

สุดท้าย Foundation for Email ยังให้ 'รูปแบบ' มากมายแก่คุณ เช่น ปุ่มและเมนู เพื่อให้งานของคุณง่ายยิ่งขึ้น เพื่อประหยัดเวลามากขึ้น คุณยังสามารถใช้เทมเพลตแทนการออกแบบเลย์เอาต์ตั้งแต่เริ่มต้น

คุณสมบัติหลัก:

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

ราคา: ฟรี | ข้อมูลมากกว่านี้

วิธีใช้พื้นฐานสำหรับอีเมลเพื่อสร้างการออกแบบที่ทันสมัย ​​(ใน 4 ขั้นตอน)

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

หากคุณต้องการดูการใช้งานเวอร์ชัน Sass หรือเรียนรู้เพิ่มเติมเกี่ยวกับวิธีการใช้งาน คุณสามารถเริ่มด้วยบทช่วยสอนที่ยอดเยี่ยมนี้

ขั้นตอนที่ #1: ดาวน์โหลดมูลนิธิสำหรับไฟล์อีเมล

ก่อนอื่น ให้ไปที่หน้า Foundation for Email Getting Started และคลิกที่ปุ่ม Download Starter Kit ใต้หัวข้อย่อย CSS Version :

เมื่อคุณได้ไฟล์แล้ว ให้แตกไฟล์และแตกไฟล์ในโฟลเดอร์ใหม่ ในขั้นตอนนี้ โฟลเดอร์ของคุณควรมีไฟล์ index.html และโฟลเดอร์ย่อยสองโฟลเดอร์ โฟลเดอร์หนึ่งสำหรับ CSS และอีกโฟลเดอร์หนึ่งสำหรับเทมเพลตของคุณ

ในตอนนี้ ให้เรียกใช้โปรแกรมแก้ไขข้อความที่คุณชื่นชอบและเปิดไฟล์ index.html ด้วย มันควรจะค่อนข้างเปลือยเปล่า แต่เราจะแก้ไขปัญหานั้นในอีกสักครู่

ขั้นตอนที่ #2: ทำความคุ้นเคยกับระบบกริด

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

เปิดไฟล์ index.html ของ Foundation ในโปรแกรมแก้ไขข้อความ แล้วเลื่อนลงไปที่ส่วน เนื้อหา :

<body>
<!-- <style> -->
<table class="body" data-made-with-foundation>
<tr>
<td class="float-center" align="center" valign="top">
<center>
<!--  Your grid goes here  -->          
</center>
</td>
</tr>
</table>
</body>
</html>

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

<table class="container">
<tr>
<td></td>
</tr>
</table>

ทีนี้มาเพิ่มแถวในนั้นกัน:

<table class="row"> <tr> <th></th> </tr> </table> 

ในที่สุด เราสามารถแบ่งแถวนั้นเป็นคอลัมน์:

<table class="row">
<tr>
<th class="small-12 large-6 first columns">
Column One
</th>
<th class="expander"></th>
</tr>
</table>

โปรดทราบว่าแต่ละแถวประกอบด้วยไม่เกิน 12 คอลัมน์ โค้ดด้านบนจะบอกโปรแกรมรับส่งเมลของคุณว่าควรแสดงเนื้อหาของคุณโดยใช้คอลัมน์ทั้ง 12 คอลัมน์บนหน้าจอ ขนาดเล็ก เช่น อุปกรณ์พกพา ( small-12 ) แต่ใช้พื้นที่เพียง 6 ตัวบนเดสก์ท็อป ( large-6 )

ปัญหาคือ หากอีเมลของคุณแสดงบนหน้าจอขนาดใหญ่ มีคอลัมน์ว่าง 6 คอลัมน์ เราจึงต้องเพิ่มตารางที่สองเพื่อแก้ไข:

<table class="row">
<tr>
<th class="small-12 large-6 first columns">
Column One
</th>
<th class="small-12 large-6 last columns">
Column Two
</th>
<th class="expander"></th>
</tr>
</table>

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

หากคุณกำลังจะเปิดไฟล์ index.html ในเบราว์เซอร์ นี่คือสิ่งที่คุณจะเห็น:

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

ขั้นตอนที่ #3: เพิ่มส่วนประกอบในอีเมลของคุณ

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

<table class="button tiny success">
<tr>
<td>
<table>
<tr>
<td><a href="#">The text of your button</a></td>
</tr>
</table>
</td>
</tr>
</table>

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

ทีนี้มาดูภาพพื้นหลังกัน สิ่งเหล่านี้ค่อนข้างซับซ้อนกว่าเล็กน้อย เนื่องจากคุณต้องใช้คลาส wrapper เพื่อให้ใช้ความกว้างทั้งหมดของแถวและกำหนดพื้นหลังเฉพาะให้กับคลาสโดยใช้ CSS:

<table class="wrapper" align="center">
<tr>
<td class="wrapper-inner">
Your content
</td>
</tr>
</table>

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

<h1>h1. This is a very large header.</h1>
<h2>h2. This is a large header.</h2>
<h3>h3. This is a medium header.</h3>

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

ขั้นตอนที่ #4: จัดรูปแบบอีเมลของคุณโดยใช้ CSS

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

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

<table class="wrapper" align="center"><tbody><tr><td class="wrapper-inner" style="padding:20px">content</td></tr>

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

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

บทสรุป

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

สรุป ต่อไปนี้คือสี่ขั้นตอนที่คุณต้องสร้างอีเมลสมัยใหม่ด้วย Foundation for Emails:

1. ดาวน์โหลดไฟล์ของเฟรมเวิร์ก
2. ทำความคุ้นเคยกับระบบกริด
3. ใช้ส่วนประกอบสำหรับอีเมลของคุณ
4. จัดรูปแบบอีเมลของคุณโดยใช้ CSS

คุณมีคำถามเกี่ยวกับวิธีใช้กรอบงาน Foundation for Emails หรือไม่? ถามออกไปในส่วนความคิดเห็นด้านล่าง!

ภาพขนาดย่อของบทความโดย Faberr Ink / shutterstock.com