Responsive Web Design คืออะไร ทำไมคนทำเว็บถึงต้องให้ความสำคัญ

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

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

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

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

• การทำ Fluid Grid: เป็นการออกแบบเลย์เอาต์บนหน้าเว็บไซต์โดยใช้กริดที่มีความยืดหยุ่น ไม่ได้มีการกำหนดตายตัวเป็น px (pixel) เหมือนการทำเว็บในรูปแบบอื่น แต่จะเป็นการกำหนดเปอร์เซ็นต์แทน เพื่อช่วยในการรองรับการทำงานบนอุปกรณ์ต่าง ๆ ได้อย่างดีมากยิ่งขึ้น
• การทำ Flexible Images and Media: เป็นการกำหนดขนาดของรูปภาพให้มีความสอดคล้องกับขนาดของหน้าจอแสดงผล โดยจะมีการลดขนาดหรือเพิ่มขนาดของรูปภาพให้เหมาะสมกับหน้าจอ โดยจะกำหนดเป็นเปอร์เซ็นต์แทน โดยจะเทียบเข้ากับขนาดของหน้าจอ
• การใช้ CSS3 Media Queries: เป็นการใช้โค้ดกำหนด style sheets พื้นฐานสำหรับหน้าจอของอุปกรณ์แสดงผลขนาดต่าง ๆ เอาไว้ เพื่อช่วยลดความซ้ำซ้อนในการเขียนโค้ด และช่วยให้สามารถแก้ไขได้อย่างงง่ายดายมากยิ่งขึ้น

ข้อดี – ข้อควรระวังของการทำ Responsive Web Design

ข้อดี

• ลดความยุ่งยากในการทำงาน: ไม่ว่าจะเป็นการเขียนโค้ด HTML แยก ไม่ต้องแก้ไขหน้าเว็บและโค้ดหลังบ้านหลาย ๆ หน้า
• ลดค่าใช้จ่ายในการดูแลเว็บไซต์ให้เหลือแค่เพียงเว็บไซต์เดียว ไม่ต้องมีแยกเป็นเว็บไซต์บน Desktop และบน Mobile
• เว็บไซต์สามารถรองรับการใช้งานบนอุปกรณ์มือถือเช่นเดียวกับบนเว็บไซต์ เพื่อเพิ่มความเป็น Mobile-Friendly ให้กับผู้ใช้งานบนสมาร์ทโฟน
• รองรับ SEO ทั้งบนคอมพิวเตอร์และบนโทรศัพท์มือถือ เพราะเมื่อเว็บไซต์รองรับ Responsive Web Design ก็ยิ่งส่งผลให้คะแนนของ SEO ของเว็บอยู่ในอันดับที่ดีขึ้น
• สามารถปรับขนาดและปริมาณเนื้อหาได้ตามต้องการ

ข้อควรระวัง

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

ขั้นตอนการทำ Responsive Web Design

1. เลือก CMS ที่เป็น Responsive Web Design

CMS หรือ Content Management System เป็นระบบที่เข้ามาช่วยให้การสร้างและบริหารเว็บไซต์เป็นไปได้อย่างง่ายดายมากยิ่งขึ้น โดยที่ไม่จำเป็นจะต้องมีความรู้ในการเขียนโปรแกรม เนื่องจากระบบเหล่านั้นจะเป็นระบบเฉพาะตัว ที่มีโปรแกรมและปลั๊กอินต่าง ๆ ช่วยในการเพิ่มฟังก์ชันของเว็บไซต์ได้โดยที่ไม่ต้องพัฒนาเว็บไซต์ด้วยตัวเอง ซึ่ง CMS ที่เป็น Responsive Design จะมีทั้ง Magento, WordPress, Joomla, Shopify, Wix, JavaScript built website เป็นต้น ซึ่งการเลือกระบบ CMS นั้น ควรที่จะเลือกให้เหมาะสมกับความต้องการในการใช้งาน นอกจากนี้แล้วการออกแบบหน้าเว็บควรที่จะมีการออกแบบที่เรียบง่าย เน้นเนื้อหาที่จำเป็น และคำนึงถึงการแสดงผลในหน้าอุปกรณ์ต่าง ๆ เพื่อให้ความเร็วของ PageSpeed ไม่ตก

2. ให้ความสำคัญกับขนาดของหน้าจอที่เล็กที่สุดก่อน

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

3. กำหนดขนาดแบบ Relative ให้ดี

อย่างที่ได้บอกไปข้างต้นแล้วว่าการเขียน Style Sheets นั้น ต้องคำนึงถึงขนากของสิ่งต่าง ๆ อย่างดี และควรที่จะต้องกำหนดให้สัมพันธ์กับรายละเอียดข้างเคียงอีกด้วย ไม่ว่าจะเป็น Fluid Grid และ Flexible Images and Media นั่นเอง นอกจากนี้แล้วควรที่จะต้องกำหนดฟอนต์บนเว็บไซต์ด้วยว่าควรที่จะต้องมีขนาดเท่าไหร่เพื่อให้สอดคล้องกับการทำเว็บ Responsive Design

4. หา Breakpoints ให้เจอ

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

5. กำหนด Viewport Meta Tag

อย่างที่ได้กล่าวไปแล้วว่า Viewport คือ visible area หรือส่วนที่เราสามารถมองเห็นได้บนหน้าเว็บ การกำหนด Viewport Meta Tag จะช่วยให้เราสามารถเปลี่ยนค่า Default Settings ของ Viewport ได้ตั้งแต่ค่า Width, Height และ Scale ด้วย เพื่อช่วยให้เมื่อเราขยายขนาดหน้าเว็บด้วยการ Resize จะได้ไม่ต้องเลื่อนไปดูหน้าเว็บในส่วนที่ล้นออกไปนอก Viewport

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