Thiết kế landing page cho điện thoại: 10 điểm cần kiểm tra

Khách bấm vào link từ Facebook, Zalo hay tin nhắn thường mở trang ngay trên điện thoại, với một tay cầm máy và vài giây chú ý. Google cũng chủ yếu dùng phiên bản di động của trang để lập chỉ mục (cơ chế mobile-first indexing). Vì vậy một landing page đẹp trên màn hình máy tính nhưng khó dùng trên điện thoại gần như là một trang chưa xong. Bài này gom 10 điểm nên rà trước khi gửi link cho khách, kèm cách tự kiểm tra mà không cần biết code.

Vì sao phải nghĩ tới điện thoại trước

Trên điện thoại, màn hình hẹp, ngón tay to hơn con trỏ chuột, mạng 4G lúc mạnh lúc yếu và khách dễ bị cắt ngang. Thiết kế “điện thoại trước” nghĩa là bắt đầu từ khung hẹp nhất: chỉ giữ thứ thật sự cần, sắp đúng thứ tự khách cần đọc, rồi mới mở rộng cho màn hình lớn. Làm ngược lại – thiết kế cho máy tính rồi “ép” xuống – dễ sinh ra chữ li ti, nút sát nhau và bảng tràn ngang.

10 điểm cần kiểm tra

1. Trang co giãn đúng theo màn hình

Trang cần thẻ <meta name="viewport" content="width=device-width, initial-scale=1"> để trình duyệt hiển thị đúng chiều rộng điện thoại thay vì thu nhỏ cả trang máy tính. Dấu hiệu thiếu: phải dùng hai ngón tay phóng to mới đọc được, hoặc trang trượt được sang ngang. Các mẫu và trang tạo bằng AI trên Tự Thiết Kế Web đã có sẵn thẻ này; nếu bạn dùng công cụ khác, hãy kiểm tra bằng công cụ kiểm tra SEO landing page miễn phí – mục viewport nằm trong danh sách kiểm tra.

2. Chữ đọc được mà không cần phóng to

Nội dung chính nên từ khoảng 16px trở lên, dòng không quá dài, khoảng cách dòng thoáng và màu chữ tương phản rõ với nền. Tiêu đề lớn trên máy tính có thể chiếm cả màn hình điện thoại, nên rút tiêu đề còn một ý ngắn. Mẹo viết tiêu đề gọn có trong bài cách viết nội dung landing page bán hàng.

3. Màn hình đầu tiên trả lời đủ ba câu

Trước khi cuộn, khách cần thấy: bạn bán gì, khác gì người khác, và bấm vào đâu để mua hoặc liên hệ. Ảnh bìa quá cao hay khối giới thiệu dài sẽ đẩy nút chính xuống dưới. Hãy mở trang trên điện thoại thật và tự hỏi: nếu chỉ nhìn màn hình này, khách đã biết phải làm gì chưa?

4. Nút đủ lớn, đủ xa nhau

Ngón tay cần vùng chạm rộng hơn con trỏ chuột. Hướng dẫn thiết kế của Apple gợi ý vùng chạm tối thiểu khoảng 44×44 điểm, Material Design của Google gợi ý khoảng 48×48 dp. Không cần đo từng nút, chỉ cần nút chính to, rõ chữ và các liên kết không sát nhau đến mức bấm nhầm.

5. Gọi điện và Zalo trong tầm ngón cái

Với nhiều cửa hàng, khách trên điện thoại thích bấm gọi hoặc nhắn Zalo hơn điền form. Nút nên dùng link tel: và zalo.me để mở thẳng ứng dụng, và nên có ở cả đầu trang lẫn cuối trang, hoặc dạng nút nổi ở góc dưới. Xem cách tạo từng loại link trong bài cách gắn nút Zalo, nút gọi điện vào website, hoặc dùng công cụ tạo nút Zalo, nút gọi nổi để lấy sẵn đoạn mã. Lưu ý đừng để nút nổi che mất nút chính hoặc nội dung quan trọng.

6. Form ngắn, bàn phím đúng loại

