Mobile-first thực sự nghĩa là gì và phải đổi những gì

Có một khác biệt quan trọng mà nhiều người gộp làm một. Responsive là website tự co giãn theo màn hình — điều kiện tối thiểu, gần như website nào cũng có. Mobile-first là tư duy thiết kế: quyết định nội dung và bố cục cho điện thoại trước, rồi mới mở rộng lên màn hình lớn.

Vì sao thứ tự này quan trọng? Vì trên màn hình 27 inch bạn có thể nhét mọi thứ vào và không phải chọn. Trên màn hình 6 inch bạn chỉ có một cột và ba dòng đầu — buộc phải quyết định điều gì quan trọng nhất. Quyết định đó làm website tốt hơn trên cả hai loại màn hình.

Nhóm 1: bố cục và nội dung

1. Một cột, không chia cột trên điện thoại

Ba cột co lại thành ba khối xếp dọc rất dài và khách phải cuộn nhiều. Cách làm đúng: chọn thứ tự các khối theo mức quan trọng và chấp nhận rằng khối thứ ba nhiều người sẽ không thấy.

2. Ba dòng đầu phải nói được: bán gì, cho ai, liên hệ thế nào

Khoảng nhìn thấy đầu tiên trên điện thoại rất hẹp. Nếu chỗ đó chỉ có ảnh lớn và logo, bạn đã tiêu hết cơ hội đắt nhất của trang. Hãy dành nó cho câu mô tả sản phẩm chính và một hành động.

3. Cắt bớt, không thu nhỏ

Nội dung thừa trên máy tính chỉ hơi rối; trên điện thoại nó chôn vùi nội dung chính. Với mỗi khối, hãy tự hỏi: khối này giúp khách tiến gần hơn tới việc liên hệ không? Nếu không, bỏ khỏi bản điện thoại.

Nhóm 2: tương tác — nơi mất khách âm thầm

4. Nút gọi luôn nhìn thấy

Với dịch vụ, tỷ lệ khách Việt chọn gọi điện thay vì gửi form cao hơn nhiều so với các thị trường khác. Nút gọi nên có ở đầu trang và nên có dạng thanh cố định dưới đáy trên điện thoại. Số điện thoại phải bấm được để gọi ngay, không phải chữ để khách tự chép.

5. Vùng bấm đủ lớn, đủ xa nhau

Ngón tay không chính xác như con trỏ chuột. Mỗi vùng bấm nên khoảng 44 điểm mỗi chiều và cách nhau đủ để không bấm nhầm. Hai liên kết nằm sát nhau trong một đoạn văn là lỗi trải nghiệm rất phổ biến.

6. Form ngắn tối đa

Đây là chỗ mất khách nhiều nhất trên điện thoại, cùng với các nguyên nhân đã nêu ở bài website bán hàng cần những trang nào.

Gõ trên điện thoại khó hơn nhiều. Mỗi ô thêm là một phần khách rơi. Ba ô là mức lý tưởng cho form liên hệ: tên, số điện thoại, nhu cầu. Ngoài ra:

• Đặt đúng loại bàn phím cho từng ô — ô số điện thoại phải mở bàn phím số
• Không bắt gõ lại email hay số điện thoại lần hai
• Báo lỗi ngay tại ô sai, không báo chung ở đầu form

7. Bỏ mọi thứ chỉ hoạt động khi trỏ chuột vào

Menu nhiều cấp mở khi trỏ chuột, chú thích hiện khi trỏ vào ảnh — trên điện thoại không có hành động "trỏ vào". Mọi thông tin quan trọng phải hiển thị hoặc mở được bằng một lần bấm.

Nhóm 3: đọc được và tải nhanh

8. Chữ tối thiểu 16px, dòng đủ thoáng

Chữ 13px trên điện thoại buộc người đọc phóng to — và rất nhiều người sẽ thoát thay vì phóng to. Chiều rộng dòng nên vào khoảng 60–75 ký tự để mắt không mỏi.

9. Ảnh nhẹ và không làm nhảy bố cục

Trên 4G, mỗi megabyte là một khoảng chờ thật. Chuyển ảnh sang webp, cắt đúng kích thước hiển thị trên điện thoại, và luôn khai báo kích thước để nội dung không nhảy khi ảnh tải xong. Nhảy bố cục là nguyên nhân khiến khách bấm sai nút và bỏ đi. Chi tiết ở bài tối ưu tốc độ website.

10. Bỏ pop-up che nội dung ngay khi vừa vào

Trên máy tính, một pop-up chiếm một phần màn hình. Trên điện thoại nó chiếm toàn bộ, và nút tắt thường quá nhỏ. Nếu buộc phải có, hãy để nó xuất hiện sau khi khách đã cuộn được một đoạn — nghĩa là họ đã quan tâm.

Cách tự kiểm tra trong 15 phút

1. Mở website bằng điện thoại thật, không dùng chế độ thu nhỏ trên máy tính. Cảm nhận thật chỉ có trên thiết bị thật.
2. Tắt wifi, dùng 4G, đếm số giây tới khi đọc được nội dung.
3. Thử đặt một đơn hàng hoặc gửi một form từ đầu tới cuối bằng một tay.
4. Thử bấm số điện thoại xem có gọi được ngay không.
5. Nhìn màn hình đầu tiên và tự trả lời: người lạ có biết đây bán gì không?
6. Đưa điện thoại cho một người chưa từng xem website, nói họ tìm giá của một sản phẩm. Quan sát chỗ họ bị vướng — đó là danh sách việc cần sửa.

Những gì thay đổi trong cách làm việc

Mobile-first không chỉ đổi giao diện mà đổi cả trình tự làm dự án:

• Bản thiết kế đầu tiên là bản điện thoại, không phải bản máy tính. Khách hàng duyệt bản điện thoại trước.
• Nội dung được viết theo dạng ngắn trước: tiêu đề rõ, đoạn 2–3 dòng, danh sách gạch đầu dòng thay cho đoạn văn dài.
• Ảnh được cắt hai tỷ lệ: ngang cho máy tính, dọc hoặc vuông cho điện thoại.
• Kiểm tra trên thiết bị thật là một bước bắt buộc trước bàn giao, không phải việc làm thêm nếu còn thời gian.

Đây là cách chúng tôi triển khai ở mọi dự án thiết kế website; với các website đang chạy, phần cải tạo mobile thường nằm trong gói chăm sóc website vì nó là việc làm dần theo từng trang.

Nếu chỉ làm được ba việc

1. Nút gọi cố định dưới đáy trên điện thoại. Thay đổi nhỏ nhất, hiệu quả rõ nhất với ngành dịch vụ.
2. Nén và chuyển toàn bộ ảnh sang webp. Một buổi làm, cải thiện mọi trang.
3. Rút form liên hệ về ba ô.

Ba việc này không cần làm lại website, không cần đổi giao diện, và thường thấy khác biệt về số cuộc gọi trong vòng vài tuần. Nếu muốn chúng tôi kiểm tra hộ, gửi tên miền qua trang liên hệ là đủ.