กลยุทธ์ด้านเนื้อหาสามประการสำหรับการออกแบบเว็บที่ตอบสนองตามอุปกรณ์: วางแผน จัดลำดับความสำคัญ กลั่นกรอง

เผยแพร่แล้ว: 2015-09-17

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

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

การออกแบบเว็บที่ตอบสนองเป็นโอกาสในการจินตนาการเนื้อหาใหม่เพื่อให้แต่ละประโยคดึงดูดผู้อ่านได้มากขึ้นและรวบรวมโอกาสในการขายได้มากขึ้น

การออกแบบที่ตอบสนองคืออะไร?

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

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

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

ทำไมคุณต้องมีการออกแบบที่ตอบสนอง

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

สถิติสั้นๆ สองสามข้อ: มือถือขับเคลื่อน 41 เปอร์เซ็นต์ของการคลิกการค้นหาที่เสียค่าใช้จ่ายทั้งหมด และ 31 เปอร์เซ็นต์ของค่าใช้จ่ายในการค้นหาที่เสียค่าใช้จ่ายทั้งหมด (Merkle RKG) และ 53 เปอร์เซ็นต์ของการเปิดอีเมลทั้งหมด (ลิตมัส) ด้วยแนวโน้มของอุปกรณ์เคลื่อนที่ ตัวเลขเหล่านี้จะไม่ลดลงในเร็วๆ นี้

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

สามขั้นตอนในการเพิ่มประสิทธิภาพเนื้อหาของคุณสำหรับการออกแบบที่ปรับเปลี่ยนตามอุปกรณ์

  1. วางแผนข้ามแผนก

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

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

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

  1. จัดลำดับความสำคัญของเนื้อหาในลำดับชั้นที่ชัดเจน

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

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

กลั่นกรองเนื้อหาให้เหลือขนาดมือถือ

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

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

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

การแยกส่วนในแนวตั้ง – การแบ่งข้อความออกเป็นชิ้นแนวตั้งที่สามารถวางเคียงข้างกันได้ โดยแต่ละชิ้นมีพาดหัวและรูปภาพของตัวเอง – ช่วยให้ผู้อ่านสามารถสแกนไปด้านข้างและกินส่วนแนวตั้งทีละชิ้นได้

3

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

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

~ ต้องการเรียนรู้เคล็ดลับทั้งหมดในการออกแบบเว็บที่ตอบสนองตามอุปกรณ์ รวมถึงการจัดการกระบวนการพัฒนา การประมาณการค่าใช้จ่าย และการให้ความสำคัญกับอุปกรณ์เคลื่อนที่เป็นอันดับแรก ดูการสัมมนาผ่านเว็บทั้งหมด Responsive Design: 10 สิ่งที่ควรทำและไม่ควรทำสำหรับเว็บเพจและอีเมล