Phát hành NukeViet 22.03.2024

Web tương thích mobile: Responsive và Mobile version - ưu nhược điểm của từng phương án

Thứ bảy - 01/08/2015 08:57

Web tương thích mobile: Responsive và Mobile version - ưu nhược điểm của từng phương án

Kể từ tháng 4 năm 2015, Google đã chính thức áp dụng thuật toán MobileGeddon nhắm vào việc các trang web có giao diện “thân thiện với thiết bị di động: mobile-friendly” hay không để xếp thứ hạng các website. Hiện có 2 phương pháp để giải quyết câu chuyện tương thích di động cho các website là Responsive và Mobile version, bài viết này sẽ phân tích ưu nhược điểm của từng phương pháp để các bạn lựa chọn phù hợp.
Câu chuyện bây giờ không phải là chuẩn web nào? Website có tương thích trình duyệt FireFox, Chrome hay chỉ tương thích với Internet Explorer? Mà việc đáp ứng các chuẩn tương thích các trình duyệt phổ biến như FireFox, Chrome, Opera, Safari và Internet Explorer (phiên bản 9.0 trở lên)... thậm chí là trên các hệ điều hành khác nhau, đã trở thành câu chuyện đương nhiên.

Vấn đề tiếp theo là sự tương thích trên nhiều loại màn hình thiết bị với đa dạng kích cỡ khác nhau. Từ màn hình mobile bé xíu đến loại vừa vừa, từ máy tính bảng 7 inch đến loại màn hình 11inch, rồi gần đây là phablet (điện thoại lai máy tính bảng) như vậy là gần như kích cỡ màn hình loại nào cũng có, kèm theo cũng chừng ấy độ phân giải màn hình khác nhau. Câu chuyện làm sao để website có thể "đẹp trên mọi loại thiết bị" đã khiến cho các nhà thiết kế web liên tục phải đau đầu để nghiên cứu. Và lượng người sử dụng thiết bị di động quá lớn khiến cả ông lớn như Google cũng phải quan tâm đến vấn đề website có tương thích các thiết bị di động hay không. Do đó tương thích di động cũng trở thành câu chuyện bắt buộc phải làm (trừ các website của các cơ quan đoàn thể vốn sử dụng các công nghệ và tiêu chuẩn từ cách đây hàng chục năm).
 

Responsive web design hay Mobile version?

Chuẩn Wap đã trở thành công nghệ "bỏ đi" vì nhiều lý do, trong đó có sự phổ biến của các thiết bị di động thông minh với cấu hình ngày càng mạnh, thừa sức hỗ trợ các trình duyệt web HTML tiêu chuẩn. Bài viết này cũng không đề cập kỹ đến app mobile (ứng dụng mobile sử dụng riêng cho 1 website) vì nó là một câu chuyện hoàn toàn khác. Lý do là vì ứng dụng mobile phải giải quyết câu chuyện tương thích trên từng nền tảng ứng dụng hệ điều hành, nó cũng không thông qua trình duyệt để hiển thị dưới dạng một nền tảng như là website. Như vậy chúng ta chỉ xét phương pháp để giải quyết câu chuyện tương thích di động cho các website là Responsive và Mobile version.

Responsive web design - ưu và nhược điểm

Responsive web design (thiết kế web site với giao diện đa ứng) là một phương pháp thiết kế website mà khả năng tương thích các thiết bị di động không phụ thuộc vào đáp ứng từ phía server mà do phía thiết bị đầu cuối quyết định. Tùy theo màn hình thiết bị, giao diện web sẽ trình bày cho phù hợp kích thước và độ phân giải màn hình, việc này chủ yếu do HTML, CSS và javascript quyết định. Việc trình bày như thế nào hoàn toàn do người thiết kế (đồ họa) làm, hoàn toàn không liên quan đến lập trình hệ thống.

Từ năm 2004, những tiền đề đầu tiên để hình thành kỹ thuật này đã được đề cập đến nhưng mãi đến năm 2010, Responsive web design [1] mới được áp dụng rộng rãi khi được Ethan Marcotte đề cập đến như một kỹ thuật tiêu chuẩn [2].

Năm 2012, Google cũng phát hành tài liệu về Responsive Design [3], kỹ thuật Responsive web design ngày càng được hoàn thiện và một loạt các framework (khung ứng dụng) hỗ trợ chuyên biệt cho việc xây dựng các Responsive website đã ra đời mà điển hình là Bootstrap [4]. Sau này, nó cũng được đưa vào trong các hệ quản trị nội dung (CMS) như NukeViet CMS như một thành phần được hỗ trợ mặc định trong các CMS.

