ทำความรู้จักกับ Responsive Design !

• เชื่อว่าในช่วงปีที่ผ่านมา หลายๆคนอาจจะเคยได้ยินคำว่า Responsive Design กันมาบ้าง และเชื่ออย่างยิ่งว่า จะได้ยินมากขึ้นในปี 2014 นี้อย่างแน่นอน สำหรับหลายคน อาจจะยังไม่รู้ว่า Responsive Design มันคืออะไร แล้วมันมีประโยชน์อย่างไร ลองติดตามอ่านในบทความนี้ได้เลยครับ
• 
  

  การแสดงผลบนขนาดหน้าจอต่างๆ ด้วยเทคนิคการออกแบบที่เรียกว่า Responsive Design
• ก่อนหน้านี้ การพัฒนาเว็บไซต์ให้รองรับ Mobile จะใช้วิธีการแยกพัฒนา โดยพัฒนาเว็บไซต์สำหรับ Desktop เวอร์ชั่นนึง และพัฒนาเว็บไซต์สำหรับ Mobile อีกเวอร์ชั่นนึง ซึ่งวิธีการดังกล่าว ไม่สามารถใช้กับยุคสมัยปัจจุบันได้อย่างมีประสิทธิภาพ ด้วยเหตุผลที่ว่า ขนาดหน้าจอของ Mobile Device ในปัจจุบัน มีความหลากหลายมากขึ้นนั่นเอง ดังนั้นจึงต้องหาวิธีการใหม่เข้ามาใช้ในการพัฒนา นั่นก็คือ Responsive Design นั่นเอง!
• 
  

  ข้อมูล Responsive Design จากเว็บไซต์ www.dotcominfoway.com
• 
  

  ขนาดหน้าจอ สำหรับ Mobile Device และ Desktop ในปัจุบัน
• Responsive Design คือ แนวคิดการออกแบบที่เรียกว่า One Size Fit All คือ ออกแบบเพียงครั้งเดียว แต่สามารถใช้ได้กับทุกขนาดของหน้าจอ โดยเว็บไซต์จะสามารถตรวจจับขนาดของหน้าจอ และปรับขนาด และ Layout ให้เหมาะสม ตามขนาดของหน้าจอโดยอัตโนมัติ โดยอาศัยการทำงานร่วมกันระหว่างเทคโนต่างๆ ดังต่อไปนี้ คือ Layout ของเว็บแบบ Flexible Grid, รูปภาพแบบ Flexible Image และ CSS3 Media Query
• บางคนอาจถามว่า ปัจจุบัน เราก็สามารถดูเว็บไซต์ต่างๆบนมือถือได้อยู่แล้ว โดยไม่เห็นต้องออกแบบเว็บไซต์ให้เป็นแบบ Responsive ให้ยุ่งยาก ซึ่งก็ถูกต้อง แต่สำหรับเว็บไซต์ที่ไม่ได้รับการออกแบบมาในแบบ Responsive เวลาดูข้อมูล จะต้องใช้การ Zoom เข้ามาดูทีละส่วน เพราะว่าไม่มีความสามารถในการปรับรูปแบบให้เหมาะสมตามขนาดของหน้าจอนั่นเอง ซึ่งแตกต่างจากเว็บไซต์ที่ได้รับการออกแบบมาในแบบ Responsive ซึ่งจะสามารถปรับ ขนาดของรูปภาพ และ Layout ของเว็บ ให้เหมาะสมตามขนาดของหน้าจอ ทำให้ดูข้อมูลได้สะดวกมากยิ่งขึ้นนั่นเอง
• 
  

  เว็บไซต์ที่ออกแบบปกติ (ซ้าย) กับ เว็บไซต์ที่ออกแบบโดยใช้เทคนิค Responsive Design (ขวา)
• เว็บไซต์ที่ออกแบบมาตามปกติ โดยไม่ได้ใช้เทคนิค Responsive เวลาแสดงผลบน Mobile Device จะเป็นเพียงแค่การ ย่อ ขนาด เพื่อให้สามารถแสดงผลได้บนหน้าจอเท่านั้น แต่จะไม่สามารถปรับรูปแบบ หรือ Layout ให้เหมาะสมตามขนาดหน้าจอ ในขณะนี้เว็บที่ได้รับการออกแบบมาโดยใช้เทคนิคการออกแบบเว็บไซต์แบบ Responsive จะสามารถปรับ Layout และ ขนาดของรูปภาพ ให้เหมาะสม ตามขนาดของหน้าจอ ทำให้มี User Experience ที่ดีกว่า
  
  

• ประโยชน์ของการออกแบบเว็บไซต์แบบ Responsive

