เนื่องด้วยปัจจุบันความก้าวหน้าทางเทคโนโลยีและการให้บริการอินเตอร์เน็ตความเร็วสูงมีการพัฒนาอย่างต่อเนื่อง จึงส่งผลให้การเข้าถึงข้อมูลข่าวสารเป็นไปได้อย่างรวดเร็วและทั่วถึง ทำให้เหล่าผู้ผลิตรวมถึงนักพัฒนา พร้อมใจกันพัฒนาซอร์ฟแวร์และอุปกรณ์ต่างๆ ให้สามารถใช้งานอินเตอร์เน็ตได้ ไม่ว่าจะเป็นโทรศัพท์ Tablet หรือแม้แต่โทรทัศน์เองก็สามารถใช้งานอินเตอร์เน็ตได้เช่นกัน นั่นหมายความว่าปัจจุบันมีอุปกรณ์มากมายที่สามารถใช้งานอินเตอร์เน็ต ซึ่งมีคุณสมบัติที่แตกต่างกันออกไป เช่น ความกว้าง ความสูง ความละเอียดหน้าจอ และอื่นๆ อีกมากมาย            เมื่อพูดถึงการออกแบบเว็บไซต์เพื่อให้สามารถรองรับการใช้งานกับทุกอุปกรณ์ คนส่วนใหญ่มักมองว่าจำเป็นต้องใช้ต้นทุนในการผลิตที่สูงขึ้น เพื่อใช้ในการออกแบบเว็บไซต์แต่ละเวอร์ชั่นให้รองรับกับการใช้ของอุปกรณ์ที่ มีความลหากหลายได้ ซึ่งความจริงแล้วนั่นอาจเป็นแนวคิดที่ไม่ถูกต้องนัก เพราะ Responsive Web Design คือเทคโนโลยีการออกแบบเว็บไซต์ที่ช่วยให้คุณสามารถสร้างเว็บไซต์ที่รองรับทุกขนาดหน้าจอรวมถึงทุกอุปกรณ์สื่อสารด้วยต้นทุนที่ต่ำกว่า เวลาที่สั้นกว่า และประสิทธิภาพที่สูงกว่าการผลิตเว็บไซต์แยกหลายเวอร์ชั่น โดยในบทความนี้จะพูดถึงแนวคิดและแนวทางการพัฒนา Responsive Web Design แบบเบื้องต้นที่ผู้เขียนได้อ่านและรวบรวมมาให้ผู้ที่สนใจนำไปใช้ประโยชน์ได้ไม่มากก็น้อย Flexible Images ปัญหาที่เกิดขึ้นบ่อยในการออกแบบเว็บไซต์แบบ Responsive Web คือ ปัญหาเกี่ยวกับการแสดงผลรูปภาพบนอุปกรณ์ที่มีขนาดแตกต่างกัน ซึ่งปัจุบันมีเทคนิคมากมายที่ช่วยในการจัดการปัญหาดังกล่าว โดยเทคนิคที่ได้รับความนิยมมากคือนำ CSS มาช่วยในการออกแบบการแสดงผลดังกล่าวเนื่องจากสามารถทำได้ง่าย และไม่ซับซ้อน ดังนี้ img { max-width: 100%; } จากตัวอย่างข้างต้น เป็นการกำหนดขนาดของรูปภาพให้มีความกว้าง 100% แทนการกำหนดขนาดของรูปภาพแบบตายตัว (width: 100px) ทำให้การแสดงผลของรูปภาพจะขึ้นอยู่กับขนาดของหน้าจออุปกรณ์หรือความกว้างของบราวเซอร์แทน ข้อเสีย –         บราวเซอร์ Internet Explorer ยังไม่รองรับ properties ที่ชื่อว่า max-width  แต่สามารถแก้ไขโดยการใช้ properties ที่ชื่อว่า width แทน –          ในบราวเซอร์เวอร์ชั่นเก่าๆ ยังไม่รองรับเทคนิคการทำงานดังกล่าวเช่นกัน ซึ่งสามารถแก้ไขโดยการใช้ JavaScript ช่วยในการทำงานแทนได้ แม้วิธีข้างต้นจะเป็นการแก้ปัญหาการยืดหยุ่นของภาพได้ดีและรวดเร็ว แต่สิ่งที่ไม่ควรมองข้ามคือ ความละเอียดของภาพและเวลาในการโหลดรูปภาพ เนื่องจากในปัจจุบัน นิยมใช้งานเว็บไซต์ผ่านทาง Smartphone หรือ Tablet มากขึ้น การโหลดภาพที่มีขนาดใหญ่และความละเอียดสูงจะทำให้เสียเวลาและใช้พื้นที่โดยไม่จำเป็น Filament Group’s Responsive Images เป็นเทคนิค ที่ไม่เน้นการปรับขนาดของรูปภาพ แต่ใช้วิธีเลือกรูปภาพที่มีขนาดเหมาะสมกับอุปกรณ์มาแสดงแทน ซึ่งช่วยแก้ปัญหาการโหลดรูปภาพที่มีขนาดใหญ่มาแสดงผลในอุปกรณ์ที่มีขนาดเล็ก และลดการใช้พื้นที่โดยไม่จำเป็นได้ โดยการทำงานด้วยเทคนิคดังกล่าวจำเป็นที่จะต้องใช้ไฟล์บางตัว ซึ่งสามารถโหลดได้จาก Github ซึ่งมีขั้นตอนดังนี้ 1) โหลดไฟล์ที่จำเป็นตอนใช้งาน ซึ่งได้แก่  JavaScript, ไฟล์ .htaccess และไฟล์รูปภาพทั้งขนาดเล็กและขนาดใหญ่ 2) ทำการกำหนดคุณสมบติของรูปภาพให้อ้างอิงไปยังไฟล์รูปภาพนั้นๆทั้งขนาดเล็กและขนาดใหญ่ โดยวิธีการอ้างอิงของรูปภาพขนาดเล็กจะต้องอ้างอิงผ่าน attribute  SRC และรูปภาพขนาดใหญ่จะอ้างอิงผ่าน attribute data-fullsrc <img src=”smallRes.jpg” data-fullsrc=”largeRes.jpg”> ซึ่งแท็ก data-fullsrc เป็นแท็กที่เพิ่มเข้ามาใน HTML5 เพื่อใช้ในการโหลดรูปภาพกรณีที่หน้าจอมีความกว้างเกิน 480 pixels จากตัวอย่าง กรณีที่เปิดบนอุปกรณ์ที่มีขนาดความกว้างไม่เกิน 480 จะทำการโหลดภาพ smallRes.jpg ขึ้นมาแสดง แต่ในกรณีที่หน้าจอกว้างเกิน 480 จะทำการโหลดภาพ largeRes.jpg ขึ้นมาแสดง ตัวอย่าง Stop iPhone Simulator Image Resizing ปัจจุบันอุปกรณ์ของค่าย Apple ไม่ว่าจะเป็น IPhone(เวอร์ชั่น 4 ขึ้นไป) หรือ IPad(เวอร์ชั่น 2 ขึ้นไป) ได้นำเทคโนโลยีที่ช่วยในการแสดงผลของหน้าจอได้ดีขึ้นซึ่งมีชื่อเรียกว่า Retina Display ทำให้การแสดงผลของ Responsive Web บนอุปกรณ์ดังกล่าวไม่ได้ขนาดที่เหมาะสมกับที่ได้ทำการออกแบบไว้ ซึ่งมีเทคนิคในการแก้ไขปัญหาดังกล่าวโดยการนำค่า pixels มาเป็นตัวช่วยในการแก้ปัญหา ซึ่งจะขอธิบายในส่วนของเรื่อง pixels ให้ผู้อ่านได้เข้าใจก่อน pixels คือหน่วยที่ใช้วัดค่าความละเอียดของรูปภาพหรือหน้าจออุปกรณ์  pixels แบ่งได้  3 แบบด้วยกัน คือ Physical Pixels, CSS Pixels และ Device Pixels Physical Pixels คือ จำนวน pixels จริงๆ ตาม spec ของ Device นั้นๆ  เช่น iPhone3 เท่ากับ 320×480 ส่วน iPhone4 เท่ากับ 640×960