Tin tức và phân tích của tất cả các thiết bị di động

Thiết kế web di động: đáp ứng vs thích ứng

2017 là năm đầu tiên trong lịch sử internet có lưu lượng truy cập trang web từ smartphones và máy tính bảng vượt quá điều đó từ các thiết bị không di động trên toàn thế giới. Có lẽ không có gì đáng ngạc nhiên, con số này đã tăng trở lại vào năm 2018 và có khả năng sẽ tiếp tục xu hướng tăng lên trong một thời gian tới.

Để phản ánh sự phổ biến ngày càng tăng của lưu lượng truy cập di động, các kỹ thuật trong thiết kế web đã phải thay đổi đáng kể. Các công cụ tìm kiếm như Google đã bắt đầu lập chỉ mục chủ yếu các phiên bản di động của trang web và sẽ chủ động xử phạt các trang web không tương thích với màn hình nhỏ hơn. Do đó, điều quan trọng hơn bao giờ hết đối với các doanh nghiệp là có một trang web được tối ưu hóa cho thiết bị di động.

Hai phương pháp tối ưu hóa di động chính được gọi là thiết kế web đáp ứng và thiết kế web thích ứng. Trong khi cả hai phương pháp đều phục vụ cùng một mục đích, việc triển khai và kết quả của chúng có thể khác nhau rất nhiều.

Sự khác biệt giữa đáp ứng và thích ứng là gì?

Một số dự án có thể phù hợp hơn với thiết kế web đáp ứng, trong khi những dự án khác sẽ phù hợp hơn với thiết kế web thích ứng. Nhưng làm thế nào để họ so sánh?

Về cơ bản, sự khác biệt giữa thiết kế web đáp ứng và thích ứng là ở tính trôi chảy. Nếu bạn lấy trình duyệt web của mình và kéo các góc để điều chỉnh kích thước của cửa sổ, hãy lưu ý những gì xảy ra với nội dung của trang.

Nếu văn bản, hộp và hình ảnh giảm xuống hoặc xáo trộn xung quanh một cách trôi chảy khi bạn giảm kích thước của cửa sổ, thì thiết kế có thể đáp ứng. Tuy nhiên, nếu không có gì thay đổi cho đến khi bạn đạt được một số điểm nhảy nhất định, thì – nơi mọi thứ chuyển động đột ngột cùng nhau – thì thiết kế rất có thể thích ứng. (Mặc dù đáng chú ý là thiết kế web đáp ứng cũng có thể có điểm nhảy).

Thiết kế web thích ứng

Khi xây dựng một trang web thích ứng, các nhà phát triển thường sẽ tạo ra một số bố cục tĩnh khác nhau cho trang và yêu cầu trang web tải trang web có liên quan dựa trên độ phân giải hoặc kích thước màn hình mà trang đang được xem. Ví dụ: có thể có bố cục xác định được xây dựng cho chiều rộng màn hình 320 pixel, hoặc 960 pixel hoặc 1200 pixel, v.v. Sau đó, người dùng sẽ thấy một phiên bản trang được tối ưu hóa cho thiết bị khác nếu họ truy cập trang web trên iPad hoặc Google Pixel hoặc trên máy tính để bàn có màn hình rộng.

Một nhược điểm của phương pháp này là các thiết bị mới, và do đó kích thước màn hình mới, đang được phát triển và phát hành liên tục – chỉ cần nghĩ xem kích thước của màn hình iPhone đã thay đổi bao nhiêu lần trong những năm qua. Với thiết kế thích ứng, bạn phải xây dựng bố cục mới cho từng thiết bị riêng lẻ và công việc đó cộng lại. Bạn chỉ có thể ước chừng bố cục được phục vụ càng gần càng tốt với một thiết bị hiện có, nhưng điều đó khiến bạn mở ra những điểm không hoàn hảo và không nhất quán. Và không ai muốn điều đó.

Thiết kế web đáp ứng

Giải pháp cho vấn đề đó là xây dựng một trang web với thiết kế web đáp ứng. Một thiết kế đáp ứng được xây dựng từ một bố cục và thu nhỏ (hoặc lên) một cách thích hợp dựa trên độ phân giải của thiết bị thông qua các kỹ thuật như truy vấn phương tiện và thao tác CSS. Ví dụ: bạn có thể xây dựng nó để hình ảnh trên một trang luôn chiếm 30% trang web, bất kể chiều rộng của màn hình và 70% tỷ lệ khác cũng tương ứng. Bằng cách này, bạn đã đảm bảo nắm bắt được tất cả các khả năng và phục vụ một trang web mà tối ưu hóa cho từng thiết bị.

