ทำไมต้องทำจากเล็กไปใหญ่ใน 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

 911
ผู้เข้าชม

บทความที่เกี่ยวข้อง

9 แนวคิดสู่องค์กรจัดซื้อระดับโลก ปัจจุบันการจัดซื้อนับว่ามีความสำคัญต่อองค์กรอย่างมาก เนื่องจากการดำเนินการจัดซื้อที่มีประสิทธิภาพจะช่วยเพิ่มคุณค่า (Value Added)
1088 ผู้เข้าชม
Social Media Optimization (SMO) คือเทคนิคการปรับแต่งใช้งาน Social Media ให้เกิดความสามารถในการสร้าง Community ที่เป็นประโยชน์มากที่สุด โดยต้องสัมพันธ์กับกับในส่วนของ บล็อกหรือเว็บไซต์ต้นทาง และเนื้อหาต้องเป็นแบบสามารถนำไปใช้ประโยชน์ได้ หรือมีคุณค่าให้ได้มากที่สุด ทั้งนี้เป็นยุคแห่งการแบ่งปันข้อมูลต่างๆ นั่นเอง
17 ผู้เข้าชม
ต่อไปนี้เว็บบนมือถือจะไม่ช้าอีกต่อไป ด้วย AMP วิธีการใหม่ที่ทำให้การพัฒนาเว็บแบบเดิมนั้นเปลี่ยนไปอย่างมีประสิทธิภาพ
846 ผู้เข้าชม
สร้างเว็บไซต์สำเร็จรูปฟรี ร้านค้าออนไลน์