อนาคต Responsive web design ออกแบบเว็บไซต์ในโลกของ Component

Responsive web design เป็นศาสตร์ที่ถูกพัฒนาเริ่มต้นมาตั้งแต่ปี 2010 และได้ถูกพัฒนาขึ้นมาเรื่อย ๆ โดยใช้คอนเซปต์ของ Media Queries มาจนถึงยุคปัจจุบัน

บทความนี้นำมาจากวิดีโอของ Google จากงาน Google IO ประจำปี 2021 ล่าสุดที่ผ่านมา เรามาอ่านสรุปกันเลยว่า CSS Responsive คอนเซปต์แบบใหม่จะมีอะไรเพิ่มเข้ามาบ้าง

เราอยู่ยุคใหม่ของ Responsive web design แล้วหรอเนี่ย !!!???

ปกติเราจะคิดว่าการทำ Responsive จะเป็นการออกแบบด้วยการใช้ Media queries ในการรีไซส์เปลี่ยนขนาด UI บนหน้าจอจาก Desktop, Tablet, Mobile

ปัจจุบันเราคิดถึงการออกแบบเว็บไซต์ภาพรวมให้ปรับไปตามขนาดหน้าจอ แต่ไม่ได้คิดถึงการวาง Responsive ให้ออกมาเป็น Component ออกมาเป็นชิ้นเป็นอัน ในการออกแบบใหม่ในยุคปัจจุบันนั้นพอเราเริ่มมี Design system เข้ามา การทำงานของเราก็เลยเปลี่ยนไป กลายเป็นเราต้องใช้แนวคิดการออกแบบโดยเริ่มจาก Component based มากขึ้น นั่นก็หมายถึงว่าเราไม่ได้ทำงานโดยแนวคิด Page based เหมือนแต่ก่อนแล้ว

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

1. User preference-based media queries
2. Container queries
3. Form Factor ในหัวนี้นี้มี Media queries แบบใหม่สำหรับพวกจอ Foldable screen ด้วย

1. User preference-based media queries คืออะไร?

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

ใน CSS แบบนี้จะมีการดูว่าเราลักษณะเป็นคนแบบไหน ชอบแบบ reduce motion มั้ย เคลื่อนไหวเยอะ ๆ เวียนหัว, หรือชอบ contrast เยอะ ๆ เพราะสายตาไม่ดี, reduce transparency มั้ยแบบจาง ๆ ไม่ได้ เป็นต้น

บางครั้งการคำนวน CSS จะสามารถดึงมาจากการตั้งค่าของ Macbook ของคุณได้เลย เช่นในแมคตั้งค่าไว้ว่าอยากได้ inverted colour ตัว CSS ก็จะดึงมาแสดงผลแบบนั้นบนหน้าเว็บไซต์ได้ค่อนข้างมีข้อดีและตอบโจทย์กับที่ต้องการ Accessibility

หรือถ้า Macbook ของคุณตั้งค่าว่าชอบ Dark mode แล้วล่ะก็ การเขียน CSS responsive แบบใหม่ จะสามารถอ้างอิงจากการตั้งค่าของคอมคุณ แล้วปรับสีหน้าเว็บให้เป็นธีมที่คุณชอบได้ทันที เรียกว่า automatically dark mode ปรับแบบอัตโนมัติ หรือบางทีก็เปลี่ยนสีธีมตามเวลาระหว่างวัน เช่น เช้า กลางวัน เย็น

Colour scheme จะเป็น Media query แบบใหม่ที่จะช่วยให้เราปรับเว็บไซต์ได้แบบยืดหยุ่นตามความต้องการของผู้ใช้งานได้มากยิ่งขึ้นโอโหโหดสุด ๆ

Facts การออกแบบ Dark theme, Dark UI ช่วยประหยัดแบตได้จริง !

จากการทำรีเสิชของ Google การใช้ Dark theme บน Youtube ช่วยประหยัดแบตได้ถึง 60% บนหน้าจอ Amoled screen หรือหน้าจออุปกรณ์มือถือรุ่นใหม่ ๆ ที่ยอดนิยมในปัจจุบัน

2. Container queries คืออะไร ?

หรือเรียกอีกอย่างว่า Element queries คือ การเปลี่ยนผ่าน Page-based responsive design ไปสู่ยุคของ Container-based responsive design

ถ้าใครได้อ่านบทความก่อนหน้านี้จาก Ishadeed เรื่องของ Container-based design เรื่องนี้เลยจ้า CSS Container Queries For Designers)

เรียกได้ว่าเป็นการเปลี่ยนแนวคิดในการออกแบบ Design ecosystem ครั้งยิ่งใหญ่เลย (แนวคิดและตัวอย่างของการทำ ดูในบทความวิดีโอ New responsive นาทีที่ 6.47)

Container queries คือ สิ่งที่จะเข้ามาช่วยทำให้การออกแบบของแต่ละ component ของเรานั้นมีความ flexible, dynamic มากยิ่งขึ้น ทำให้การออกแบบแต่ละ component บนหน้าจอแต่ละอัน มีการจัดวาง การคิดที่ไม่เหมือนกันแยกออกจากกันและกันได้ โดยไม่ต้องอ้างอิงการปรับขนาดของ UI ผ่านการเขียน media queries ที่อิงกับขนาดหน้าจออีกต่อไป เพราะของใหม่นี้เราจะคำนวนการอ้างอิงจากขนาดของ container แทนนั่นเอง

