Thiết kế web ưu tiên di động: ý nghĩa và cách thực hiện

Thiết kế web ưu tiên di động bắt đầu từ màn hình điện thoại, sau đó thêm bố cục cho màn hình lớn hơn. Tìm hiểu điều gì thay đổi, điểm đánh đổi với doanh nghiệp nhỏ, ví dụ minh họa và checklist để sao chép.

Thiết kế web ưu tiên di động nghĩa là lập kế hoạch và xây từng trang trước cho màn hình điện thoại nhỏ, rồi thêm cột và bố cục khi màn hình rộng hơn. Cách làm này buộc bạn quyết định điều gì quan trọng nhất vì điện thoại chỉ hiển thị từng nội dung một. Nó cũng phù hợp với cách Google xem xét website: Google chủ yếu sử dụng phiên bản di động của trang để lập chỉ mục và xếp hạng.

Ưu tiên di động so với thiết kế "đáp ứng"

Thiết kế đáp ứng là kỹ thuật: một trang có bố cục tự thích ứng theo màn hình bằng thẻ viewport và media query. Ưu tiên di động là thứ tự thiết kế. Website đáp ứng thiết kế từ máy tính sẽ thu nhỏ bố cục rộng; thiết kế ưu tiên di động bắt đầu hẹp rồi mở rộng. Cả hai đều có thể đáp ứng, nhưng thiết kế ưu tiên di động thường ít rườm rà hơn trên điện thoại.

Tiêu chí lựa chọn cho doanh nghiệp nhỏ

Câu hỏiLựa chọn ưu tiên di độngĐiểm đánh đổi
Màn hình đầu tiên dùng để làm gì?Tên, dịch vụ, địa điểm và một nútÍt chỗ hơn cho khẩu hiệu và ảnh lớn
Hành động chínhNhấn để gọi hoặc biểu mẫu ngắn, dễ chạm bằng ngón cáiBiểu mẫu dài thường bị bỏ dở trên điện thoại; hãy hỏi ít hơn
Điều hướngÍt liên kết cấp cao nhất; nút menu trên màn hình nhỏMenu ẩn dễ bị bỏ qua, nên lặp liên kết quan trọng trong trang
Hình ảnhNén và định kích thước phù hợp với màn hìnhẢnh quá lớn làm điện thoại tải chậm khi dùng dữ liệu di động
Bảng và nội dung rộngXếp thành thẻ hoặc cuộn bên trong khung riêngCần thiết kế nhiều hơn bảng trên máy tính

Kích thước vùng chạm và cỡ chữ cũng liên quan đến khả năng tiếp cận; kích thước mục tiêu theo WCAG 2.2 đặt mức tối thiểu là 24 x 24 pixel CSS.

Ví dụ đã hoàn thành (minh họa có gắn nhãn)

Một tiệm bánh hư cấu, "Flour Lane Bakery", lên kế hoạch thiết kế trang chủ ưu tiên điện thoại. Đây không phải doanh nghiệp thật; không khẳng định kết quả nào.

Màn hình điện thoại 1: "Flour Lane Bakery - bánh mì men tự nhiên và bánh ngọt, Leith"
                     nút: "Đặt bánh" | liên kết: "Giờ mở cửa hôm nay"
Màn hình điện thoại 2: ba thẻ: Bánh mì / Bánh mừng lễ / Bán sỉ
Màn hình điện thoại 3: các bước đặt hàng (chọn, chọn ngày, đặt cọc khi nhận)
Màn hình điện thoại 4: địa chỉ, liên kết bản đồ, giờ mở cửa, điện thoại (nhấn để gọi)
Máy tính bảng+:     thẻ chuyển thành 3 cột; giờ mở cửa nằm cạnh bản đồ
Máy tính để bàn+:  tiêu đề hiển thị mọi liên kết; ảnh chính có thêm ảnh thứ hai
Bỏ khỏi điện thoại: lưới Instagram (thay bằng liên kết), câu chuyện lịch sử dài (trang Giới thiệu)
Ví dụ thiết kế website tiệm bánh tạo bằng We.Inc
Ví dụ thiết kế tiệm bánh tạo bằng We.Inc (thiết kế từ mẫu, không phải website khách hàng).
Bộ chọn thiết bị trong trình tạo We.Inc xem trước website ở chiều rộng điện thoại
Xem trước thiết kế ở chiều rộng điện thoại trong trình tạo We.Inc.

Checklist thiết kế ưu tiên di động để sao chép

[ ] Một hành động chính hiển thị trên màn hình điện thoại đầu tiên
[ ] Tên doanh nghiệp, dịch vụ và địa điểm nằm ở màn hình đầu tiên
[ ] Số điện thoại có liên kết nhấn để gọi
[ ] Chữ tối thiểu 16px; không cần chụm để phóng to mới đọc được
[ ] Nút và liên kết dễ chạm, có khoảng cách giữa các mục
[ ] Biểu mẫu chỉ có trường cần thiết; bàn phím đúng loại (tel, email)
[ ] Hình ảnh được nén, định cỡ; không mục nào rộng hơn màn hình
[ ] Không cuộn ngang ở chiều rộng 360px
[ ] Có thể dùng menu bằng một ngón cái; lặp liên kết chính trong trang
[ ] Đã thử trên điện thoại thật qua dữ liệu di động, không chỉ trong cửa sổ máy tính

Những giới hạn cần biết

Bước tiếp theo

Bắt đầu từ mẫu doanh nghiệp trong công cụ tạo website We.Inc; các mẫu đều đáp ứng và có thể xem trước trên điện thoại, máy tính bảng và máy tính để bàn. Sau đó chạy công cụ đánh giá website. Gói Free cho tối đa 3 website mẫu trên địa chỉ we.inc (không có lượt dùng AI, không có tên miền riêng); gói Starter giá $20/month bổ sung tính năng xây dựng bằng AI và tên miền riêng (bảng giá). Cần dự trù ngân sách? Dùng công cụ tính chi phí website.

Bắt đầu xây dựng website doanh nghiệp

Câu hỏi thường gặp

Thiết kế web ưu tiên di động là gì?

Đó là thiết kế từng trang trước cho màn hình điện thoại rồi mới thêm bố cục cho màn hình lớn hơn. Cách này giữ nội dung và hành động quan trọng nhất ở trên cùng khi xem bằng điện thoại.

Thiết kế ưu tiên di động có giống thiết kế đáp ứng không?

Không. Thiết kế đáp ứng là kỹ thuật giúp một trang thích ứng với mọi màn hình. Ưu tiên di động là thứ tự thiết kế: bắt đầu từ màn hình nhỏ nhất.

Google có sử dụng phiên bản di động của website tôi không?

Có. Google cho biết họ chủ yếu sử dụng nội dung phiên bản di động của website để lập chỉ mục và xếp hạng.

Bắt đầu miễn phí · Không cần thẻ tín dụng

Product

Who It's For

Features

Resources

Company

View Sitemap