วิธีการรับรองประสบการณ์การมองเห็นที่เหมาะสมที่สุดในอุปกรณ์ต่างๆ

อัพเดทเมื่อ 22 ส.ค. 2022

เปิดหน้าการแปลงที่ดีที่สุดบนเว็บไซต์ของคุณบนอุปกรณ์สามเครื่อง – มือถือ แท็บเล็ต และเดสก์ท็อป

ทำได้จริง. ฉันจะรอ.

เนื้อหาของคุณแสดงตามที่คุณคาดหวังหรือไม่?

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

คุณมาที่นี่ได้อย่างไร? ท้ายที่สุด บริษัทของคุณลงทุนทรัพยากรจำนวนมากเพื่อเผยแพร่เนื้อหา คุณยังเพิ่มทรัพยากรเนื้อหาเหล่านั้นด้วยการใช้วิธีการ COPE – สร้างครั้งเดียว เผยแพร่ได้ทุกที่

และนั่นอาจเป็นความผิดพลาด

เป็นกำลังใจให้เพื่อนนักการตลาดเนื้อหา ฉันมาที่นี่เพื่อช่วยในการปรับเล็กน้อย – COPE-M

ทำความเข้าใจว่าทำไม COPE-M จึงมีความจำเป็น

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

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

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

COPE เป็นจุดเริ่มต้นที่ดี แต่จำเป็นต้องมีวิธีการหลายชั้นในการควบคุมรูปภาพ ฉันเรียกมันว่า COPE-M – สร้างครั้งเดียว เผยแพร่ทุกที่เป็นส่วนใหญ่ COPE-M สามารถเป็นสะพานเชื่อมระหว่างประสบการณ์ผู้ใช้ที่ดีและประสบการณ์ที่ยอดเยี่ยม

การนำแนวทาง COPE-M มาใช้ในกลยุทธ์การเผยแพร่เนื้อหาสามารถยกระดับประสบการณ์ผู้ใช้ของคุณ เพิ่มความสม่ำเสมอ และปรับปรุงการเพิ่มประสิทธิภาพกลไกค้นหา (SEO) ของคุณด้วยเนื้อหาที่รีเฟรช

รูปภาพไม่จำเป็นต้องเป็นเพื่อนสนิทกับ COPE

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

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

รูปภาพไม่เปราะบาง กราฟิกที่แสดงผล (เช่น ไฟล์ JPEG, PNG) ไม่สามารถแยกออกจากลักษณะที่ปรากฏได้ ขนาดเดียวจากแหล่งเดียวอาจไม่เหมาะกับทุกคนเสมอไป อินโฟกราฟิกที่ดูดีบนเดสก์ท็อปอาจอ่านไม่ได้บน iPhone มันปล่อยให้ผู้ชมบีบ ซูม เหล่ และบ่นเมื่อพยายามจะดู

เลือกภาพไปยังหลายแหล่ง

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

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

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

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

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

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

การออกแบบสำหรับหลายหน้าจอ

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

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

ภาพประกอบนี้แสดงเบรกพอยต์ที่เป็นไปได้สามจุด: 320 พิกเซลสำหรับโทรศัพท์มือถือ 720 พิกเซลสำหรับแท็บเล็ตหรือโทรศัพท์ขนาดใหญ่ และ 1,024 พิกเซลสำหรับแล็ปท็อป:

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

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

นี่คือวิธีการทำงานกับตัวอย่างดั้งเดิม ครั้งนี้ ฉันถ่ายภาพที่แตกต่างกันในแต่ละขนาด – กว้าง 800, 400 และ 200 พิกเซล เมื่อเผยแพร่ ใบหน้าของพวกเขาจะมีขนาดใกล้เคียงกันในแต่ละคน

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

แนวทางนี้ไม่ใช่ COPE ไม่ใช่ส่วนสำคัญของ COPE-M ฉันสร้างงานให้ตัวเองมากขึ้นสามเท่า นั่นเป็นเหตุผลที่คุณควรจำกัดงานที่ต้องใช้เวลามากนี้ให้เหลือเฉพาะเนื้อหาการแปลงที่จำเป็นเท่านั้น

ดูว่ารูปภาพหลายแหล่งได้รับรหัสอย่างไร

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

ระหว่างแท็ก "รูปภาพ" ฉันระบุรูปภาพต้นฉบับสามรูป ซึ่งตั้งชื่อตามความกว้างของรูปภาพ:

• jpg
• jpg
• jpg

ตอนนี้ แต่ละภาพจะเริ่มต้นเมื่อถึงจุดเบรกพอยต์:

• 499 พิกเซล (สูงสุด) สำหรับสมาร์ทโฟน
• 799 พิกเซล (สูงสุด) สำหรับแท็บเล็ต
• 800 พิกเซล (ขั้นต่ำ) สำหรับเดสก์ท็อป

ทำให้ COPE-M ทำงานให้กับแบรนด์ของคุณ

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

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

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

ภาพหน้าปกโดย Joseph Kalinowski/Content Marketing Institute