ฟังก์ชันการออกแบบ AMP: มีอะไรอีกบ้างในกรอบงาน

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

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

9 ความสามารถในการออกแบบ AMP ที่คุณอาจไม่รู้

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

1. สร้างเว็บแอปโปรเกรสซีฟ (PWA)

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

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

เมื่อรวมกับ AMP แล้ว PWA เหล่านี้สามารถเตะด้วยความเร็วสูงได้ คุณสามารถใช้ร่วมกันได้สองสามวิธีดังต่อไปนี้

AMP เป็น PWA

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

AMP ใน PWA

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

AMP เป็น PWA

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

2. การสร้างหน้าชำระเงิน

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

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

ปัจจุบัน AMP รองรับการทำธุรกรรมในบริบทที่จำกัดเท่านั้น เช่น ผ่าน amp-iframe ที่มี API คำขอชำระเงิน อย่างไรก็ตาม การดำเนินการนี้จะละเว้นกรณีการใช้งานที่สำคัญจำนวนมาก กิจกรรมนี้จะใช้องค์ประกอบการชำระเงินที่มีประสิทธิภาพมากขึ้นใน AMP ซึ่งอาจรวมถึงการผสานรวมกับผู้ประมวลผลการชำระเงินบุคคลที่สาม วิดเจ็ต กระเป๋าเงิน ฯลฯ (ควรรองรับสิ่งเหล่านี้ไม่ว่าอย่างไรก็ตาม)

3. เพื่อสร้างส่วนความคิดเห็น

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

4. เรื่องแอมป์

หากคุณเคยดูเรื่องราวของ Snapchat, Instagram หรือ Facebook เรื่องราว AMP จะดูคุ้นเคยมาก Rudy Galfi ผู้จัดการผลิตภัณฑ์สำหรับ AMP ของ Google กล่าวว่า Stories เสนอให้ผู้เผยแพร่ "รูปแบบที่เน้นอุปกรณ์เคลื่อนที่สำหรับการนำเสนอข่าวสารและข้อมูลในรูปแบบเรื่องราวที่เข้าถึงได้ชัดเจน"

ตามรายงานของ Galfi ผู้จัดพิมพ์เช่น CNN, Conde Nast, Hearst, Mashable, Meredith, Mic, Vox Media และ The Washington Post มีส่วนร่วมในการพัฒนารูปแบบในช่วงแรก ตอนนี้ใช้ได้กับผู้ใช้ทุกคนแล้ว และเท่าที่ค้นพบได้ คุณจะพบเรื่องราว AMP ใน Google Images, Discover, Search และ News

ต่อไปนี้คือตัวอย่างของสิ่งที่เห็นอาจมีลักษณะดังนี้:

5. รับการมองเห็นเพิ่มเติมใน Bing

ในบล็อกโพสต์ล่าสุด Fabrice Canel ผู้จัดการโครงการหลักของ Bing ได้ประกาศคุณลักษณะใหม่สำหรับเครื่องมือค้นหาของบริษัท:

ในปี 2016 Bing ได้เข้าร่วมกับ Accelerated Mobile Pages (ย่อมาจาก AMP) เพื่อช่วยให้คุณ "ค้นหา" และ "ทำ" ค้นหาได้เร็วขึ้น ไม่ว่าคุณจะอยู่ที่ไหนและบนอุปกรณ์ใดก็ตามเมื่อคุณกำลังมองหาข้อมูล วันนี้ เรายินดีที่จะประกาศเปิดตัว Bing AMP viewer และ Bing AMP Cache ทำให้หน้าเว็บที่เปิดใช้งาน AMP ทำงานโดยตรงจากผลการค้นหาบนมือถือของ Bing ทำให้ Bing สามารถมอบประสบการณ์มือถือที่รวดเร็วยิ่งขึ้นแก่ผู้ใช้ Bing

โปรแกรมดูนี้ดูคล้ายกับของ Google ซึ่งเป็นภาพหมุนที่มีภาพที่มีสายฟ้าเพื่อระบุเนื้อหาที่เปิดใช้งาน AMP:

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

6. สร้างเอฟเฟกต์ที่ถูกผูกไว้กับการเลื่อน

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

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

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

แอนิเมชั่นแบบเลื่อนได้

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

เฟดและการเปลี่ยนสไลด์

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

ม้าหมุน

สามารถใช้เอฟเฟกต์การเปลี่ยนกับภาพหมุน AMP ได้เช่นกัน:

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

หน้าต่างพารัลแลกซ์

