คาดว่าหลายๆ คน คงเคยได้ยินศัพท์คำว่า Responsive Web Design กันมาบ้างแล้ว แต่ถ้ายังรู้สึกไม่ค่อยเข้าใจว่ามันคืออะไรกันแน่ หรือต้องเริ่มต้นยังไง บทความนี้เราจะมาพูดถึง Responsive Web Design และหลักการสร้างเว็บยังไงให้ Responsive
Responsive Web Design คืออะไร
Responsive Web Design คือ เทคนิคการออกแบบเว็บไซต์ให้มีการปรับเปลี่ยนขนาดของหน้าเว็ปไซต์รวมถึงองค์ประกอบต่างๆ ให้เหมาะสม รองรับกับการแสดงผลบนหน้าจอขนาดต่างๆ ได้ เช่น คอมพิวเตอร์ โน้ตบุ๊ค โทรศัพท์มือถือ แท็บเล็ต เป็นต้น เพื่อให้หน้าเว็บไซต์ยังคงความสวยงาม ใช้งานง่าย เหมาะสมกับแพลตฟอร์มขนาดหน้าจอต่างๆ โดยจะมีวิธีการที่นิยมใช้กันหลักๆ ดังต่อไปนี้
1. Responsive Retrofitting
Responsive Retrofitting คือ การแปลงเว็ปไซต์เก่าที่รองรับเฉพาะหน้าจอ Desktop ให้กลายเป็น Responsive โดยการนำมาเขียน CSS3 Media Query เพิ่มเข้าไป ซึ่งถือเป็นวิธีที่ได้รับความนิยมมาก เพราะเป็นวิธีที่ไม่ยุ่งยากมากเท่าไร
2. Responsive Mobile Site
Responsive Mobile Site เป็นการปลูกเมล็ด Mobile Site แยกออกมาก่อน แล้วแปลงเป็น Responsive ในภายหลัง โดยคนที่เข้าทาง Desktop ก็เจอเว็บไซต์เก่าก่อน ส่วนคนที่เข้าจากสมาร์ทโฟนก็เจอกับเว็บไซต์ใหม่ที่เพิ่งสร้างขึ้นมาแทน จากนั้นก็ค่อย ๆ ทำการพัฒนา Mobile Site นี้ให้สามารถเข้าชมได้ทั้งบน Tablet และ Desktop โดยที่ยังคงองค์ประกอบต่างๆ และความสวยงามเอาไว้ได้ เมื่อเสร็จสมบูรณ์แล้ว ก็ย้ายคนที่เข้าทาง Desktop ให้เปิดมาเจอเว็ปไซต์ใหม่ และทิ้งเว็บไซต์เก่าที่ไม่ได้ใช้แล้วไป
3. Mobile-First Responsive Site
Mobile-First Responsive Site เป็นทำเว็บใหม่แบบ Mobile-First หรือการสร้างเว็บไซต์ใหม่ขึ้นมาโดยดีไซน์ให้รองรับ Mobile ก่อน เน้นใช้เฉพาะ Element ที่สำคัญเท่านั้นเพื่อให้หน้าเว็บไซต์สามารถดาวน์โหลดหน้าต่างได้รวดเร็ว ซึ่งวิธีนี้แม้โทรศัพท์มือถือจะไม่รองรับ Media Query แต่หน้าจอก็จะแสดงผลให้เห็นเว็บ Mobile อยู่ดี และหากเข้าเว็บไซต์ผ่านคอมพิวเตอร์หน้าจอก็จะแสดงผลหน้าเว็บไซต์แบบคอมพิวเตอร์ แต่การเข้าผ่านโทรศัพท์มือถือจะมีความรวดเร็วกว่า
4. Piecemeal
Piecemeal เป็นการแปลงเว็บเก่าให้กลายเป็น Responsive ทีละนิด เหมาะกับเว็บไซต์ที่ไม่สามารถ Redesign ใหม่ทั้งหมดได้ เนื่องจากอาจติดปัญหาเรื่อง Branding, งบประมาณ และอื่นๆ ซึ่งการทำแบบ Piecemeal จะแบ่งออกได้เป็น 2 แบบ คือ
- PieceMeal แบบที่ 1 Page by Page โดยการทำเป็น Responsive ทีละหน้าโดยเริ่มจากหน้าแรกก่อนโดยที่หน้าอื่น ๆ ยังไม่ได้ทำให้รองรับ Responsive
- PieceMeal แบบที่ 2 – Component by Component เป็นการทำให้ Element ทีละส่วนในเว็บไซต์ให้ค่อยๆ กลายเป็น Responsive
