Website cũng nên thân thiện với bản in

Khi nghĩ về thiết kế web, hầu hết chúng ta chỉ quan tâm đến trải nghiệm trên màn hình. Nhưng Brennen Puth, một sinh viên chuẩn bị tốt nghiệp ngành Khoa học Máy tính và An ninh mạng, lại đặt câu hỏi ngược lại: tại sao không làm cho website trở nên dễ in hơn? Trong một bài viết trên blog cá nhân, anh chia sẻ những trải nghiệm thực tế khi tối ưu trang web của mình cho bản in bằng CSS, và lý do vì sao các nhà phát triển nên quan tâm đến điều này.

Minh họa về bản in và thiết kế web

Vì sao bản in vẫn còn quan trọng?

Công nghệ số cho phép chúng ta đọc trên laptop, điện thoại hay máy tính bảng với sự linh hoạt gần như vô hạn. Nhưng với nhiều người, đọc trên giấy vẫn có sức hấp dẫn riêng. Brennen cho biết anh đọc khá nhiều tài liệu in, bởi việc ghi chú, đánh dấu trên giấy giúp anh tập trung hơn hẳn so với đọc trên màn hình.

Anh cũng thừa nhận một cảm giác khó giải thích: ngồi trước bảng trắng với một tài liệu in trên tay khiến anh có cảm giác mình đang làm một việc gì đó thực sự quan trọng.

Tôi nghĩ bất kỳ ai đọc bài viết của tôi cũng sẽ có một lời mời thú vị, nên mọi sự quan tâm đều đáng quý.

Vấn đề là trải nghiệm in web hiện nay thường không được thiết kế cẩn thận. Chỉ cần nhấn CTRL-P và hy vọng trình điều khiển máy in chịu hợp tác, bạn có thể in bất kỳ trang web nào – nhưng kết quả thường thảm họa.

Thử nghiệm và thất vọng đầu tiên

Brennen đã thử in chính trang web của mình và nhận ra kết quả không hề ổn: nội dung tuy hiển thị đầy đủ nhưng chữ quá lớn, phần tiêu đề trông xấu khi in, còn các liên kết màu xám trở nên khó đọc trên bản in đen trắng. Anh gọi đó là "hoàn toàn không thể chấp nhận được".

Điều thú vị là cộng đồng web từng rất quan tâm đến vấn đề này. CSS cung cấp các bộ chọn cho phép tùy biến giao diện riêng cho bản in – chỉ là nhiều nhà phát triển ngày nay đã lãng quên.

Giải pháp CSS với @media print

Brennen chia sẻ đoạn mã CSS mà anh đang áp dụng cho trang web của mình, sử dụng media query @media print để điều chỉnh giao diện khi in:

• .onlyPrint: lớp cho phép các phần tử chỉ hiển thị trên bản in. Hiện tại anh dùng để gắn dòng ghi chú tác giả nhỏ dưới phụ đề.
• .noPrint: ẩn phần tử khỏi bản in. Anh áp dụng cho phần header vì nó "trông rất xấu" khi in.
• Điều chỉnh kích thước chữ: Đây là bước quan trọng nhất. Chữ co giãn theo tỉ lệ vốn đẹp trên web nhưng lại tệ trên giấy. Anh đặt cỡ 12pt cho đoạn văn và danh sách, 13-14pt cho tiêu đề phụ, 16pt cho tiêu đề chính.
• Xử lý khối mã nguồn: Các khối code vẫn là phần khó coi nhất dù đã tinh chỉnh. Anh thêm viền đen và giảm cỡ chữ xuống 11pt để dễ đọc hơn.
• Đổi màu liên kết: Liên kết màu xanh trên web trở nên xám xịt khi in đen trắng, nên anh chuyển chúng về màu đen đồng nhất với văn bản.

Anh cũng thẳng thắn thừa nhận điểm yếu còn tồn đọng: các khối mã nguồn vẫn muốn hiển thị thành một khối liền mạch và không chịu ngắt qua ranh giới trang. Anh kêu gọi cộng đồng ai có giải pháp cho vấn đề này thì chia sẻ.

Bài học dành cho nhà phát triển

Brennen thừa nhận việc tối ưu bản in tốn của anh gần một buổi sáng, dù trang web của anh không hề phức tạp. Anh cũng hoài nghi về số lượng người thực sự in trang web ra – có thể anh là người duy nhất làm vậy.

Thế nhưng, anh vẫn cho rằng điều đó không quan trọng. Nếu website của bạn chủ yếu là văn bản, việc cho phép người đọc tiếp cận nội dung theo định dạng yêu thích của họ không bao giờ là điều vô nghĩa.

Con đường dẫn đến phần mềm tốt được lát bằng những hành động tử tế của các kỹ sư dành cho người dùng.

Đó là một góc nhìn đáng suy ngẫm trong bối cảnh tối ưu hóa trải nghiệm người dùng thường chỉ xoay quanh màn hình. Với các nhà phát triển web tại Việt Nam – nơi tài liệu kỹ thuật, hợp đồng và tài liệu học thuật vẫn thường được in ra để đọc hoặc ký kết – việc thêm vài dòng CSS cho @media print có thể là chi tiết nhỏ nhưng tạo ra khác biệt lớn về sự chuyên nghiệp.

Brennen kết luận bằng một suy nghĩ giản dị: một ngày nào đó, có thể ai đó sẽ tìm thấy sự tử tế này trong cách trang web hiển thị khi in, và mỉm cười – dù chỉ trong thoáng chốc. Và như thế là đủ.