Hãy mở một trang web trên điện thoại, sau đó trên máy tính xách tay, rồi trên TV. Nếu nó hiển thị đúng trên cả ba thiết bị mà không cần phóng to hay nheo mắt, thì trang web đó được xây dựng bằng thiết kế đáp ứng (responsive design). Phương pháp này cho phép một mã nguồn duy nhất tự điều chỉnh bố cục, hình ảnh và kiểu chữ cho phù hợp với bất kỳ màn hình nào mà nó được hiển thị.

Ethan Marcotte đã đặt ra thuật ngữ này vào năm 2010, khi việc duyệt web trên thiết bị di động bùng nổ và các nhà thiết kế phải đối mặt với lựa chọn: xây dựng các trang web riêng biệt cho từng thiết bị hoặc xây dựng một trang web có khả năng thích ứng. Thiết kế đáp ứng (responsive design) đã thắng thế. Các công cụ cốt lõi là lưới linh hoạt, hình ảnh linh hoạt và truy vấn phương tiện (media queries). Truy vấn phương tiện hỏi trình duyệt chiều rộng của khung nhìn là bao nhiêu và áp dụng các quy tắc CSS khác nhau tùy thuộc vào câu trả lời.

Điều gì làm cho một thiết kế trở nên tương thích?

• Lưới linh hoạt sử dụng tỷ lệ phần trăm thay vì pixel cố định.
• Hình ảnh linh hoạt, có thể điều chỉnh kích thước trong vùng chứa của chúng.
• Các truy vấn phương tiện áp dụng điểm ngắt cho các kích thước màn hình khác nhau
• Các mục tiêu thân thiện với cảm ứng trên bố cục di động

Mục tiêu không chỉ đơn thuần là hiển thị nội dung trên màn hình nhỏ. Mà là duy trì khả năng đọc hiểu, thứ tự ưu tiên và tính khả dụng trong mọi ngữ 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 trên điện thoại. Menu hamburger có thể thay thế thanh điều hướng đầy đủ. Thiết kế đáp ứng tốt tạo cảm giác tất yếu, như thể trang web luôn được thiết kế để hiển thị như vậy trên thiết bị của bạn.