Công nghệ ngày càng phát triển, cho phép người dùng Internet không chỉ truy cập mạng bằng máy tính cá nhân mà còn bằng các thiết bị di động như Ipad, điện thoại thông minh. Điều này đòi hỏi các doanh nghiệp khi thiết kế website phải tương thích với các thiết bị của người dùng. Giải pháp trong trường hợp này là thiết kế website responsive hoặc thiết kế phiên bản Mobile riêng với những ưu và nhược điểm không giống nhau.

Thiết kế website responsive là gì?

Thiết kế phiên bản Mobile Reponsive thực chất là áp dụng nhiều bố cục trang web cho các loại màn hình kích cỡ khác nhau và chúng có quan hệ mật thiết đến các chuẩn HTML5, CSS 3. Nếu thiết kế website responsive, người dung khi sử dụng các thiết bị di động với đủ kích cỡ, loại phân giải sẽ không còn thấy khó chịu khi truy cập vào một website mà giao diện của nó giống hệt như khi sử dụng bằng PC.

Đặc điểm của website responsive chính là nhận biết thết bị nào đang truy cập vào trang web và xác định kích cỡ màn hình. Tiếp đó, mã sẽ tinh chỉnh lại bố cục website một cách nhanh nhất. Ngoài ra, thiết kế website responsive  còn thể hiện ngay trong file CSS sao cho tải và sắp xếp lại thành phần của các mục hợp lý nhất đối với kích thước màn hình.

Trong trường hợp thiết kế website responsive, các banner quảng cáo vốn xuất hiện ở trang truy cập bằng máy tính sẽ biến mất. Tuy nhiên, khi thiết kế website responsive thì đều có một ngưỡng chuyển đổi giao diện giữa các thiết bị. Ví dụ như đặt ngưỡng 700 pixel  thì giao diện chỉ chuyển đổi sang dạng mobile khi chiều dài màn hình nhỏ hơn ngưỡng trên. Trong trường hợp trên ngưỡng 700 pixel thì giao diện sẽ hiển thị đầy đủ.

Lợi ích của thiết kế website responsive có thể thấy ngay rằng website tương thích với hầu hết các thiết bị khác nhau. Theo đó, người dùng sẽ được tận hưởng giao diện đẹp và tiện dùng nhất dù có đang dùng thiết bị nào đi chăng nữa. Tuy nhiên, tốc độ tải trang ở các thiết bị khác nhau khi thiết kế website responsive là như nhau và là nhược điểm lớn nhất của cách thiết kế này.

Thiết kế web mobile có chiếm ưu thế hơn?

Khắc phục nhược điểm của thiết kết websit responsive, thiết kế website phiên bản mobile khiến bạn không còn phải lo lắng về tốc độ tải trang vì nó đảm bảo dung lượng tải về nhỏ hơn, chiếm ít băng thông hơn. Tuy vậy thiết kế web mobile lại phức tạp hơn rất nhiều.

Việc thiết kế website mobile đơn thuần là việc xây dựng phiên bản di động dành cho web, có tác dụng tương đương với việc thiết kế website responsive. Nhưng để thiết kế phiên bản dạng này, lập trình viên sẽ phải tốn công hơn khi phải thiết kế một trang tập tin HTML, một file CSS riêng. Tất nhiên sự tốn công sẽ kéo theo chi phí nhiều hơn khi thiết kế website.

Tuy nhiên, một số dịch vụ online đã có hỗ trợ chuyển RSS thành một trang web riêng biệt nên lập trình viên có thể tận dụng để thiết kế web mobile mà không tốn quá nhiều công sức và thời gian. Theo đó, người dùng truy cập website từ các thiết bị di động sẽ không thấy giao diện chính. Thay vào đó là các dòng cập nhật mới, hoặc tin tức mới, vẫn đảm bảo nhu cầu thông tin mà tốc độ tải trang nhanh hơn khá nhiều.

Có thể thấy thiết kế website responsive hay thiết kế website phiên bản mobile đều có những ưu nhược điểm riêng. Cần tư vấn thêm về thiết kế website, bạn có thể liên hệ ngay chúng tôi để được hỗ trợ tốt nhất.

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 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.

Năm 2012, Google cũng phát hành tài liệu về Responsive Design, 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. 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.

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.

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.