Thiết kế web mobile: Responsive hay Adaptive



Google khuyến khích responsive design (RWD). Google đã xếp hạng những website mobile-friendly cao hơn.Thực chất, nó không chỉ rõ rằng bạn nên sử dụng thiết kế Responsive, chỉ là một website được tối ưu hóa cho điện thoại.
Với suy nghĩ đó, hãy xem xét những ưu khuyết điểm của thiết kế Responsive và thiết kế Adaptive có liên quan đến hiệu suất và UX.» Responsive web design là gì ?
» Website của bạn có cần phải tương thích xem trên các thiết bị di động ?
» Những yếu tố sẽ giúp mobile web thành công

Một trong những cuộc tranh luận lớn nhất mà chúng ta nhìn thấy từ sự gia tăng về điện thoại di động là bất kể rằng bạn nên chọn phát triển một thiết kế web Responsive, Adaptive hay một mobile website độc lập ( với m.URL riêng của nó). Với mục đích của cuộc bàn luận này, chúng ta sẽ bỏ những mobile website độc lập, nó xuất hiện như giải pháp ưa chuộng nhất của các designer hoặc người kinh doanh khi họ cần sáng tạo một cách riêng biệt (tích lũy nhiều chi phí trả trước và chi phí duy trì hơn).

Điểm khác biệt là gì?

Đầu tiên, điểm khác biệt giữa thiết kế Responsive và thiết kế Adaptive là gì?

Đơn giản, responsive tức là đáp ứng được tất cả các kích thước màn hình bất kể mục tiêu thiết bị là gì. Responsive sử dụng chủ yếu CSS media queries để thay đổi phong cách dựa trên mục tiêu thiết bị như dạng màn hình, chiều rộng, chiều cao… và chỉ một trong số đó cần thiết đối với website để đáp ứng với những loại màn hình khác nhau.

Mặt khác, thiết kế Adaptive sử dụng những layout nhất. Những công việc này được thực hiện trên máy chủ, Adaptive website sẽ phát hiện kích thước màn hình và tải layout thích hợp cho nó – nói chung bạn sẽ thiết kế một web thích ứng với sáu chiều rộng màn hình phổ biến:

  1. 320
  2. 480
  3. 720
  4. 960
  5. 1200
  6. 1600

Nhìn bên ngoài, có vẻ Adaptive yêu cầu hành động nhiều hơn khi bạn phải thiết kế một bố trí tối thiểu cho 6 chiều rộng. Tuy nhiên, responsive sẽ phức tạp hơn khi sử dụng không đúng cách những thắc mắc của media queries (hoặc thực sự không sử dụng chúng) có thể tạo nên hàng núi những vấn đề trong hiên thị các yếu tố giao diện và hiệu suất.

Tại sao sử dụng Adaptive?

Adaptive hữu ích hơn cho việc trang bị thêm một website có sẵn để người dùng có thể xem nó dễ dàng hơn trên điện thoại.  Nó cho phép bạn điều khiển các thiết kế và phát triển những viewport đa dạng, cụ thể. Số lượng những viewport mà bạn chọn cho thiết kế của mình hoàn toàn phụ thuộc vào bạn, công ty của bạn và tổng ngân sách. Tuy nhiên, nó tạo cho bạn một khả năng điều khiển nhất định (ví dụ về nội dung và bố cục) mà bạn không thật sự cần dùng đến thiết kế responsive.

Nói chung, bạn sẽ bắt đầu bằng việc thiết kế một độ phân giải viewport thấp và làm việc theo cách của bạn để đảm bảo rằng thiết kế sẽ không bị hạn chế bởi nội dung.

Như đã nói ở trên, nó là tiêu chuẩn để thiết kế 6 độ phân giải. Tuy nhiên, bạn có thể đưa ra một quyết định sáng suốt hơn bằng cách nhìn vào phân tích web để tìm ra thiết bị sử dụng phổ biến nhất và sau đó thiết kế cho những viewport này.

Nếu bạn muốn thiết kế một web thích ứng ngay từ đầu, điều đó vẫn tốt. Bắt đầu lại bằng độ phân giải thấp nhất và làm việc theo cách của bạn. Bạn có thể sử dụng media queries để mở rộng bố trí cho một giải pháp viewport tốt hơn. Tuy nhiên, nếu bạn thiết kế cho quá nhiều độ phân giải, bạn có thể phát hiện ra rằng điều này dẫn đến việc bố trí “nhảy vào” khi thay đổi kích thước cửa sổ.

Tại sao sử dụng Responsive?

Phần lớn website ngày nay sử dụng Responsive, nó sẽ dễ dàng hơn đối với những designer và developer chưa có nhiều kinh nghiệm, nhờ vào những theme có sẵn trên các nền tảng CMS như WordPress, Joomla, Drupal.

Responsive không đòi hỏi quá nhiều sự điều khiển như Adaptive, nhưng chưa kể đến việc hình thành và duy trì. Responsive sử dụng tỷ lệ phần trăm để tạo ra nhiều cảm giác fluid hơn khi xác định tỷ lệ, nó có thể lại gây nên một bước nhảy khi một cửa sổ thu nhỏ lại. Ví dụ, trong hình ảnh dưới đây, bạn sử dụng tỷ lệ phần trăm của chiều rộng vậy nên góc nhìn sẽ được điều chỉnh phù hợp với mỗi người.

fluid

