การออกแบบที่ตอบสนองต่ออุปกรณ์ (Responsive design) คือแนวทางการสร้างส่วนติดต่อผู้ใช้บนเว็บที่ปรับให้เข้ากับขนาดและความสามารถของอุปกรณ์ที่แสดงผล โดยใช้เลย์เอาต์แบบยืดหยุ่น รูปภาพที่ปรับเปลี่ยนได้ และ CSS media queries เพื่อจัดเรียงโค้ดเบสเดียวใหม่ให้เหมาะสมกับขนาดหน้าจอต่างๆ แนวคิดนี้ได้รับการแนะนำอย่างเป็นทางการโดย Ethan Marcotte ในปี 2010 และเข้ามาแทนที่แนวทางเดิมที่ต้องแยกเว็บไซต์สำหรับเดสก์ท็อปและมือถือออกจากกัน ปัจจุบันกลายเป็นมาตรฐานที่คาดหวังกันโดยทั่วไปสำหรับงานเว็บทั้งหมด
ข้อได้เปรียบหลักคือการรักษาการใช้งานเพียงรูปแบบเดียว แทนที่จะเป็นหลายรูปแบบ เว็บไซต์บนมือถือที่แยกจากกันจะแตกต่างกันไปตามกาลเวลา เกิดความไม่สอดคล้องกันมากขึ้น ทำให้การวิเคราะห์และการจัดทำดัชนีการค้นหาซับซ้อนขึ้น และเพิ่มต้นทุนเป็นสองเท่าในทุกการเปลี่ยนแปลง การใช้งานแบบ Responsive ช่วยให้เนื้อหา URL และฟังก์ชันการทำงานเป็นหนึ่งเดียว ซึ่งสอดคล้องกับวิธีการที่เครื่องมือค้นหาจัดทำดัชนีและจัดอันดับหน้าเว็บ เนื่องจากดัชนีแบบ Mobile-first จะประเมินการแสดงผลบนมือถือของ URL เดียวกัน
ความเข้าใจผิดที่พบบ่อยคือ การออกแบบที่ตอบสนองต่อขนาดหน้าจอ (Responsive) หมายถึงเพียงแค่การจัดวางเลย์เอาต์ไม่เสียรูปทรง การจัดเรียงคอลัมน์ใหม่ให้ซ้อนกันในหน้าจอแคบๆ เป็นเพียงขั้นต่ำ ไม่ใช่เป้าหมาย การออกแบบที่ตอบสนองต่อขนาดหน้าจออย่างแท้จริงต้องคำนึงถึงบริบท ความสามารถ และจุดประสงค์ที่แตกต่างกันของอุปกรณ์ต่างๆ เช่น ขนาดพื้นที่สัมผัสที่เหมาะสมสำหรับนิ้วมือมากกว่าเคอร์เซอร์ รูปแบบการนำทางที่เหมาะสมกับหน้าจอขนาดเล็กมากกว่าเมนูเดสก์ท็อปแบบบีบอัด การจัดลำดับความสำคัญของเนื้อหาที่วางเนื้อหาที่สำคัญที่สุดไว้ก่อนเมื่อจัดเรียงในแนวตั้ง และแบบฟอร์มที่ใช้ประเภทอินพุตและแป้นพิมพ์ที่เหมาะสม
ประสิทธิภาพการทำงานมักเป็นจุดที่การใช้งานการออกแบบเว็บไซต์แบบ Responsive ล้มเหลวในทางปฏิบัติ เลย์เอาต์ที่ปรับเปลี่ยนภาพได้ แต่ยังคงดาวน์โหลดภาพขนาดสำหรับเดสก์ท็อป ชุด JavaScript ทั้งหมด และส่วนประกอบที่ไม่จำเป็น จะทำให้หน้าเว็บดูถูกต้อง แต่ทำงานได้ไม่ดีบนอุปกรณ์และการเชื่อมต่อที่ไม่สามารถรองรับต้นทุนเหล่านั้นได้ ภาพแบบ Responsive ที่มีชุดซอร์สโค้ดที่เหมาะสม การโหลดส่วนประกอบที่ไม่แสดงในหน้าจอขนาดเล็กแบบมีเงื่อนไข และการเลื่อนการโหลดทรัพยากรที่ไม่สำคัญ คือสิ่งที่ทำให้วิธีการนี้ใช้งานได้จริงในภาคสนาม ไม่ใช่แค่ในเบราว์เซอร์ที่ปรับขนาดบนเดสก์ท็อปเท่านั้น
การทดสอบการออกแบบที่ตอบสนองต่ออุปกรณ์ต่างๆ จำเป็นต้องใช้อุปกรณ์จริง ไม่ใช่แค่การปรับขนาดเบราว์เซอร์ โปรแกรมจำลองไม่สามารถจำลองความไม่แม่นยำของการสัมผัส สภาพเครือข่ายจริง ข้อจำกัดด้านหน่วยความจำบนฮาร์ดแวร์ระดับกลาง หรือวิธีที่แป้นพิมพ์ของระบบและส่วนประกอบของเบราว์เซอร์ใช้พื้นที่แนวตั้งได้ ข้อบกพร่องที่พบบ่อยที่สุดหลายอย่าง รวมถึงการป้อนข้อมูลที่ถูกบดบังโดยแป้นพิมพ์ องค์ประกอบที่ค้างอยู่ซึ่งกินพื้นที่ส่วนใหญ่ของหน้าจอขนาดเล็ก และการล้นแนวนอนที่เกิดจากองค์ประกอบกว้างเพียงชิ้นเดียว มักมองไม่เห็นในโปรแกรมจำลองบนเดสก์ท็อป แต่จะเห็นได้ชัดเจนทันทีบนโทรศัพท์
งานออกแบบที่ตอบสนองต่อทุกขนาดหน้าจอต้องคำนึงถึงการปรับขนาดตัวอักษรและการซูมด้วย ซึ่งมักถูกมองข้ามและเป็นสาเหตุหลักของความล้มเหลวในการเข้าถึงได้ง่าย เลย์เอาต์ที่สร้างด้วยขนาดพิกเซลคงที่อาจจัดเรียงใหม่ได้อย่างถูกต้องตามความกว้างของอุปกรณ์ต่างๆ แต่จะพังโดยสิ้นเชิงเมื่อผู้ใช้เพิ่มขนาดตัวอักษรเริ่มต้นของเบราว์เซอร์หรือซูมเป็น 200 เปอร์เซ็นต์ ซึ่งเป็นค่าที่ผู้คนจำนวนมากใช้เป็นประจำ เนื้อหาที่ล้นออกจากกรอบ ถูกตัด หรือต้องเลื่อนแนวนอนภายใต้เงื่อนไขเหล่านี้ถือว่าไม่ผ่านมาตรฐานทั้งด้านการใช้งานและการเข้าถึงได้ง่าย การทดสอบที่ขนาดตัวอักษรที่ใหญ่ขึ้นและระดับการซูมสูงใช้เวลาเพียงไม่กี่นาทีและตรวจพบข้อบกพร่องประเภทที่การทดสอบความกว้างของอุปกรณ์ไม่เคยพบ เนื่องจากข้อจำกัดทั้งสองอย่างส่งผลต่อเลย์เอาต์ในลักษณะที่แตกต่างกัน
เนื่องจากการตอบสนองครอบคลุมตั้งแต่การจัดวาง การออกแบบเนื้อหา ไปจนถึงการนำเสนอ จึงไม่ค่อยได้ผลดีขึ้นหากปรับแค่จุดแบ่งหน้าจอเพียงอย่างเดียว ออกแบบผลิตภัณฑ์ แนวทางที่ยั่งยืนคือการกำหนดเค้าโครง ระยะห่าง และพฤติกรรมของส่วนประกอบต่างๆ ในขนาดหน้าจอต่างๆ ภายในระบบการออกแบบ เพื่อให้หน้าเว็บใหม่ๆ ได้รับพฤติกรรมที่ถูกต้องโดยค่าเริ่มต้น ส่วนด้านประสิทธิภาพนั้นเป็นหน้าที่ของ... ประสิทธิภาพของเว็บ การทำงานนั้นสำคัญ เพราะความแตกต่างระหว่างเว็บไซต์ที่ตอบสนองต่อการใช้งานบนมือถือและเว็บไซต์ที่ไม่สามารถทำได้นั้น มักอยู่ที่ขนาดไฟล์และกลยุทธ์การโหลดมากกว่ารูปแบบการจัดวาง