วันศุกร์ที่ 20 พฤษภาคม พ.ศ. 2559

Responsive

Responsive  

ผลการค้นหารูปภาพสำหรับ Responsive


Responsive  คือ แนวคิดการออกแบบที่เรียกว่า "One Size Fit All" คือ ออกแบบเพียงครั้งเดียว แต่สามารถใช้ได้กับทุกขนาดของหน้าจอ โดยเว็บไซต์จะสามารถตรวจจับขนาดของหน้าจอ ปรับขนาด และ Layout ให้เหมาะสมตามขนาดของหน้าจอโดยอัตโนมัติ โดยอาศัยการทำงานร่วมกันระหว่าง  Layout ของเว็บแบบ Flexible Grid, รูปภาพแบบ Flexible Image และ CSS3 Media Query
บางคนอาจถามว่าปัจจุบันเราก็สามารถดูเว็บไซต์ต่างๆบนมือถือได้อยู่แล้ว โดยไม่เห็นต้องออกแบบเว็บไซต์ให้เป็นแบบ Responsive ให้ยุ่งยาก ซึ่งก็ถูกต้องแต่สำหรับเว็บไซต์ที่ไม่ได้รับการออกแบบมาในแบบ Responsive เวลาดูข้อมูลจะต้องใช้การ Zoom เข้ามาดูทีละส่วน เพราะว่าไม่มีความสามารถในการปรับรูปแบบให้เหมาะสมตามขนาดของหน้าจอนั่นเอง ซึ่งแตกต่างจากเว็บไซต์ที่ได้รับการออกแบบมาในแบบ Responsive ซึ่งจะสามารถปรับ ขนาดของรูปภาพ และ Layout ของเว็บ ให้เหมาะสมตามขนาดของหน้าจอ ทำให้ดูข้อมูลได้สะดวกมากยิ่งขึ้นนั่นเอง
เว็บไซต์ที่ออกแบบมาตามปกติโดยไม่ได้ใช้เทคนิค Responsive เวลาแสดงผลบน Mobile Device จะเป็นเพียงแค่การย่อขนาด เพื่อให้สามารถแสดงผลได้บนหน้าจอเท่านั้น แต่จะไม่สามารถปรับรูปแบบ หรือ Layout ให้เหมาะสมตามขนาดหน้าจอ ในขณะนี้เว็บที่ได้รับการออกแบบมาโดยใช้เทคนิคการออกแบบเว็บไซต์แบบ Responsive จะสามารถปรับ Layout และ ขนาดของรูปภาพ ให้เหมาะสม ตามขนาดของหน้าจอ ทำให้มี User Experience ที่ดีกว่า
ประโยชน์ของการออกแบบเว็บไซต์แบบ Responsive
1.แสดงผลได้สวยงาม บนขนาดหน้าจอที่แตกต่าง
2.ออกแบบเพียงครั้งเดียว แต่สามารถใช้ได้กับขนาดหน้าจอที่หลากหลาย
3.มี Experience ในการใช้งานที่ดีกว่า ดูข้อมูลได้ง่าย โดยไม่ต้อง Zoom
4.ประหยัดเวลา และ ค่าใช้จ่ายได้มากกว่าการทำ 2 เว็บไซต์
5.ช่วยในเรื่องของการทำ SEO (Search Engine Optimization)
ผลการค้นหารูปภาพสำหรับ การทำงานResponsive
ปัจจุบันแม้แต่ทาง Google เอง ก็ได้ออกมาชักชวนให้เหล่าบรรดา Web Master ทั้งหลาย พัฒนาเว็บไซต์ของตน ในแบบ Responsive คือ พัฒนาเพียงเว็บไซต์เดียว แต่ให้ใช้งานได้บนหน้าจอขนาดอื่นๆด้วย ซึ่งการที่ Google ออกโรงมาผลักดันด้วยตัวเอง ก็น่าจะพอเห็นทิศทางการพัฒนาเว็บไซต์ในอนาคตได้ว่า กำลังจะไปในทิศทางใด
Responsive ได้รับการออกแบบมาเพื่อช่วยในเรื่องของการปรับรูปแบบแสดงผลเป็นหลัก แต่ก็ยังขาดสมบูรณ์ในเรื่องของความสามารถในการช่วยแก้ปัญหาในเรื่องของ Bandwidth ยกตัวอย่างเช่น การแสดงผลรูปภาพ ซึ่งใช้วิธีการ ย่อ/ขยาย scale ของรูป เพื่อให้แสดงผลได้เหมาะสมบนหน้าจอขนาดต่างๆ แต่ในความเป็นจริงแล้ว ยังคงใช้ไฟล์รูปภาพไฟล์เดียวกันกับที่ใช้แสดงผลบน Notebook/PC ซึ่งโดยทั่วไปมักจะมีขนาดใหญ่ และมีความต้องการ Bandwidth สูง ทำให้เมื่อนำมาแสดงผลบน Mobile Device ถึงแม้จะปรับย่อขนาดให้ดูเล็กลง แต่เนื่องจากขนาดของไฟล์ที่ยังคงมีขนาดเท่าเดิม ทำให้แสดงผลได้ช้า และเป็นการสิ้นเปลือง Bandwidth โดยไม่จำเป็น ซึ่งมาตรฐานในส่วนนี้ กำลังอยู่ระหว่างการพัฒนา ซึ่งคาดว่าคงจะมีให้ใช้กันในอีกไม่ช้านี้
ที่มา : http://8columns.com/articles/50009/1387278156096

ไม่มีความคิดเห็น:

แสดงความคิดเห็น