So sánh hai phương pháp tiếp cận khác nhau đối với thiết kế web đa thiết bị
Thiết kế web đáp ứng và thích ứng là cả hai phương pháp tạo trang web thân thiện với nhiều thiết bị hoạt động tốt trên nhiều kích thước màn hình khác nhau. Trong khi thiết kế web đáp ứng được Google khuyên dùng và là phương pháp phổ biến hơn trong hai cách tiếp cận này, cả hai phương pháp này cho thiết kế web đa thiết bị đều có điểm mạnh và điểm yếu của chúng.
Chúng ta hãy xem xét sự khác biệt giữa thiết kế web đáp ứng và thích ứng, đặc biệt tập trung vào các lĩnh vực chính sau:
- Dễ phát triển
- Mức độ kiểm soát bạn có trên thiết kế
- Bề rộng của hỗ trợ thiết bị / màn hình
- Làm thế nào trong tương lai thân thiện với giải pháp là
- Tốc độ tải xuống chung và hiệu suất trang web
Một số định nghĩa
Trước khi chúng tôi tham gia vào các so sánh song song về thiết kế web đáp ứng và thích ứng, hãy dành một chút thời gian để xem xét định nghĩa cấp cao về hai phương pháp này.
Các trang web đáp ứng có bố cục lỏng thay đổi và điều chỉnh bất kể kích thước màn hình đang được sử dụng. Truy vấn phương tiện cho phép các trang web đáp ứng thậm chí thay đổi "khi đang di chuyển" nếu trình duyệt được thay đổi kích thước.
Thiết kế thích ứng sử dụng các kích thước cố định dựa trên các điểm ngắt được xác định trước để phân phối phiên bản bố cục phù hợp nhất cho kích thước màn hình được phát hiện khi trang tải lần đầu tiên.
Với những định nghĩa rộng đó tại chỗ, hãy chuyển sang các lĩnh vực trọng tâm chính của chúng tôi.
Dễ phát triển
Sự khác biệt đáng kể nhất giữa thiết kế web đáp ứng và thích ứng là cách các giải pháp này được áp dụng cho một trang web. Vì thiết kế đáp ứng tạo bố cục hoàn toàn linh hoạt, nên tốt nhất nên sử dụng các dự án mà bạn đang thiết kế lại trang web từ đầu . Cố gắng trang bị thêm mã của trang web hiện tại để trở thành đáp ứng thường là một vấn đề mệt mỏi vì bạn chỉ đơn giản là không có mức kiểm soát mà bạn sẽ có nếu bạn đang phát triển mã đó từ đầu và thiết kế đáp ứng cho các giai đoạn sớm nhất của quá trình đó . Điều này có nghĩa là khi bạn trang bị thêm một trang web để đáp ứng, bạn buộc phải thực hiện các thỏa hiệp để duy trì bên trong đó codebase hiện có.
Nếu bạn đang làm việc với trang web có chiều rộng cố định hiện tại, phương pháp tiếp cận thích ứng có nghĩa là bạn có thể để kích thước trang web được thiết kế nguyên vẹn và thêm vào các điểm ngắt thích ứng bổ sung nếu cần. Trong một số trường hợp, nếu ngân sách của dự án nhỏ và nếu nó chỉ chứa một lượng nhỏ công việc phát triển, bạn có thể chọn chỉ thêm các điểm ngắt thích ứng mới cho kích thước màn hình / điện thoại di động nhỏ hơn. Điều này có nghĩa là bạn sẽ cho phép các màn hình lớn hơn sử dụng cùng một bố cục - có lẽ là phiên bản 960 điểm ngắt mà trang web đó có thể được thiết kế ban đầu.
Ưu điểm của phương pháp tiếp cận thích ứng là bạn có thể tận dụng tốt hơn mã của trang web hiện tại, nhưng một trong những nhược điểm là bạn đang tạo các mẫu bố cục khác nhau cho mỗi điểm dừng bạn chọn để hỗ trợ. Điều này sẽ có tác động đến khối lượng công việc cần thiết để phát triển và duy trì giải pháp này trong dài hạn.
Kiểm soát thiết kế
Một trong những điểm mạnh của các trang web đáp ứng là tính lưu động của chúng cho phép chúng thích nghi và hỗ trợ tất cả các kích thước màn hình thay vì chỉ các điểm ngắt được xác định trước trong phương pháp thích ứng. Tuy nhiên, thực tế là các trang web đáp ứng có thể trông tuyệt vời ở một số kích thước màn hình chính (thường là kích thước tương ứng với các thiết bị phổ biến có sẵn trên thị trường), nhưng thiết kế trực quan thường phân tích giữa các độ phân giải phổ biến đó.
Ví dụ: trang web có thể trông tuyệt vời ở bố cục màn hình rộng 1400 pixel, kích thước giữa màn hình là 960 pixel và màn hình nhỏ có độ phân giải 480 pixel, nhưng về trạng thái ở giữa các kích thước này thì sao? Là một nhà thiết kế, bạn có ít hoặc không có quyền kiểm soát các kích thước ở giữa này và giao diện trực quan của trang ở các kích thước đó thường ít hơn lý tưởng.
Với trang web thích ứng, bạn có nhiều quyền kiểm soát thiết kế hơn đối với các bố cục khác nhau đang được sử dụng vì chúng là kích thước cố định dựa trên điểm ngắt được thiết lập của bạn. Những trạng thái khó xử ở giữa đó không còn là vấn đề nữa bởi vì bạn đã thiết kế cẩn thận từng "cái nhìn" (nghĩa là mỗi màn hình của điểm ngắt) sẽ được gửi tới khách truy cập.
Như hấp dẫn như mức độ kiểm soát thiết kế này có thể âm thanh, bạn phải biết rằng nó đi kèm với một mức giá. Có, bạn có toàn quyền kiểm soát giao diện của mọi điểm dừng, nhưng điều đó có nghĩa là bạn phải đầu tư thời gian thiết kế cần thiết để thiết kế cho từng bố cục độc đáo đó. Bạn càng muốn thiết kế nhiều điểm ngắt, bạn càng cần phải tốn nhiều thời gian hơn cho quá trình đó.
Chiều rộng hỗ trợ
Cả thiết kế web đáp ứng và thích ứng đều được hỗ trợ khá mạnh mẽ, đặc biệt là trong các trình duyệt hiện đại.
Các trang web thích ứng yêu cầu các thành phần phía máy chủ hoặc Javascript để phát hiện kích thước màn hình. Rõ ràng, nếu một trang web thích ứng yêu cầu Javascript, điều đó có nghĩa là một trình duyệt cần phải bật nó để trang web đó hoạt động chính xác. Đó có thể không phải là mối lo ngại lớn đối với bạn vì hầu hết mọi người sẽ có Javascript trong trình duyệt của họ, nhưng bất kỳ khi nào một trang web có sự phụ thuộc quan trọng vào bất cứ điều gì, cần lưu ý.
Các trang web đáp ứng và các truy vấn truyền thông cung cấp năng lượng cho chúng sẽ hoạt động tốt trong tất cả các trình duyệt hiện đại. Các vấn đề duy nhất bạn sẽ gặp phải là các phiên bản Internet Explorer cũ nhất kể từ phiên bản 8 trở xuống không hỗ trợ truy vấn phương tiện . Để làm việc xung quanh điều này , một polyfill Javascript thường được sử dụng , có nghĩa là có một sự phụ thuộc vào Javascript ở đây là tốt, ít nhất là cho các phiên bản cũ của IE. Một lần nữa, điều này có thể không phải là một mối quan tâm đối với bạn, đặc biệt nếu phân tích trang web của bạn cho thấy rằng bạn không nhận được nhiều khách truy cập bằng cách sử dụng các phiên bản trình duyệt cũ hơn.
Tương lai thân thiện
Bản chất chất lỏng của các trang web đáp ứng mang lại cho họ một lợi thế so với các trang web thích ứng khi nói đến sự thân thiện trong tương lai. Điều này là do các trang web đáp ứng đó không được xây dựng để chỉ chứa một bộ các điểm ngắt được thiết lập trước đây. Họ thích nghi để phù hợp với tất cả các màn hình , bao gồm cả những màn hình có thể không thực sự có mặt trên thị trường hiện nay. Điều này có nghĩa là các trang web đáp ứng sẽ không cần phải "cố định" nếu độ phân giải màn hình mới đột nhiên trở nên phổ biến.
Nhìn vào sự đa dạng đáng kinh ngạc trong bối cảnh thiết bị (tính đến tháng 8 năm 2015, có hơn 24.000 thiết bị Android riêng biệt trên thị trường), có trang web phù hợp nhất với phạm vi màn hình rộng này là điều cực kỳ quan trọng cho sự thân thiện trong tương lai. Điều này là do cảnh quan đó khó có khả năng nhận được bất kỳ sự đa dạng nào trong tương lai, có nghĩa là thiết kế cho các màn hình hoặc kích thước cụ thể sẽ trở thành không thể, nếu chúng ta chưa đạt được thực tế đó.
Ở phía bên kia của kịch bản so sánh này, nếu một trang web thích nghi và nó không chứa các độ phân giải mới có thể trở nên quan trọng trên thị trường, thì bạn có thể buộc phải thêm điểm ngắt đó vào các trang web mà bạn đã tạo. Điều này cho biết thêm thời gian thiết kế và phát triển vào các dự án và điều đó có nghĩa là các trang web thích ứng phải được giám sát liên tục để đảm bảo rằng không có điểm ngắt mới nào được đưa vào thị trường phải được thêm vào trang web. Một lần nữa, với sự đa dạng về thiết bị như vậy, phải liên tục kiểm tra kích thước mới và có thể tiếp cận chúng với các điểm ngắt mới là một thách thức đang diễn ra sẽ ảnh hưởng đến công việc bạn phải hỗ trợ trang web và chi phí bảo trì đó công ty hoặc tổ chức mà trang web dành cho ai.
Hiệu suất
Thiết kế web đáp ứng từ lâu đã bị cáo buộc (không công bằng vì vậy trong nhiều trường hợp) là một giải pháp kém từ quan điểm về tốc độ / hiệu suất tải xuống. Điều này phần lớn là do thực tế là trong những ngày đầu của phương pháp này, nhiều nhà thiết kế web chỉ đơn giản là tacked truy vấn phương tiện truyền thông màn hình nhỏ vào CSS hiện tại của một trang web. Điều này buộc các hình ảnh và tài nguyên dành cho màn hình lớn hơn được phân phối tới tất cả các thiết bị, ngay cả khi những màn hình nhỏ hơn không sử dụng chúng trong bố cục cuối cùng của chúng. Thiết kế đáp ứng đã đi một chặng đường dài kể từ những ngày đó và thực tế là các trang web đáp ứng chất lượng ngày nay không bị các vấn đề về hiệu năng.
Tốc độ tải xuống chậm và các trang web cồng kềnh không phải là vấn đề trang web đáp ứng - đó là sự cố có thể tìm thấy trên tất cả các trang web. Hình ảnh quá nặng, nguồn cấp dữ liệu từ truyền thông xã hội, tập lệnh quá mức và nhiều nội dung khác cũng như cân nhắc trang web nhưng cả trang web đáp ứng và thích ứng đều có thể được tải nhanh. Tất nhiên , chúng cũng có thể được xây dựng theo cách không làm cho ưu tiên hiệu suất, nhưng đây không phải là đặc điểm của chính giải pháp, mà là sự phản ánh của nhóm đã tham gia vào sự phát triển của chính trang đó.
Ngoài bố cục
Một trong những khía cạnh hấp dẫn nhất của thiết kế web thích ứng là bạn không chỉ có quyền kiểm soát thiết kế của trang web cho các điểm ngắt đặt, mà còn là các tài nguyên được phân phối cho các phiên bản trang web đó. Ví dụ, điều này có nghĩa là hình ảnh võng mạc chỉ có thể được gửi đến các thiết bị võng mạc, trong khi màn hình không có võng mạc có được hình ảnh phù hợp hơn có kích thước tệp nhỏ hơn. Các tài nguyên trang web khác (các tệp Javascript, kiểu CSS, v.v.) chỉ có thể được gửi thông minh khi chúng cần và sẽ được sử dụng.
Việc sử dụng thiết kế web thích ứng này vượt xa phương trình đơn giản của “nếu bạn đang trang bị thêm một trang web, thích ứng có thể là một cách tiếp cận dễ sử dụng hơn.” Tất cả các trang web, bao gồm thiết kế lại hoàn chỉnh, có thể hưởng lợi từ cách tiếp cận thông minh hơn cho trải nghiệm phù hợp hơn.
Kịch bản này cho thấy bản chất sắc thái của cuộc tranh luận “đáp ứng và thích ứng” này. Mặc dù đúng là một cách tiếp cận thích ứng có thể phù hợp hơn đáp ứng cho các trang web được cải thiện, nó cũng có thể là một giải pháp tuyệt vời cho việc thiết kế lại hoàn toàn. Tương tự, trong một số trường hợp, phương pháp tiếp cận đáp ứng có thể được thêm vào cơ sở mã của trang web hiện tại, tạo cho trang web đó tất cả các lợi ích của phương pháp tiếp cận hoàn toàn đáp ứng.
Phương pháp nào tốt hơn?
Khi nói đến thiết kế web đáp ứng và thích ứng, không có "người chiến thắng" rõ ràng, mặc dù đáp ứng chắc chắn là cách tiếp cận phổ biến hơn. Trong thực tế, cách tiếp cận "tốt hơn" phụ thuộc vào nhu cầu của một dự án cụ thể. Hơn nữa, điều này không cần phải là một tình huống "hoặc là". Có nhiều chuyên gia web đang xây dựng các trang web kết hợp tốt nhất thiết kế web đáp ứng (chiều rộng chất lỏng, hỗ trợ trong tương lai) với những điểm mạnh của thiết kế thích ứng (kiểm soát thiết kế tốt hơn, tải thông minh tài nguyên trang web).
Thường được gọi là RESS (Thiết kế web đáp ứng với các thành phần phía máy chủ), cách tiếp cận này cho thấy rằng thực sự không có "một kích thước phù hợp với tất cả các giải pháp." Cả hai thiết kế web đáp ứng và thích ứng đều có điểm mạnh và thách thức của họ, vì vậy bạn cần xác định cái nào sẽ làm việc tốt nhất cho dự án cụ thể của bạn, hoặc nếu một giải pháp lai có thể thực sự phù hợp với bạn nhất.