Landing Page GuideMở ứng dụng
Khóa 710 phútBài 4/18

60 phút · Phút 30–40: Chỉnh thiết kế và xem trước trên mobile

Chỉnh màu, chữ, khoảng cách theo thương hiệu và kiểm tra trên khung điện thoại: chữ đủ lớn, nút dễ bấm, không tràn ngang.

Mục tiêu bài học
  • Áp dụng màu và phông chữ nhất quán
  • Kiểm tra trang trên khung điện thoại
  • Sửa nhanh lỗi hiển thị thường gặp
CTA≥ 44pxVùng ngón cái
Giao diện điện thoại với nút CTA lớn trong vùng ngón cái

Phần lớn khách từ mạng xã hội và Zalo mở trang trên điện thoại. Mười phút này dành cho việc làm trang dễ đọc, dễ bấm trên màn hình hẹp, không phải để trang trí cầu kỳ.

  1. Phút 30–33: Chọn màu chính và màu nhấn theo thương hiệu; đảm bảo chữ trên nền đủ tương phản.
  2. Phút 33–35: Chọn kiểu phông, bo góc, kiểu nút phù hợp ngành.
  3. Phút 35–38: Chuyển sang xem trước mobile, cuộn hết trang, bấm thử mọi nút.
  4. Phút 38–40: Sửa: rút gọn headline dài, thay ảnh nặng, kiểm tra form và nút Zalo/gọi.
Kiểm traĐạt khi
Chữ nội dungĐọc được không cần phóng to
Nút CTAĐủ lớn để bấm bằng ngón tay, không sát nút khác
Bố cụcKhông tràn ngang, không phải cuộn sang bên
ẢnhCó văn bản thay thế (alt), không làm trang tải chậm rõ rệt
FormÍt trường, bàn phím đúng loại (số điện thoại hiện bàn phím số)
Màu thương hiệu không thay được độ tương phản. Nếu chữ trắng trên nền màu nhạt khó đọc, đổi màu nền nút hoặc màu chữ.
Ảnh lấy trên mạng khi chưa rõ quyền sử dụng có thể vi phạm bản quyền. Dùng ảnh tự chụp hoặc ảnh có giấy phép rõ ràng.

Mở trình Thiết kế

Bài tập thực hành

Áp dụng màu, phông chữ cho trang và kiểm tra trên khung mobile theo bảng 5 tiêu chí; ghi lại lỗi đã sửa.

Gợi ý: Nếu có điện thoại thật, mở bản xem trước trên điện thoại để kiểm tra lại.

  • Màu chữ và nền đủ tương phản
  • Không có thanh cuộn ngang trên mobile
  • Mọi nút bấm được và dẫn đúng chỗ
  • Ảnh có alt mô tả
  • Form hiển thị đúng bàn phím

Làm bài & lưu ghi chú trong ứng dụng

Kiểm tra kiến thức

1. Vì sao phải kiểm tra trên khung điện thoại?
  1. Vì máy tính không xem được
  2. Vì nhiều khách mở trang trên điện thoại và lỗi hiển thị làm mất khách
  3. Vì Google cấm bản máy tính
  4. Không cần thiết
Xem đáp án

B. Vì nhiều khách mở trang trên điện thoại và lỗi hiển thị làm mất khách — Khách từ mạng xã hội, Zalo chủ yếu dùng điện thoại; chữ nhỏ hay nút khó bấm làm giảm chuyển đổi.

2. Ảnh nào an toàn để dùng?
  1. Ảnh tải từ trang đối thủ
  2. Ảnh tự chụp hoặc có giấy phép rõ ràng
  3. Ảnh tìm trên Google Hình ảnh
  4. Ảnh chụp màn hình bài báo
Xem đáp án

B. Ảnh tự chụp hoặc có giấy phép rõ ràng — Chỉ ảnh tự tạo hoặc có giấy phép mới tránh được rủi ro bản quyền.

Nguồn tham khảo chính thức