ทำไมต้องทำจากเล็กไปใหญ่ใน Responsive Web Design

Mobile Users เพิ่มขึ้นทุกวัน

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

Mobile-First ช่วยให้เราโฟกัสไปที่ Content

ด้วยข้อจำกัดในเรื่องขนาดของหน้าจอ ทำให้ designer ต้องใส่ใจกับ content มากเป็นพิเศษในการออกแบบสำหรับ mobile สิ่งที่จะใส่ลงไปจะต้องเป็นสิ่งที่สำคัญและจำเป็นจริงๆ เท่านั้น ด้วยเหตุนี้เอง การออกแบบสำหรับ mobile ก่อนจะช่วยให้เรารู้ว่า “ใจความสำคัญ” ที่จะต้องการจะสื่อให้ users รู้นั้น มีอะไรบ้าง

Graceful Degradation vs. Progressive Enhancement

Graceful Degradation คือการออกแบบสำหรับ desktop ก่อน แล้วค่อยมาออกแบบสำหรับ mobile ทีหลัง วิธีนี้จะเน้นไปที่การใช้ประโยชน์จากเทคโนโลยีที่มีอยู่ให้มากที่สุดเท่าที่จะเป็นไปได้ในขณะนั้น แล้วค่อยลดบางส่วนที่ทำไม่ได้หรือไม่เหมาะออกใน mobile โดยมีข้อแม้ที่ว่า content และ functions ที่จำเป็นจะต้องอยู่ครบ

 Progressive Enhancement จะตรงข้ามกับ Graceful Degradation มันคือการออกแบบสำหรับ mobile ก่อน แล้วค่อยมาออกแบบสำหรับ desktop ทีหลัง วิธีนี้เกิดหลังจากที่คนเห็นว่า Graceful Degradation นั้นมีข้อเสียตรงที่เราต้องมาตัดสินใจว่าจะตัดส่วนไหนออกบ้างใน mobile ในทางกลับกัน วิธี Progressive Enhancement จะเน้นไปที่ content และ functions พื้นฐานที่สำคัญที่สุดก่อน หลังจากนั้นค่อยมาคิดต่อว่าเราสามารถเสริมส่วนไหนที่จะทำให้มัน “ดีขึ้น” ได้บ้าง ถึงแม้วิธีนี้จะทำได้ “ยาก” ก็จริง แต่ “ถ้าเราสามารถออกแบบให้รองรับ mobile ได้ เราก็สามารถออกแบบให้รองรับ devices อื่นๆ ได้”

Media Queries ไม่มีทางรองรับ Devices ทั้งหมดได้

เราไม่สามารถ “ปรับ(adapt)” เว็บของเราให้เข้ากับ devices ต่างๆ ได้ทั้งหมด ทุกวันนี้ มี devices ใหม่ๆ เกิดขึ้นมากมาย ใครจะไปรู้ว่าอีกหน่อย mobile อาจจะมีขนาดต่างจากที่เป็นอยู่ทุกวันนี้มาก แนวนอนของทุกวันนี้ อาจเป็นแค่แนวตั้งในอนาคต เราไม่มีทางรู้ได้เลย

สิ่งที่เราทำได้คือการออกแบบเว็บให้ “ไหล(flow)” ไปตามขนาดที่แตกต่างกันออกไป ไม่ใช่ไปดูว่า dimension ของ devices ต่างๆ มีอะไรบ้าง แล้วนำไปใช้เป็น breakpoints ในการเขียน media queries การออกแบบ layouts ให้เป็นแบบ fluid ดูจะเป็นทางเลือกที่ดีกว่า

 หากเราออกแบบสำหรับ mobile ก่อน โดยใช้ fluid layouts เว็บของเราจะปรับตัวเองให้พอดีกับหน้าจอทุกขนาดได้อย่างอัตโนมัติ อย่างไรก็ตามหน้าตาที่เราออกแบบสำหรับ mobile คงไม่ค่อยดูดีเท่าไรหากอยู่ใน desktop กรณีแบบนี้เราถึงจะใช้ media queries เข้ามาช่วย “ปรับ” หน้าตาของเราให้เข้ากับขนาดหน้าจอนั้นๆ โดยใช้ “min-width” เพื่อรักษาการไหลของสไตล์นั้นเอาไว้ ไม่ใช่ “max-width”

Mobile-First ช่วยให้ Code สั้นลง

หากมองในแง่ของการเขียนโค้ดแล้วล่ะก็ แน่นอนว่า layouts ที่ซับซ้อนกว่า โค้ดก็ย่อมซับซ้อนกว่า อย่าลืมว่า html มีไว้เพื่อบอกว่าเรามีของอะไรบ้าง ส่วน css นั้นมีไว้เพื่อบอกว่าของเหล่านั้นจะแสดงผลออกมาอย่างไร ดังนั้น ไม่ว่าจะเป็น mobile, tablet หรือ desktop ก็ตาม html จะต้องเหมือนกันทุกประการ สิ่งที่แตกต่างกันคือการนำเสนอ ซึ่งเราจะใช้ css เข้ามาช่วยปรับการแสดงผลให้เหมาะสมกับหน้าจอขนาดต่างๆ

หากเราเขียนโค้ดโดยเริ่มที่ desktop ก่อน มีโอกาสสูงที่เราจะเขียน html ที่ไม่จำเป็นหรือ css ที่ซ้ำซ้อนลงไปได้ ในทางกลับกัน หากเราเริ่มที่ mobile ซึ่งมี layouts ที่ง่ายกว่า โค้ดของเราจะ clean มากกว่า เนื่องจาก html ที่เพียงพอสำหรับ mobile ก็จะพอเพียงสำหรับ desktop เช่นกัน ในทางตรงกันข้าม html ที่ใช้สำหรับ desktop อาจเกินความจำเป็นสำหรับ mobile ให้เรานึกเสมอว่า “html ไม่ได้มีไว้เพื่อหวังผลทางการตกแต่งสไตล์”

เริ่มจาก 0 ไป 100 ดีกว่า 100 ไป 0

มาถึงตรงนี้ คาดว่าทุกคนคงจะเห็นข้อดีของ Mobile-First กันแล้วใช่มั้ยครับ แต่ถ้าใครยังคิดว่าการทำจากจอใหญ่ไปเล็กยังดูดีกว่าอยู่ล่ะก็ ยังเหลือเหตุผลอยู่อีกข้อหนึ่งซึ่งก็คือ เรารู้แค่ว่าหน้าจอที่เล็กที่สุดคือ 0 pixel แต่เราไม่มีทางรู้หน้าจอที่ใหญ่ที่สุดได้ หากเราเขียน media queries โดยใช้ min-width เราไม่จำเป็นต้องรู้ว่าหน้าจอที่ใหญ่ที่สุดที่เราอยากจะรองรับมีขนาดเท่าไร แต่ถ้าเราใช้ max-width นั่นแปลว่าเรายังคงยึดติดกับ devices อยู่ ซึ่งนั่นไม่ใช่หลักการของ responsive web design

Credit : Siamhtml.com