Nguyên tắc thiết kế Mobile-first
Thiết kế cho màn hình điện thoại trước rồi mở rộng: cỡ chữ, vùng chạm, CTA, tốc độ và cách kiểm tra trên máy thật.
- Giải thích mobile-first là gì và vì sao nên bắt đầu từ màn hình hẹp.
- Áp dụng quy tắc về cỡ chữ, vùng chạm và vị trí CTA trên điện thoại.
- Kiểm tra một trang trên điện thoại thật theo danh sách thao tác.
Mobile-first nghĩa là thiết kế và viết nội dung cho màn hình điện thoại trước, sau đó mới mở rộng cho máy tính bảng và máy tính. Màn hình hẹp buộc bạn chọn điều quan trọng nhất; khi mở rộng chỉ cần thêm khoảng trống và cột, không phải cắt bớt. Ngoài ra, Google chủ yếu dùng phiên bản di động của trang để thu thập dữ liệu và lập chỉ mục (mobile-first indexing), nên nội dung trên di động cần đầy đủ như trên máy tính.
Bắt đầu từ khung 360–390 px
- Có thẻ meta viewport (width=device-width, initial-scale=1) để trang hiển thị đúng bề rộng điện thoại.
- Không tràn ngang: ảnh, bảng, chuỗi dài (link, email) phải co lại hoặc xuống dòng.
- Chữ nội dung khoảng 16 px là mức khởi điểm phổ biến; không để chữ quá nhỏ buộc khách phải phóng to.
- Headline ngắn hơn bản máy tính: 2–3 dòng trên điện thoại là vừa.
- Một cột là mặc định; chỉ chia 2 cột cho thứ thật nhỏ (icon + nhãn ngắn).
Vùng chạm và CTA
- 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 CSS px hoặc có đủ khoảng cách; mức AAA (2.5.5) là 44 × 44 CSS px. Với nút CTA chính, nên làm rộng rãi hơn mức tối thiểu.
- Nút CTA chính rộng gần hết bề ngang màn hình, chữ trên nút đủ lớn, dễ bấm bằng ngón cái.
- Các liên kết đứng sát nhau (ví dụ “Gọi” và “Zalo”) cần khoảng cách để không bấm nhầm.
- Liên kết gọi điện dùng tel:, liên kết Zalo mở đúng ứng dụng — kiểm tra trên máy thật.
- Có thể dùng thanh CTA cố định ở đáy màn hình, nhưng phải gọn và không che nội dung hay nút khác.
Mobile-first đúng nghĩa
- Hero gồm H1 3 dòng, đoạn phụ ngắn, nút “Nhận báo giá” rộng, ảnh thật cỡ vừa phải.
- Bảng giá chuyển thành thẻ xếp dọc trên điện thoại.
- Form dùng bàn phím số cho số điện thoại.
- Nội dung trên điện thoại đầy đủ như trên máy tính, chỉ sắp xếp khác.
Thu nhỏ bản máy tính
- Ảnh hero toàn màn hình đẩy H1 và nút xuống dưới, khách phải cuộn mới thấy.
- Bảng 5 cột bị tràn ngang, phải vuốt sang để đọc.
- Ẩn bớt phần FAQ và chính sách trên điện thoại cho gọn.
- Menu và 3 nút nhỏ xếp sát nhau ở đầu trang.
- Mở trang trên điện thoại thật (iPhone và một máy Android nếu có), dùng mạng di động.
- Kiểm tra màn hình đầu: thấy H1 và CTA mà không cần cuộn.
- Cuộn hết trang bằng một tay, bấm thử mọi nút, mở/đóng từng câu FAQ.
- Điền form: bàn phím hiện đúng loại, bàn phím không che ô đang nhập, thông báo lỗi dễ hiểu.
- Bấm “Gọi” và “Zalo”: mở đúng ứng dụng với đúng số.
- Xoay ngang màn hình và phóng chữ hệ thống lớn hơn: bố cục không vỡ.
Bài tập thực hành
Mở trang bạn đang làm (hoặc một mẫu trong Thư viện) ở chế độ xem điện thoại. Rút H1 xuống còn 2–3 dòng, kiểm tra CTA hiện trong màn hình đầu, sau đó chạy 6 bước kiểm tra trên điện thoại thật.
Gợi ý: Nếu H1 dài, giữ lại phần “bán gì cho ai”, chuyển phần lợi ích sang đoạn phụ.
- Màn hình đầu trên điện thoại có H1 và CTA chính, không cần cuộn.
- Không có phần nào tràn ngang.
- Nút CTA đủ lớn và cách xa các liên kết khác.
- Liên kết gọi điện và Zalo hoạt động đúng trên máy thật.
- Nội dung trên điện thoại không bị cắt bớt so với máy tính.
Kiểm tra kiến thức
- 12 × 12 CSS px
- 60 × 60 CSS px
- Không có quy định
- 24 × 24 CSS px (hoặc có đủ khoảng cách)
Xem đáp án
D. 24 × 24 CSS px (hoặc có đủ khoảng cách) — Tiêu chí 2.5.8 Target Size (Minimum) đặt mức 24 × 24 CSS px, có ngoại lệ khi đủ khoảng cách. Mức AAA 2.5.5 là 44 × 44.
- Vì điện thoại có màn hình lớn
- Vì Google chủ yếu dùng bản di động để lập chỉ mục và khách di động cũng cần đủ thông tin
- Vì ẩn nội dung làm trang tải chậm
- Không có lý do gì
Xem đáp án
B. Vì Google chủ yếu dùng bản di động để lập chỉ mục và khách di động cũng cần đủ thông tin — Với mobile-first indexing, nội dung chỉ có trên bản máy tính có thể không được tính. Quan trọng hơn, khách trên điện thoại cũng cần FAQ và chính sách để quyết định.
- Thiết kế bản máy tính rồi thu nhỏ
- Làm hai trang riêng biệt nội dung khác nhau
- Thiết kế cho màn hình hẹp trước, sau đó mở rộng bố cục cho màn hình lớn
- Chỉ làm bản máy tính
Xem đáp án
C. Thiết kế cho màn hình hẹp trước, sau đó mở rộng bố cục cho màn hình lớn — Bắt đầu từ màn hình hẹp buộc ưu tiên nội dung quan trọng; mở rộng sau dễ hơn cắt bớt.