Mặc dù nghe có vẻ rất nhiều công việc để thiết kế, giả sử, sáu hoặc bảy bố cục riêng lẻ với cách tiếp cận thích ứng, cách tiếp cận đáp ứng cũng rất nhiều công việc vì về mặt lý thuyết bạn đang thiết kế bố cục vô hạn cho kích thước màn hình vô hạn và điều đó đòi hỏi toàn bộ nhiều công việc mã hơn – lúc đầu, ít nhất.

Một yếu tố quan trọng cần lưu ý là một khi trang web hoạt động, nó sẽ dễ dàng duy trì thiết kế đáp ứng hơn là một trang web thích ứng. Điều này là do bất kỳ thay đổi nào đối với nội dung của trang web phản hồi chỉ cần được thực hiện cho một phiên bản và nếu việc triển khai thành công, các thay đổi sẽ hoạt động trơn tru trên tất cả các độ phân giải. Cập nhật một thiết kế thích ứng là công việc nhiều hơn, bởi vì bạn phải kiểm tra tất cả các lần lặp khác nhau của trang web để đảm bảo rằng không có gì phá vỡ trên nhiều bố cục của bạn. Vì vậy, mặc dù nó có nhiều công việc hơn ngay từ đầu, nhưng nỗ lực chung của một thiết kế đáp ứng được đối trọng bởi ít nhu cầu bảo trì liên tục.

Trang bị lại và bắt đầu từ đầu

Bởi vì điều này, nếu bạn đang bắt đầu một trang web mới từ đầu, thiết kế web đáp ứng thường là lựa chọn tốt hơn. Tuy nhiên, nếu bạn chỉ muốn trang bị thêm một trang web hiện có với tối ưu hóa cho thiết bị di động, một cách tiếp cận thích ứng sẽ dễ thực hiện hơn và bạn sẽ thấy nhiều lợi ích như vậy.

Nếu bạn có một trang web hiện có và đang tìm cách trang bị thêm một cách tiếp cận thích ứng, thì đó là một ý tưởng tốt để thực hiện kiểm toán thiết bị để xem thiết bị nào phổ biến nhất trong số khách truy cập của bạn. Phần mềm như Google Analytics có thể cho bạn thấy thiết bị nào đang được sử dụng để truy cập trang web của bạn, cung cấp cho bạn cơ sở để bạn có thể bắt đầu xây dựng bố cục dành riêng cho thiết bị đầu tiên của mình.

Điều đáng ghi nhớ là hầu hết các công ty lưu trữ hiện cung cấp dịch vụ xây dựng trang web DIY nơi bạn có thể xây dựng trang web chỉ bằng cách chọn từ một trong nhiều mẫu và kéo và thả các thành phần vào vị trí. Nếu bạn may mắn đủ điều kiện để xây dựng một trang web hoàn toàn mới, nhưng don don có ngân sách cho một trang web được xây dựng chuyên nghiệp, thì những dịch vụ này là một nơi tuyệt vời để có được một trang web mới và chạy nhanh chóng. Hơn thế nữa, các mẫu của họ thường luôn đáp ứng, vì vậy tất cả công việc khó khăn đã được thực hiện cho bạn.

Responsive vs Adaptive: bạn nên sử dụng phương pháp nào?

Cuối cùng, phương pháp lý tưởng sẽ đến với trường hợp sử dụng riêng lẻ. Nếu bạn đang bắt đầu một trang web từ đầu, hãy xem xét một cách tiếp cận đáp ứng từ giải pháp xây dựng trang web của công ty lưu trữ hoặc thuê một nhà phát triển để xây dựng cho bạn một cái gì đó thực sự độc đáo. Nếu bạn chỉ cố gắng làm cho trang web hiện tại của mình hoạt động trên màn hình nhỏ hơn, một cách tiếp cận thích ứng có thể là cách tiếp cận thực tế nhất cho bạn.

Neal Thoms, người quản lý chiến dịch, Fasthosts