Mobile Users เพิ่มขึ้น และ ปัจจุบันได้แซงผู้ใช้ desktop ไปแล้ว การออกแบบสำหรับ mobile จึงมีความสำคัญ จากเมื่อก่อนใช้ Mobile site ซึ่งต้องทำแยกเป็นสองเว็บไซต์ เช่น m.vir9.com แต่ปัจจุบัน ใช้ responsive website แต่ก็ยังมี performance ที่สู้ mobile site ไม่ได้

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

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

Progressive Enhancement ออกแบบสำหรับ mobile ก่อน แล้วจึงออกแบบสำหรับ desktop

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

Media Queries ไม่มีทางรองรับ Devices ทั้งหมดได้
ทุกวันนี้ มี devices ใหม่ๆ เกิดขึ้นมากมาย

และ … ในอนาคต การเข้าถึงข้อมูล อาจจะไม่ใช่จากการดูอุปกรณ์แนวราบ(2d) อาจจะเป็น 3D (เหมือนในหนังไซไฟ) มีแสงส่องขึ้นมาจากอุปกรณ์ เป็น 3 มิติ หรือ ในอนาคตที่ไกลว่านั้น การเข้าถึงข้อมูล อาจจะแสดงผล ในส่วนการรับรู้เลย โดยไม่ต้องผ่านตา และ หู อีกต่อไป

สิ่งที่เราทำได้คือการออกแบบเว็บให้ ไหล(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 มีไว้เพื่อบอกว่าของเหล่านั้นจะแสดงผลออกมาอย่างไร

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

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

เริ่มจาก 0 ไป 100 ดีกว่า 100 ไป 0
เริ่มจากน้อยไปมาก ย่อมดีีกว่า ลองนึกถึงถ้า code css มี 3000 บรรทัด ใน version PC แล้วเราก็มาตัดออกเรื่อยๆ เพื่อทำ Mobile version คงจะยากมาก เพราะโค๊ดเยอะ

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

http://www.siamhtml.com/ทำไม-mobile-first-responsive-web-design/