Website trên điện thoại: lỗi hay gặp và cách tự kiểm

Mở Google Search Console, vào báo cáo "Khả năng sử dụng trên thiết bị di động" là thấy ngay: phần lớn website doanh nghiệp Việt Nam nhận ít nhất một cảnh báo, phổ biến nhất là "văn bản quá nhỏ để đọc" và "các phần tử có thể nhấn đặt quá gần nhau". Hai lỗi này khiến khách bỏ trang trước khi đọc hết dòng đầu.

Website trên điện thoại không phải bản thu nhỏ của bản desktop. Bài này liệt kê lỗi hay gặp khi xem trên điện thoại, vì sao chúng xảy ra, và cách tự kiểm bằng chính điện thoại của mình trước khi bàn giao cho khách xem.

Vì sao website đẹp trên máy tính lại vỡ trên điện thoại

Nguyên nhân phổ biến nhất là thiết kế trên màn hình máy tính rồi thu nhỏ tỷ lệ cho vừa khung điện thoại, thay vì dựng riêng bố cục cho màn hình nhỏ. Chữ, nút, khoảng cách co theo cùng một tỷ lệ, mọi thứ nhỏ đều nhau nhưng ngón tay người dùng thì không nhỏ theo.

Cách làm đúng gọi là mobile-first: dựng bố cục cho màn hình nhỏ trước, rồi mở rộng dần lên máy tính bảng và máy tính để bàn. Theo tài liệu web.dev của Google, thiết kế đáp ứng (responsive) đúng chuẩn phải kiểm tra trên thiết bị thật, không chỉ thu nhỏ cửa sổ trình duyệt.

Chữ trên điện thoại phải phóng to mới đọc được thì kiểm ở đâu

Chữ phải phóng to mới đọc được là dấu hiệu cỡ chữ gốc dưới 16px, ngưỡng tối thiểu để đọc thoải mái trên di động mà không cần zoom. Nhiều website đặt cỡ chữ 12px hoặc 13px cho phần chú thích, khách phải dùng hai ngón tay kéo giãn màn hình liên tục.

Kiểm bằng cách mở trang trên điện thoại thật, giữ khoảng cách đọc bình thường như đọc tin nhắn, không cúi sát màn hình. Đọc được hết đoạn văn mà không cần zoom là đạt. Tiêu đề nên lớn hơn thân bài rõ rệt, thân bài giữ tối thiểu 16px, dòng cách dòng khoảng 1,5 lần cỡ chữ để mắt không rối khi đọc đoạn dài.

Nút bấm sát nhau bấm nhầm là lỗi kích thước chạm bao nhiêu

Nút bấm sát nhau khiến khách chạm nhầm là lỗi khoảng cách và kích thước vùng chạm quá nhỏ, thường xảy ra khi menu, nút mạng xã hội được thiết kế sít nhau như trên máy tính, nơi con trỏ chuột chính xác đến từng pixel. Ngón tay người thì không chính xác bằng con trỏ.

Theo tài liệu web.dev của Google, vùng chạm nên tối thiểu 48x48 pixel, khoảng cách xung quanh đủ để ngón tay không đè lên nút bên cạnh. Hay gặp nhất là nút gọi điện, nút thêm vào giỏ hàng, và icon mạng xã hội ở chân trang xếp sít nhau. Kiểm bằng cách bấm liên tục từng nút trên điện thoại thật bằng ngón cái.

Bảng tràn ngang phải kéo qua lại thì sửa thế nào

Bảng tràn ngang xảy ra khi bảng giá, bảng thông số được dựng với số cột cố định cho màn hình rộng, không tính đến điện thoại chỉ còn 360 đến 400px chiều ngang. Khách phải vừa kéo ngang vừa kéo dọc để đọc hết một hàng, dễ bỏ cuộc giữa chừng.

Ba cách xử lý: cho bảng cuộn ngang trong khung riêng kèm dấu hiệu còn nội dung phía sau; chuyển bảng thành thẻ xếp dọc, mỗi dòng dữ liệu thành một khối; hoặc rút gọn chỉ giữ cột quan trọng nhất. Kiểm bằng ngón tay thật, không chỉ nhìn qua chế độ giả lập trên máy tính, vì độ mượt khi vuốt khác nhau khá nhiều.

