Nhiều chủ doanh nghiệp duyệt website trên màn hình máy tính lớn, thấy đẹp là ký, trong khi phần lớn khách lại mở website bằng điện thoại. Kết quả là những lỗi chỉ hiện trên màn hình nhỏ lọt qua nghiệm thu: phải vuốt ngang, bấm nhầm nút, cửa sổ quảng cáo không tắt được. Bài này liệt kê tám lỗi website trên điện thoại hay gặp nhất, dấu hiệu nhận ra và cách tự kiểm trong mười phút.
Vì sao bản trên điện thoại mới là bản chính
Không chỉ khách dùng điện thoại. Google từ lâu đã thu thập và đánh giá website chủ yếu bằng trình thu thập dành cho điện thoại, và cuối tháng 10/2023, Google Search Central thông báo việc chuyển sang lập chỉ mục ưu tiên thiết bị di động đã hoàn tất. Nghĩa là thứ Google đọc là bản điện thoại: nội dung bị ẩn hay vỡ trên điện thoại cũng là nội dung Google khó thấy. Tốc độ tải trên điện thoại là chủ đề riêng, đã có ở bài 7 việc nâng điểm PageSpeed; bài này tập trung vào chuyện nhìn và chạm.
Lỗi 1–3: trang hiển thị sai trên màn hình nhỏ
1. Trang bị thu nhỏ như bản máy tính. Cả trang hiện tí hon, khách phải dùng hai ngón phóng to. Nguyên nhân thường là thiếu thẻ khai báo khung nhìn (viewport) hoặc giao diện cũ không có bố cục riêng cho màn hình nhỏ. Giao diện WordPress hiện đại thường có sẵn thẻ này; nếu thiếu, đó là dấu hiệu giao diện đã quá cũ.
2. Phải vuốt ngang. Một bảng giá rộng, một ảnh đặt cứng chiều ngang, một đường dẫn dài không xuống dòng là đủ đẩy cả trang tràn sang phải. Bảng nên cuộn ngang trong khung riêng của nó, ảnh co theo màn hình.
3. Chữ nhỏ, dòng chật. Cỡ chữ đọc thoải mái trên máy tính có thể quá nhỏ trên điện thoại, nhất là với người lớn tuổi. Chữ thân bài cần đủ lớn để đọc không phải phóng to, khoảng cách dòng thoáng, và chữ đủ tương phản với nền; bài Chọn màu sắc website theo logo thương hiệu có cách kiểm độ tương phản.
Lỗi 4–6: chạm và bấm
4. Nút và liên kết quá nhỏ, quá sát nhau. Ngón tay không chính xác như chuột. Bộ tiêu chuẩn tiếp cận WCAG 2.2 đặt mức tối thiểu cho vùng bấm là 24 × 24 điểm ảnh CSS (mức AA), và mức nâng cao 44 × 44 (mức AAA). Với nút quan trọng như Gọi, Đặt hàng, hãy nhắm mức nâng cao.
5. Cửa sổ bật lên che cả trang. Hộp đăng ký nhận tin, mã giảm giá chiếm hết màn hình, nút tắt nhỏ xíu ở góc. Tài liệu của Google khuyên không che toàn trang bằng cửa sổ bật lên, thay bằng dải thông báo nhỏ để khách và Google vẫn đọc được nội dung ngay.
6. Số điện thoại, địa chỉ không bấm được. Khách phải nhớ số rồi mở ứng dụng gọi. Số điện thoại cần liên kết gọi, địa chỉ cần mở được bản đồ chỉ đường. Chi tiết ở bài Trang liên hệ của website cần có những gì.
Lỗi 7–8: menu và ô nhập liệu
7. Menu dùng không được bằng ngón tay. Menu nhiều tầng chỉ mở khi rê chuột thì trên màn hình cảm ứng không có cách mở. Menu điện thoại nên mở bằng chạm, mục con mở bằng một nút riêng, và nút gọi hoặc Zalo luôn nằm trong tầm ngón cái.
8. Ô nhập khó gõ. Ô số điện thoại mà bật bàn phím chữ, ô email không bật phím @, bàn phím che mất nút Gửi, hay chạm vào ô thì trang tự phóng to. Mỗi ô cần khai báo đúng loại (số điện thoại, email) để điện thoại bật đúng bàn phím, chữ trong ô đủ lớn, và nút Gửi không bị che khi bàn phím mở.
Tự kiểm trong mười phút
Dùng chính điện thoại của bạn, tốt nhất thêm một máy Android và một iPhone, mở trang chủ, một trang dịch vụ và trang liên hệ, rồi đi theo bảng sau:
| Lỗi | Cách thử | Đạt khi |
|---|---|---|
| 1. Trang thu nhỏ | Mở trang, không chạm gì | Đọc được chữ ngay, không cần phóng to |
| 2. Tràn ngang | Vuốt sang phải ở mọi đoạn | Trang không trượt ngang |
| 3. Chữ nhỏ | Đọc một đoạn thân bài ở độ sáng thấp | Đọc hết không phải nheo mắt |
| 4. Nút nhỏ | Bấm từng nút bằng ngón cái | Không bấm nhầm nút bên cạnh |
| 5. Cửa sổ bật lên | Chờ 30 giây trên trang | Không có gì che toàn màn hình |
| 6. Gọi, bản đồ | Chạm số điện thoại, chạm địa chỉ | Mở trình gọi, mở bản đồ |
| 7. Menu | Mở menu, vào một mục con | Tới đúng trang bằng chạm |
| 8. Ô nhập | Điền và gửi biểu mẫu | Đúng bàn phím, thấy nút Gửi, gửi thành công |
Bảng này ghép được vào 12 điểm kiểm tra trước khi nhận bàn giao website. Nếu website hiện tại trượt nhiều dòng trong bảng và cần làm lại giao diện, các kiểu website chúng tôi làm có ở trang Dịch vụ.
Tóm lại
- Google lập chỉ mục bằng bản điện thoại, nên bản điện thoại là bản chính, không phải bản phụ.
- Tám lỗi hay gặp: trang thu nhỏ, tràn ngang, chữ nhỏ, nút nhỏ, cửa sổ che trang, số không bấm gọi được, menu chỉ mở bằng chuột, ô nhập khó gõ.
- Tự kiểm bằng điện thoại thật theo bảng tám dòng trước khi nghiệm thu.