“Mổ xẻ” giao diện Responsive

Điện thoại thông minh ngày càng trở thành phương tiện phổ biến để truy cập web, thậm chí còn phổ biến hơn PC bởi tính tiện lợi. Điều này khiến các doanh nghiệp phải đối mặt với việc website của họ bị “thu nhỏ” khi hiển thị trên màn hình điện thoại. Kích cỡ chữ tí hon, những đường link bị thu nhỏ, và giao diện rối rắm chỉ thích hợp với PC có thể khiến website doanh nghiệp mất đi một lượng truy cập đáng kể. Để có thể theo kịp xu thế phát triển của internet, doanh nghiệp đòi hỏi phải cải tiến website của mình.

Giao diện responsive là tính năng phù hợp nhất để giải quyết vấn đề trên. Với giao diện responsive, “bộ mặt” website (bao gồm nội dung, đường dẫn, hình ảnh, bố cục) có thể dễ dàng “co giãn” theo kích thước của màn hình thiết bị truy cập. Người dùng có thể truy cập vào website với giao diện được tối ưu hóa , cỡ chữ dễ đọc và hình ảnh vẫn hiển thị rõ ràng.

BI Intelligence (BII) – bộ phận nghiên cứu thị trường của trang tin điện tử nổi tiếng Business Insider – đã đưa ra một báo cáo về giao diện responsive. Trong báo cáo này, BII phân tích những ưu nhược điểm của tính năng responsive so với công cụ tối ưu hóa website khác, kiểm tra số liệu thống kê sự thích ứng của giao diện responsive trên từng thiết bị và khả năng phát triển trên nền tản HTLM5.

Sau đây là tóm tắt một vài nội dung chính trong báo cáo:

Phần mềm ứng dụng (mobile apps) không phải là tất cả: Song song với việc bùng nổ của thiết bị di động, một số người tin rằng biến website của mình thành một ứng dụng trên di động có thể giải quyết được vấn đề giao diện tương thích. Tuy nhiên đây không phải là giải pháp tối ưu. Hầu hết người dùng quen với việc xem thông tin website trên trình duyệt di động. Các giao dịch thương mại điện tử hầu hết diễn ra thông qua trình duyệt web, không phải qua ứng dụng di động. Chưa kể chi phí thực hiện và marketing cho ứng dụng cũng không hề rẻ. Do đó, biến website thành ứng dụng không phải là lựa chọn tốt nhất cho các doanh nghiệp.
Thiết kế responsive hiện đang là “chuẩn mực vàng” cho các website: Điều này thật sự được khẳng định vào giữa năm 2012, khi mà Google tuyên bố bộ máy tìm kiếm khổng lồ sẽ ưu tiên cho các website thân thiện với thiết bị di động.
Tuy nhiên responsive cũng không hoàn toàn hoàn hảo: Cũng như tất cả những công nghệ khác trong thế giới đa thiết bị, responsive cũng có những khuyết điểm. Nó không hoàn toàn phù hợp với tất cả các ngành nghề, cũng như các trình duyệt. Một số website còn cho thấy, nó chậm hơn các website được thiết kế chuyên cho thiết bị di động.
Website dành riêng cho thiết bị di động: Thay vì ứng dụng tính năng responsive cho website chính, một số doanh nghiệp chọn biện pháp xây dựng website mới dành riêng cho thiết bị di động (những website này có đường dẫn riêng, thường được thấy dưới dạng m.website, ví dụ: m.matbao.net, …). Khảo sát của BII cho thấy rằng, tốc độ load của những website này thuộc hàng cực nhanh.
Thiết kế responsive, 101: Trong kỹ thuật thiết kế responsive, những mã webside code hoặc HTML sẽ giống nhau đối với tất cả thiết bị. Chỉ riêng mã CSS – quy định layout website - sẽ bị thay đổi, để website có thể tự động điều chỉnh kích thước, co giãn layout sao cho phù hợp với thiết bị. Đồng thời, địa chỉ web, hay URL, vẫn sẽ giữ nguyên đối với bất kỳ trình duyệt nào.
Cũng có dạng website responsive được hỗ trợ từ server: Khác với dạng responsive thông thường, nghĩa là thiết bị sẽ phải tải toàn bộ nội dung website về, sau đó thay đổi hiển thị theo kích thước màn hình. Đối với web responsive được hỗ trợ từ server, máy chủ (chứa nội dung website) sẽ phải tiến hành xác định thiết bị truy cập website là gì (PC, điện thoại, máy tính bảng, TV thông minh…) sau đó mới truyền tải giao diện web phù hợp về thiết bị đó. Phương pháp này được gọi là server-side: tất cả các công việc được thực hiện bởi máy chủ trước khi nó được truyền tải tới client.

Báo cáo của Business Insider về giao diện responsive với đầy đủ chi tiết, số liệu và biểu bảng có thể được download tại đây.

Thích và chia sẻ bài viết trên Facebook để ủng hộ đội ngũ viết bài của Mắt Bão nhé!

“Mổ xẻ” giao diện Responsive

Tin tức

Hiểu về trái tim