Thiết kế website ưu tiên thiết bị di động: hướng dẫn thực tế
Thiết kế ưu tiên di động thực sự là gì, khác thiết kế responsive ra sao và cách thiết kế, xây dựng website theo hướng này: thứ tự nội dung, vùng chạm, điểm ngắt min-width của CSS, hình ảnh và kiểm thử, cùng lưu ý cho doanh nghiệp nhiều địa điểm.
Câu hỏi thường gặp
Thiết kế mobile-first và responsive khác nhau thế nào?
Thiết kế responsive là một website có bố cục tự điều chỉnh theo mọi kích thước màn hình. Mobile-first là thứ tự thiết kế và viết mã: bắt đầu từ màn hình nhỏ rồi thêm bố cục cho màn hình lớn. Website mobile-first cũng responsive, nhưng website responsive được thiết kế ưu tiên máy tính trước thường có phiên bản điện thoại chật chội, như phần làm thêm sau cùng.
Vì sao thiết kế mobile-first quan trọng với SEO?
Google dùng lập chỉ mục ưu tiên thiết bị di động, nghĩa là chủ yếu dựa vào phiên bản di động của trang để lập chỉ mục và xếp hạng. Nếu nội dung, tiêu đề, dữ liệu có cấu trúc hoặc liên kết bị thiếu trên điện thoại, Google có thể không thấy chúng.
Nên dùng điểm ngắt nào cho website mobile-first?
Hãy để nội dung quyết định: mở rộng cửa sổ trình duyệt đến khi bố cục trông bị kéo giãn, rồi thêm điểm ngắt ở đó. Các mốc bắt đầu phổ biến là khoảng 640px, 768px, 1024px và 1280px; nhiều framework CSS dùng chúng dưới dạng truy vấn media min-width.
Nút trên điện thoại nên lớn bao nhiêu?
WCAG 2.2 đặt kích thước đích tối thiểu là 24 x 24 pixel CSS (mức AA) và khuyến nghị 44 x 44 (mức AAA). Hướng dẫn của Apple dùng 44 point, còn hướng dẫn Material của Google dùng 48dp. Nên đặt nút chính và liên kết menu khoảng 44 đến 48 pixel.
Chuỗi nhượng quyền nên xử lý website mobile-first ra sao?
Dùng một mẫu chung với trang địa điểm riêng cho từng cơ sở, mỗi trang đặt nút nhấn để gọi, nhấn để xem chỉ đường, giờ hoạt động và thao tác đặt lịch hoặc đặt hàng riêng ở đầu trang. Khách di động tìm “gần tôi” muốn hành động ngay, vì vậy bộ tìm địa điểm và thao tác chính phải dùng được bằng một ngón tay cái.
Trả lời ngắn: Thiết kế web mobile-first nghĩa là thiết kế và xây dựng phiên bản điện thoại trước, rồi bổ sung bố cục cho máy tính bảng và máy tính khi màn hình rộng hơn. Trong mã, CSS cơ bản là bố cục di động; dùng truy vấn media min-width để nâng cấp. Cách làm buộc bạn quyết định điều gì quan trọng nhất trên mỗi trang và phù hợp với cách Google lập chỉ mục website hiện nay.
Mobile-first và responsive: khác biệt thực sự
Mọi người thường dùng hai thuật ngữ thay thế nhau, nhưng chúng trả lời những câu hỏi khác nhau.
Thiết kế responsive
Thiết kế mobile-first
Là gì
Một website có bố cục thích ứng theo kích thước màn hình
Quy trình: bắt đầu nhỏ, mở rộng dần
Cách viết CSS
Có thể dùng max-width (thu nhỏ từ bố cục máy tính) hoặc min-width
min-width (mở rộng từ bố cục di động)
Ưu tiên nội dung
Thường quyết định trên máy tính rồi thu hẹp
Quyết định trên màn hình nhỏ nhất
Lỗi thường gặp
Nội dung bị ẩn, vùng chạm nhỏ, trang nặng trên điện thoại
Bố cục máy tính trông trống nếu không được mở rộng
Cách làm tốt nhất là kết hợp cả hai: website responsive được xây dựng theo hướng mobile-first.
Bước 1: Quyết định thứ tự nội dung trên điện thoại
Trên màn hình hẹp, mọi thứ thành một cột, vì vậy thứ tự chính là toàn bộ bố cục. Với mỗi trang, hãy viết danh sách đánh số các phần theo thứ tự khách truy cập bằng điện thoại cần xem.
Ví dụ trang chủ dịch vụ địa phương có thể gồm:
Bạn làm gì và ở đâu (một dòng)
Hành động chính: gọi hoặc đặt lịch
Bằng chứng: điểm đánh giá, nhận xét hoặc khách hàng quen thuộc
Dịch vụ, trình bày bằng thẻ ngắn có thể nhấn
Khu vực phục vụ hoặc địa điểm
Bằng chứng bổ sung: ảnh, trước và sau
Câu hỏi thường gặp
Chân trang có giờ làm, địa chỉ và thông tin liên hệ
Phần nào không xứng đáng có mặt trong danh sách này có lẽ cũng không cần trên máy tính.
Bước 2: Thiết kế phù hợp với ngón tay cái
Vùng chạm: nút và liên kết menu nên cao ít nhất 44 đến 48 pixel, có khoảng cách giữa chúng. Mức tối thiểu trong WCAG 2.2 là 24 x 24 pixel CSS; đó là mức sàn, không phải mục tiêu.
Hành động chính trong tầm tay: thanh cố định ở cuối trang với nút “Gọi” và “Đặt lịch” phù hợp với doanh nghiệp địa phương. Giữ thanh ngắn để không che nội dung.
Điều hướng: nút menu mở danh sách toàn màn hình là lựa chọn tốt. Giới hạn danh sách ở năm đến bảy mục và đặt hành động chính bên ngoài menu.
Biểu mẫu: dùng một cột, nhãn phía trên trường và đúng loại đầu vào (tel, email, number) để điện thoại hiển thị bàn phím phù hợp. Dùng thuộc tính autocomplete để trình duyệt tự điền tên và địa chỉ.
Văn bản: chữ nội dung 16px là mức tối thiểu phổ biến và ngăn iOS Safari phóng to trường biểu mẫu. Giữ độ dài dòng dễ đọc và độ tương phản tối thiểu 4.5:1 cho chữ nội dung (WCAG AA).
Bước 3: Viết mã theo hướng mobile-first
Bắt đầu bằng thẻ viewport trong phần head của mọi trang:
@media (min-width: 1024px) { .services { grid-template-columns: repeat(3, 1fr); } .site-nav { display: flex; } /* hiện thanh điều hướng đầy đủ, ẩn nút menu */ } ```
Một số kỹ thuật giúp việc này dễ hơn:
Kiểu chữ và khoảng cách linh hoạt với clamp(), ví dụ font-size: clamp(1.75rem, 5vw, 3rem) cho tiêu đề để cần ít điểm ngắt hơn.
Flexbox và Grid với auto-fit: grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)) chỉ tạo cột khi đủ chỗ.
Container query (được các trình duyệt lớn hiện tại hỗ trợ) cho phép thẻ thay đổi bố cục theo chiều rộng vùng chứa thay vì toàn màn hình, hữu ích với thành phần có thể tái sử dụng.
Framework tiện ích như Tailwind CSS mặc định ưu tiên mobile-first: lớp không có tiền tố áp dụng mọi kích thước, còn tiền tố như md: áp dụng từ chiều rộng đó trở lên.
Chọn điểm ngắt dựa trên lúc nội dung bị vỡ bố cục, không dựa theo mẫu điện thoại cụ thể.
Bước 4: Tối ưu tốc độ trên kết nối điện thoại thật
Điện thoại có bộ xử lý chậm hơn và kết nối mạng kém ổn định hơn máy tính bạn dùng để thiết kế. Core Web Vitals của Google đo lường điều này: Largest Contentful Paint (tốc độ tải), Interaction to Next Paint (khả năng phản hồi) và Cumulative Layout Shift (độ ổn định hiển thị).
Ảnh thích ứng: dùng srcset và sizes để điện thoại tải tệp nhỏ hơn, cùng định dạng mới như WebP hoặc AVIF.
Luôn đặt chiều rộng và chiều cao (hoặc aspect-ratio) cho ảnh và nội dung nhúng để tránh xê dịch bố cục.
Tải trễ ảnh bên dưới nếp gấp bằng loading="lazy", nhưng không áp dụng cho ảnh chính.
Giới hạn phông chữ ở một hoặc hai họ và một vài độ đậm.
Cắt giảm tập lệnh bên thứ ba: tiện ích trò chuyện, trình theo dõi và nội dung nhúng thường làm tương tác chậm trên điện thoại. Tải chúng muộn hoặc chỉ ở nơi cần.
Bước 5: Mở rộng cho màn hình lớn hơn
Khi bố cục điện thoại đã hoạt động, hãy mở rộng cửa sổ và bổ sung giá trị, không chỉ tăng chiều rộng:
Lưới dịch vụ và sản phẩm nhiều cột
Thanh điều hướng đầy đủ thay cho nút menu
Văn bản và hình ảnh đặt cạnh nhau
Thanh bên cố định cho bài dài hoặc tóm tắt đặt lịch
Trạng thái khi rê chuột, nhưng không đặt thông tin chỉ hiện khi rê chuột vì màn hình cảm ứng không hỗ trợ thao tác này
Bước 6: Kiểm thử như một khách truy cập
Chế độ thiết bị trong công cụ phát triển trình duyệt để kiểm tra nhanh ở chiều rộng 360px, 390px và 414px, cùng kích thước máy tính bảng.
Ít nhất một thiết bị Android thật và một iPhone thật, vì trình giả lập bỏ sót vấn đề cuộn, bàn phím che trường và CPU chậm.
Lighthouse trong Chrome DevTools và PageSpeed Insights; công cụ sau cũng cho thấy dữ liệu thực từ người dùng Chrome nếu website có đủ lưu lượng.
Xoay ngang màn hình và kiểm tra thanh cố định không che nửa màn hình.
Hoàn thành tác vụ chính (đặt lịch, mua, gọi) bằng một ngón cái qua mạng di động.
Kiểm tra Search Console sau khi ra mắt để xem vấn đề trên điện thoại. Hướng dẫn Google Search Console của chúng tôi trình bày vị trí cần xem.
Mobile-first cho chuỗi nhượng quyền và doanh nghiệp nhiều địa điểm
Website chuỗi nhượng quyền và nhiều địa điểm có một vấn đề riêng trên điện thoại: phần lớn khách truy cập đến từ tìm kiếm “gần tôi” trên điện thoại và muốn xem ngay thông tin của một địa điểm cụ thể.
Ưu tiên bộ tìm địa điểm: nút “Dùng vị trí của tôi” cùng tìm kiếm mã bưu chính hoặc thành phố, kết quả là các thẻ có thể nhấn.
Mỗi địa điểm một trang dựa trên mẫu chung: địa chỉ, giờ làm, điện thoại, liên kết bản đồ, dịch vụ và thao tác đặt lịch hoặc đặt hàng tại chỗ, cùng nút gọi ở đầu trang.
Chi tiết địa phương khác nhau: mỗi trang nên có ảnh, nhân viên hoặc đánh giá riêng nếu có thể, không chỉ thay tên thành phố.
Thương hiệu nhất quán, quyền kiểm soát tại chỗ: bên nhận quyền cần cập nhật giờ và ưu đãi mà không thay bố cục.
Dữ liệu có cấu trúc: schema LocalBusiness trên từng trang địa điểm, với tên, địa chỉ và điện thoại chính xác.
Danh sách kiểm tra mobile-first
[ ] Có thẻ meta viewport trên mọi trang
[ ] Đã sắp xếp nội dung cho bố cục một cột
[ ] Hành động chính hiển thị trên điện thoại mà không cần cuộn
[ ] Vùng chạm khoảng 44 đến 48px, có khoảng cách
[ ] Chữ nội dung từ 16px, độ tương phản 4.5:1
[ ] CSS cơ bản cho di động, truy vấn min-width cho màn hình lớn hơn
[ ] Ảnh thích ứng đã đặt kích thước
[ ] Nội dung và dữ liệu có cấu trúc trên điện thoại giống máy tính
[ ] Đã kiểm thử trên thiết bị iOS và Android thật
Tạo website mà không cần bắt đầu từ đầu
Mọi website We.Inc tạo đều tương thích với màn hình từ đầu; bạn có thể xem trước bố cục điện thoại trong trình soạn thảo rồi chỉnh sửa trực quan hoặc trong mã. Duyệt các mẫu để xem bố cục chuyển thành một cột ra sao hoặc mô tả doanh nghiệp để nhận bản nháp đầu tiên rồi thử trên điện thoại của mình.