Responsive Web Design คืออะไร

Responsive Web Design คืออะไร?

Responsive Web Design เป็นเทคนิคการออกแบบเว็บไซต์แบบใหม่ ซึ่งจะมีการปรับเปลี่ยนขนาดของเว็บไซต์ให้เหมาะสบกับการแสดงผลบนหน้าจอขนาดต่างๆ และความละเอียดของหน้าจอในอุปกรณ์ที่แตกต่างกัน เช่น คอมพิวเตอร์ โน้ตบุ๊ค โทรศัพท์มือถือ แท็บเล็ต เป็นต้น

ความเป็นมาของ Responsive Web Design

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

ต่อมาจึงมีการออกแบบเว็บไซต์สำหรับอุปกรณ์มือถือที่เรียกว่า “Moblie” แยกออกมาจากเว็บหลัก โดยสังเกตได้จาก URL ของเว็บไซต์ที่มักขึ้นต้นด้วย “m.” (เช่น m.example.com) หรือใช้ “/m/” หรือ “/mobile/” ต่อท้าย (เช่น example.com/m/ หรือ example.com/mobile/) เป็นต้น

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

หลักการทำงานของ Responsive Web Design

การออกแบบเว็บไซต์แบบ Responsive นี้จะใช้การกำหนดขนาดของเว็บไซต์ด้วย HTML, CSS3 และ JavaScript ซึ่งจะสามารถปรับขนาดของเว็บไซต์ได้อัตโนมัติตามขนาดของอุปกรณ์ที่ใช้งานอยู่ หน้าเว็บไซต์จะมีเพียง 1 URL เท่านั้น ไม่จำเป็นต้องแยกเว็บไซต์เป็นเวอร์ชั่น Desktop และ Mobile อีกต่อไป

เมื่อเปิดเว็บไซต์ด้วยหน้าจอคอมพิวเตอร์ โน้ตบุ๊ค หรือจอโทรทัศน์ที่มีขนาดจอกว้าง เว็บไซต์แบบ Responsive Web Design นี้ก็จะแสดงผลได้อย่างเต็มจอสวยงาม และเมื่อเปิดด้วยแท็บเล็ตที่มีหน้าจอขนาดเล็กลงมา เว็บไซต์ก็ยังสามารถปรับขนาดตามได้อย่างพอดี

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

ข้อดีของ Responsive Web Design

• สะดวกและลดความยุ่งยาก รวมถึงช่วยลดค่าใช้จ่ายในการดูแลปรับปรุงเว็บไซต์ เพราะมีเพียงแค่เว็บไซต์เดียว ไม่ต้องแก้ไขหน้าเว็บหลายๆ หน้า และไม่เปลืองเซิร์ฟเวอร์
• ทำให้เว็บไซต์รองรับอุปกรณ์มือถือไปในตัว หรือที่เรียกว่า “Mobile-Friendly” ซึ่งปัจจุบันจำนวนผู้ใช้งานเว็บไซต์จากโทรศัพท์มือถือนั้นกำลังเพิ่มมากขึ้น
• ผู้ใช้สามารถใช้งานเว็บไซต์ได้ง่าย หรือที่เรียกว่า “User-Friendly” ไม่ว่าจะเปิดเว็บไซต์ด้วยอุปกรณ์หรือขนาดหน้าจอใดๆ ก็ตาม
• สนับสนุนการทำ SEO (Search Engine Optimization) กับ Google ทั้งเวอร์ชั่น Desktop และ Mobile ในเว็บไซต์เดียว

ข้อควรระวังในทำ Responsive Web Design

• ควรทดสอบเปิดเว็บไซต์ด้วยหน้าจอขนาดต่างๆ ก่อนใช้งานจริง เพราะอาจมีการแสดงผลผิดไปจากตำแหน่งที่ต้องการได้
• ควรกำหนดการแสดงและซ่อนส่วนประกอบต่างๆ ของเว็บไซต์ เพราะเราไม่สามารถแสดงหน้าเว็บไซต์ได้เหมือนกันในทุกขนาดหน้าจอ เช่น เมนู รูปภาพ โฆษณา เป็นต้น
• ควรระวังการจัดเรียงเนื้อหาในเว็บไซต์เมื่อเปิดด้วยโทรศัพท์มือถือ เพราะขนาดจอที่แคบทำให้ต้องเรียงเนื้อหาต่อกันยาวจนเกินไป
• ควรเตรียมรูปให้เหมาะกับหน้าจอ เมื่อเปิดด้วยหน้าจอที่ขนาดเล็ก ก็ให้โหลดรูปที่มีขนาดเล็ก ไม่อย่างนั้นแล้วจะทำให้เสียเวลาโหลดซึ่งจะส่งผลเสียต่อผู้ใช้ และได้คะแนน PageSpeed ต่ำซึ่งเป็นคะแนนจากการวัดความเร็วในการโหลดหน้าเว็บไซต์จาก Google ซึ่งจะส่งผลเสียต่อการทำ SEO อีกด้วย