Một trang web, nhiều màn hình. Thiết kế đáp ứng (responsive design) cho phép một bố cục duy nhất tự điều chỉnh phù hợp với kích thước và hướng hiển thị khác nhau của thiết bị. Thuật ngữ này được Ethan Marcotte đặt ra vào năm 2010, dựa trên những ý tưởng trước đó về lưới linh hoạt và hình ảnh chuyển động. Thay vì xây dựng các trang web riêng biệt cho máy tính để bàn và thiết bị di động, các nhà thiết kế tạo ra một mã nguồn duy nhất tự sắp xếp lại dựa trên chiều rộng khung nhìn.

Ba yếu tố kỹ thuật làm nên sự thành công của nó. Lưới linh hoạt sử dụng tỷ lệ phần trăm thay vì pixel cố định, do đó các cột có thể kéo giãn và thu nhỏ. Hình ảnh linh hoạt tự động điều chỉnh kích thước trong vùng chứa của chúng. Truy vấn phương tiện (media queries) phát hiện kích thước màn hình và áp dụng các quy tắc CSS khác nhau tại các điểm ngắt được xác định. Bố cục ba cột trên máy tính để bàn có thể thu gọn thành một cột duy nhất trên điện thoại, với thanh điều hướng được chuyển vào menu hamburger. Mục tiêu không phải là kiểm soát chính xác đến từng pixel mà là khả năng thích ứng mượt mà.

Các kỹ thuật cốt lõi

• Lưới biểu diễn chất lỏng dựa trên tỷ lệ phần trăm.
• Hình ảnh và phương tiện truyền thông linh hoạt.
• Truy vấn đa phương tiện tại các điểm ngắt được xác định.
• Ưu tiên nội dung cho thiết bị di động.

Thiết kế đáp ứng (responsive design) hiện nay đã trở thành tiêu chuẩn. Người dùng mong muốn trang web hoạt động bình thường cho dù họ mở nó trên điện thoại, máy tính bảng, máy tính xách tay hay tivi.