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

สวัสดีครับ ก้าวสู่ยุค smart phone เต็มรูปแบบ จะแสดงเว็บแค่บนเครื่อง Computer Desktop  อย่างเดียวคงไม่ได้สมัยนี้ผู้คนใช้มือถือ Smart Phone ,Android,iPhone, iPad ,หรือ Tablet เข้าเว็บเยอะขึ้น ถ้าเว็บเพิ่งเปิดใหม่ๆเน้นเนื้อหาเป็นหลักจะเข้าทีต้องลากนิ้วซูมเข้าซูมออกเสียเวลา ยังไม่รวมถึงเมนูที่ขาดๆหายๆ ลองคิดดูถ้าคนเข้าเว็บมาเจอแบบนี้แล้วเนื้อหาเราไม่เด็ดมีประโยชน์จริงเชื่อเถอะว่าคนที่เข้ามาปิดแล้วออกจากเว็บเราภายในไม่กี่วินาทีแน่นอนครับ ทีนี้เว็บโปรแกรมเมอร์อย่างผมก็คงต้องปรับตัวตามและนั่นคือที่มาของ Responsive Web Design คือ เว็บที่มีความสามารถยืดหยุ่นในโครงสร้างการแสดงหน้าตาของเว็บบนทุกอุปกรณ์ตั้งแต่ Computer Desktop , Notebook , Tablet จนถึง Smart Phone เช่นเดิมแสดงหน้าเว็บ 3 คอลัมน์ พอเปิดจากมือถือจอเล็กยุบไปเหลือ 1 คอลัมน์ รวมทั้งเมนูที่ต้องกดง่ายด้วย ลองดูตามภาพตัวอย่างด้านล่างครับ

responsive-design

credit : http://www.thesearchagents.com/

วิธีการพัฒนา Responsive Web Design นั้นก็อาศัย CSS3,HTML5 และอาจจะใช้ jQuery เป็นตัวขับเคลื่อน ปัจจุบันสะดวกหน่อยเพราะมี CSS Framework หลายตัวที่เข้ามาช่วยให้เราไม่ต้องเขียน CSS เองทั้งหมดทุ่นแรงประหยัดเวลาไปได้เยอะ อย่างเช่นดังๆอันดับต้นๆก็ Bootstrap และ Foundation เป็นต้น ลองไปเล่นกันดูครับ มาถึงเครื่องมือทดสอบ (Responsive web design testing tool) ผมเน้นที่ฟรีติดตั้งง่ายหรือไม่ต้องติดตั้งซึ่งที่ตอบโจทย์คือที่รันบน  web browser อย่างเช่น firefox และ chrome ซึ่งผมใช้หลักๆมีแค่ 2 ตัวนี้ครับ

1. Firefox Developer Tools

หน้าตาการใช้งานก็ตามรูปด้านล่างครับ โดยจะมีปุ่มควบคุมด้านบน อธิบายการทำงานของแต่ละปุ่มจากซ้ายไปขวาดังนี้ครับ

  1. ปุ่มปิดกลับไปยังหน้าจอปกติ
  2. ตัวเลือกขนาดหน้าจอ
  3. ตัวเลือกแสดงหน้าจอแบบแนวตั้งแนวนอน
  4. จำลองการสัมผัสแบบ smart phone เมาส์จิ้มค้างแล้วลากขึ้นลง (อันนี้ผมใช้ไม่ได้แฮะ)
  5. จับภาพ screenshot หน้าจอ เผื่อจะส่งเมล์ตัวอย่างหน้าจอให้ลูกค้าดู
responsive-design-view

credit: http://developer.mozilla.org

วิธีใช้งานไม่ยากครับสำหรับ Windows เปิด Firefox เข้าเว็บที่ต้องการทดสอบจากนั้น กดปุ่ม Ctrl+Shift+M พร้อมกันครับ จะแสดงหน้าจอมาให้เราใช้ เวลาออกก็กดแบบเดิมซ้ำ

2. Dimensions Chrome Extensions

ตัวนี้ผมเจอหลังจากใช้ Firefox Developer Tools อยู่พักนึงลองไปค้นหาดูใน Chrome Extensions บ้างซิน่าจะมีคนทำไว้แล้วแล้วก็เจอกับ “Dimensions” เริ่มแรกเปิด Chrome แล้วเข้า https://chrome.google.com/webstore/category/apps ค้นหาคำว่า “Dimensions” โลโก้สีส้มๆ กดปุ่มติดตั้งได้เลยครับ

Dimensions0

Credit:https://chrome.google.com/

เปิดมาหน้าตาอลังการทีเดียวมีแถมวัดเหมือนไม้บรรทัดและชื่ออุปกรณ์พวก phone , wide phone ,tablet ,wide tablet,desktop บอกไว้ด้วย เวลาใช้งานก็กรอก URL ช่องด้านบนและกดปุ่ม TEST ครับ ทีนี้ถ้าจะเลือกขนาดก็คลิกที่ชื่ออุปกรณ์ด้านแถบหมายเลขวัดขนาดได้เลยครับ หรือจะคลิกค้างด้านข้างเพื่อลากย่อขยายขนาดเองก็ได้ครับ

Dimensions2

Credit: http://dimensionsapp.com

สังเกตจะมีปุ่มด้านขวา “PREVIEW MODE” อันนี้จะแสดงเป็นหน้าตาอุปกรณ์มาให้เราด้วยครับสามารถเลือกอุปกรณ์ได้เช่น iPhone , Android หรือจะหมุนสลับแนวตั้งแนวนอน

Dimensions3

http://dimensionsapp.com

Trick การใช้ App ของ Chrome

มี Trick เล็กๆสำหรับการใช้ App ของ Chrome นะครับ อันนี้ผมใช้เองแล้วสะดวกดีเลยมาแนะนำนิดนึงหลายคนอาจจะไม่รู้ว่า App นั้นมันสามารถ Create Shortcuts ไปวางบนหน้า Desktop , Start Menu หรือจะ Pin ไว้ที่ Taskbar เพื่อเวลาใช้งานจะได้ไม่ต้องเปิด Chrome ใหเสียเวลา กด Icon กันตรงๆเลยว่างั้น เริ่มต้นก็คือ

  1. เปิด แล้วพิมพ์ที่ช่อง URL ว่า “chrome://apps/” เคาะ Enter
  2. จะแสดงรายการ App ที่เราติดตั้งทั้งหมด เลือก App ที่ต้องการคลิกขวา >> เลือกเมนู “Create Shortcus…” ด้านล่างสุดครับ
  3. จะแสดงหน้าจอ Create Shortcuts วางบนหน้า Desktop , Start Menu และ  Pin to Taskbar ก็เลือกได้ตามต้องการครับ

หวังว่าบทความนี้คงมีประโยชน์สำหรับทุกท่านไม่มากก็น้อยนะจ๊ะ

(ตั้ม) ศิริชัย ธีรภัทรสกุล เป็นเว็บโปรแกรมเมอร์, บล็อกเกอร์, และเจ้าของกิจการ ชอบถ่ายรูป อ่านหนังสือ และออกกำลังกาย “จงมีความกล้าที่จะลงมือทำ และอยู่กับปัจจุบัน ณ ขณะ (จงโฟกัส)"

Post a Comment