Thực ra bài này phải đặt tên là "Sử dụng giao diện Responsive thế nào cho hợp lý?" mới là đúng ý nhất. Nhưng tôi không thích liên tục đặt tiêu đề bài viết bằng câu hỏi.

Những ngày này của năm 2007, tôi phải làm việc vật vã với những phiên bản khác nhau của IE để được một giao diện nhất quán. Trong khi những ngày mưa tháng Tám 2016, tôi lại phải ngồi canh chỉnh cho những website không hiển thị tốt trên các thiết bị mobile. Thời nào thì các frontend dev cũng có thứ để mà làm với đủ các thể loại trình duyệt...

.search-box
  width 200px
  @media screen and (min-width: 1200px)
    width 300px
  @media (max-width: 320px), (max-height: 240px)
    display none

Giao diện Responsive tạo cho chúng ta một sự tiện lợi đáng trân trọng. Nó giúp việc phát triển web frontend trở nên nhanh gọn và nhất quán. Nhưng có phải lúc nào cũng có thể áp dụng giao diện Responsive?

Câu trả lời là không. Khi bạn làm việc với một website có rất nhiều thành phần, rất nhiều nội dung cần đưa lên bề mặt, bạn sẽ nhận thấy, tạo một giao diện "co giãn được" là một việc cưỡng ép, nhồi nhét và không thực tế. Bởi vì nếu lọc bỏ bớt thành phần để hiển thị tốt trong thiết bị có màn hình nhỏ hơn thì lại gây thiếu hụt thông tin, giảm tính tiện dụng của website, quan trọng hơn hết là tăng thời gian thiết kế. Lúc này chúng ta cần một hướng tiếp cận khác.

Giả sử tôi là người chịu trách nhiệm thiết kế UI/UX cho Facebook. Tôi cố gắng tích hợp giao diện Responsive vào trang chủ người dùng thì điều được lợi duy nhất đó là chỉ cần một phiên bản web cho rất nhiều thiết bị. Nhưng cái hại thì rất nhiều:

  • Sự rắc rối không cần thiết khi phải thao tác với quá nhiều components. Điều này dẫn đến sự dư thừa một lượng CSS vô tác dụng.
  • Khó phân tách công việc cho các nhân viên, vì giao diện đan xen và phụ thuộc vào nhau.
  • Website trở nên nặng nề, nhất là khi truy cập bằng các thiết bị có cấu hình thấp.

anhtran.net loading timeline
Các website có giao diện Responsive thường nặng nề hơn.

Đối với các website lớn, nhiều chức năng, nhóm phát triển đều phân tách thành nhiều phiên bản khác nhau với đường dẫn (URL) khác nhau nhằm tối ưu cho một nhóm đối tượng cụ thể:

  • https://m.facebook.com/
  • https://mobile.facebook.com/
  • https://touch.facebook.com/

Giao diện Responsive chỉ hữu ích khi số components trên website vừa phải, nội dung phân bố không quá phức tạp. Phổ biến nhất là các landing pages, dashboard, blog, trang tin...

Ngày nay, các frontend developer thường có xu hướng ỷ lại các CSS framework như Bootstrap, Foundation. Tính tiện lợi trong phát triển là không phải bàn cãi những cũng bởi vậy nên sự tối ưu cho việc tiết kiệm tài nguyên, tốc độ tải là chưa được chú ý.