1. Chọn nhiệm vụ của trang trước khi chọn bố cục
Bắt đầu với các trang mang nhiệm vụ cho khách hàng hoặc doanh nghiệp: trang dịch vụ, trang sản phẩm, biểu mẫu thu lead, đặt chỗ, đăng nhập tài khoản, giỏ hàng và trợ giúp. Viết một câu mô tả hoàn thành cho mỗi trang, ví dụ: “Một khách truy cập lần đầu có thể hiểu dịch vụ này, thấy bằng chứng liên quan và yêu cầu gọi lại.” Nếu trang có hơn một nhiệm vụ, quyết định nhiệm vụ nào hiển thị trước.
Liệt kê nội dung theo loại: thiết yếu, hỗ trợ hoặc tùy chọn. Thiết yếu không có nghĩa là ngắn gọn; người truy cập có thể cần bối cảnh giá, điều kiện đủ điều kiện, chi tiết giao hàng hoặc thông tin so sánh. Cung cấp con đường rõ ràng cho những nội dung đó trên bố cục hẹp. Google khuyến nghị nội dung chính tương đương trên mobile và desktop, trong khi cho phép cách trình bày khác như tab hoặc accordion.
Ở độ rộng hẹp, một đồng nghiệp nên có thể nói trang cung cấp gì, giúp ai, và hành động ý nghĩa tiếp theo là gì.
2. Làm cơ sở hẹp hoàn chỉnh
Bắt đầu với một đường dẫn một cột hoạt động thay vì thu nhỏ bố cục desktop. Dùng container linh hoạt, để văn bản xuống dòng tự do, và bao gồm thiết lập viewport để trình duyệt điều chỉnh bố cục theo chiều rộng thiết bị. Không ngăn việc phóng to. Kiểm tra rằng menu, thông báo, hình ảnh, nhúng và lỗi biểu mẫu nằm trong khung nhìn (viewport); cuộn ngang ở cấp trang không mong muốn thường là lỗi.
Sử dụng 320 CSS pixels như một phép kiểm tái bố cục khắt khe cho nội dung đọc và tác vụ thông thường. WCAG 2.2 mô tả trình bày nội dung theo chiều dọc ở độ rộng đó mà không mất thông tin hay chức năng hoặc cần cuộn hai chiều. Bản đồ, biểu đồ hoặc bảng dữ liệu có thể cần vùng cuộn riêng, nhưng điều đó không biện minh cho việc để trang xung quanh cuộn ngang.
Điều chỉnh hình ảnh vừa với container và cung cấp kích thước để trình duyệt đặt chỗ trước khi chúng tải.
3. Thêm cải tiến mà không làm đường dẫn nền dễ hỏng
Tăng tiến theo khả năng (progressive enhancement) nghĩa là nội dung và chức năng thiết yếu hoạt động như cơ sở, trong khi trình duyệt có khả năng và màn hình lớn hơn nhận thêm tính năng. Địa chỉ, chi tiết sản phẩm, nhãn biểu mẫu, giải thích giá và đường dẫn gửi không nên phụ thuộc vào animation, hover hoặc script chạy muộn. Bố cục rộng hơn có thể thêm bảng so sánh, điều hướng cố định hoặc lọc phong phú hơn mà không làm cơ sở thiếu sót.
Yêu cầu người triển khai thêm một breakpoint khi nội dung trở nên chật chội hoặc lãng phí không gian, không phải vì tên thiết bị xuất hiện trong danh sách. Breakpoint đơn giản là nơi một quy tắc bố cục thay đổi. Đừng dùng bố cục hẹp để âm thầm loại bỏ văn bản trợ giúp, điều khoản chính sách, đánh giá, metadata hay chi tiết cấu trúc quan trọng.
Hiển thị ảnh gallery cơ bản và mô tả trước, sau đó thêm phóng to hoặc điều khiển vuốt khi script tương ứng có sẵn.
4. Thiết kế điều khiển cho cảm ứng, rõ ràng và phục hồi
Ergonomic cho cảm ứng nghĩa là thiết kế cho bàn tay hơn là con trỏ chuột chính xác. Cho nút, checkbox, biểu tượng đóng, bộ chọn số lượng và lựa chọn biểu mẫu đủ kích thước và khoảng cách để giảm nhấn nhầm. Gắn nhãn cho biểu tượng khi ý nghĩa của chúng không hiển nhiên. Đừng để hover là cách duy nhất để hiển thị giá, menu con, giải thích hoặc hành động.
WCAG 2.2 bao gồm tiêu chí kích thước mục tiêu Level AA ít nhất 24 x 24 CSS pixels cho mục tiêu pointer, kèm các ngoại lệ đã nêu bao gồm khoảng cách và liên kết nội tuyến. Xem đó là tham chiếu tối thiểu, không phải đảm bảo thoải mái. Hành động quan trọng xứng đáng nhãn rõ ràng, khoảng cách hào phóng và bước xác nhận có thể đảo lại. Tìm đánh giá khả năng truy cập có trình độ cho các hành trình rủi ro cao hoặc khi có yêu cầu chứng nhận.
Giữ nhãn hiển thị, hiển thị phản hồi xác thực hữu dụng, và giữ lại giá trị đã nhập sau khi có lỗi.
5. Xem media và nhúng là một phần hành trình khách
Quyết định mỗi hình ảnh mang tính thông tin, thuyết phục hay trang trí. Hình ảnh mang thông tin cần có phương án thay thế bằng văn bản thích hợp và crop cho bố cục hẹp bảo toàn chi tiết cần thiết. Tùy chọn ảnh đáp ứng (responsive image) cho phép trình duyệt chọn tài nguyên phù hợp thay vì ép mọi khách tải về asset desktop lớn nhất. Đừng để hình hero hoặc video che khuất mục đích trang và hành động chính.
Lập danh mục bản đồ, chat, video, thanh toán, lên lịch, consent và widget đánh giá. Trên màn hình hẹp, kiểm tra trạng thái tải, kích thước điều khiển, bố cục có giới hạn và phương án dự phòng thực tế. Với luồng thanh toán, nhận dạng hoặc dữ liệu được quản lý, tham gia đánh giá bảo mật, quyền riêng tư và tuân thủ có chuyên môn; kiểm tra hình ảnh không phải là đánh giá bảo mật.
Ghi lại mỗi thành phần bên ngoài, chủ sở hữu của nó, chức năng kinh doanh và phương án dự phòng được phê duyệt nếu nó chậm hoặc hỏng.
6. Kiểm tra đường dẫn tác vụ trước khi phát hành và lên kế hoạch khắc phục
Dùng chế độ responsive của trình duyệt sớm để kiểm tra các độ rộng hẹp, trung bình và rộng. Chrome Device Mode có thể xấp xỉ viewport, cảm ứng, hướng, mạng và điều kiện CPU, nhưng Chrome mô tả nó là xấp xỉ chứ không phải thực thi trên thiết bị thật. Hoàn tất các đường dẫn quan trọng trên điện thoại thật và các trình duyệt liên quan khi có thể.
Kiểm tra một tác vụ, không chỉ một ảnh chụp màn hình: tải lạnh (cold load), điều hướng, gửi biểu mẫu hợp lệ và không hợp lệ, thay đổi hướng, phóng to và trở về từ màn hình bên thứ ba. Ghi lại URL, trình duyệt hoặc thiết bị, tác vụ, kết quả mong đợi, người chịu trách nhiệm và quyết định rollback. Với thay đổi lớn về mẫu, checkout, CMS hoặc phụ thuộc, dàn dựng phát hành và chuẩn bị khôi phục đường dẫn trước đó thay vì ứng biến dưới áp lực.
Phê duyệt chỉ sau khi tác vụ quan trọng hoạt động, điều khiển có thể dùng được, không có cuộn ngang ở cấp trang và các phụ thuộc chính có phương án dự phòng.