Responsive Web หัวใจสำคัญของการทำเว็บไซต์

Responsive Web Design มีสำคัญมากในยุคปัจจุบัน เพราะการออกแบบหน้าเว็บไซต์ให้เหมาะสมต่อผู้เยี่ยมชม ตามขนาดหน้าจอ ตามแพลตฟอร์ม หรือ แนวตั้ง/แนวนอน ไม่ว่าจะเป็นอุปกรณ์ Mobile, Tablet, Laptop เป็นต้นครับ อย่างเช่นผู้ใช้เปลี่ยนจาก Laptop เป็น iPad หน้าเว็บไซต์ของเราควรจะสลับเนื้อหาให้อัตโนมัติ เพื่อให้เหมาะสมกับขนาดหน้าจอของอุปกรณ์นั้นๆ รวมถึงความละเอียดของขนาดรูปภาพด้วย เพื่อประสบการณ์ที่ดีของผู้เยี่ยมชมเว็บไซต์ครับ

ออกแบบเว็บไซต์แบบ Responsive ต้องทำอย่างไร

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

การทำ Media Queries จะต้องเจอคำนี้แน่นอน Breakpoints คือ การกำหนดความกว้างของหน้าจอ ที่ต้องการจะตั้งค่า แนะนำวิธีการง่ายๆ อาจจะเริ่มการสร้างแค่สอง Breskpoints ก่อนครับ เช่น แท็บแลต และ คอมพิวเตอร์ เป็นต้น

ตัวอย่างโค้ด CSS Media Queries สำหรับการปรับคอลัมน์

แผนผังแสดงการทำงานของ Media Queries ในขนาดหน้าจอต่างๆ

ตัวอย่างรูปภาพ เวลาปรับ Media Queries สำหรับคอลัมน์ (รูปภาพจาก: w3schools.com)

@media screen and (max-width: 992px) {
  .column {
    width: 50%;
  }
}

@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

หน่วยของ CSS ที่เราจำเป็นต้องรู้ในการออกแบบ จัดหน้าเว็บไซต์ด้วย Responsive Design ก็จะมีดังนี้ครับ PX, EM, REM, Viewport, % อย่างตัวอย่างโค้ดข้างบนจะใช้เป็นหน่วย % ครับ

ตัวอย่างการออกแบบเว็บด้วย Responsive Design

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

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

การใช้ Device Mode ใน Google Chrome DevTools เพื่อทดสอบ Responsive

ถ้าต้องการทดสอบเว็บไซต์ Responsive ของเราเอง วิธีการง่ายๆ ว่าเว็บไซต์เราเป็น Responsive Design หรือยังเข้าไปที่ Google Mobile-Friendly Test และกรอก URL เว็บไซต์เราลงไปครับ

หน้าตาเครื่องมือ Google Mobile-Friendly Test สำหรับเช็คการแสดงผลบนมือถือ

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

สรุป

Responsive Web Design สำคัญต่อการแสดงผลเว็บไซต์ให้เหมาะสมกับอุปกรณ์ทุกขนาด ไม่ว่าจะเป็นมือถือ แท็บเล็ต หรือคอมพิวเตอร์ การออกแบบใช้ CSS Media Queries เพื่อปรับเลย์เอาต์ รูปภาพ และเนื้อหาให้เข้ากับขนาดหน้าจอ โดยกำหนด Breakpoints และใช้หน่วยวัดเช่น %, PX, EM หรือ REM ปัจจุบันธีม WordPress ส่วนใหญ่รองรับ Responsive อยู่แล้ว แต่สามารถปรับแต่งเพิ่มเติมเพื่อประสบการณ์ผู้ใช้ที่ดีขึ้น และทดสอบได้ด้วยเครื่องมืออย่าง Google Mobile-Friendly Test หรือ DevTools ของเบราว์เซอร์