Một bài viết nhìn gọn trên máy tính có thể rất khó đọc trên điện thoại: ảnh tràn ngang, chữ quá nhỏ, bảng bị cắt hoặc nút liên hệ che mất nội dung. Tối ưu bài Blogger cho màn hình nhỏ nên bắt đầu từ trải nghiệm đọc thật, thay vì chỉ kiểm tra rằng giao diện có tự co lại hay không.
Đọc lại phần đầu bài như một khách mới
Mở bài trên điện thoại và xem người đọc có hiểu nội dung chính ngay trong phần đầu không. Tiêu đề nên rõ, đoạn mở đầu đi thẳng vào vấn đề và hình minh họa không đẩy toàn bộ thông tin xuống quá xa. Nếu có thông báo hoặc quảng cáo, kiểm tra chúng không che tiêu đề hay chiếm gần hết màn hình.
Chia đoạn theo ý, dùng tiêu đề phụ để đánh dấu các bước và giữ danh sách vừa đủ ngắn. Không xuống dòng sau từng câu chỉ để tạo cảm giác thoáng, cũng không dồn nhiều thao tác vào một đoạn dài. Với hướng dẫn, mỗi đoạn nên cho người đọc biết đang làm gì và cần kiểm tra điều gì sau đó.
Xử lý ảnh, bảng và nội dung nhúng
Ảnh cần đủ rõ ở kích thước hiển thị, nhưng không nhất thiết tải lên tệp rất lớn từ máy ảnh. Cắt vùng thừa, giảm dung lượng hợp lý và xem lại chữ trong ảnh trên điện thoại. Thông tin quan trọng nên có bằng văn bản, tránh để người đọc phải phóng to ảnh mới hiểu bước thực hiện.
Với bảng nhiều cột, cân nhắc chuyển thành danh sách theo từng đối tượng hoặc cung cấp vùng cuộn ngang có chủ đích. Không để cả trang bị kéo ngang chỉ vì một bảng hoặc video. Nội dung nhúng từ dịch vụ khác cần thử riêng vì cách hiển thị có thể khác với ảnh và chữ thông thường.
Rà giao diện và các vùng bấm
Kiểm tra menu, liên kết trong bài và nút liên hệ bằng thao tác chạm. Hai liên kết quá sát nhau có thể khiến khách bấm nhầm. Thanh nổi cần chừa không gian đọc, đóng được khi cần và không phủ lên biểu mẫu. Hãy thử cả khi cuộn xuống cuối bài, nơi nhiều giao diện đặt thêm tiện ích.
Nếu lỗi nằm ở chiều rộng cố định hoặc mã của mẫu, xử lý ở giao diện thay vì sửa từng bài bằng mẹo xuống dòng. Sao lưu trước khi chỉnh HTML hoặc CSS. Các thay đổi nên được thử trên một bài có đủ ảnh, bảng và video để tránh sửa được bài này nhưng làm hỏng bài khác.
Kiểm tra bằng thiết bị thật
Dùng ít nhất một điện thoại thực tế, kết hợp chế độ xem màn hình nhỏ trên máy tính nếu có. Thử mạng di động, xoay màn hình và mở trang khi chưa đăng nhập. Ghi cụ thể vị trí lỗi, thiết bị và đường dẫn, thay vì mô tả chung rằng website chậm hoặc bị lệch.
Bạn có thể gửi bài Blogger cần tối ưu cho Tý Hon, kèm ảnh lỗi đã che thông tin riêng tư. Phạm vi nên tách phần biên tập nội dung, xử lý ảnh và sửa giao diện để lựa chọn cách làm phù hợp.
Tài liệu tham khảo: Thay đổi thiết kế blog.