Với Responsive bạn phải thiết kế với suy nghĩ liên tục về layout trên tất cả các loại kích thước màn hình và đương nhiên nó có thể làm cho quá trình trở nên rắc rối và hơi phức tạp. Điều đó có nghĩa là bạn nên tập trung sáng tạo một viewport cho kích thước màn hình trung bình và bạn có thể sử dụng những media queries để điều chỉnh điều chỉnh độ phân giải cao hoặc thấp sau đó.

Về bản chất, Responsive thường được sử dụng cho các dự án mới, và adaptive dùng cho việc điều chỉnh.

Cân nhắc khi xem xét

Như đã nói ở trên, website responsive có thể chịu thiệt hại về tốc độ website nếu nó không được thực hiện đúng cách

Responsive cũng đòi hỏi nhiều hơn trong cách mã hóa để đảm bảo rằng các website phù hợp với mỗi kích thước màn hình. Nhưng những công việc phụ lại gây tranh cãi (so với thiết kế adaptive) vì thiết kế adaptive đòi hỏi bạn cần phải phát triển và duy trì mã HTML và CSS riêng biệt cho mỗi bố trí. Sửa đổi các website Adaptive cũng phức tạp hơn vì nó giống như bạn sẽ phải chắc chắn rằng mọi việc đều đang hoạt động trên website (như SEO, nội dung và liên kết).

Tất nhiên, bạn nên xem xét những trải nghiệm người dùng. Vì responsive cơ bản luôn đổi chỗ nội dung xung quanh để phù hợp với sự phân chia cửa sổ, bạn sẽ cần đặt sự chú ý đặc biệt đến visual hierarchy của thiết kế khi nó di chuyển xung quanh.

Theo Amy Schale, thiết kế Responsive thường biến thành việc giải quyết một câu đố – làm thế nào để tổ chức, sắp xếp những yếu tố trên một trang rộng hơn vừa với một trang nhỏ và dài hơn và ngược lại. Tuy nhiên, đảm bảo rằng các yếu tố phù hợp với mọi page là chưa đủ. Để một thiết kế responsive thành công, thiết kế phải phù hợp với mọi độ phân giải và kích thước của màn hình.

Cả 2 đều đòi hỏi làm việc với sự sáng tạo website cơ bản có một kích thước phù hợp với tất cả. Responsive có lợi hơn một chút, bạn sẽ không đi về phía trước, cần phải bỏ quá nhiều thời gian vào việc duy trì website.

Quyết định

Khi đi đến quyết định, mấu chốt nằm ở việc quan tâm đến đối tượng trước tiên không quan trọng kỹ thuật thiết kế mà bạn thực hiện. Một khi bạn biết được họ là ai và thiết bị họ dùng để truy cập vào website của bạn, nó sẽ dễ dàng để thiết kế trong suy nghĩ khi có ý tưởng về bố trí, nội dung…

design

Nó phụ thuộc phần lớn vào việc bạn có đang làm việc với một website đang hoạt động hay chỉ mới bắt đầu. thiết kế responsive trở thành kỹ thuật thiết kế go-on và điều đó có nghĩa là khoảng 1/8 website hiện nay sử dụng responsive (trong khi ít hoặc không có dữ liệu về số lượng sử dụng adaptive) Tỷ lệ áp dụng responsive cũng tăng nhanh và đã gần đạt được mức tương tự với những website độc lập trên điện thoại.

Với những điều này, nó an toàn để nói rằng responsive thường được sử dụng hơn vì những công việc đang diễn ra mà adaptive yêu cầu.

Tuy nhiên, nếu khách hàng hoặc công ty có một khoảng ngân sách, thì adaptive sẽ là lựa chọn tốt hơn, theo thử nghiệm của Catchpoint. Họ xây dựng 2 website trên WordPress, một sử dụng theme responsive TwentyFourteen chủ đề responsive và một cái khác dùng Wiziapp để tối ưu hóa cho Mobile

Về bản chất, mục đích sử dụng website trên từng thiết bị đôi khi sẽ không giống nhau.Do vậy, plugin mà họ lựa chọn sẽ dựa trên những nhu cầu người dùng trên thiết bị cụ thể.

Các kết quả trong thời gian tải cho thấy:

Bởi chưa hề có sự tối ưu hóa nào, do đó nó cho thấy rằng responsive website sẽ tải mọi thứ nó yêu cầu cho desktop. Nói chung, theme responsive không cung cấp một hiệu suất tốt nhất

Một lần nữa, điều này có thể khắc phục bằng media queries như ví dụ trên đây cho thấy tại sao thiết kế responsive – khi là một lựa chọn phổ biến – không phải luôn là lựa chọn tốt nhất cho điện thoại. Cho đến khi một điều gì đó tốt hơn xuất hiện, nó sẽ khó khăn để biết được những gì chúng ta cần làm hơn là học cách mã hóa và thực hiện một responsive website.

Kết luận

Thiết kế responsive vẫn là phổ biến, đó có thể là vì chúng ta chưa tìm được một giải pháp cho sự duy trì mà adaptive cần có. Thiết kế adaptive không bị bỏ quên, mặc dù tình yêu bên ngoài của website là responsive, vậy nên điều đó có thể – ít nhất là trong lý thuyết – rằng chúng ta sẽ thấy một số cải tiến nổi lên.

Nguồn: studio.uxpin.com

» 5 lý do áp dụng thiết kế web responsive năm 2014

Có thể bạn quan tâm
31/05/2016
1378