Gõ trên điện thoại mệt hơn trên máy tính, nên mỗi ô thêm vào là một lý do để khách bỏ dở. Thường chỉ cần tên và số điện thoại, thêm một ô ghi chú nếu thật sự cần. Ô số điện thoại nên dùng kiểu type="tel" để hiện bàn phím số; chữ trong ô nhập nên từ 16px để Safari trên iPhone không tự phóng to trang khi khách chạm vào. Chi tiết hơn trong bài cách tạo form đăng ký khách hàng hiệu quả.

7. Ảnh nhẹ, đúng tỉ lệ

Ảnh chụp thẳng từ điện thoại thường nặng vài MB, trong khi trên màn hình điện thoại chỉ hiển thị rộng vài trăm pixel. Trước khi tải lên, hãy cắt ảnh theo đúng phần cần thấy và nén lại (định dạng WebP hoặc JPEG chất lượng vừa phải). Ảnh dọc hoặc vuông thường dễ nhìn hơn ảnh ngang rất rộng, và đừng quên viết mô tả ảnh (alt) ngắn gọn.

8. Menu gọn, không có thứ tràn ngang

Một landing page không cần menu dài: vài mục chính là đủ, và trên điện thoại nên gọn vào nút ☰ như trong ảnh minh hoạ ở trên. Bảng giá nhiều cột, bảng so sánh hay đoạn mã nhúng (bản đồ, video) là những thứ hay làm trang trượt ngang; trên điện thoại nên chuyển bảng thành dạng thẻ xếp dọc hoặc rút bớt cột.

9. Tải nhanh trên mạng di động

Những thứ hay làm trang chậm trên mạng di động: ảnh chưa nén, video tự phát, nhiều đoạn mã theo dõi và widget gắn thêm. Hãy thử mở trang bằng 4G (tắt wifi) và để ý bao lâu thì thấy được nội dung đầu tiên. Nếu bạn chạy quảng cáo, đây là điểm đáng kiểm tra nhất – xem thêm bài landing page chạy quảng cáo Facebook.

10. Đo theo thiết bị để biết sửa gì

Sau khi xuất bản, hãy xem lượt xem từ điện thoại chiếm bao nhiêu, khách bấm gọi hay Zalo nhiều hơn và nguồn nào mang khách tới. Trong Tự Thiết Kế Web, trang Thống kê chia số liệu theo thiết bị, nguồn truy cập, chiến dịch UTM và lượt bấm Gọi / Zalo / Messenger (xem mục Thống kê trong hướng dẫn). Nếu điện thoại chiếm phần lớn lượt xem mà ít ai bấm liên hệ, hãy quay lại điểm 3 và 5.

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

1. Mở trên điện thoại thật, cả iPhone lẫn Android nếu có, bằng 4G thay vì wifi.
2. Cuộn hết trang bằng một tay, ghi lại chỗ nào phải phóng to, chỗ nào trượt ngang, chỗ nào bấm nhầm.
3. Bấm thử mọi nút: gọi điện, Zalo, Messenger, và gửi thử form bằng thông tin của chính bạn.
4. Gửi link cho một người chưa biết sản phẩm và hỏi họ: sau 5 giây, họ hiểu bạn bán gì không?
5. Chạy công cụ kiểm tra SEO để rà nhanh tiêu đề, mô tả, viewport, ảnh và nút liên hệ; các việc SEO còn lại có trong bài tối ưu SEO cho landing page.

Làm trên Tự Thiết Kế Web

Các mẫu landing page theo ngành được dựng sẵn để hiển thị trên cả máy tính và điện thoại; bạn có thể bấm “Xem demo” trên điện thoại của mình trước khi chọn. Trong trình chỉnh sửa, các nút 🖥 / 📱 / 📲 đổi khung xem để kiểm tra từng kích thước, và trong bảng Kiểu có tuỳ chọn Áp dụng cho: Chỉ điện thoại khi bạn muốn, chẳng hạn, thu nhỏ một tiêu đề chỉ trên màn hình hẹp. Trình chỉnh sửa cũng dùng được ngay trên điện thoại – xem phần chỉnh sửa trên điện thoại trong hướng dẫn. Muốn bắt đầu từ một câu mô tả thay vì từ mẫu, xem trang thiết kế landing page bằng AI.

Dù dùng công cụ nào, nguyên tắc vẫn vậy: khách trên điện thoại cần hiểu nhanh, bấm dễ và liên hệ được bằng một chạm.