ภาพหน้าจอของวิกิพีเดียที่ใช้ธีมVector 2022 แบบ Responsive แสดงบนหน้าจอคอมพิวเตอร์ (ซ้าย) และบนหน้าจอโทรศัพท์มือถือ (ขวา) องค์ประกอบต่างๆ จะจัดเรียงใหม่ให้เหมาะสมกับการใช้งานบนมือถือมากขึ้น

การออกแบบเว็บแบบตอบสนอง (Responsive web designหรือRWD ) หรือการออกแบบแบบตอบสนอง (Responsive design ) เป็นแนวทางในการออกแบบเว็บที่มุ่งเน้นให้เว็บเพจแสดงผลได้ดีบนอุปกรณ์และขนาดหน้าต่างหรือหน้าจอที่หลากหลาย ตั้งแต่ขนาดหน้าจอเล็กสุดไปจนถึงขนาดหน้าจอใหญ่สุด เพื่อให้มั่นใจถึงความสามารถในการใช้งานและความพึงพอใจ^{[ 1 ] [ 2 ]}

^{การออกแบบที่ตอบสนองต่อ สภาพ}แวดล้อมจะปรับเค้าโครงหน้าเว็บให้เข้ากับสภาพแวดล้อมการรับชม^{[ 1 ]}โดยใช้เทคนิคต่างๆ เช่น ตารางแบบสัดส่วนที่ยืดหยุ่น^{[ 3 ] [ 4 ]}รูปภาพที่ยืดหยุ่น^{[ 5 ] [ 6 ]}และCSS3 media queries [ ^{7 ] [ 8 ] [ 9 ]}ซึ่งเป็นการขยายกฎ^{[ 10 ]}ในลักษณะดังต่อไปนี้: @media

• แนวคิด ตารางแบบยืดหยุ่น กำหนดให้การ ^{กำหนด}ขนาดองค์ประกอบหน้าเว็บเป็นหน่วยสัมพัทธ์ เช่น เปอร์เซ็นต์ แทนที่จะเป็นหน่วยสัมบูรณ์ เช่นพิกเซลหรือจุด^{[ 4} ]
• รูปภาพที่ยืดหยุ่นจะถูกกำหนดขนาดเป็นหน่วยสัมพัทธ์ด้วย เพื่อป้องกันไม่ให้รูปภาพแสดงผลเกินขอบเขตขององค์ประกอบ ที่บรรจุ อยู่^{[ 5 ]}
• Media queries ช่วยให้หน้าเว็บสามารถใช้กฎการจัดสไตล์ CSS ที่แตกต่างกันไปตามคุณลักษณะของอุปกรณ์ที่ใช้แสดงเว็บไซต์ เช่น ความกว้างของพื้นที่แสดงผล (ความกว้างของหน้าต่างเบราว์เซอร์หรือขนาดของจอแสดงผลจริง)
• เลย์เอาต์แบบ Responsive จะปรับขนาดและปรับให้เข้ากับขนาดหน้าจอของอุปกรณ์ทุกชนิดโดยอัตโนมัติ ไม่ว่าจะเป็นคอมพิวเตอร์ตั้งโต๊ะ แล็ปท็อป แท็บเล็ต หรือโทรศัพท์มือถือ

การออกแบบเว็บแบบตอบสนองมีความสำคัญมากขึ้นเมื่อผู้ใช้อุปกรณ์เคลื่อนที่กลายเป็นผู้เยี่ยมชมเว็บไซต์ส่วนใหญ่^{[ 11 ] [ 12 ]}ตัวอย่างเช่น ในปี 2558 Google ได้ประกาศMobilegeddonและเริ่มเพิ่มอันดับหน้าเว็บของเว็บไซต์ที่เป็นมิตรกับมือถือเมื่อค้นหาจากอุปกรณ์เคลื่อนที่^{[ 13 ]}

การออกแบบเว็บแบบตอบสนองเป็นตัวอย่างหนึ่งของ ความยืดหยุ่น ของอินเทอร์เฟซผู้ใช้^{[ 14 ]}