• • 1
    แสดงผลได้สวยงาม บนขนาดหน้าจอที่แตกต่าง
  • 2
    ออกแบบเพียงครั้งเดียว แต่สามารถใช้ได้กับขนาดหน้าจอที่หลากหลาย
  • 3
    มี Experience ในการใช้งานที่ดีกว่า ดูข้อมูลได้ง่าย โดยไม่ต้อง Zoom
  • 4
    ประหยัดเวลา และ ค่าใช้จ่ายได้มากกว่าการทำ 2 เว็บไซต์
  • 5
    ช่วยในเรื่องของการทำ SEO (Search Engine Optimization)
• ปัจจุบันแม้แต่ทาง Google เอง ก็ได้ออกมาชักชวนให้เหล่าบรรดา Web Master ทั้งหลาย พัฒนาเว็บไซต์ของตน ในแบบ Responsive คือ พัฒนาเพียงเว็บไซต์เดียว แต่ให้ใช้งานได้บนหน้าจอขนาดอื่นๆด้วย ซึ่งการที่ Google ออกโรงมาผลักดันด้วยตัวเอง ก็น่าจะพอเห็นทิศทางการพัฒนาเว็บไซต์ในอนาคตได้ว่า กำลังจะไปในทิศทางใด
• Responsive Design ได้รับการออกแบบมาเพื่อช่วยในเรื่องของการปรับรูปแบบแสดงผลเป็นหลัก แต่ก็ยังขาดสมบูรณ์ในเรื่องของความสามารถในการช่วยแก้ปัญหาในเรื่องของ Bandwidth ยกตัวอย่างเช่น การแสดงผลรูปภาพ ซึ่งใช้วิธีการ ย่อ/ขยาย scale ของรูป เพื่อให้แสดงผลได้เหมาะสมบนหน้าจอขนาดต่างๆ แต่ในความเป็นจริงแล้ว ยังคงใช้ไฟล์รูปภาพไฟล์เดียวกันกับที่ใช้แสดงผลบน Notebook/PC ซึ่งโดยทั่วไปมักจะมีขนาดใหญ่ และมีความต้องการ Bandwidth สูง ทำให้เมื่อนำมาแสดงผลบน Mobile Device ถึงแม้จะปรับย่อขนาดให้ดูเล็กลง แต่เนื่องจากขนาดของไฟล์ที่ยังคงมีขนาดเท่าเดิม ทำให้แสดงผลได้ช้า และเป็นการสิ้นเปลือง Bandwidth โดยไม่จำเป็น ซึ่งมาตรฐานในส่วนนี้ กำลังอยู่ระหว่างการพัฒนา ซึ่งคาดว่าคงจะมีให้ใช้กันในอีกไม่ช้านี้
• ซึ่งในระหว่างรอมาตรฐานใหม่ที่กำลังจะออกมา ทางทีมงานของ 8columns จึงได้พัฒนาความสามารถเพิ่มเติม เพื่อมาช่วยแก้ปัญหาในเรื่องของ Bandwidth ดังกล่าว โดยใช้เทคนิคการ switch ไฟล์รูปภาพ เพื่อให้เหมาะสมกับ Device ต่างๆ ทำให้ Mobile Web ที่เราพัฒนา สามารถแสดงผลได้อย่างรวดเร็ว เพราะไฟล์รูปภาพที่แสดงผลมีขนาดเล็ก เพราะได้รับการย่อขนาดลงจริงๆ ซึ่งทำให้ Mobile Web ที่เราให้บริการ มีความแตกต่างจาก Mobile Web อื่นๆโดยทั่วไป
จากที่กล่าวมาทั้งหมดนี้ น่าจะพอเข้าใจถึงประโยชน์ และ ความสำคัญของเทคนิคการออกแบบที่เรียกว่า Responsive Design กันบ้างพอสมควร จากการขยายตัวเพิ่มมากขึ้นของผู้ใช้งาน Mobile Device คาดว่าในปี 2014 ที่กำลังจะมาถึง เราน่าจะได้เห็นเว็บไซต์แบบ Responsive เพิ่มมากขึ้นอย่างแน่นอน ดังนั้นหากคุณคิดที่พัฒนาเว็บไซต์ หรือ ปรับปรุงเว็บไซต์ใหม่ อย่าลืมตรวจสอบดูก่อนนะครับว่า เว็บไซต์ที่กำลังจะพัฒนา หรือ กำลังจะปรับปรุง เป็นแบบ Responsive หรือยัง ไม่อย่างนั้น ผมรับรองได้เลยว่า นอกจากคุณจะตกเทรนด์ คุณยังจะพลาดโอกาสทางธุรกิจที่จะมีเข้ามาทาง Mobile อีกจำนวนมากอย่างแน่นอน!

credit  8columns.com