Cửa sổ bật lên che hết màn hình không thấy nút đóng phải làm gì

Cửa sổ bật lên che hết màn hình mà không thấy nút đóng thường do popup thiết kế kích thước cố định theo pixel, đủ nhỏ để có nút đóng rõ ràng trên máy tính, nhưng phóng to gần bằng cả màn hình điện thoại, đẩy nút đóng ra ngoài vùng nhìn thấy.

Đây là lỗi nặng vì khách không thoát ra được, phải tắt hẳn trình duyệt hoặc bấm nút back, mất trắng phiên truy cập đó. Google từng phạt rõ popup xen ngang toàn màn hình trên di động. Cách kiểm: mở từng trang có popup trên điện thoại thật, xem nút đóng có nằm trong vùng ngón tay cái với tới dễ dàng hay không.

Ảnh nặng chờ lâu và form sai bàn phím, hai lỗi hay bị bỏ sót

Ảnh nặng khiến trang chờ lâu trên mạng di động vì 4G hoặc Wi-Fi công cộng thường chậm hơn mạng dây tại văn phòng, nơi trang được kiểm trước khi bàn giao. Ảnh sản phẩm chụp gốc vài MB, hiển thị trên khung rộng 300px nhưng chưa nén, vẫn buộc điện thoại tải nguyên file gốc. Ngưỡng theo Core Web Vitals của Google: LCP, thời gian hiển thị nội dung lớn nhất, nên dưới 2,5 giây; CLS, độ xê dịch bố cục khi tải, nên dưới 0,1. Kiểm bằng cách tắt Wi-Fi, chuyển sang mạng di động, mở lại trang và tự đếm thời gian.

Form hiện sai loại bàn phím là lỗi ô nhập liệu chưa khai đúng loại dữ liệu. Ô nhập số điện thoại hiện bàn phím chữ đầy đủ là ví dụ hay gặp nhất, khách phải tự chuyển tab số trên bàn phím ảo. Ô email nên bật bàn phím có sẵn ký tự @ ngay hàng đầu, ô số điện thoại nên bật bàn phím số. Chỉ cần khai đúng loại ô nhập khi dựng form, nhưng dễ bị bỏ qua vì trên máy tính không phân biệt được sự khác nhau.

Quy trình tự kiểm website trên điện thoại trước khi công khai

Quy trình năm bước: mở trang trên điện thoại thật, không dùng giả lập trên máy tính; đọc thử toàn bộ nội dung ở khoảng cách bình thường; bấm thử từng nút và liên kết bằng ngón cái; cuộn thử mọi bảng và danh sách; rồi điền thử một form bất kỳ để kiểm loại bàn phím hiện lên.

Nên thử trên ít nhất hai kích thước màn hình, ví dụ một điện thoại nhỏ khoảng 360px và một điện thoại lớn khoảng 430px, vì lỗi tràn ngang hay xuất hiện ở màn hình nhỏ nhất. Trang chủ, trang bảng giá, và bất kỳ form nào trên site là ba nơi cần kiểm kỹ nhất vì đó là nơi khách quyết định ở lại hay rời đi. Đơn vị làm thiết kế website có kinh nghiệm thường có sẵn danh sách kiểm này, chạy lại mỗi lần cập nhật giao diện chứ không chỉ làm lúc bàn giao.

Với các trang chạy quảng cáo, việc kiểm trên điện thoại càng quan trọng vì phần lớn lượt click đến từ mạng xã hội và quảng cáo trên di động. Một trang landing page có form lỗi bàn phím hoặc nút gọi ngay bấm không trúng có thể mất phần lớn khách ngay từ bước đầu.

Việc cần làm ngay sau khi đọc xong bài này

Mở điện thoại, vào thẳng trang chủ và trang bảng giá của website công ty, thử đọc, thử bấm, thử điền một form bất kỳ. Năm phút kiểm tra thật thường lộ ra lỗi mà nhiều tháng nhìn qua giả lập trên máy tính không thấy được.

BizMaC có 19+ năm đồng hành cùng doanh nghiệp dựng website theo hướng mobile-first, kiểm trên thiết bị thật trước khi bàn giao. Cần rà soát lại website hiện tại hoặc dựng bản mới đúng chuẩn, liên hệ BizMaC hoặc xem dịch vụ thiết kế website để bắt đầu.