Luke Wroblewski ได้สรุปความท้าทายด้านการออกแบบที่ตอบสนองต่ออุปกรณ์ต่างๆ และสำหรับอุปกรณ์เคลื่อนที่ และสร้างแคตตาล็อกของรูปแบบการจัดวางสำหรับอุปกรณ์หลายประเภท^{[ 15 ] [ 16 ] [ 17 ]}เขาแนะนำว่า เมื่อเปรียบเทียบกับวิธีการออกแบบเว็บที่ตอบสนองต่ออุปกรณ์ต่างๆ แบบง่ายๆ วิธีการออกแบบเว็บที่ตอบสนองต่ออุปกรณ์ต่างๆ หรือ RESS (responsive web design with server-side components) สามารถมอบประสบการณ์การใช้งานที่เหมาะสมกับอุปกรณ์เคลื่อนที่ได้ดียิ่งขึ้น [ ^{18 ] [ 19 ] [ 20 ] การ}ใช้งานตัวสร้าง CSS ฝั่งเซิร์ฟเวอร์ของภาษาสไตล์ชีต เช่นSassสามารถเป็นส่วนหนึ่งของวิธีการดังกล่าวได้ Google แนะนำการออกแบบที่ตอบสนองต่ออุปกรณ์ต่างๆ สำหรับเว็บไซต์สมาร์ทโฟนมากกว่าวิธีการอื่นๆ^{[ 21 ]}

แม้ว่าผู้เผยแพร่หลายรายจะนำการออกแบบที่ตอบสนองต่ออุปกรณ์ต่างๆ มาใช้ แต่ความท้าทายอย่างหนึ่งในการนำการออกแบบที่ตอบสนองต่ออุปกรณ์ต่างๆ มาใช้ก็คือโฆษณาแบนเนอร์และวิดีโอบางรายการไม่ได้มีความยืดหยุ่น^{[ 22 ]}อย่างไรก็ตามโฆษณาการค้นหา และ โฆษณาแบบแสดงผล (แบนเนอร์) ได้รองรับการกำหนดเป้าหมายแพลตฟอร์มอุปกรณ์เฉพาะและรูปแบบขนาดโฆษณาที่แตกต่างกันสำหรับเดสก์ท็อป สมาร์ทโฟน และอุปกรณ์มือถือพื้นฐาน มีการใช้ URL หน้า Landing Page ที่แตกต่างกันสำหรับแพลตฟอร์มต่างๆ^{[ 23 ]}หรือ มีการใช้ Ajaxเพื่อแสดงโฆษณารูปแบบต่างๆ บนหน้าเว็บ^{[ 24 ] [ 16 ] [ 25 ]}ตาราง CSS อนุญาตให้ใช้เลย์เอาต์แบบผสมผสานระหว่างแบบคงที่และแบบยืดหยุ่น^{[ 26 ]}

มีหลายวิธีในการตรวจสอบและทดสอบการออกแบบเว็บที่ตอบสนองต่ออุปกรณ์ต่างๆ^{[ 27 ]}ตั้งแต่เครื่องมือตรวจสอบเว็บไซต์บนมือถือและโปรแกรมจำลองมือถือ ไปจนถึงเครื่องมือทดสอบพร้อมกัน เช่นAdobe Edge Inspect [ ^{28 ] เบ}ราว์เซอร์ Chrome, Firefox และ Safari รวมถึงเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ ได้นำเสนอเครื่องมือปรับขนาดวิวพอร์ตสำหรับการออกแบบที่ตอบสนองต่ออุปกรณ์ต่างๆ เช่นเดียวกับเครื่องมือจากบริษัทภายนอก^{[ 29 ] [ 30 ]}

ข้อกำหนด W3C ของ HTML+ ระบุว่าเว็บไซต์จะต้องแสดงผลตามความต้องการของผู้ใช้^{[ 31 ]}อย่างไรก็ตาม การปรับแต่งเค้าโครงหน้าเว็บยังขาดอยู่ นักพัฒนาเว็บจำนวนมากจึงหันไปใช้ตาราง HTML ธรรมดาเป็นวิธีในการปรับแต่งเค้าโครงและทำให้เว็บไซต์ตอบสนองได้ในระดับพื้นฐานในเวลาเดียวกัน

