El การออกแบบที่ตอบสนองมีความสำคัญในปัจจุบันเนื่องจากรูปแบบที่แตกต่างกัน ที่ผู้ใช้เผชิญจากแท็บเล็ตมือถือและแม้แต่คอมพิวเตอร์ การออกแบบที่ตอบสนองในการตลาดผ่านอีเมลและหน้า Landing Page มีความสำคัญมากกว่าสำหรับการสื่อสารแบบทุกช่องทางกับลูกค้าของเรา
ดังนั้นคุณต้องให้ความสำคัญกับการใช้เทมเพลตที่แตกต่างกันอย่างจริงจัง ความกว้างที่แตกต่างกันเพื่อให้ได้ดีไซน์ที่ดีที่สุด เป็นไปได้ว่าจดหมายข่าวเหล่านั้นหรือหน้า Landing Page ที่ลูกค้าในอนาคตที่เราต้องการให้พวกเขาแปลงจากโฆษณาของเราบน Google หรือ Facebook
การออกแบบที่ตอบสนองในการตลาดผ่านอีเมล
การตลาดทางอีเมลเป็นวิธีหนึ่งในการประกาศข้อเสนอผลิตภัณฑ์หรือโพสต์ใหม่ที่สร้างขึ้นในบล็อกของเรา จึงแคบลงในทางลึก กับผู้ติดตามของเราทั้งหมด
จดหมายข่าวเหล่านี้ตอบสนองได้นั้นหมายความว่า สามารถมองเห็นได้อย่างสมบูรณ์แบบจากมือถือแท็บเล็ตหรือคอมพิวเตอร์ ดังนั้นเราจึงต้องพยายามมีเครื่องมือที่จำเป็นเพื่อให้องค์ประกอบภาพทั้งหมดมีความกลมกลืนเพียงพอสำหรับการอ่านจดหมายข่าวได้ง่าย
จดหมายข่าวของ IKEA
ตอบสนองหมายความว่า การแสดงเพจบนอุปกรณ์ต่างๆจะถูกต้องเสมอ. สำหรับสิ่งนี้เรามีเครื่องมือ การตลาดอีเมล ซึ่งช่วยให้เราทดสอบจดหมายข่าวที่สร้างขึ้นในรูปแบบต่างๆและแก้ไขค่าต่างๆเช่นช่องว่างภายในหรือระยะขอบเพื่อให้มีการจัดตำแหน่งใหม่อย่างสมบูรณ์แบบเมื่อเราลดความกว้างของเบราว์เซอร์
ใน ใช้การออกแบบเว็บด้วย CSS "Media Queries" รับออกแบบเว็บไซต์ตามรูปแบบ สูงสุด 360px สำหรับมือถือและจาก 360px เป็น 650px เราสามารถทำการแก้ไขสำหรับผู้ใช้ทุกคนที่ดูเว็บไซต์ของเราจากแท็บเล็ต
หลักการบางประการสำหรับจดหมายข่าวการตลาดทางอีเมลของเรา ได้แก่ :
- ลำดับชั้นภาพที่ชัดเจน: ชื่อเรื่องใน H2 เพื่อให้ข้อความอยู่ในรูปแบบย่อหน้า
- สองแหล่งที่มาที่แตกต่างกัน: หนึ่งสำหรับชื่อเรื่องและอีกอันสำหรับข้อความทำให้จดหมายข่าวของเราอ่านได้ดีขึ้น
- El การใช้สีเพื่อแยกความแตกต่างของชื่อข้อความและองค์ประกอบอื่น ๆ: เราค่อยๆเปลี่ยนจากสีเทาเข้มไปเป็นสีที่อ่อนกว่าได้
- Un CTA (คำกระตุ้นการตัดสินใจ) ชัดเจนและแยกแยะได้: ถ้าโลโก้ของ บริษัท ของเราเป็นสีแดง CTA อาจเป็นสีนี้ในขณะที่ส่วนที่เหลือเป็นสีเสริม
เรายกตัวอย่างที่ชัดเจนให้กับคุณ การออกแบบที่ตอบสนองในจดหมายข่าวที่ดำเนินการโดย Filmin และที่คุณเห็นในภาพที่ให้มา ตัวอักษรที่ชัดเจนเป็นสีขาวและข้อความเป็นสีเทาอ่อนมาก แต่ช่วยให้เราเห็นภาพช่องว่างต่างๆที่เราได้รับเชิญให้อ่านได้อย่างรวดเร็วหากต้องการ CTA ไม่ใช่ว่ามาจากโลกอื่น แต่มันช่วยด้วยไอคอนการเล่นนั้นและทำให้เราเห็นว่ามีอะไรรอเราอยู่
ช่องว่างที่เพียงพอในระยะขอบโดยมีสีขาวเป็นสีหลักสำหรับข้อความและ ที่เข้ากับโลโก้ได้อย่างลงตัว ของแบรนด์; ล้อมรอบด้วยสีเทาที่ทำให้ดูโดดเด่น ภาพที่สะดุดตาซึ่งเป็นเวทีสำหรับจดหมายข่าวที่ดึงดูดคุณตั้งแต่เริ่มต้น นอกจากนี้ยังเหลือช่องว่างที่ด้านข้างเพื่อไม่ให้ "กิน" ความกว้างทั้งหมดของหน้าจอ
ใน เวอร์ชันเดสก์ท็อปยังคงรักษาหลักการเหล่านั้นไว้แม้จะเหลือพื้นที่ในข้อความมากขึ้นและเว้นระยะห่างไว้ด้านละมาก ๆ :
การออกแบบที่ตอบสนองบนหน้า Landing Page
ลอส หลักการเดียวกันนี้สามารถใช้ในการออกแบบที่ตอบสนองได้ ของหน้า Landing Page เป็นสิ่งสำคัญอย่างยิ่งที่จะต้องใช้เวลาทั้งหมดในโลกในการเลือกเทมเพลตอย่างเหมาะสมและปฏิบัติตามกฎบางประการในการออกแบบ:
- ความเรียบง่ายของภาพ: เรากำลังพูดถึงการรักษาช่องว่างเพื่อให้ความสำคัญกับ CTA
- ภาพที่สวยงามและน่าสนใจ ให้กับผู้อ่านโดยไม่ลืมความละเอียดและดูสมบูรณ์แบบ
- ความสำคัญของสี และเราเน้นย้ำอีกครั้ง
เราต้องออกแบบหน้า Landing Page ที่ตอบสนองสำหรับมือถือแท็บเล็ตและเดสก์ท็อป ใช้ ต้องใช้เวลาในการลองครั้งแล้วครั้งเล่าเมื่อมีการเปลี่ยนแปลงแต่ละครั้ง มีให้เห็นในรูปแบบทั้งสามนี้เนื่องจากเราสามารถไว้วางใจตัวเองและลืมไปว่าการเปลี่ยนแปลงเหล่านั้นใน CSS จะดูน่ากลัวบนอุปกรณ์เคลื่อนที่
หน้า Landing Page ของ Hotjar
อาจเป็นงานที่น่าเบื่อ แต่จำเป็นอย่างยิ่งที่เราต้องใช้เวลาทดสอบการเปลี่ยนแปลงแต่ละครั้ง การใช้ระยะขอบด้านข้าง และพยายามเท่าที่จะทำได้เพื่อไม่ให้พลาดกฎใน CTA หรือปุ่มการดำเนินการ:
- นี้ ระยะห่างที่สัมพันธ์กับข้อความและระยะขอบของปุ่มเป็นแบบก้าวหน้า ในทั้งสามรูปแบบ มันไม่เล็กหรือใหญ่และสูงเท่ากัน
- La อัตราส่วนในขนาดปุ่ม CTA ด้วยองค์ประกอบที่เหลือที่จะต้องจัดเตรียมไว้
ตัวอย่างที่ชัดเจนคือ งานที่ Shopify ทำบนหน้า Landing Page ของคุณ บนเดสก์ท็อปและที่คุณเห็นในเวอร์ชันมือถือ ให้ความสำคัญกับการใช้สีช่องว่างสีขาวและข้อความที่มีขนาดและตัวอักษรที่เหมาะสม:
ชุดคำแนะนำที่จะมี หน้า Landing Page ที่ดีกว่าสำหรับธุรกิจหรือร้านค้าออนไลน์ของคุณ และจดหมายข่าวเหล่านั้นสำคัญมากในการรับอัปเดตและโปรโมชั่นเหล่านั้นให้กับผู้ใช้