Thiết kế đáp ứng là gì? (Video và đồ họa thông tin giải thích)

thiết kế web đáp ứng

Đã mất một thập kỷ để thiết kế web đáp ứng (RWD) trở thành xu hướng chủ đạo kể từ khi Cameron Adams lần đầu tiên giới thiệu khái niệm. Ý tưởng thật tài tình - tại sao chúng tôi không thể thiết kế các trang web thích ứng với khung nhìn của thiết bị mà nó đang được xem?

Thiết kế đáp ứng là gì?

Thiết kế web đáp ứng (RWD) là một phương pháp thiết kế web nhằm tạo ra các trang web nhằm mang lại trải nghiệm xem tối ưu - dễ dàng đọc và điều hướng với mức tối thiểu thay đổi kích thước, xoay và cuộn - trên nhiều loại thiết bị (từ điện thoại di động đến máy tính để bàn màn hình). Trang web được thiết kế với RWD điều chỉnh bố cục phù hợp với môi trường xem bằng cách sử dụng lưới linh hoạt, dựa trên tỷ lệ, hình ảnh linh hoạt và truy vấn phương tiện CSS3, một phần mở rộng của quy tắc @media.

Wikipedia

Nói cách khác, các yếu tố như hình ảnh có thể được điều chỉnh cũng như bố cục của các yếu tố đó. Đây là video giải thích thiết kế đáp ứng là gì cũng như lý do tại sao công ty của bạn nên triển khai thiết kế này. Gần đây chúng tôi đã phát triển lại Highbridge trang web đáp ứng và hiện đang hoạt động Martech Zone để làm cái tương tự!

Phương pháp xây dựng một trang web đáp ứng hơi tẻ nhạt vì bạn cần phải có một hệ thống phân cấp cho các kiểu được tổ chức dựa trên kích thước của khung nhìn.

Các trình duyệt tự nhận thức về kích thước của chúng, vì vậy họ tải biểu định kiểu từ trên xuống dưới, truy vấn các kiểu áp dụng cho kích thước của màn hình. Điều này không có nghĩa là bạn phải thiết kế các bảng định kiểu khác nhau cho mọi kích thước màn hình, bạn chỉ cần thay đổi các yếu tố cần thiết.

Hoạt động với tâm lý ưu tiên thiết bị di động là tiêu chuẩn cơ bản ngày nay. Các thương hiệu tốt nhất không chỉ nghĩ về việc liệu trang web của họ có thân thiện với thiết bị di động hay không mà còn về trải nghiệm đầy đủ của khách hàng.

Lucinda Duncalfe, Giám đốc điều hành Monetate

Dưới đây là một đồ họa thông tin từ Monetate minh họa những lợi ích tiềm năng của việc tạo một thiết kế đáp ứng cho nhiều thiết bị:

Đồ họa thông tin thiết kế web đáp ứng

Nếu bạn muốn thấy một trang web đáp ứng đang hoạt động, hãy trỏ Google Chrome trình duyệt (tôi tin rằng Firefox có tính năng tương tự) để Highbridge. Bây giờ chọn View> Developer> Developer Tools từ menu. Thao tác này sẽ tải một loạt các công cụ ở cuối trình duyệt. Nhấp vào biểu tượng di động nhỏ ở ngoài cùng bên trái của thanh menu Công cụ dành cho nhà phát triển.

kiểm tra đáp ứng-chrome

Bạn có thể sử dụng các tùy chọn điều hướng ở trên cùng để thay đổi chế độ xem từ ngang sang dọc hoặc thậm chí chọn bất kỳ số lượng kích thước khung nhìn nào được lập trình trước. Bạn có thể phải tải lại trang, nhưng đó là công cụ tuyệt vời nhất trên thế giới để xác minh cài đặt đáp ứng của bạn và đảm bảo trang web của bạn trông đẹp trên tất cả các thiết bị!

3 Comments

  1. 1
  2. 2

    Cảm ơn Douglas rất nhiều cho bài báo giải thích tốt này. Tôi phải đồng ý với điều này mặc dù về mặt nội dung của mọi thứ. Đối với hầu hết các trang web, chúng tôi tạo bố cục đáp ứng sẽ không đủ. Chúng tôi cần nội dung đáp ứng. Nhưng đối với các trang web cơ bản hơn, chúng tôi chắc chắn sẽ sử dụng bài viết được ghi chép đầy đủ của bạn về cách xử lý điều này!

Bạn nghĩ gì?

Trang web này sử dụng Akismet để giảm spam. Tìm hiểu cách xử lý dữ liệu nhận xét của bạn.