เว็บไซต์ CDS สร้างโดย Paul Lewis ของเราเอง ซึ่งแสดงวิธีการสร้างประสบการณ์การใช้งานเว็บบนอุปกรณ์เคลื่อนที่ที่ยอดเยี่ยมสำหรับผู้เข้าร่วมประชุม
วิดีโอเบื้องหลัง
จุดเด่นคือความราบรื่นที่เว็บไซต์ทำงานในเบราว์เซอร์อุปกรณ์เคลื่อนที่ต่างๆ คือใช้การจัดวางและรอบการแสดงสีของเบราว์เซอร์ในรูปแบบที่ดีที่สุด
ฟีเจอร์ใหม่ของแพลตฟอร์มเว็บที่ใช้
- Service Worker
- ไฟล์ Manifest
- สีธีม
รูปแบบ
- บัตรแบบขยาย
- ตารางกริดที่ปรับเปลี่ยนตามอุปกรณ์
- Material Design
ซอร์สโค้ด
การสัมภาษณ์
การพัฒนา
พอลเริ่มสร้างเว็บไซต์ สิ่งสำคัญที่สุดอย่างหนึ่งคือให้ใช้การเพิ่มประสิทธิภาพแบบต่อเนื่อง แทนที่จะออกแบบสำหรับเดสก์ท็อป เขาสร้างขึ้นสำหรับหน้าจอขนาดเล็กก่อน แล้วค่อยๆ ขยายขึ้นไปตามหน้าจอขนาดใหญ่ ค่อยๆ เพิ่มประสิทธิภาพมากขึ้นแทนที่จะค่อยๆ ลดประสิทธิภาพลง ซึ่งต้องอาศัยการสืบค้นสื่อจำนวนมาก แต่ก็ต้องมีอิสระพอสมควรในการมองหาการเปลี่ยนแปลงเล็กๆ น้อยๆ ระหว่างเบรกพอยท์หลักๆ การติดตามกลับไปกลับมาระหว่างขนาดหน้าจอต่างๆ ทำให้เขารู้ว่าเนื้อหาจะหยุดชะงักที่จุดใด เพื่อจะได้แก้ไขได้อย่างรวดเร็ว
แง่มุมสำคัญอีกประการหนึ่งของ PE คือความเข้ากันได้แบบย้อนหลังมากที่สุดเท่าที่จะเป็นไปได้ Paul เลือกใช้องค์ประกอบที่ลอยอยู่เหนือ Flexbox เพราะเขาคิดว่าจะเป็นการเพิ่มจำนวนเบราว์เซอร์ที่เว็บไซต์จะใช้งานได้ สำหรับการออกแบบเฉพาะของเว็บไซต์ เรื่องนี้ไม่มีปัญหาเลย หากเขาต้องการ Flexbox ก็คงใช้ PE เพื่อเพิ่มบริการนี้
ความท้าทายหลักของเว็บไซต์คือฟีเจอร์ขยายและยุบการ์ด ซึ่งเราต้องคิดวิธีใหม่ๆ ในการทำให้ภาพเคลื่อนไหวทำงาน พอลคิดกลยุทธ์ที่เขาเรียกว่า FLIP ซึ่งเกี่ยวข้องกับการทำให้องค์ประกอบเคลื่อนไหวเป็นสภาวะสุดท้าย จากตรงนั้น คุณจะใช้คุณสมบัติที่เข้ากันได้กับตัวประกอบ เช่น การเปลี่ยนรูปแบบและความทึบแสง เพื่อกลับการเปลี่ยนแปลง และส่งองค์ประกอบกลับไปยังตำแหน่งเริ่มต้น สุดท้าย เมื่อทำเสร็จแล้ว ให้เปิดใช้การเปลี่ยนผ่านการเปลี่ยนรูปแบบและความทึบแสง แล้วนำการเปลี่ยนแปลงเหล่านั้นออก ซึ่งจะทำให้องค์ประกอบต่างๆ ย้ายไปที่ตำแหน่งสุดท้ายอีกครั้ง พอลยอมรับว่านี่เป็นเรื่องที่คาดไม่ถึง แต่ก็ได้ผลดีมากและช่วยเพิ่มประสิทธิภาพให้คุณ
การแสดง
เมื่อได้รู้จักพอล ลูอิสในฐานะกูรูด้านประสิทธิภาพ ผมจึงไม่แปลกใจเลยที่พบว่าการสร้างพลังอำนาจเป็นข้อควรพิจารณาที่สำคัญอย่างยิ่งในการสร้างเว็บไซต์ เขาอาศัย WebPageTest อย่างมากเพื่อให้ได้ค่าดัชนีความเร็วต่ำสุดเท่าที่ทำได้ หากไม่มีเนื้อหา YouTube ที่ฝังใน YouTube พอลจัดการวิดีโอจนน้อยกว่า 1,000 ครั้งเมื่อใช้การเชื่อมต่อเคเบิล ซึ่งหมายความว่าผู้ใช้ส่วนใหญ่จะเห็นภาพเริ่มต้นในไม่ถึง 1 วินาที
งานส่วนใหญ่ที่บรรลุเป้าหมายนี้คืองาน Grunt เพื่อเชื่อมโยง ลดขนาด และบีบอัดรูปภาพให้ได้มากที่สุด เว็บไซต์ยังเลื่อนการแสดงผลรูปภาพที่ไม่จำเป็นออกไปหลังการโหลดหน้าเว็บเพื่อให้เนื้อหาจริงแสดงผลในหน้าจอได้เร็วขึ้น
เขาจึงใช้โปรแกรมทำงานของบริการเพื่อให้เวลาในการโหลดหน้าเว็บดียิ่งขึ้น ไม่ว่าคุณจะออนไลน์อยู่หรือไม่ก็ตาม การเข้าชมหน้าเว็บก็จะแสดงได้จากแคช ทำให้แน่ใจว่าคุณยังเข้าถึงเนื้อหาได้แม้ในขณะที่เชื่อมต่ออินเทอร์เน็ตติดขัด (สำคัญมากเมื่อเชื่อมต่อ Wi-Fi สำหรับการประชุม!) เว็บไซต์ CDS เป็นหนึ่งในเว็บไซต์ที่ใช้งานจริงแห่งแรกที่ใช้ฟีเจอร์ใหม่นี้ ทำให้พอลพบ "ปัญหาของลูกค้าในช่วงแรกๆ" มากมาย แต่เขาบอกว่าผมช่วยเพิ่มประสิทธิภาพได้อย่างมาก จริงๆ แล้ว เขานำเนื้อหานี้ไปยังทุกเว็บไซต์ที่เขาสร้างด้วย
แน่นอนว่าประสิทธิภาพไม่ได้เป็นเพียงประสิทธิภาพของเว็บไซต์เท่านั้น แต่ยังรวมถึงประสิทธิภาพของเว็บไซต์ด้วย Paul รู้ว่าภาพเคลื่อนไหวต้องท้าทาย ทำให้เขาคิดเรื่อง FLIP ขึ้นมา นอกจากนี้ เขายังออกนอกลู่นอกทางเพื่อไม่ให้ขวางการป้อนข้อมูลด้วยการแตะหรือเลื่อน แม้ว่าเว็บไซต์จะไม่ได้ซับซ้อนมากนัก แต่เขาก็นำวิธีการแบบ RAIL มาปรับใช้กับงานสร้าง (เขาไม่จำเป็นต้องใช้เวลาที่ไม่มีการใช้งานมากนัก) ซึ่งก็ช่วยได้มาก
การออกแบบ
เนื่องจากเว็บไซต์ดังกล่าวสร้างขึ้นโดยบุคคลเพียงคนเดียว ทำให้พอลเป็นทั้งนักออกแบบและนักพัฒนาโครงการ ซึ่งทำให้เกิดความเข้าใจอย่างที่ไม่เคยมีมาก่อนเกี่ยวกับข้อกังวลของกันและกันใน "ทีม" ทั้งสอง เขาชอบออกแบบเดสก์ท็อป (ตรงกันข้ามกับการปรับปรุงแบบก้าวหน้าซึ่งเขาใช้ระหว่างการพัฒนา) เนื่องจากทำให้เขารู้ว่าต้องทำอะไรบ้างในโครงการนี้ หลังจากนั้น พอลเลื่อนลงไปที่มุมมองอุปกรณ์เคลื่อนที่ ซึ่งช่วยให้เขาสามารถ ปรับแต่งสิ่งต่างๆ ได้อย่างมากและตรวจสอบว่าสิ่งสำคัญที่สุดได้รับความสนใจมากที่สุด จากนั้นจึงจะแจ้งให้ทราบถึงเวอร์ชันเดสก์ท็อป เพราะจำเป็นต้องอัปเดตสถาปัตยกรรมข้อมูลและลำดับความสำคัญที่ไม่แน่นอน
ทุกอย่างไม่ได้ราบรื่นไปหมด ในเวลานั้นหลักเกณฑ์ของดีไซน์ Material ยังไม่ชัดเจนเกี่ยวกับวิธีสร้างเว็บไซต์เนื้อหา จึงมีส่วนที่ไม่ตรงตามเป้าหมาย การออกแบบก็ไม่สามารถพิจารณาข้อมูลกำหนดการและเซสชันที่เกี่ยวข้องได้ และสุดท้าย UX ก็หมายความว่าผู้คนจะไปทำตามกำหนดการและหงุดหงิดที่ไม่สามารถรับข้อมูลเซสชันได้โดยตรง
แม้กระนั้นก็ตาม ผมคิดว่า Paul ทำได้อย่างดีเยี่ยมในการนำข้อกำหนด ของดีไซน์ Material ไปยังเว็บไซต์เนื้อหา และผมพอใจกับภาพและ ภาพเคลื่อนไหวมาก ๆ ให้ความรู้สึกของดีไซน์ Material ที่ไม่ซ้ำใคร อีกทั้งข้อมูลและรูปลักษณ์ก็ส่งเสริมการโต้ตอบและลำดับชั้น
Success
- เผยแพร่ทั้งเว็บไซต์เรียบร้อยแล้วบน GitHub (มากกว่า 200 ดาว) เพื่อเป็นต้นแบบและแรงบันดาลใจให้กับนักพัฒนาเว็บ
- ผสานรวมแพลตฟอร์มเว็บล่าสุดและดีที่สุด เช่น โปรแกรมทำงานของบริการ ไฟล์ Manifest ของเว็บ และสีธีมแบบไดนามิก เอฟเฟ็กต์โดยรวมเป็นอะไรที่ทำให้รู้สึก ผสานการทำงานกับแพลตฟอร์มมากเมื่อทำงานบนอุปกรณ์ Android หากเพิ่มลงในหน้าจอหลักของผู้ใช้ ผู้ใช้จะรู้สึกว่าแอปของตน ใช้งานได้จริงๆ และมันเจ๋งจริงๆ
- การดูหน้าเว็บ ~73.7k ครั้ง การคลิกไปยังส่วนย่อยของเว็บไซต์ ~73.7k ครั้งหมายความว่าผู้คนได้ใช้และมีส่วนร่วมกับเว็บไซต์จริงๆ ซึ่งมากกว่าที่คาดไว้มาก
สรุปแล้ว คือแรงบันดาลใจที่ยอดเยี่ยมสำหรับนักพัฒนาเว็บในปัจจุบัน และเว็บไซต์การประชุมที่ประสบความสำเร็จอย่างมาก