Phần lớn lượt truy cập website ngày nay đến từ điện thoại. Khi màn hình chỉ rộng vài centimet, mọi thứ thừa thãi đều lộ ra ngay. Thiết kế mobile-first tận dụng chính sự chật chội đó như một bộ lọc tự nhiên, buộc bạn quyết định cái gì thực sự cần xuất hiện trước.
Mobile-first nghĩa là làm ngược chiều
Cách dựng web quen thuộc trước đây là vẽ bản máy tính rộng rãi trước, rồi “ép” nó co lại cho vừa điện thoại. Mobile-first đảo ngược thứ tự: bạn dựng bản điện thoại trước, đặt câu hỏi gì cần đưa lên đầu khi chỉ có một cột hẹp, rồi mới thêm dần khi không gian rộng ra.
Sự đảo chiều này không phải tiểu xảo kỹ thuật. Khi chỉ còn một cột, bạn không thể giấu nội dung yếu vào cột bên hay góc dưới. Mỗi thành phần phải tự bảo vệ chỗ đứng của nó. Nielsen Norman Group nhấn mạnh điều hướng (navigation — menu di chuyển giữa các trang) được dùng trên điện thoại nhiều hơn trên máy tính, nên cấu trúc thông tin rõ ràng ngay trên màn nhỏ là điều kiện sống còn.
Vì sao nên bắt đầu từ màn nhỏ
- Đa số người dùng vào bằng điện thoại. Thiết kế cho nhóm đông nhất trước là hợp lý, thay vì xem mobile như bản phụ.
- Ép ưu tiên nội dung cốt lõi. Một cột hẹp không chứa nổi mọi thứ, nên bạn buộc phải xếp hạng: thông điệp chính, nút hành động, rồi mới đến phần phụ.
- Tốc độ tốt hơn theo mặc định. Bắt đầu nhẹ rồi thêm dần (ảnh lớn, hiệu ứng) cho màn rộng sẽ ít rủi ro nặng nề hơn là cắt bớt từ một bản máy tính cồng kềnh.
- Dễ mở rộng lên hơn là cắt xuống. Thêm khoảng trống và chia cột khi màn rộng ra là việc cộng; gỡ bỏ thứ đã chen chúc trên màn nhỏ là việc trừ, khó và dễ sót.
Mobile-first khác responsive thuần ở đâu
Hai khái niệm hay bị gộp làm một, nhưng chúng trả lời hai câu hỏi khác nhau. Responsive (đáp ứng — giao diện tự co giãn theo bề rộng màn) nói về cách giao diện thích nghi với nhiều kích cỡ. Mobile-first nói về thứ tự bạn bắt đầu thiết kế. Một website có thể responsive nhưng vẫn được dựng theo lối desktop-first.
| Tiêu chí | Mobile-first | Responsive thuần (desktop-first) |
|---|---|---|
| Điểm xuất phát | Màn điện thoại nhỏ nhất | Màn máy tính rộng |
| Hướng dựng | Nới rộng dần lên (min-width) | Thu hẹp dần xuống (max-width) |
| Áp lực biên tập | Ép cắt nội dung yếu từ đầu | Dễ nhồi rồi mới gỡ về sau |
| Rủi ro thường gặp | Quên tận dụng không gian màn lớn | Bản mobile bị “vò lại” lộn xộn |
Mobile-first và responsive không loại trừ nhau, mà bổ sung cho nhau. Cách làm tốt là dùng tư duy mobile-first làm điểm xuất phát, rồi áp kỹ thuật responsive để nới lên. Một lưu ý từ Nielsen Norman Group: mobile-first không có nghĩa là mobile-only — bản máy tính vẫn cần được chăm chút riêng, đừng để nó nghèo nàn chỉ vì kéo giãn từ màn nhỏ.
Chạm tay, không phải con trỏ chuột
Trên điện thoại, người dùng dùng ngón tay chứ không phải con trỏ chuột nhỏ và chính xác. Đầu ngón tay che mất chính điểm đang chạm, nên vùng bấm phải đủ to và cách nhau đủ rộng.
- Ngưỡng tối thiểu theo chuẩn: WCAG 2.2 tiêu chí 2.5.8 (mức AA) yêu cầu vùng chạm tối thiểu 24×24 pixel CSS.
- Mức khuyến nghị thoải mái: Apple Human Interface Guidelines khuyên 44×44 point, còn Material Design của Google khuyên 48×48 dp — hai con số xấp xỉ cùng một kích thước vật lý.
Hãy hiểu hai mốc này theo đúng vai. 24px là sàn pháp lý của khả năng tiếp cận; 44–48px là mức nên nhắm tới cho nút quan trọng để ngón tay bấm trúng dễ dàng. Web22 nắm sâu phần này trong bài kích thước vùng chạm tối thiểu trên di động.
Vài nguyên tắc khi dựng mobile-first
- Xếp hạng nội dung trước khi vẽ. Liệt kê mọi thứ định đưa lên trang rồi đánh số ưu tiên. Thứ hạng đầu mới được vào màn đầu tiên.
- Một cột, dọc theo chiều cuộn. Trên màn hẹp, bố cục một cột là tự nhiên nhất. Đừng cố ép hai cột vào màn điện thoại.
- Hành động chính trong tầm ngón cái. Người dùng cầm điện thoại một tay, nên nút quan trọng nên nằm ở nửa dưới màn, nơi ngón cái với tới dễ.
- Điều hướng rõ ràng, đừng giấu hết. Menu kiểu ba gạch (hamburger) tiện nhưng giấu mất lối đi; cân nhắc để vài mục quan trọng lộ ra, nhất là với người ít quen công nghệ.
- Nhẹ trước, đẹp sau. Tải nhanh trên mạng di động yếu là một phần của trải nghiệm. Thêm ảnh lớn và hiệu ứng cho màn rộng, đừng bắt điện thoại gánh hết.
Mobile-first gắn liền với cách bố trí menu trên màn nhỏ; nếu bạn đang xử lý phần này, xem thêm góc nhìn về điều hướng trong ứng dụng di động.
Góc thực chiến
Vì Web22 vừa thiết kế vừa lập trình, bản dựng mobile-first đi thẳng từ bản vẽ sang code mà không tam sao thất bản. Khi chính người vẽ bố cục một cột cũng là người viết các điểm ngắt (breakpoint — mốc bề rộng để bố cục đổi), thứ tự ưu tiên nội dung trên màn nhỏ được giữ nguyên đến tận giao diện thật, thay vì bị diễn giải lại ở khâu chuyển giao.
Câu hỏi thường gặp
Mobile-first có nghĩa là bỏ bê bản máy tính không?
Không. Mobile-first chỉ là điểm xuất phát. Bản máy tính vẫn cần được thiết kế riêng để tận dụng không gian rộng, không phải kéo giãn vô hồn từ màn nhỏ.
Vùng chạm bao nhiêu là đủ?
Tối thiểu 24×24 pixel CSS theo WCAG 2.2 mức AA. Với nút quan trọng nên nhắm 44–48px theo khuyến nghị của Apple và Material Design cho ngón tay bấm thoải mái.
Có thể vừa mobile-first vừa responsive không?
Có, và nên thế. Mobile-first là thứ tự bắt đầu, responsive là kỹ thuật co giãn. Dùng mobile-first làm gốc rồi nới lên bằng responsive là cách kết hợp tự nhiên nhất. Cần đội dựng trọn giao diện chạy ngon từ điện thoại tới máy tính thì có dịch vụ thiết kế website responsive của Web22.
Nếu bạn cần một giao diện dựng đúng tư duy mobile-first từ màn nhỏ, tham khảo dịch vụ thiết kế trải nghiệm người dùng của Web22.