การดีไซน์เว็บไซต์แบบ Responsiveในปัจจุบันตอนนี้ ต้องทดสอบกับ User Agent ของอุปกรณ์ทั้ง Mobile, Tablet และ PC เราสามารถใช้ Chrome Inspect ตัว Emulation ได้ครับ
ส่วนมากคนทำเว็บไซต์มักจะแก้ไข Layout และตรวจสอบพวก CSS หรือโครงสร้าง HTML ผ่าน Chrome โดยการใช้ Inspect Element กันบ่อยๆ ทีนี้มีหลายคนที่ยังไม่รู้ว่ามันทดสอบเรื่องของ Device Render แต่ละอุปกรณ์ได้ด้วย อย่างผมเองเมื่อก่อนก็จะทดสอบกับ Device จริงๆ คือ FTP ขึ้นไปแล้วเอามือถือ หรือ แท็บเล็ตมาเปิดหน้าเว็บว่ามันแสดงผลถูกต้องหรือเปล่า มาช่วงหลังๆ มีน้องที่ทำโปรแกรมเมอร์มาแนะนำให้รู้วิธี Render ผ่าน Google Chorme ด้วย Inspect Element กับ Emulation ก็ถือว่าตาสว่าง และประหยัดเวลาขึ้นครับ
ก่อนอื่นเลย มีโครงงานที่ทำอยู่เป็น Responsive Website ให้เปิด Chrome Inspect Element ขึ้นมาครับ
หลังจากนั้นก็ลองคลิกที่ drawer เพื่อเปิดส่วนของ Console ต่อจากนั้นเลือกแทบชื่อ Emulation ครับ
ต่อมาเลือก Emulation
เมื่อกดแล้วก็เลือก Device รุ่นที่เราต้องการจะแสดงผล หรือรุ่นหน้าจอที่เราต้องการแล้วกด Emulate
พอหน้าจอเปลี่ยนให้ ใจเย็นๆ แล้วกด Refresh หน้าเว็บ 1 ครั้ง
การแสดงผลก็จะ โอเค รองรับหน้าจอ ของ Responsive ครับ
ทดสอบกับหลายๆ Device หน่อย
ถ้าจะยกเลิกโหมดก็กดเพียงปุ่ม Reset เท่านั้นเองครับ
สำหรับเทคนิคนี้นั้นช่วยเหลือเรื่องอะไรบ้าง ลองดูบางเว็บไซต์ครับที่เค้าใช้ Flash หรือ SilverLight เรียกไฟล์ Video แล้วเอา Script ของ Video.js มาทำให้เป็น HTML5 Player เราก็จะสามารถ ทำการ Emulation ให้เห็นโครงสร้างอีกแบบ และเห็น Path ของ ไฟล์ Video ที่ใช้บน Mobile ได้เลยโดยไม่ต้องไปขอร้องคนดูแลเว็บไซต์ทำให้ครับ
นั่นหมายความว่า บางคนเขียน Script ที่จะ Render ขึ้นมาเฉพาะหน้าจอของสมาร์ทโฟน ถ้ามาเปิดที่หน้าจอคอมพิวเตอร์ก็จะ Disabled หรือปิดฟังก์ชันนั้นไม่ให้เห็น ก็กลายเป็นว่า เราจะต้องใช้ User Agent ในการเช็ค Script จริงๆ ซึ่งเจ้า Emulation นี้ช่วยเหลือเราได้มาก ณ จุดนี้
เทคนิคง่ายๆ เบาๆ น่าจะเป็นประโยชน์นะครับ ใครที่รู้แล้วก็ไม่เป็นไร ใครที่ยังไม่รู้ก็ฝึกลองใช้ไปนะครับ “เข้าใจตรงกันนะ”
