รากฐานที่มั่นคง
รากฐานที่มั่นคงเป็นข้อกําหนดพื้นฐานในการสร้าง PWA ที่ยอดเยี่ยม หากต้องการใช้รากฐานนี้ คุณต้องออกแบบและเขียนโค้ดตามข้อจำกัดของเว็บโดยใช้หลักการ 2 ข้อต่อไปนี้
- ใช้อุปกรณ์เคลื่อนที่เป็นข้อจำกัดการโฟกัส ตรวจสอบว่ามุมมองแต่ละมุมมองของการออกแบบมุ่งเน้นที่เนื้อหาและการโต้ตอบที่จำเป็นเท่านั้น
- เน้นเนื้อหาและฟังก์ชันหลักในขั้นตอนการออกแบบ
- เพิ่มประสิทธิภาพแบบเป็นขั้นๆ เมื่อจำเป็น เริ่มต้นด้วยการสร้างเนื้อหาและฟังก์ชันหลักของคอมโพเนนต์ด้วยเครื่องมือที่ใช้งานง่ายที่สุดและพร้อมใช้งานมากที่สุด ทำให้เข้าถึงได้ จากนั้นทดสอบฟีเจอร์ขั้นสูงที่คุณต้องการใช้และปรับปรุงคอมโพเนนต์ด้วยฟีเจอร์ดังกล่าว
- มอบประสบการณ์การใช้งานที่ดีและรวดเร็วแก่ผู้ใช้ โดยมุ่งเน้นเมตริกประสิทธิภาพเว็บที่ยึดผู้ใช้เป็นศูนย์กลาง รับเมตริกผู้ใช้จริง และเพิ่มประสิทธิภาพให้กับผู้ใช้ทั้งหมด ไม่ว่าจะมีการเชื่อมต่อเครือข่าย, ประเภทอินพุต, CPU หรือ GPU ใดก็ตาม
การปฏิบัติตามหลักการเหล่านี้และปรับปรุงด้วยรูปแบบและฟีเจอร์เว็บสมัยใหม่จะช่วยให้คุณสร้างประสบการณ์การใช้งานที่ยอดเยี่ยมและรวดเร็วด้วยการออกแบบที่แท้จริง การออกแบบที่ขับเคลื่อนโดยข้อจำกัดแทนพิกเซล ช่วยให้ผู้ใช้ทุกคนเข้าถึงเนื้อหาและฟังก์ชันหลักได้ในลักษณะที่เหมาะกับบริบทการท่องเว็บที่เจาะจงที่สุด
การออกแบบเว็บที่ตอบสนองตามอุปกรณ์
นับตั้งแต่บทความการออกแบบเว็บที่ปรับเปลี่ยนตามอุปกรณ์ของ Ethan Marcotte ใน A List Apart ปี 2010 เราสนับสนุนให้นักออกแบบและนักพัฒนาซอฟต์แวร์สร้างประสบการณ์การใช้งานที่ยืดหยุ่น เพื่อสร้างอินเทอร์เฟซผู้ใช้ที่ใช้งานได้กับหน้าจอและอุปกรณ์ทุกขนาด
แต่ในช่วงกลางคัน คำว่า "อุปกรณ์เคลื่อนที่ แท็บเล็ต และเดสก์ท็อป" ก็ถูกย่อให้สั้นลงเป็น "อุปกรณ์เคลื่อนที่ แท็บเล็ต และเดสก์ท็อป" โดยความกว้างจะขึ้นอยู่กับขนาดหน้าจอ iOS เป็นอย่างมาก ด้วย CSS ที่ทันสมัยและเน้นการออกแบบที่ตอบสนองตามอุปกรณ์เดิมของการออกแบบที่ตอบสนองตามอุปกรณ์ เราสามารถใส่ลูกอมไว้ในเว็บไซต์แบบเท่ๆ ได้
การออกแบบเว็บที่ตอบสนองตามอุปกรณ์มีองค์ประกอบทางเทคนิค 3 อย่าง ได้แก่
- ตารางกริดแบบไหล
- สื่อที่ยืดหยุ่น
- คิวรีสื่อ
Ethan สรุปว่าข้อกำหนดทางเทคนิคเหล่านี้ยังไม่เพียงพอ และเราต้องคิดต่างออกไปด้วย
ความเชื่อผิดๆ ของผู้ใช้อุปกรณ์เคลื่อนที่
ในยุคแรกๆ ของการตั้งสมมติฐานเกี่ยวกับการออกแบบที่ปรับเปลี่ยนตามอุปกรณ์มีขึ้นเพื่อตั้งชื่อการทำให้เว็บไซต์ออกแบบได้ง่ายขึ้น เช่น ประสบการณ์การใช้งานขนาดเล็กมีไว้สำหรับโทรศัพท์และมีความกว้าง 320 พิกเซล ประสบการณ์การใช้งานขนาดกลางมีไว้สำหรับแท็บเล็ตและมีความกว้าง 1024 พิกเซล และขนาดที่ใหญ่กว่านั้นมีไว้สำหรับเดสก์ท็อป หน้าจอขนาดเล็กมีความสามารถในการสัมผัส แต่หน้าจอขนาดใหญ่ไม่มี ผู้ใช้โทรศัพท์เร่งรีบและเสียสมาธิ จึงต้องการประสบการณ์ที่ "เบาลง"
ทั้งหมดนี้ไม่เป็นความจริง เป็นเพียงความเชื่อที่สืบทอดกันมาเกี่ยวกับอุปกรณ์เคลื่อนที่โดยมีการสันนิษฐานว่าความต้องการพื้นฐานของผู้ใช้จะแตกต่างกันไปตามขนาดหน้าจอหรือประเภทอุปกรณ์เท่านั้น ข้อมูลนี้ไม่ผ่านการกลั่นกรอง
ตัวอย่างเช่น PWA ของโซเชียลเน็ตเวิร์กที่คุณติดตั้งได้ในวันนี้บนอุปกรณ์เคลื่อนที่และเดสก์ท็อป ผู้ใช้จำนวนมากใช้เดสก์ท็อปโดยเปิดหน้าต่างแคบๆ ที่มีฟีดอยู่ด้านหนึ่งของหน้าจอขณะทำงานได้ การคิดว่าผู้ใช้ใช้อุปกรณ์เคลื่อนที่เนื่องจากความกว้างที่ใช้งานได้นั้นไม่ถูกต้อง
โลกของ PWA ที่ไม่ได้อยู่ในแท็บของเบราว์เซอร์ยังเพิ่มความท้าทายใหม่ๆ ให้กับโลกของการออกแบบที่ตอบสนองตามอุปกรณ์ เช่น โหมดมินิและการทํางานร่วมกับอุปกรณ์แบบพับได้
โหมดมินิ
เมื่อติดตั้ง PWA ในอุปกรณ์เดสก์ท็อปแล้ว หน้าต่างจะมีขนาดเล็กมาก ซึ่งเล็กกว่าหน้าต่างของเบราว์เซอร์และเล็กกว่าวิวพอร์ตของอุปกรณ์เคลื่อนที่ นี่เป็นฟีเจอร์ใหม่บนเว็บ เรารองรับโหมดมินิ ซึ่งเป็นหน้าต่างที่เล็กที่สุดได้เพียง 200x100 พิกเซล CSS
เมื่อสร้าง PWA ในปัจจุบัน คุณควรพิจารณาว่าจะนำเสนออะไรในโหมดมินิ เนื่องด้วยการออกแบบเว็บไซต์ที่ตอบสนองได้ดี เช่น ปุ่มควบคุมในโปรแกรมเล่นเพลง ข้อมูลแดชบอร์ด หรือการดำเนินการแบบด่วน
ในเดสก์ท็อป สามารถแสดง PWA ในหน้าต่างขนาดเล็กกว่าหน้าต่างที่เล็กที่สุดที่คุณเคยออกแบบมาสำหรับเบราว์เซอร์ได้ ซึ่งจะเพิ่มเบรกพอยท์ใหม่สำหรับการออกแบบเว็บที่ตอบสนองตามอุปกรณ์ นั่นก็คือมินิโหมด
อุปกรณ์แบบพับได้และไฮบริด
อุปกรณ์แบบพับได้และไฮบริดยังพบได้ทั่วไปในปัจจุบันดังนี้
- โทรศัพท์แบบฝาพับขนาดเล็ก
- อุปกรณ์แบบพับได้ที่ใช้เป็นโทรศัพท์หรือแท็บเล็ตได้
- แล็ปท็อปที่เปลี่ยนเป็นแท็บเล็ตได้
- แท็บเล็ตที่ทำหน้าที่เป็นแล็ปท็อปได้ด้วยแป้นพิมพ์และแทร็กแพด
- จากนั้นโทรศัพท์จะเปลี่ยนเป็นเดสก์ท็อปได้ด้วยฮับ
แม้ว่าเว็บไซต์ทุกแห่งจะพบปัญหานี้ แต่ PWA จะช่วยให้คุณควบคุมและรับผิดชอบช่วงเวลาที่ติดตั้งแอปได้ ดังนั้น การออกแบบของคุณจึงควรตอบสนองและมอบประสบการณ์การใช้งานที่ดีที่สุดในทุกบริบท
ทุกอย่างก่อน
แล้วคุณควรจะเริ่มจากตรงไหนดีล่ะ อุปกรณ์เคลื่อนที่มาก่อน เน้นเนื้อหาก่อน ต้องดูแบบออฟไลน์ก่อน เมื่อออกแบบเว็บให้มีความยืดหยุ่น การออกแบบแบบใดจะเหมาะสม คำตอบคือใช่ ทุกอย่างก่อน คำว่าอุปกรณ์เคลื่อนที่เป็นอันดับแรกได้รับการตีความในหลายวิธีนับตั้งแต่ที่ Luke Wroblewski บัญญัติคำนี้ขึ้นในปี 2009 ตั้งแต่การจําลองรูปแบบ UI และ UX ที่เจาะจงแพลตฟอร์มบนเว็บ ไปจนถึงการสร้างแอปบนอุปกรณ์เคลื่อนที่ก่อนสร้างเว็บแอป ไปจนถึงการใช้ Media Query ของขนาดหน้าจอขั้นต่ำเพียงอย่างเดียว แต่เจตนาเดิมคืออุปกรณ์เคลื่อนที่บังคับให้คุณมุ่งเน้น ดังที่ Luke กล่าวไว้
อุปกรณ์เคลื่อนที่กำหนดให้ทีมพัฒนาซอฟต์แวร์ต้องมุ่งเน้นเฉพาะข้อมูลและการดำเนินการที่สำคัญที่สุดในแอปพลิเคชัน หน้าจอขนาด 320 x 480 พิกเซลไม่มีพื้นที่เพียงพอสำหรับองค์ประกอบที่ไม่เกี่ยวข้องและไม่จำเป็น คุณต้องจัดลําดับความสําคัญ ดังนั้นเมื่อทีมออกแบบ Mobile First ผลที่ได้คือประสบการณ์ที่มุ่งเน้นไปที่งานหลักที่ผู้ใช้ต้องการทำให้สำเร็จ โดยปราศจากการออมภายนอกและเศษส่วนเล็กๆ ในอินเทอร์เฟซที่ทิ้งขยะให้กับเว็บไซต์ที่เข้าถึงบนเดสก์ท็อปในปัจจุบัน ซึ่งถือเป็นประสบการณ์ที่ดีของผู้ใช้และดีต่อธุรกิจ
ลุค โวเบิลวสกี
ให้มุ่งเน้นเฉพาะงานที่จำเป็นที่ผู้ใช้ต้องการทำให้สำเร็จในเว็บไซต์แต่ละมุมมอง และอย่าเพิ่มสิ่งต่างๆ ลงในแนวคิดเพียงเพราะว่ามีพื้นที่หน้าจอมากขึ้น
หลักการที่ 2 บอกเป็นนัยไว้ในการออกแบบเว็บไซต์ที่ตอบสนองตามอุปกรณ์ ซึ่งก็คือ "ประสบการณ์การใช้งานที่หลากหลาย" เป้าหมายของคุณไม่ควรเป็นการสร้างประสบการณ์การใช้งานที่เหมือนกันทุกประการและสมบูรณ์แบบทุกพิกเซลสำหรับผู้ใช้ทุกคน เพราะนั่นแทบจะเป็นไปไม่ได้
แทนที่จะคิดว่าประสบการณ์การใช้งานเว็บเป็นสิ่งที่ตายตัว ให้คิดว่านี่เป็นชุดคำแนะนำที่อุปกรณ์ของผู้ใช้จะใช้เพื่อสร้างประสบการณ์ที่ดีที่สุดสำหรับบริบทในปัจจุบันของผู้ใช้ ซึ่งต้องใช้การปรับปรุงแบบเป็นขั้นเป็นตอน
การเพิ่มประสิทธิภาพแบบต่อเนื่อง
การปรับปรุงแบบเป็นขั้นเป็นตอนเป็นรูปแบบที่ช่วยให้เราเขียนโค้ดที่ทำงานได้ทุกที่ โดยเริ่มจาก HTML, CSS และ JavaScript มาตรฐาน และเพิ่มความสามารถอีกชั้นบนสุดด้วยการแสดงผลสำรองที่เหมาะสมเมื่อไม่มี API
คุณเพิ่มประสิทธิภาพอย่างไร การตรวจจับฟีเจอร์เป็นรูปแบบที่คุณทำการทดสอบการสนับสนุนและตอบสนองตามผลการทดสอบนั้น มีเครื่องมือแพลตฟอร์มเว็บในตัวมากมายสำหรับการดำเนินการนี้
เมื่อใช้ @supports ให้ตรวจหาการรองรับเบราว์เซอร์ของฟีเจอร์ CSS และใช้กฎตามผลลัพธ์ที่ได้
ซึ่งจะมีผลกับทั้งพร็อพเพอร์ตี้และค่า CSS หากระบบรองรับพร็อพเพอร์ตี้และค่าหนึ่งไม่รองรับ พร็อพเพอร์ตี้ดังกล่าวจะล้มเหลวเช่นเดียวกับพร็อพเพอร์ตี้ที่ไม่รองรับ โค้ด JavaScript สามารถเข้าถึงข้อมูลนี้ได้ผ่าน CSSSupportsRule
ฟีเจอร์ใหม่ส่วนใหญ่ของแพลตฟอร์มเว็บจะแนบอยู่กับออบเจ็กต์ที่มีอยู่ ดังนั้น "ฟีเจอร์" ในการตรวจหาสไตล์ออบเจ็กต์จึงทํางานได้ดีใน JavaScript เช่นเดียวกับการค้นหาอื่นๆ ที่คล้ายกัน เช่น การตรวจสอบพร็อพเพอร์ตี้หรือเมธอดในองค์ประกอบ
หากต้องการส่ง JavaScript ที่ทันสมัย คุณสามารถใช้รูปแบบ module/nomodule เพื่อมอบฟีเจอร์ที่มีประสิทธิภาพมากขึ้นด้วยเพย์โหลดที่เล็กลงให้กับเบราว์เซอร์ที่ทันสมัยมากขึ้น และมอบประสบการณ์การใช้งานสำรองให้กับเบราว์เซอร์รุ่นเก่า ซึ่งมีข้อดีเพิ่มเติมในการรับประกันว่าฟีเจอร์ JavaScript พื้นฐานใหม่ เช่น Promise, Class, Arrow Function และ const และ let จะพร้อมใช้งานสำหรับเบราว์เซอร์ที่รองรับ ES Modules
คุณยังรวมการตรวจหาองค์ประกอบหลายรูปแบบเข้าด้วยกันเพื่อสร้างเส้นฐานที่ปรับปรุงแล้วได้ด้วย ทีม BBC News เป็นผู้ตั้งชื่อให้เกมนี้ชื่อว่า Cutting the Mustard และให้คุณจัดส่งประสบการณ์หลักให้กับทุกคนและเริ่มปรับปรุงประสบการณ์การใช้งานหลังจากถึงแถบที่ระบบตรวจพบฟีเจอร์แล้วเท่านั้น
หลีกเลี่ยงการตรวจหาอุปกรณ์
คุณควรทดสอบการรองรับฟีเจอร์โดยตรงแทนที่จะคาดเดาการรองรับตามสตริง User-Agent
สตริง User Agent ไม่เคยเชื่อถือได้อย่างแท้จริง โดยอาศัยความรู้ที่เกือบสมบูรณ์แบบเกี่ยวกับเบราว์เซอร์ ระบบปฏิบัติการ และอุปกรณ์ทุกรูปแบบที่มีอยู่เพื่อ "เดาให้ถูก" อย่างไรก็ตาม ก็ยังเสี่ยงต่อการปลอมแปลงผู้ใช้ได้ เช่น การเปลี่ยนเส้นทางเว็บไซต์เวอร์ชันเดสก์ท็อปในเบราว์เซอร์บนอุปกรณ์เคลื่อนที่มักจะง่ายดายเพียงเท่าการปลอมแปลงสตริง User Agent ของเดสก์ท็อป
นอกจากนี้ เบราว์เซอร์ยังพยายามหยุดสตริง User Agent ไว้ชั่วคราว โดยระบุสตริง User Agent สําหรับการตรวจหาฟีเจอร์เป็นเหตุผลในการเลิกใช้งานโดยเฉพาะ ซึ่งทําให้สตริงดังกล่าวไม่น่าเชื่อถือในการระบุผู้ใช้และอุปกรณ์มากกว่าที่เคย
เน้นเนื้อหาเป็นหลัก
หลักการอีกข้อหนึ่งของการออกแบบสําหรับเว็บคือ เริ่มต้นด้วยเนื้อหาของคุณก่อน ตัวอย่างเช่น ตารางหุ้นแบบเรียลไทม์ที่มีกราฟราคาหุ้นคือ ตารางหุ้นที่มีราคาในช่วงเวลาที่ผ่านมา อาจมีลิงก์สำหรับรีเฟรชไซต์
จากนั้นสามารถเพิ่มประสิทธิภาพด้วย JavaScript และคำขอดึงข้อมูลเพื่ออัปเดตค่าของตารางตามตัวจับเวลา หรือเพิ่มประสิทธิภาพด้วยซ็อกเก็ตเพื่อให้การอัปเดตแบบเรียลไทม์ตาม Push ข้อมูลนี้สามารถปรับปรุงอีกครั้งเพื่อแสดงผลเป็นกราฟได้โดยใช้ CSS, SVG หรือ Canvas แต่หัวใจสำคัญเริ่มต้นด้วยเนื้อหา
การออกแบบภายใน
- อุปกรณ์เคลื่อนที่เป็นข้อจำกัดในการมุ่งเน้นประสบการณ์ของผู้ใช้
- การเน้นเนื้อหาและฟังก์ชันการทำงานหลักในกระบวนการออกแบบ
- ปรับปรุงอย่างต่อเนื่องด้วยฟังก์ชันขั้นสูง (หากมี)
หลักการเหล่านี้ผสานรวมกันเพื่อสร้างสิ่งใหม่ที่เรียกว่าการออกแบบที่ฝังอยู่ ในบทสนทนาเรื่องการออกแบบเลย์เอาต์แบบ Intrinsic เจน ซิมมอนส์พูดถึงการใช้เครื่องมือ CSS สมัยใหม่ เช่น ตารางกริด, Flexbox, เลย์เอาต์แบบ Flow และโหมดการเขียน เพื่อออกแบบและสร้างอินเทอร์เฟซผู้ใช้ เธอกล่าวว่าเครื่องมือเหล่านี้ช่วยให้เธอทำสิ่งต่อไปนี้ได้
คุณทำให้เลย์เอาต์สอดคล้องกับเนื้อหาและการออกแบบที่เราต้องการได้
Jen Simmons
CSS ใหม่นี้ช่วยให้นักออกแบบสามารถควบคุมเลย์เอาต์ได้อีกครั้ง แต่ต้องเป็นไปตามหลักการการออกแบบเว็บล่าสุด แทนที่จะสร้างแบบฟอร์มแบบคงที่ตามขนาดหน้าจอแบบคงที่ คุณกําหนดกฎตามเนื้อหาที่จะใช้จัดวางเลย์เอาต์โดยใช้ประโยชน์จากคุณสมบัติพื้นฐานของเนื้อหานั้น เช่น ระดับความเล็กหรือความใหญ่ ขนาดของข้อความ และพื้นที่ว่างที่มีอยู่ทั้งหมดในคราวเดียว ซึ่งช่วยให้คุณเห็นภาพการออกแบบขณะที่โต้ตอบกับเนื้อหาได้โดยไม่ต้องควบคุมตําแหน่งพิกเซลทุกจุด
เลย์เอาต์ภายในช่วยทำให้เกิดการสนทนาเกี่ยวกับการควบคุมบนเว็บแบบเต็มวง ซึ่งช่วยอธิบายความหมายของเนื้อหาได้ การควบคุมบนเว็บไม่ใช่การกำหนดอุปกรณ์ ขนาดหน้าจอ สี แบบอักษร หรือเลย์เอาต์ หรือความสามารถสำหรับผู้เข้าชมเว็บไซต์แต่ละคน การควบคุมบนเว็บเกี่ยวข้องกับการเขียนกฎที่เบราว์เซอร์จะใช้เพื่อรวบรวมประสบการณ์การใช้งานของคุณ โดยสร้างประสบการณ์ที่ไม่ซ้ำกันสำหรับผู้ใช้แต่ละคนใน Progressive Web App
ประสิทธิภาพของเว็บ
รากฐานสำคัญอีกประการสําหรับ PWA คือประสิทธิภาพของเว็บ คุณต้องมอบประสบการณ์การใช้งานที่ยอดเยี่ยมให้แก่ผู้ใช้ ซึ่งจะทําให้ได้รับ Conversion มากขึ้นในทุกช่องทาง
ประสิทธิภาพของเว็บมีหลายขั้นตอนดังนี้
- ทําความเข้าใจเมตริกหลักที่เน้นผู้ใช้เป็นศูนย์กลาง
- ตั้งเป้าหมายสําหรับเมตริกทุกรายการ
- วัด PWA
- ปรับปรุงเมตริกของเราโดยใช้เทคนิคและแนวทางปฏิบัติแนะนำแบบคงที่ในโค้ดหรือเซิร์ฟเวอร์ของเรา
- วัดอีกครั้ง
- ปรับปรุงประสบการณ์ของผู้ใช้แต่ละรายแบบเรียลไทม์ตามบริบทของผู้ใช้
เมตริกประสิทธิภาพของเว็บในปัจจุบันจะวัดความเร็วที่เนื้อหาปรากฏบนหน้าจอ รวมถึงการโต้ตอบของเว็บไซต์ และดูว่าผู้ใช้ได้รับประสบการณ์อย่างไร
Core Web Vitals
ในช่วงทศวรรษที่ผ่านมา เราได้ใช้เมตริกต่างๆ เพื่อวัดความสำเร็จในประสิทธิภาพของเว็บ วันนี้ชุดเมตริกแนะนำที่เรียกว่า Core Web Vitals จะเน้น 3 ด้านหลักๆ ที่ส่งผลต่อประสิทธิภาพและประสบการณ์ของผู้ใช้ ดังนี้
- การโหลด - แสดงโดย Largest Contentful Paint (LCP)
- การโต้ตอบ ซึ่งนำเสนอโดย Interaction to Next Paint (INP)
- ความเสถียรของภาพ ใช้แทน Cumulative Layout Shift (CLS)
เมื่อใช้ Core Web Vitals คุณจะดูข้อมูลโดยย่อได้ว่า PWA ของคุณมีประสิทธิภาพดีหรือไม่ดีเพียงใดในแง่ของประสิทธิภาพและประสบการณ์ของผู้ใช้
รากฐานของ PWA
PWA ต้องมีรากฐานที่มั่นคงในการออกแบบที่ตอบสนองตามอุปกรณ์ อุปกรณ์เคลื่อนที่ และทุกสิ่งเป็นอันดับแรก การออกแบบที่เน้นประสิทธิภาพ และประสิทธิภาพของเว็บเพื่อเป็นรากฐานของประสบการณ์ที่ยอดเยี่ยมสำหรับผู้ใช้ทุกคน