Responsive

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

•       1.เริ่มแรกคือการทำ Fluid Grid ซึ่งก็คือการออกแบบ Grid ให้เป็นแบบ Relative ซึ่งก็คือการที่ไม่ได้กำหนดขนาดของ Grid แบบตายตัว แต่จะกำหนดให้สัมพันธ์กับสิ่งอื่นๆ เช่น กำหนดความกว้างแบบเป็น % หรือการใช้ font-size หน่วยเป็น em เป็นต้น                                                       2.ต่อมาคือการทำ Flexible Images หรือการกำหนดขนาดของ Images ต่างๆ ให้มีความสัมพันธ์กับขนาดของหน้าจอแสดงผล หากรูปต้นฉบับมีขนาดใหญ่มาก เวลาแสดงในมือถือที่มีจอขนาดเล็ก ก็ควรลดขนาดลงมา เพื่อให้แสดงผลได้อย่างสวยงาม เป็นต้น                                               3.สุดท้ายคือการใช้ CSS3 Media Queries ซึ่งจะช่วยให้เราสามารถกำหนด style sheets สำหรับ Devices ต่างๆ ได้ โดยส่วนใหญ่ เราจะเขียน style sheets พื้นฐานเอาไว้ ซึ่งกลุ่มนี้ จะไม่ขึ้นอยู่กับ Devices ใดๆ หลังจากนั้นให้เราเขียน style sheets สำหรับ Devices ที่มีขนาดหน้าจอที่เล็กสุด เพิ่มขึ้นไปเรื่อยๆ จนถึงขนาดใหญ่สุด ซึ่งการเขียนแบบนี้ จะช่วยลดความซ้ำซ้อนของโค้ด และยังทำให้การแก้โค้ดในภายหลังทำได้ง่ายอีกด้วย

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

• 1.แสดงผลได้สวยงาม บนขนาดหน้าจอที่แตกต่าง

  • 2.ออกแบบเพียงครั้งเดียว แต่สามารถใช้ได้กับขนาดหน้าจอที่หลากหลาย

  • 3.มี Experience ในการใช้งานที่ดีกว่า ดูข้อมูลได้ง่าย โดยไม่ต้อง Zoom
  • 4.ประหยัดเวลา และ ค่าใช้จ่ายได้มากกว่าการทำ 2 เว็บไซต์

  • 5.ช่วยในเรื่องของการทำ SEO (Search Engine Optimization)
  • 
    

  
• ข้อดีของ Responsive Web Design
• 1.สามารถรองรับการแสดงผลได้ทุกหน้าจอ ในรูปแบบที่แตกต่างกันไป  เช่นผ่านทางอุปกรณ์คอมพิวเตอร์ จะเป็นหน้าจอที่สมบูรณ์แบบ แต่หากผ่านทางอุปกรณ์มือถือ จะมีการเรียงลำดับเมนูลงมาเรื่อย โครงสร้างการออกแบบจะขึ้นอยู่กับผู้พัฒนา
• 2.เพิ่มความสะดวกสบายสำหรับผู้ใช้งาน  สามารถใช้งานได้โดยผ่าน  url ตัวเดียวกัน โดยไม่ต้องมีการกำหนดเวอร์ชั่นนี้สำหรับอุปกรณ์มือถือเท่านั้น  ซึ่งมีผลดีในด้าน SEO ด้วย
• 3.การแก้ไขข้อมูล แก้ไขข้อมูลในที่เดียวแสดงผลทุกอุปกรณ์
• ข้อเสียของ Responsive Web Design
• 1.ไม่สามารถรองรับการทำงาน พวก flash หรือพวก Javascript หรือรูปภาพที่มีขนาดใหญ่ได้
• 2.เนื่องจากอุปกรณ์มือถือแสดงหน้าจอขนาดเล็ก ผู้พัฒนาอาจจะต้องมีการตัดเมนูบางส่วนที่ไม่จำเป็นสำหรับผู้ใช้ ออก
• 3.ในการออกแบบต้องมีการจัดวางโครงสร้างให้ดี  เช่น  html5 css  ให้เหมาะสม
• 4.การปรับปรุงโครงสร้าง ภายหลังจะแก้ไขยาก อาจจะทำให้โครงสร้างการแสดงผลบ้างส่วนมีปัญหาได้
•  ปัจจุบันแม้แต่ทาง Google เอง ก็ได้ออกมาชักชวนให้เหล่าบรรดา Web Master ทั้งหลาย พัฒนาเว็บไซต์ของตน ในแบบ Responsive คือ พัฒนาเพียงเว็บไซต์เดียว แต่ให้ใช้งานได้บนหน้าจอขนาดอื่นๆด้วย ซึ่งการที่ Google ออกโรงมาผลักดันด้วยตัวเอง ก็น่าจะพอเห็นทิศทางการพัฒนาเว็บไซต์ในอนาคตได้ว่า กำลังจะไปในทิศทางใด

•      Responsive Design ได้รับการออกแบบมาเพื่อช่วยในเรื่องของการปรับรูปแบบแสดงผลเป็นหลัก แต่ก็ยังขาดสมบูรณ์ในเรื่องของความสามารถในการช่วยแก้ปัญหาในเรื่องของ Bandwidth 
•     ยกตัวอย่าง เช่น การแสดงผลรูปภาพ ซึ่งใช้วิธีการ ย่อ/ขยาย scale ของรูป เพื่อให้แสดงผลได้เหมาะสมบนหน้าจอขนาดต่างๆ แต่ในความเป็นจริงแล้ว ยังคงใช้ไฟล์รูปภาพไฟล์เดียวกันกับที่ใช้แสดงผลบน Notebook/PC ซึ่งโดยทั่วไปมักจะมีขนาดใหญ่ และมีความต้องการ Bandwidth สูง ทำให้เมื่อนำมาแสดงผลบน Mobile Device ถึงแม้จะปรับย่อขนาดให้ดูเล็กลง แต่เนื่องจากขนาดของไฟล์ที่ยังคงมีขนาดเท่าเดิม ทำให้แสดงผลได้ช้า และเป็นการสิ้นเปลือง Bandwidth โดยไม่จำเป็น ซึ่งมาตรฐานในส่วนนี้ กำลังอยู่ระหว่างการพัฒนา ซึ่งคาดว่าคงจะมีให้ใช้กันในอีกไม่ช้านี้
•