รากฐานที่มั่นคง
รากฐานที่มั่นคงคือข้อกำหนดพื้นฐานสำหรับการสร้าง PWA ที่ยอดเยี่ยม ในการใช้รากฐานนี้ คุณต้องออกแบบและเขียนโค้ดสำหรับข้อจำกัดของเว็บโดยใช้หลักการ 2 ข้อดังนี้
- ใช้อุปกรณ์เคลื่อนที่เป็นข้อจํากัดการโฟกัส ตรวจสอบว่าแต่ละมุมมองของการออกแบบมุ่งเน้นเฉพาะเนื้อหาและการโต้ตอบที่สำคัญเท่านั้น
- เน้นเนื้อหาและฟังก์ชันการทำงานหลักในกระบวนการออกแบบ
- ปรับปรุงอย่างต่อเนื่องเมื่อจำเป็น เริ่มต้นด้วยการสร้างเนื้อหาและฟังก์ชันหลักของคอมโพเนนต์ด้วยเครื่องมือที่เรียบง่ายที่สุดและมีให้บริการกันอย่างแพร่หลาย ทำให้เข้าถึงได้ง่าย จากนั้นทดสอบฟีเจอร์ขั้นสูงที่คุณต้องการใช้และปรับปรุงคอมโพเนนต์ด้วย
- มอบประสบการณ์การใช้งานที่ดีและรวดเร็วสำหรับผู้ใช้ โดยมุ่งเน้นเมตริกประสิทธิภาพเว็บที่เน้นผู้ใช้เป็นหลัก รับเมตริกผู้ใช้จริง และพุชประสิทธิภาพสำหรับผู้ใช้ทั้งหมด ไม่ว่าจะมีการเชื่อมต่อเครือข่าย, ประเภทอินพุต, CPU หรือ GPU
เมื่อทำตามหลักการเหล่านี้และเพิ่มประสิทธิภาพด้วยรูปแบบที่ทันสมัยและฟีเจอร์เว็บ คุณสามารถสร้างประสบการณ์ที่ยอดเยี่ยมและรวดเร็วด้วยการออกแบบที่แท้จริง การออกแบบที่ขับเคลื่อนโดยข้อจำกัดแทนการใช้พิกเซล ทำให้ผู้ใช้ทุกคนเข้าถึงเนื้อหาและฟังก์ชันการทํางานหลักได้ในลักษณะที่เหมาะกับบริบทการท่องเว็บของตนมากที่สุด
การออกแบบเว็บที่ตอบสนองตามอุปกรณ์
นับตั้งแต่บทความ A List Apart 2010 ของ Ethan Marcotte ในหัวข้อ การออกแบบเว็บที่ตอบสนองตามอุปกรณ์ นักออกแบบและนักพัฒนาได้รับการส่งเสริมให้สร้างประสบการณ์ที่ยืดหยุ่น ทำให้อินเทอร์เฟซผู้ใช้ทำงานได้กับขนาดหน้าจอและอุปกรณ์ที่หลากหลาย
แต่ในระหว่างทาง ได้เปลี่ยนเป็นขนาดอุปกรณ์เคลื่อนที่ แท็บเล็ต และเดสก์ท็อปน้อยลง โดยขนาดหน้าจอ iOS มักได้รับอิทธิพลอย่างมากต่อความกว้าง ด้วย CSS สมัยใหม่และเราเน้นที่ความตั้งใจแต่เดิมของการออกแบบที่ปรับเปลี่ยนตามอุปกรณ์ ทำให้เราสามารถใส่บีบให้กลับไปเล่นในเว็บไซต์ที่นุ่มนวลได้
การออกแบบเว็บที่ตอบสนองตามอุปกรณ์มีองค์ประกอบทางเทคนิค 3 ส่วน ได้แก่
- ตารางกริดแบบไหล
- สื่อที่ยืดหยุ่น
- การค้นหาสื่อ
Ethan สรุปว่าข้อกำหนดทางเทคนิคเหล่านี้ไม่เพียงพอ หนทางข้างหน้าก็ต้องใช้วิธีคิดที่ต่างออกไปด้วย
ความเชื่อผิดๆ ของผู้ใช้อุปกรณ์เคลื่อนที่
ในช่วงแรกๆ ที่มีสมมติฐานเกี่ยวกับการออกแบบที่ปรับเปลี่ยนตามอุปกรณ์คือ การทำให้เว็บไซต์ออกแบบได้ง่ายขึ้น ตัวอย่างเช่น ประสบการณ์เล็กๆ มีไว้สำหรับโทรศัพท์และความกว้าง 320 พิกเซล ประสบการณ์การใช้งานปานกลางสำหรับแท็บเล็ต และความกว้าง 1024 พิกเซล และขนาดใหญ่กว่าสำหรับเดสก์ท็อป หน้าจอขนาดเล็กมีความสามารถด้านการสัมผัส แต่หน้าจอขนาดใหญ่ไม่สามารถรองรับได้ ผู้ใช้โทรศัพท์เร่งรีบและเสียสมาธิ จึงต้องได้รับประสบการณ์ "แสง"
ซึ่งไม่ใช่ความจริงเลยเพราะเป็นความเชื่อผิดๆ เกี่ยวกับอุปกรณ์เคลื่อนที่ซ้ำๆ จากการที่สันนิษฐานว่าความต้องการของผู้ใช้นั้นแตกต่างออกไปโดยพื้นฐานแล้วก็ขึ้นอยู่กับขนาดของหน้าจอหรือประเภทอุปกรณ์เท่านั้น ซึ่งไม่ต้องใช้เวลาตรวจสอบอย่างละเอียด
เช่น PWA โซเชียลเน็ตเวิร์กที่คุณติดตั้งได้ในปัจจุบันบนอุปกรณ์เคลื่อนที่และเดสก์ท็อป ในเดสก์ท็อป ผู้ใช้จำนวนมากสามารถจำกัดหน้าต่างแคบๆ ไว้ด้านหนึ่งของหน้าจอขณะทำงาน และถือว่าผู้ใช้ใช้งานอุปกรณ์เคลื่อนที่เนื่องจากความกว้างที่ใช้ได้อาจไม่ถูกต้อง
โลกของ PWA ที่ไม่อยู่ในแท็บของเบราว์เซอร์นั้นเพิ่มความท้าทายใหม่ๆ เข้ามาในการออกแบบที่ตอบสนองตามอุปกรณ์ เช่น โหมดมินิ และการทำงานกับอุปกรณ์แบบพับได้
โหมดมินิ
เมื่อติดตั้ง PWA ในอุปกรณ์เดสก์ท็อป หน้าต่างอาจมีขนาดเล็กมาก โดยเล็กกว่าหน้าต่างของเบราว์เซอร์ และเล็กกว่าวิวพอร์ตของอุปกรณ์เคลื่อนที่ นี่คือสิ่งใหม่บนเว็บ เราสามารถรองรับโหมดมินิ ซึ่งเป็นหน้าต่างที่มีขนาดเล็กได้ถึง 200x100 พิกเซล CSS
เมื่อสร้าง PWA ในปัจจุบัน คุณควรนึกถึงสิ่งที่จะนำเสนอในโหมดขนาดเล็ก เนื่องจากการออกแบบเว็บที่ตอบสนองตามอุปกรณ์ เช่น เฉพาะปุ่มควบคุมในโปรแกรมเล่นเพลง ข้อมูลแดชบอร์ด หรือการใช้งานแบบลัด
บนเดสก์ท็อป PWA แสดงผลได้ในหน้าต่างที่เล็กกว่าหน้าต่างที่เล็กที่สุดเท่าที่คุณเคยออกแบบไว้กับเบราว์เซอร์ โดยจะเพิ่มเบรกพอยท์ใหม่สำหรับการออกแบบเว็บที่ตอบสนองตามอุปกรณ์ของคุณ ซึ่งก็คือโหมดมินิ
อุปกรณ์แบบพับได้และแบบผสม
ปัจจุบันอุปกรณ์แบบพับได้และอุปกรณ์ไฮบริดยังพบเห็นได้ทั่วไปดังนี้
- โทรศัพท์แบบฝาพับขนาดเล็ก
- อุปกรณ์แบบพับได้ที่สามารถใช้เป็นโทรศัพท์หรือแท็บเล็ตได้
- แล็ปท็อปที่สามารถเปลี่ยนให้เป็นแท็บเล็ตได้
- แท็บเล็ตที่ทำหน้าที่เป็นแล็ปท็อปได้ด้วยแป้นพิมพ์และแทร็กแพด
- จากนั้นจะแปลงโทรศัพท์เป็นเดสก์ท็อปโดยใช้ฮับ
แม้ว่าทุกเว็บไซต์จะมีความท้าทายในทุกเว็บไซต์ แต่เมื่อใช้ Progressive Web App คุณจะเป็นผู้ควบคุมและรับผิดชอบหน้าต่างเมื่อติดตั้งแอป ดังนั้น การออกแบบควรตอบสนองและมอบประสบการณ์ที่ดีที่สุดในทุกบริบท
ดำเนินการทุกอย่างก่อน
แต่คุณควรจะเริ่มจากตรงไหน เน้นอุปกรณ์เคลื่อนที่เป็นอันดับแรก ดูเนื้อหาแบบออฟไลน์ก่อน ข้อใดคือสิ่งที่เมื่อออกแบบเพื่อความยืดหยุ่นของเว็บ คำตอบคือใช่ ต้องทำทุกอย่างก่อน คำว่าอุปกรณ์เคลื่อนที่เป็นอันดับแรกมีการตีความในหลายๆ ด้านตั้งแต่ Luke Wroblewski ริเริ่มเป็นครั้งแรกในปี 2009 ไม่ว่าจะเป็นการจำลอง UI และรูปแบบ UX เฉพาะแพลตฟอร์มบนเว็บ ไปจนถึงการสร้างแอปบนอุปกรณ์เคลื่อนที่ก่อนสร้างเว็บแอป เพื่อใช้เพียงการค้นหาสื่อที่มีความกว้างต่ำสุดและเรียกใช้แอปต่อวัน แต่สิ่งที่เป็นความตั้งใจดั้งเดิมก็คือ อุปกรณ์เคลื่อนที่เป็นตัวผลักดันให้คุณจดจ่อ ดังที่ลุคกล่าวไว้:
อุปกรณ์เคลื่อนที่กำหนดให้ทีมพัฒนาซอฟต์แวร์มุ่งเน้นไปที่ข้อมูลและการดำเนินการที่สำคัญที่สุดในแอปพลิเคชันเท่านั้น หน้าจอขนาด 320 x 480 พิกเซลจะไม่มีพื้นที่ว่างสำหรับองค์ประกอบที่ไม่จำเป็นและเกินความจำเป็น คุณต้องจัดลำดับความสำคัญ ดังนั้นเมื่อทีมงานออกแบบ Mobile First ผลลัพธ์ก็คือประสบการณ์ที่โฟกัสกับงานสำคัญที่ผู้ใช้ต้องการทำให้สำเร็จ โดยไม่มีการเปลี่ยนแปลงใดๆ และอินเทอร์เฟซที่ปนเปื้อนเว็บไซต์ที่เข้าถึงบนเดสก์ท็อปในปัจจุบัน นั่นคือประสบการณ์ที่ดีของผู้ใช้และธุรกิจ
Luke Wroblewski
ให้แต่ละมุมมองของเว็บไซต์เน้นเฉพาะงานสำคัญที่ผู้ใช้ต้องการทำให้สำเร็จ และอย่าเพิ่มองค์ประกอบอื่นๆ ลงในแนวคิดเพียงเพราะว่ามีพื้นที่หน้าจอมากกว่า
หลักการข้อที่ 2 ได้รับการกล่าวถึงในการออกแบบเว็บที่ตอบสนองตามอุปกรณ์ นั่นคือ "การไล่ระดับสีของประสบการณ์ที่แตกต่างกัน" ประสบการณ์ที่ยอดเยี่ยมแบบพิกเซลที่เหมือนกับพิกเซลในทุกๆ ผู้ใช้ไม่ควรเป็นเป้าหมายของการทำงานของคุณ เพราะทั้งหมดนี้เป็นไปไม่ได้
แทนที่จะคิดว่าประสบการณ์การใช้เว็บเป็นสิ่งตายตัว ให้คิดว่านี่เป็นชุดคำแนะนำที่อุปกรณ์ของผู้ใช้จะใช้ในการสร้างประสบการณ์ที่ดีที่สุดสำหรับบริบทปัจจุบัน ต้องนำการเพิ่มประสิทธิภาพแบบต่อเนื่องมาใช้ก่อน
การเพิ่มประสิทธิภาพแบบต่อเนื่อง
การเพิ่มประสิทธิภาพแบบก้าวหน้าคือรูปแบบที่ช่วยให้เราเขียนโค้ดที่ทำงานได้ทุกที่ ตั้งแต่ HTML, CSS และ JavaScript มาตรฐาน และเพิ่มความสามารถอีกขั้นนอกเหนือจากนั้นโดยมีทางเลือกสำรองที่เหมาะสมเมื่อ API ไม่พร้อมใช้งาน
คุณจะเพิ่มประสิทธิภาพได้อย่างไร การตรวจหาฟีเจอร์เป็นรูปแบบที่คุณทำการทดสอบเพื่อรับการสนับสนุนและตอบสนองตามผลการทดสอบ มีเครื่องมือและแพลตฟอร์มเว็บในตัวมากมายในการดำเนินการนี้
ใช้ @supports ตรวจสอบการรองรับเบราว์เซอร์ของฟีเจอร์ CSS และใช้กฎตามผลลัพธ์
ซึ่งจะมีผลกับทั้งพร็อพเพอร์ตี้และค่า CSS หากระบบรองรับพร็อพเพอร์ตี้และค่าใดไม่ได้ ค่านั้นก็จะล้มเหลว เช่นเดียวกับพร็อพเพอร์ตี้ที่ระบบไม่รองรับ โค้ด JavaScript สามารถเข้าถึงได้ผ่าน CSSSupportsRule
ฟีเจอร์ใหม่ของแพลตฟอร์มเว็บส่วนใหญ่จะแนบอยู่กับออบเจ็กต์ที่มีอยู่ ดังนั้น "ฟีเจอร์" ในการตรวจจับรูปแบบออบเจ็กต์จึงทำงานได้ดีใน JavaScript เช่นเดียวกับการค้นหาอื่นๆ ที่คล้ายกัน เช่น การตรวจสอบพร็อพเพอร์ตี้หรือเมธอดในองค์ประกอบ
หากต้องการจัดส่ง JavaScript ที่ทันสมัย คุณสามารถใช้รูปแบบ module/nomodule เพื่อมอบฟีเจอร์ที่มีประสิทธิภาพมากขึ้นด้วยเพย์โหลดที่เล็กลงสำหรับเบราว์เซอร์ที่ทันสมัยยิ่งขึ้นและใช้ทางเลือกสำหรับเบราว์เซอร์รุ่นเก่าได้ ซึ่งมีโบนัสจากการรับประกันพื้นฐานใหม่ของฟีเจอร์ JavaScript เช่น สัญญา คลาส ฟังก์ชันลูกศร และ const และ let พร้อมใช้งานสำหรับเบราว์เซอร์ที่รองรับโมดูล ES
นอกจากนี้ คุณยังรวมการตรวจหาฟีเจอร์หลายรูปแบบเข้าด้วยกันเพื่อสร้างเกณฑ์พื้นฐานที่ปรับปรุงแล้วได้ด้วย โดยทีม BBC News เป็นผู้ที่สร้างเนื้อหาเหล่านี้ชื่อว่า Cutting the Mustard ซึ่งจะช่วยให้คุณส่งประสบการณ์หลักให้กับทุกคนและเริ่มปรับปรุงประสบการณ์การใช้งานได้หลังจากผ่านเกณฑ์ที่ตรวจพบฟีเจอร์แล้วเท่านั้น
หลีกเลี่ยงการตรวจหาอุปกรณ์
คุณควรทดสอบการสนับสนุนฟีเจอร์โดยตรงแทนที่จะตั้งสมมติฐานด้านการสนับสนุนตามสตริง User-Agent
สตริง User-agent ไม่เคยเชื่อถือได้อย่างแท้จริง เบราว์เซอร์นี้ต้องอาศัยความรู้ที่แทบจะสมบูรณ์แบบเกี่ยวกับเบราว์เซอร์ ระบบปฏิบัติการ และอุปกรณ์ต่างๆ ทั้งหมดที่มีอยู่ในการ "เดาถูก" ซึ่งถึงกระนั้นก็ตาม ไซต์ดังกล่าวยังอาจเสี่ยงต่อการปลอมแปลงของผู้ใช้ได้ เช่น การเปลี่ยนเส้นทางเว็บไซต์บนเดสก์ท็อปในเบราว์เซอร์บนอุปกรณ์เคลื่อนที่นั้นก็ทำได้ง่ายๆ อย่างการปลอมแปลงสตริง User Agent บนเดสก์ท็อป
นอกจากนี้ เบราว์เซอร์ยังพยายามตรึงสตริง User Agent โดยใช้สตริง User Agent สำหรับการตรวจหาฟีเจอร์โดยเฉพาะเพื่อบอกเหตุผลในการเลิกใช้งาน ทำให้ความเสถียรมากขึ้นกว่าที่เคยสำหรับการระบุผู้ใช้และอุปกรณ์
เน้นเนื้อหาก่อน
หลักการอีกข้อในการออกแบบเว็บคือ ให้เริ่มต้นด้วยเนื้อหาของคุณก่อน ตัวอย่างเช่น ตารางหุ้นแบบเรียลไทม์ที่มีกราฟราคาหุ้นคือตารางหุ้นพร้อมด้วยราคาเมื่อเวลาผ่านไประยะหนึ่ง อาจมีลิงก์เพื่อรีเฟรชเว็บไซต์
จากนั้นจะเพิ่มประสิทธิภาพด้วย JavaScript และคำขอดึงข้อมูลเพื่ออัปเดตค่าของตารางในตัวจับเวลา หรือปรับปรุงด้วยซ็อกเก็ตเพื่อให้อัปเดตแบบเรียลไทม์แบบพุช และสามารถนำไปปรับปรุงเพื่อสร้างกราฟผลลัพธ์อีกครั้ง โดยอาจใช้ CSS หรือจะใช้ SVG หรือจะใช้ Canvas ก็ได้ แต่หัวใจสำคัญเริ่มต้นที่เนื้อหา
การออกแบบภายใน
- อุปกรณ์เคลื่อนที่เป็นจุดมุ่งเน้นด้านประสบการณ์ของผู้ใช้
- โดยเน้นไปที่เนื้อหาและฟังก์ชันการทำงานหลักในกระบวนการออกแบบ
- ดำเนินการปรับปรุงอย่างต่อเนื่องด้วยฟังก์ชันการทำงานขั้นสูง (หากมี)
หลักการเหล่านี้ผสมผสานกันเพื่อสร้างสิ่งใหม่ให้กับเรา นั่นก็คือการออกแบบภายใน ในการพูดคุยเรื่อง Designing Intrinsic Layouts ทาง Jen Simmons จะพูดถึงการใช้เครื่องมือ CSS สมัยใหม่ เช่น Grid, Flexbox, เลย์เอาต์การจัดวาง และโหมดการเขียน เพื่อออกแบบและสร้างอินเทอร์เฟซผู้ใช้ เธอพูดว่าด้วยเครื่องมือเหล่านี้
คุณสามารถทำให้เลย์เอาต์มีเอกลักษณ์ ในเนื้อหาที่เรามีและการออกแบบที่เราต้องการ
เจน ซิมมอนส์
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 ต้องมีรากฐานที่มั่นคงในการออกแบบที่ตอบสนองตามอุปกรณ์ อุปกรณ์เคลื่อนที่และทุกสิ่งทุกอย่างเป็นอันดับแรก การออกแบบโดยแท้ และประสิทธิภาพของเว็บไซต์ เพื่อเป็นรากฐานสำหรับประสบการณ์ที่ยอดเยี่ยมสำหรับผู้ใช้ทั้งหมด