Ưu điểm

Responsive web design bản chất là một giao diện hỗ trợ nhiều màn hình thiết bị. Responsive web design có ưu điểm là dễ thiết kế nhất quán và cho trải nghiệm tốt đối với người dùng bởi vì sử dụng 1 giao diện. Hơn thế nữa, Responsive web design là kỹ thuật về thiết kế, công việc 100% phụ thuộc người thiết kế và không liên quan đến code hệ thống cho nên không đòi hỏi can thiệp vào sâu trong nhân hệ thống như đối với việc tạo mobile version - vốn đòi hỏi kỹ thuật lập trình cao và rất khó can thiệp nếu hệ thống không hỗ trợ sẵn, nhất là khi bạn không phải người lập trình ra hệ thống đó.

Responsive web design không thay đổi đường link do đó hiệu ứng truy cập cũng như các chỉ số đánh giá SEO liên quan đến lượng truy cập gần như không bị ảnh hưởng.

Nhược điểm

Responsive web design phụ thuộc người thiết kế đồ họa nhiều, vốn đòi hỏi kỹ thuật đồ họa tương đối tốt, đặc biệt là kỹ thuật HTML, CSS do đó không phải ai cũng dễ dàng làm được. Mặc dù gần đây việc ra đời các framework như Bootstrap đã giúp tiết kiệm nhiều công sức, tuy nhiên nó cũng không phải việc dễ dàng.

Responsive web design bản chất là giao diện web đầy đủ, khi truy cập bằng mobile, các thành phần không được hiển thị vẫn phải nạp về khiến cho website rất nặng, tốn nhiều dung lượng, băng thông cũng như CPU của thiết bị.

Website sử dụng công nghệ Responsive không phù hợp để truy cập trên những thiết bị cấu hình thấp và đời cũ. Thậm chí các thiết bị không phải Smartphone gần như không hỗ trợ. Và không phải website lúc nào cũng được hiển thị đẹp giống nhau khi truy cập bằng các Smartphone khác nhau, thậm chí là có thể có những lỗi hiển thị không biết trước do không thể kiểm tra trên các thiết bị này.

Nếu không thể tắt chế độ Responsive, người truy cập web rất có thể không tìm thấy một menu nào đó mà họ quen dùng trên máy tính. Do đó kinh nghiệm sử dụng trên máy tính gần như không thể áp dụng trên mobile.

Việc sửa chữa và bảo trì website khó khăn khi bạn làm thứ gì cũng phải đòi hỏi tương thích với nhiều loại màn hình.

Vì không được thiết kế tối ưu trên từng thiết bị cho nên chỉ số Pagespeed Insights trên mobile thường thấp.

Tóm tắt
- Responsive web design cho trải nghiệm người dùng thú vị trên smartphone.
- Responsive web design dễ triển khai cho các website nhỏ, website càng lớn, độ phức tạp càng tăng gấp bội.
- Responsive web design giúp bạn giảm số lượng web phải bảo trì nhưng việc thiết kế và sửa chữa phức tạp, đòi hỏi kỹ thuật thiết kế cao hơn kỹ thuật code.
- Website tải chậm.
Responsive web design
 

Mobile version

Khi Responsive web design chưa phát triển thì phương pháp sử dụng một phiên bản mobile chuyên biệt được áp dụng cho các thiết bị được xác định là di động. Khi đó 2 cách thể hiện:

Cách thứ nhất phổ biến trong giai đoạn đầu: phiên bản PC và mobile sử dụng 2 địa chỉ truy cập khác nhau (việc chọn phiên bản có thể cưỡng bức hoặc chuyển đổi), chế độ sử dụng 2 đường link khác nhau gọi là Separate URLs (URL riêng biệt). Sử dụng phương pháp này thì trong 1 trong 2 phiên bản phải khai báo xem phiên bản nào là bản chính để các máy chủ tìm kiếm hiểu được (xem nguồn tham khảo [8])

Cách thứ 2: Sử dụng chung 1 đường link nhưng giao diện khác nhau. Việc này do server xử lý và trả về kết quả. Cách này gọi là Dynamic Serving (tạm dịch là: phục vụ động). Cách thứ 2 này được sử dụng nhiều trong thời gian gần đây, khi công nghệ CMS ngày càng phát triển thì việc tích hợp các phiên bản khác nhau trong cùng một bộ code giúp giảm bớt bảo trì code từ phía máy chủ (nhưng không làm giảm việc bảo trì số lượng giao diện).

