บทความ ทำไมเว็บไซต์ ต้องเป็นเว็บไซต์แบบ Responsive

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

     ปัจจุบันตัวเลขจาก Google พบว่า มีผู้ใช้อินเตอร์เน็ตผ่านสมาร์ทโฟนมากขึ้น เมื่อเทียบกับเครื่อง Desktop และตัวเลขมีแนวโน้มเพิ่มสูงขึ้นเรื่อยๆ และในปัจจุบันมีประชากรออนไลน์ทั้งหมด 26 ล้านคน (35%) แต่ประชากรออนไลน์ผ่านสมาร์ทโฟนมีถึง 20 ล้าน คิดเป็น 31% ของประชากรทั้งประเทศเลยทีเดียว

     ผู้ใช้กว่า 90% จะมีการใช้งานหลายๆ หน้าจอพร้อมๆ กัน ผู้ใช้กว่า 16% ใช้งานผ่านมือถือและ Tablet จะเลิกใช้งานเว็บไซต์ทันทีหากเว็บ “โหลดช้า” และกว่า 67% ของผู้บริโภคชอบการซื้อสินค้าผ่านเว็บไซต์ที่มีการปรับให้เข้ากับ Mobile Device ถ้าหากเว็บไซต์ไม่รองรับมือถือจะรู้สึกว่า บริษัทหรือแบรนด์นั้นๆ ไม่ใส่ใจ และ Google เองก็ให้ความสำคัญกับเรื่อง Responsive มากเช่นเดียวกัน

     จะรู้ได้ยังไงว่าเว็บไซต์เป็น Responsive Web ดูไม่ยากเลย เพียงดูที่การจัดวาง หากเป็นของ Mobile จะจัดวางเรียงลงมาให้อ่านง่าย โดยที่ไม่ต้องซูม ย้ำ! ไม่ต้องซูม แต่พอเป็น Tablet หรือ PC ที่มีหน้าจอใหญ่ จะจัดเรียงให้ดูสวยงาม มีขนาดตัวอักษรเหมาะสมเท่าขนาดจอ ซึ่งเนื้อหาเหมือนกัน แต่การจัดวางต่างกันเท่านั้นเอง

เทคนิคการทำ Responsive Website 4 วิธี

1. Responsive Retrofitting – แปลงเว็บเก่าให้กลายเป็น Responsive

     เป็นการเอา Desktop Site หรือ เว็บไซต์ที่ทำขึ้นมาเพื่อรองรับหน้าจอคอมพิวเตอร์ที่มีอยู่แล้วมาเขียน CSS3 Media Query เพิ่มเข้าไป เพื่อให้รองรับหน้าจอแบบ Responsive

2. Responsive Mobile Site – ปลูกเมล็ด Mobile Site แล้วแปลงเป็น Responsive

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

3. Mobile-First Responsive Site – ทำเว็บใหม่แบบ Mobile-First หรือที่บางคนเรียก Progressive Enhancement

     เป็นการสร้างเว็บไซต์ใหม่ขึ้นมา โดยดีไซน์ให้รองรับ Mobile ก่อน เน้นทำให้เว็บไซต์มีเฉพาะส่วนที่สำคัญจะได้โหลดไว เขียน CSS สำหรับ Mobile โดยไม่ต้องใช้ Media Query เลย จากนั้นจึงค่อยพัฒนาให้เหมาะกับ Desktop Site โดยเติม CSS สำหรับ Desktop เข้าไป

4. Piecemeal – แปลงเว็บเก่าให้กลายเป็น Responsive ทีละนิด

     เป็นการแปลงทีละส่วนบนเว็บไซต์ให้เป็น Responsive ซึ่งเหมาะกับเว็บไซต์บางเว็บที่ไม่สามารถ Redesign ใหม่หมดได้ อาจจะติดปัญหาในเรื่องของ Branding งบประมาณ หรืออะไรก็ตาม

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

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

ขอขอบคุณข้อมูลจาก makewebeasy

อ่านบทความเพิ่มเติม

- แนวโน้มการออกแบบเว็บไซต์ในปี 2020

- ออกแบบหน้าแรกเว็บไซต์ แบบไหนที่ส่งผลดีต่อธุรกิจ