เว็บไซต์หลักแห่งแรกที่มีเลย์เอาต์ที่ปรับให้เข้ากับความกว้างของวิวพอร์ตเบราว์เซอร์ในลักษณะที่ไม่ธรรมดาคือAudi.com ซึ่งเปิดตัวในช่วงปลายปี 2544 ^{[ 32 ]} สร้างโดยทีมงานที่Razorfishซึ่งประกอบด้วย Jürgen Spangl และJim Kalbach (สถาปัตยกรรมสารสนเทศ) Ken Olling (การออกแบบ) และ Jan Hoffmann (การพัฒนาอินเทอร์เฟซ) ความสามารถของเบราว์เซอร์ที่จำกัดหมายความว่าสำหรับ Internet Explorer เลย์เอาต์สามารถปรับเปลี่ยนแบบไดนามิกในเบราว์เซอร์ได้ ในขณะที่สำหรับ Netscape หน้าเว็บจะต้องโหลดใหม่จากเซิร์ฟเวอร์เมื่อมีการปรับขนาด

Cameron Adams สร้างการสาธิตในปี 2004 ^{[ 33 ]} ภายในปี 2008 มีการใช้ คำที่เกี่ยวข้องหลายคำ เช่น "flexible", "liquid", ^{[ 34 ] "fluid" และ "elastic" เพื่ออธิบายเลย์เอาต์ CSS3 media queries เกือบพร้อมใช้งานในช่วงปลายปี 2008/ต้นปี 2009 [ 35 ]} Ethan Marcotte เป็นผู้บัญญัติศัพท์คำว่าresponsive web design ^{[ 36 ]}และให้คำจำกัดความว่าหมายถึง fluid grid / flexible images / media queries ในบทความเดือนพฤษภาคม 2010 ในA List Apart [ ^{1 ] เขา}อธิบายทฤษฎีและการปฏิบัติของ responsive web design ในหนังสือเล่มเล็ก ๆ ของเขาในปี 2011 ที่ชื่อว่าResponsive Web Design Responsive design ได้รับการจัดอันดับเป็นอันดับ 2 ในเทรนด์การออกแบบเว็บยอดนิยมประจำปี 2012 โดยนิตยสาร .netรองจากprogressive enhancementที่อันดับ 1 ^{[ 37 ]}

Mashableเรียกปี 2013 ว่าปีแห่งการออกแบบเว็บแบบตอบสนอง^{[ 38 ]}

การออกแบบแบบ Mobile-firstและการปรับปรุงแบบก้าวหน้าเป็นแนวคิดที่เกี่ยวข้องกันซึ่งมีมาก่อนการออกแบบเว็บแบบ Responsive ^{[ 39 ]}เบราว์เซอร์ของโทรศัพท์มือถือพื้นฐานไม่เข้าใจ JavaScript หรือMedia Queriesดังนั้นแนวทางปฏิบัติที่แนะนำคือการสร้างเว็บไซต์พื้นฐานและปรับปรุงให้เหมาะสมกับสมาร์ทโฟนและคอมพิวเตอร์ส่วนบุคคลแทนที่จะพึ่งพาการลดระดับอย่างนุ่มนวลเพื่อให้เว็บไซต์ที่ซับซ้อนและมีรูปภาพจำนวนมากทำงานบนโทรศัพท์มือถือได้^{[ 40 ] [ 41 ] [ 42 ] [ 43 ]}

ความยืดหยุ่นของอินเทอร์เฟซผู้ใช้คือความสามารถของอินเทอร์เฟซผู้ใช้ในการทนต่อการเปลี่ยนแปลงทั้งลักษณะทางกายภาพของระบบและสภาพแวดล้อมในขณะที่ยังคงรักษาความสามารถในการใช้งานไว้^{[ 44 ]}