Những hệ thống CMS hiện đại như NukeViet CMS hỗ trợ mặc định chế độ Dynamic Serving để tránh cho người sử dụng phải mất công cấu hình nhiều, việc chuyển sang Separate URLs chỉ đơn giản là gắn thêm một địa chỉ khác và cấu hình cho việc nhận diện địa chỉ đó là website di động.

Ưu điểm

Website có mobile version riêng giúp cho việc xử lý dữ liệu trên phiên bản mobile được tối ưu, không phải nạp các thành phần HTML, CSS và javascript dư thừa do đó tăng tốc độ tải trang. Không những thế, dễ dàng cho việc được các thiết bị di động đời cũ (ví dụ như symbian os) hỗ trợ mà không sợ bị vỡ giao diện.

Việc xác định rõ loại thiết bị cũng giảm rắc rối trong việc thiết kế các thành phần đồ họa, không đòi hỏi người thiết kế giao diện phải có trình độ quá cao đồng thời cũng giúp hạn chế phát sinh lỗi và dễ kiểm soát lỗi, sửa lỗi dễ dàng. Điều này càng thấy rõ khi website của bạn là những hệ thống phức tạp.

Nhược điểm

Website có mobile version riêng làm tăng thêm số lượng giao diện, khiến việc bảo trì cũng khá mất công.

Website có mobile version riêng đòi hỏi phải hỗ trợ từ code hệ thống chạy trên server do đó sẽ không dễ dàng để làm cho những hệ thống mà bạn không làm chủ hoặc có thể can thiệp vào code.

Để hỗ trợ chính xác càng nhiều thiết bị càng đòi hỏi phải làm nhiều giao diện, nhưng thông thường người ta chỉ làm 2 loại là giao diện PC và Mobile, trong khi kích cỡ màn hình thiết bị cùng được phân loại là mobile nhưng lại khá đa dạng, có thiết bị độ phân giải ngang ngửa Laptop/PC do đó việc gán giao diện mobile trong một số trường hợp lại không còn phù hợp nữa.

Bảng phân biệt các phương pháp

 
Cấu hình URL được giữ nguyên hay không? HTML được giữ nguyên hay không?
Responsive Web Design Yes Yes
Dynamic Serving Yes No
Separate URLs No No

Xem thêm hướng dẫn Chọn cấu hình website cho điện thoại di động của Google [7] Tổng quan về Mobile Web Design [8] và so sánh Responsive với Mobile Version [9]

Lựa chọn phương pháp nào?

Mỗi phương pháp sẽ có một ưu nhược điểm riêng. Việc quan trọng là chọn cho phù hợp với trường hợp sử dụng của mình. Linh hoạt chọn 2 phương pháp và kết hợp các kỹ thuật để phát huy tính ưu việt của 2 phương pháp cũng như hạn chế các khuyết điểm sẽ giúp bạn có một website như ý.

Trong bài viết sau chúng tôi sẽ phân tích một lựa chọn tối ưu sẽ được áp dụng cho NukeViet 4.0 để phát huy ưu điểm của các phương pháp cũng như giúp người truy cập linh hoạt lựa chọn phương án giao diện phù hợp.

Nguồn:
[1] https://en.wikipedia.org/wiki/Responsive_web_design#History
[2] http://alistapart.com/article/responsive-web-design
[3] http://googlewebmastercentral.blogspot.com/2012/04/responsive-design-harnessing-power-of.html
[4] http://getbootstrap.com/
[5] https://developers.google.com/webmasters/smartphone-sites/
[6] https://moz.com/blog/seo-of-responsive-web-design
[7]: https://developers.google.com/search/mobile-sites/mobile-seo/?hl=vi
[8] http://www.manseo.com/tong-quan-ve-mobile-web-design.html
[9]: http://allwebcodesign.com/responsive-vs-mobile-sub.htm

Tác giả: Nguyễn Thế Hùng

Tổng số điểm của bài viết là: 25 trong 5 đánh giá

Xếp hạng: 5 - 5 phiếu bầu
Click để đánh giá bài viết

Những tin mới hơn

Những tin cũ hơn

Bạn đã không sử dụng Site, Bấm vào đây để duy trì trạng thái đăng nhập. Thời gian chờ: 60 giây