ข้อดีของการใช้ Container queries ยกตัวอย่างก็คือ เวลาเราย้าย component นี้ไปวางที่ไหน มันก็จะย่อขนาด ปรับหน้าตา UI ของเราให้ไปตามขนาดของ container นั้น ๆ ที่เราเอาไปวาง

เช่น ย้าย card ที่หน้าตาเหมือนกันนี้ไปไว้ใน sidebar (ที่แคบๆ) card ก็จะแปลงร่างกลายเป็นอีกรูปแบบที่รองรับกับขนาด container ขนาดเล็กตามขนาดของ sidebar โดยจะไม่ได้อิงกับขนาดของหน้าจออีกต่อไป

ซึ่งโดยปกติเวลาเราเขียนเว็บ ของมันจะย่อหดขยายไปตามขนาดของหน้าจอ (เรียกว่า Media queries) แต่คอนเซปต์ของ Container queries นั้นคือการอิงกับขนาดของ container ตัวนอกที่เก็บ component ของเราอยู่นั่นเอง

3. Form Factor คืออะไร?

ในหัวข้อของ Form Factor นั้น เราจะกล่าวถึงคอนเซปต์ของ Foldable screen ปัจจุบันตอนนี้มี CSS ใหม่ตัวนึงที่ออกมา เรียกว่า screen-spanning เป็นการ detect ว่าหน้าจอของเรานั้นจะแบ่งออกมาเป็น dual screen แบบงอซ้ายขวาหรือไม่

หรือ CSS ตัวใหม่ที่เรียกกันว่า CSS media spanning

ข้อดีคือการเขียนแบบที่ detect ได้แล้วเนี่ย เราจะช่วยให้ layout ของเรามันฟิตเต็มหน้าจอ ของหน้าจอที่งอไปอีกฝั่งได้

ตัวอย่างเช่น หากเราพับจอซัมซุงไปทางซ้าย แล้วมี sidebar อยู่ถ้าคำนวนด้วย CSS นี้แล้ว เราจะสามารถออกแบบให้ตัวเว็บไซต์ของเรานั้นปรับขนาดให้ sidebar content ของเรานั้นขยายเต็มหน้าจอของฝั่งทางซ้ายทันที

โดยสำหรับ Developer หรือ Designer เอง สามารถใช้ Chrome DevTools Emulator ในการ debug หน้าจอแบบ Foldable screen ได้แล้ว

สรุป

แนวคิดการออกแบบ Responsive web design แบบใหม่ จะมีปัจจัยในการควบคุมการเขียน CSS ที่ Flexible มากยิ่งขึ้น โดยคำนึงจากหลายมุมมอง

เราสามารถออกแบบด้วย Macro layout คำนึงแบบจากขนาดหน้าจอ Media queries ไปจนถึง Micro layout โดยคำนึงแบบ Container queries ของแต่ละ component ควบคู่ไปกับการออกแบบโดยคำนึงถึงความชื่นชอบส่วนบุคคลของผู้ใช้งาน

และนี่คือ THE NEW RESPONSIVE DESIGN เรียกว่าเป็นคอนเซปต์เปิดโลกแบบสุด ๆ

ขอบคุณเนื้อหาอ้างอิงจากเว็บไซต์
The new responsive: Web design in a component-driven world

ใครที่ได้ความรู้คอนเซปต์จากเนื้อหาในวันนี้แล้ว นัทขอฝากบทความด้านล่างไว้ให้เพื่อน ๆ ที่สนใจด้าน CSS, HTML
แล้วมาติดตามบทความใหม่ ๆ กันได้ทาง Designil นะคะ

• SVG คืออะไร? พื้นฐานที่คนทำเว็บต้องรู้
• รวม 10 เว็บไซต์เรียนเขียนเว็บฟรี หลักสูตร Web development
• CSS: 20 Tips & Tricks ที่ คุณอาจไม่เคยรู้มาก่อน
• CSS ตัวใหม่ ช่วยจัดการ Ratio รูปภาพให้เท่ากันทุกขนาดหน้าจอ

Top Pick

The Web Developer Bootcamp

คอร์สปูพื้นฐานการเขียนเว็บไซต์ HTML, CSS, JavaScript, Node.js สำหรับ Web developer ของ Udemy คอร์สนี้จะสอนเกี่ยวกับการเขียนเว็บตั้งแต่เริ่มต้นไม่ว่าจะเป็นการเขียร HTML, CSS, Bootstrap การตั้งค่าหน้าจอ ทำยังไงให้ใช้งานง่าย, Ajax คืออะไรกันนะ รวมไปถึงเทคนิคการทำเว็บให้รองรับกับทุก device ตั้งแต่ Desktop, tablet, mobile

ปัจจุบันมีผู้เรียนคอร์สนี้สูงสุดถึง 680K คน ได้รับคะแนนโหวตสูงสุดในหมวดหมู่คอร์สเรียนเขียนเว็บเลยครับ

สั่งซื้อคอร์ส เริ่มต้นที่ 650 บาท