โดยการกำหนดหน้าต่างแบ่งที่เล็กกว่ารูปภาพ คุณสามารถสร้างเอฟเฟกต์พารัลแลกซ์ได้:

หน้าต่างนี้มีขนาดเล็กกว่ารูปภาพ และเมื่อผู้ใช้เลื่อน หน้าต่างจะเลื่อนลงด้านล่าง เผยให้เห็นช้างที่เหลือในภาพ

7. AMPlify อีเมลของคุณ

คุณรู้เกี่ยวกับการเร่งหน้าเว็บ แต่อีเมลล่ะ? AMP สำหรับอีเมลดูเหมือนว่าจะนำความเร็วและความสามารถในการใช้งานของหน้า AMP มาสู่ Gmail การอนุญาตให้นักพัฒนาส่งอีเมลเป็นเอกสาร AMP ศักยภาพของ AMP สำหรับอีเมลคือความสามารถในการสร้างประสบการณ์อันยาวนานให้กับผู้ใช้

Aakash Sahney ผู้จัดการผลิตภัณฑ์ของ Gmail และ Chat กล่าวว่า AMP ใหม่สำหรับข้อกำหนดอีเมลจะเป็น "วิธีที่มีประสิทธิภาพสำหรับนักพัฒนาในการสร้างประสบการณ์อีเมลที่น่าดึงดูด โต้ตอบได้ และดำเนินการได้จริง" ด้วยวิธีนี้ ผู้ใช้สามารถทำงานผ่าน Gmail เช่น RSVP กิจกรรม จองการนัดหมาย หรือกรอกแบบสอบถาม เป็นต้น

Pinterest, Booking.com และ Doodle เป็นกลุ่มแรกที่ทดสอบ AMP สำหรับข้อกำหนดอีเมล:

ข้อมูลจำเพาะของ AMP สำหรับอีเมลพร้อมให้ใช้งานแล้ววันนี้ แต่เฉพาะสำหรับนักพัฒนาซอฟต์แวร์ที่เข้าถึงตัวอย่างผ่านการลงชื่อสมัครใช้ที่นี่

8. เพื่อสร้างหน้า Landing Page ความเร็วสูงหลังการคลิกอย่างง่ายดาย

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

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

ขณะที่สร้าง คุณจะได้รับแจ้งหากคุณเข้าใกล้เกินขีดจำกัดน้ำหนักหน้าของ AMP ที่ 75kb เมื่อคุณถึง 80% ของขีดจำกัด ตัวแสดงคำเตือนนี้จะปรากฏใกล้กับด้านล่างของหน้าจอ:

หากไม่เป็นเช่นนั้น แสดงว่าคุณเผยแพร่ไปยัง WordPress หรือโดเมนที่คุณกำหนดเองได้อย่างชัดเจน:

9. เพื่อเพิ่มประสิทธิภาพหน้า Landing Page หลังการคลิกของคุณ

การสร้างหน้า Landing Page หลังการคลิก AMP ที่ยอดเยี่ยมเป็นสิ่งหนึ่ง แต่ การปรับปรุง หน้า Landing Page นั้นแตกต่างไปจากเดิมอย่างสิ้นเชิง เมื่อพูดถึงการค้นหาวิธีเพิ่มอัตรา Conversion ของหน้า Landing Page หลังคลิก AMP จุดเริ่มต้นที่ดีคือการทดสอบ A/B

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

โชคดีที่ Instapage อนุญาตให้คุณทำซ้ำหน้า Landing Page ของ AMP หลังการคลิกด้วยการคลิก:

เพียงเลือก "สร้างการทดสอบ A/B" จากนั้นเลือก "รูปแบบใหม่" แล้วคุณจะทำซ้ำหน้าและแก้ไขจากที่นั่น หรือเริ่มต้นใหม่และนำเข้าบล็อกข้อความ บล็อกรูปภาพ วิดเจ็ต และอื่นๆ ที่บันทึกไว้โดยใช้ "Instablocks" ลักษณะเฉพาะ. จากนั้น ทำการทดสอบ และใช้การออกแบบที่ชนะ

รับมากขึ้นในการสัมมนาผ่านเว็บของ Google AMP

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

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

คิดว่าคุณรู้จัก AMP หรือไม่? เรียนรู้เพิ่มเติมเกี่ยวกับตำนานของกรอบงานกับ Instapage และผู้สร้าง Google ในการสัมมนาผ่านเว็บสุดพิเศษของเรา จากนั้น รับการสาธิต AMP ที่กำหนดเองที่นี่ และดูว่าการสร้างหน้า AMP ที่เร็วฟ้าผ่าทำได้ง่ายเพียงใด