เครื่องมือทดลอง Web Responsive ได้ทุกขนาดจอ


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

Web Responsive คืออะไร

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

web-responsive-test

เครื่องมือทดสอบ Web Responsive

  1. Google Chrome ทดสอบ Responsive ได้เช่นกัน หลายท่านอาจจะคงไม่ทราบพร้อมกับขนาดหน้าจอตามอุปกรณ์ต่างๆ มากมายให้เลือกว่าจะทดลอง Web Responsive กับอุปกรณ์เครื่องใด การเรียกคำสั่งนี้มาใช้งาน ง่ายดายมากเพียงแค่ กดปุ่มคีย์บอร์ด ปุ่ม CTRL ค้าง + ปุ่ม Shift ค้าง + ปุ่ม I จะมีหน้าจอสำหรับนักพัฒนาขึ้นมา แค่นี้ก็ทดสอบได้ตามต้องการแล้ว
    Google-Chrome-ทดสอบ-Responsive
  2. ทดสอบ Responsive ผ่าน Google Design วิธีนี้ก็ค่อนข้างจะง่ายมากเพียงแค่เข้าเว็บไซต์ http://design.google.com/resizer ก็สามารถทดลอง Web Responsive ได้ทุกขนาดหน้าจอตามที่ต้องการแล้ว แต่จะไม่มีการระบุว่าหน้าจออุปกรณ์ต่างๆขนาดเท่าไหน ต้องใส่เข้าไปเอง ไม่เหมือนกับการที่ใช้ Google Chrome ทดสอบ Responsive ที่มีเมนูแจ้งไว้ชัดเจนว่าเป็นอุปรกณ์อะไร

อยากฝากนักพัฒนาทุกท่านที่กำลังออกแบบ Web Responsive ไว้สักข้อเกี่ยวกับรูปภาพควรทำขนาดให้เหมาะสม เผื่อไว้เวลา ย่อ-ขยาย ภาพจะเล็กเกินไปจนมองไม่เห็น หรือ ขยายภาพซะแตกจนไม่สวยงาม ดูเรื่องนี้ให้ขาด แล้วท่านจะผลิตเว็บคุณภาพๆขึ้นมาอีก 1 เว็บอย่างแน่นอน

 

+ There are no comments

Add yours