สมัยนี้ผู้คนใช้มือถือ Smart Phone, Android, iPhone, iPad หรือ Tablet เข้าเว็บเยอะขึ้น ถ้าเว็บไม่รองรับขนาดหน้าจอที่หลากหลาย คนที่เข้ามาอาจปิดออกจากเว็บภายในไม่กี่วินาที
Responsive Web Design คือเว็บที่มีความสามารถยืดหยุ่นในโครงสร้างการแสดงผลบนทุกอุปกรณ์ ตั้งแต่ Desktop, Notebook, Tablet จนถึง Smart Phone โดยอาศัย CSS3, HTML5 และ jQuery รวมถึง CSS Framework อย่าง Bootstrap และ Foundation
1. Firefox Developer Tools
เปิด Firefox เข้าเว็บที่ต้องการทดสอบ จากนั้นกด Ctrl+Shift+M พร้อมกัน จะแสดงหน้าจอ Responsive Design View มาให้ใช้ ปุ่มควบคุมจากซ้ายไปขวา:
- ปิดกลับไปยังหน้าจอปกติ
- ตัวเลือกขนาดหน้าจอ
- แสดงหน้าจอแบบแนวตั้ง/แนวนอน
- จำลองการสัมผัสแบบ smartphone
- จับภาพ screenshot
2. Dimensions Chrome Extension
ค้นหาคำว่า "Dimensions" ใน Chrome Web Store โลโก้สีส้ม ติดตั้งแล้วเปิดขึ้นมาจะมีไม้บรรทัดและชื่ออุปกรณ์ (Phone, Wide Phone, Tablet, Wide Tablet, Desktop) กรอก URL แล้วกดปุ่ม TEST ได้เลย สามารถลากย่อขยายขนาดได้ และมี PREVIEW MODE ที่แสดงหน้าตาอุปกรณ์จริงๆ พร้อมหมุนแนวตั้ง/แนวนอนได้
Trick: สร้าง Shortcut ของ Chrome App ไว้บน Desktop
- เปิด Chrome พิมพ์
chrome://apps/แล้ว Enter - จะแสดงรายการ App ที่ติดตั้งทั้งหมด คลิกขวาที่ App ที่ต้องการ เลือกเมนู "Create Shortcuts…"
- เลือกวางบน Desktop, Start Menu หรือ Pin to Taskbar ได้ตามต้องการ