บทความ Responsive Web Design ทำจากเล็กไปใหญ่

เคยได้ยินกันมาบ้างแหละเหล่าคนทำงานของสายนี้ ที่หลากหลายการแสดงโชว์ของเว็บมีทั้งคอมพิวเตอร์ และก็คงยังไม่พ้นแบบโทรศัพท์นั้นเองขอดีของมันคือดูง่ายสะดวกต่อลูกค้าที่สุดและสงผลดีต่อเว็บเรา

Responsive Web Design คืออะไร

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

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

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

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

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

Graceful Degradation และ Progressive Enhancement

Graceful Degradation

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

 Progressive Enhancement

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

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

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

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

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

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

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

ขอขอบคุณข้อมูลจาก blog.sogoodweb