Tại sao mobile-first quan trọng hơn bao giờ hết?

Tại Việt Nam, hơn 62% lượt truy cập web đến từ điện thoại (StatCounter 2026). Với thương mại điện tử, con số này còn cao hơn — đặc biệt traffic từ Facebook Ads và TikTok hầu hết là mobile. Thiết kế landing page bắt đầu từ desktop rồi "co lại" cho mobile là cách tiếp cận ngược chiều, dẫn đến trải nghiệm mobile kém.

5 nguyên tắc mobile-first landing page

Nguyên tắc 1: Font tối thiểu 16px cho body text

Font dưới 16px trên mobile khiến người dùng phải zoom để đọc — dấu hiệu chắc chắn họ sẽ rời trang. Headline nên từ 24px trở lên, body text tối thiểu 16px.

Với HTML inline CSS: font-size: clamp(16px, 4vw, 18px) — tự động scale theo màn hình.

Nguyên tắc 2: Nút CTA tối thiểu 48px chiều cao

Ngón tay cái trung bình có diện tích tiếp xúc khoảng 44–48px. Nút nhỏ hơn → tỷ lệ nhấn nhầm cao, trải nghiệm tệ. Nút CTA trên mobile nên rộng toàn màn hình (width: 100%) và cao ít nhất 48–56px.

Nguyên tắc 3: Hero section không quá 100vh

Trên màn hình điện thoại 667px chiều cao (iPhone SE), hero section quá cao sẽ đẩy CTA xuống below the fold. Giữ hero section vừa đủ để CTA vẫn nhìn thấy hoặc gần visible ngay khi load.

Nguyên tắc 4: Ảnh không rộng hơn màn hình

Ảnh tràn ra ngoài màn hình là lỗi mobile phổ biến nhất. Luôn thêm max-width: 100%; height: auto vào inline style của mọi thẻ img.

Nguyên tắc 5: Khoảng cách (padding) đủ rộng

Text sát mép màn hình rất khó đọc trên mobile. Padding ngang tối thiểu 16–20px cho mọi section. Container chính nên có padding: 0 16px.

Kiểm tra mobile trước khi publish

Sau khi tạo block với AITaoPage, click nút Mobile trên toolbar để preview. Kiểm tra:

  • Text có đọc được không? (không cần zoom)
  • Nút CTA có đủ to và dễ bấm không?
  • Ảnh có bị cắt hoặc tràn không?
  • Có phải cuộn ngang không? (không được)

Tốc độ tải trên mobile — yếu tố quyết định

Mạng 4G tại Việt Nam trung bình 20–30 Mbps, nhưng nhiều người dùng ở khu vực ngoại thành chỉ có 10 Mbps hoặc 3G. Target: tải xong trong 3 giây trên 4G thông thường.

Checklist tốc độ cho HTML block:

  • ☑ Ảnh dưới 200KB mỗi file (dùng công cụ compress như Squoosh)
  • ☑ Dùng định dạng WebP thay vì PNG/JPG (nhỏ hơn 30–40%)
  • ☑ URL ảnh từ CDN có sẵn (Cloudflare, imgix) — không dùng server riêng
  • ☑ Không nhúng Google Fonts vào HTML block (kế thừa font từ trang CMS)

Kết luận

Mobile-first không có nghĩa là bỏ qua desktop — mà là thiết kế cho mobile trước, rồi mở rộng cho desktop. Với AITaoPage, block được tạo ra đã responsive sẵn. Nhiệm vụ của bạn là kiểm tra nhanh trên preview mobile trước khi copy HTML, đảm bảo trải nghiệm tốt cho phần lớn khách hàng của mình.