Các nhà phát triển trang web sớm không phải lo lắng nhiều về việc thiết kế trang web vì người dùng sẽ xem chúng trên máy tính và các máy tính đó đã có độ phân giải màn hình cố định. Với cuộc cách mạng trên thiết bị di động, ngày càng có nhiều người đang tìm kiếm trên thiết bị di động của họ - máy tính bảng hoặc điện thoại di động - để biết thông tin. Do đó, nó trở nên cần thiết cho các nhà phát triển trang web, để tạo một trang web phục vụ mọi thứ từ Windows PC đến các thiết bị di động. Bài viết này giải thích sự khác biệt giữa thích ứng với thiết kế web đáp ứng và cho phép bạn quyết định cái nào tốt hơn cho bạn và tổ chức của bạn.
Thiết kế web đáp ứng
Thiết kế web đáp ứng liên quan đến việc mã hóa thêm và sử dụng cái gọi là “lưới chất lỏng”. Các con số được chỉ định bằng "phần trăm" thay vì số pixel chính xác. Điều này làm cho cùng một mã trang web hiển thị chính xác trên màn hình PC và trên màn hình điện thoại di động. Vì vậy, không có vấn đề làm thế nào bạn thay đổi kích cỡ màn hình của bạn, cùng một trang web được trình bày một cách dễ đọc. Đối với các trang web nhỏ hơn, văn bản và hình ảnh dễ dàng truyền với không gian màn hình và vừa với nó mà không vi phạm trang web hoặc không cắt xén các phần của trang web.
Một cách tiếp cận thiết kế web đáp ứng làm cho nó bắt buộc phải sử dụng CSS3 thay vì chỉ CSS. Nó cũng làm cho việc sử dụng các hình ảnh có thể mở rộng và lưới chất lỏng có chút khó khăn để mã hóa.
Thiết kế web thích ứng
Thiết kế web thích ứng cũng tập trung vào việc trình bày trang web có thể xem trên máy tính bảng và điện thoại di động ngoài màn hình PC. Cách tiếp cận này hơi khác một chút. Trong thiết kế web đáp ứng, thật linh hoạt cho phép lưu lượng văn bản miễn phí và định kích thước hình ảnh để vừa với các màn hình khác nhau.
Trong thiết kế web thích ứng, các nhà phát triển sử dụng các kích thước màn hình được xác định trước và mã tương ứng. Tức là, khi người dùng truy cập vào trang web, trang web sẽ xác định loại thiết bị đang được sử dụng và trình bày trang web được thiết kế cho kích thước màn hình thiết bị cụ thể đó. Nội dung có thể khác nhau giữa các thiết bị trong một số trường hợp.
Ví dụ, các nhà phát triển sẽ xem xét 1280 × 800 pixel cho PC, 8 ″ cho máy tính bảng và 5 ″ cho điện thoại di động. Mã đầu của thiết kế web thích ứng chứa nhận dạng màn hình. Nếu đó là PC, hãy hiển thị phiên bản PC của trang web. Nếu đó là một máy tính bảng 8 ″, hiển thị phiên bản máy tính bảng của trang web và tương tự như vậy, nếu thiết bị là điện thoại di động, hãy hiển thị phiên bản di động của trang web. Điều này đạt được bằng cách sử dụng câu lệnh “IF”, theo sau là các thứ nguyên khác nhau được xác định chính xác bằng pixel thay vì làm theo tỷ lệ phần trăm.
Nếu thiết bị mới đi qua với độ phân giải màn hình khác nhau, các nhà phát triển sẽ phải quay trở lại để mã hóa để kết hợp các độ phân giải màn hình mới hơn. Do đó, thiết kế web thích nghi có một số cơ hội cắt xén trên các thiết bị nhỏ hơn nếu các nhà phát triển không cẩn thận.
So với thiết kế web đáp ứng, thiết kế web thích ứng dễ dàng hơn trong việc viết mã và hầu hết các nhà phát triển đều chọn tùy chọn sau trên thiết kế web đáp ứng.
Responsive vs Thiết kế web thích nghi
Trang web đáp ứng khó mã hóa. Mã này phức tạp và sử dụng các giá trị phần trăm thay vì giá trị pixel cố định. Nó cần số lượng tập trung tốt để xây dựng trang web có quy mô theo kích thước màn hình của thiết bị. Ngược lại, việc tạo các trang web khác nhau cho các thiết bị khác nhau dễ dàng hơn như trường hợp trong thiết kế web thích nghi. Mặc dù công việc là nhiều hơn trong thiết kế web thích ứng khi các nhà phát triển sẽ tạo ra các trang web khác nhau cho các kích thước thiết bị khác nhau, nó vẫn dễ dàng hơn so với thiết kế web đáp ứng.
Vì có quá nhiều thiết bị di động trên thị trường, các nhà phát triển không nhất thiết phải bao gồm tất cả các loại độ phân giải màn hình. Điều đó dẫn đến việc cắt xén các trang web trong màn hình nhỏ hơn khi phương pháp tiếp cận thiết kế web thích ứng được sử dụng.
Các trang web thích nghi chậm tải một chút vì trang web trước tiên đã tìm ra thiết bị nào và độ phân giải màn hình nào đang được sử dụng. Dựa trên đó, phiên bản trang web có liên quan được tải trên màn hình của thiết bị. Trong trường hợp thiết kế web đáp ứng, mã duy nhất được sử dụng và nó được tự động thu nhỏ để vừa với màn hình thiết bị di động.
Bạn cũng có thể xem bài đăng này trên MSDN có tiêu đề Tại sao tôi thích thiết kế web thích ứng hơn thiết kế web đáp ứng.
CẬP NHẬT: Trang được liên kết không có sẵn trên Microsoft. Bạn có thể muốn kiểm tra SharePoint Responsive Web Design để thay thế.
