Thiết kế cho các bài báo dạng dài

Việc thiết kế một “bài báo” đẹp cần rất nhiều cân nhắc. Không giống như một trang chủ, một bài viết dài không phải là thiết kế giao diện mà nó là thiết kế văn bản theo cách tạo ra một trải nghiệm đọc thư giãn và thoải mái.

Đó là bởi vì các bài viết liên quan đến nội dung dài, đến lượt nó, có xu hướng được đánh giá cao bởi tương tác "thời gian trên trang" với người dùng. Chúng tôi muốn ai đó đọc một câu chuyện hoàn chỉnh. Có một khoảng trống tự nhiên giữa thời gian ai đó tiếp cận một bài báo và đọc tất cả các từ. Và hy vọng, không gian đó đủ sống động để không chỉ chứa người dùng mà còn khơi gợi những suy nghĩ, ý tưởng và có thể là hành động. Ít nhất thì đó là điều tôi hy vọng khi tôi nhận được sự chú ý của bạn và bạn thực hiện theo cách của mình thông qua chính bài báo bạn đang đọc.

Có một sự cân bằng. Một mặt, chúng tôi nghe thấy rằng "Không ai đọc Internet." Mặt khác, một bài báo dài đòi hỏi sự chú ý cẩn thận. Xem xét giá trị hiện tại của tiếp thị nội dung và sự thiếu kiên nhẫn ngày càng tăng ở người dùng, việc thu hút độc giả càng lâu càng tốt phải là mối quan tâm chính. Hãy cùng xem một số phương pháp hay nhất và ví dụ về các trang bài viết đáng kinh ngạc để hiểu rõ hơn về điều gì tạo nên trải nghiệm đọc hấp dẫn trực quan cho các bài viết dạng dài (mà không làm mất trải nghiệm người dùng) và cách chúng tôi có thể tái tạo hiệu ứng.

Thắng nhanh

Hãy để tôi liệt kê nhanh những điều tôi nghĩ có thể đã quá rõ ràng đối với nhiều bạn, nhưng lại là những điều hữu hiệu đối với tính dễ đọc của nội dung:

• Tăng kích thước phông chữ: Chúng ta biết rằng 16px là mặc định và hoàn toàn ổn trong nhiều thiết kế, nhưng kích thước phông chữ lớn hơn sẽ hấp dẫn ở chỗ nó ngụ ý người dùng có thể tự do ngả lưng và ổn định mà không cần phải nghiêng về phía trước với màn hình đối diện với họ để đọc.
• Nhắm đến các ký tự trên mỗi dòng: Rất ít người mà tôi biết thích làm việc chăm chỉ hơn họ cần, và điều đó cũng phù hợp với việc đọc. Thay vì sử dụng toàn bộ chiều rộng khung nhìn, hãy cố gắng thu hẹp mọi thứ và cân bằng với kích thước phông chữ lớn hơn của bạn để có được ít hơn ký tự trên mỗi dòng văn bản. Điểm hấp dẫn của bạn có thể khác nhau, mặc dù nhiều người đề xuất khoảng 45-75 ký tự trên mỗi dòng để giúp hạn chế khoảng cách mắt người đọc phải làm việc để đi từ trái sang phải. Chris có một bookmarklet giúp đếm ký tự, nhưng chúng tôi cũng có ch đơn vị trong CSS để nhận được kết quả có thể dự đoán được.
• Tăng chiều cao dòng: Chiều cao dòng mặc định sẽ có cảm giác bị phá vỡ. Thật buồn cười, nhưng nhiều khoảng trống hơn giữa các dòng (tất nhiên là cho đến một điểm) sẽ ít tác dụng hơn đối với mắt, điều này có vẻ trái ngược với lời khuyên ký tự trên mỗi dòng mà chúng ta thường muốn mắt di chuyển trong khoảng cách ngắn hơn. Chiều cao dòng giữa 1.2 và 1.5 dường như là một phạm vi khá điển hình cho nội dung dạng dài.

Nếu bạn chưa nhìn thấy nó trước đây, Pierrick Calvez có một "năm phút" hướng dẫn về kiểu chữ gói trong một chùm trái cây thấp như thế này.

Thiết kế thêm phòng thở

Bạn có thể quen với việc thiết kế “trong màn hình đầu tiên”, nơi bất động sản là một mặt hàng quan trọng. Đó giống như bất động sản trước bãi biển trong thế giới web bởi vì đó là nơi chúng ta quen đóng gói những thứ có giá trị cao, như biểu ngữ anh hùng, lời kêu gọi hành động và bất cứ thứ gì khác để giúp bán một thứ. Trong màn hình đầu tiên có thể giống như một khu trung tâm đô thị dày đặc với lưu lượng truy cập cao và các tòa nhà cao tầng.

Các bài báo khác nhau. Chúng cho phép bạn kéo dài ra một chút. Nếu chúng ta muốn xem xét sự tương tự về sự phát triển của thành phố xa hơn một chút, các bài báo có diện tích để nghiêng về cách tiếp cận thiết kế kiểu “ít hơn là nhiều hơn”. Đó là điều khiến các lựa chọn thiết kế có vẻ nhỏ - như kiểu - trở nên quan trọng đối với trải nghiệm tổng thể.

Kiểm tra ví dụ dưới đây. Liên kết gạch dưới có nhiều chỗ hơn để thở (cụ thể là chúng xuất hiện bên dưới các dấu giảm dần). Đây thực sự là thứ mà bạn có thể kích hoạt toàn bộ trang web nhưng trông đặc biệt đẹp trên các trang bài viết vì nó tăng khả năng đọc. Đó là kiểu lựa chọn thiết kế tinh tế góp phần tạo thêm không gian thở.

text-underline-position: under; là dòng CSS làm cho việc này hoạt động. Một cách tự nhiên, text-decoration phải được đặt thành một cái gì đó khác với none (underline trong trường hợp này), quá.

Ví dụ trên cũng có các tính năng text-decoration-thickness, làm thay đổi độ dày của gạch dưới (và các loại dòng khác). Bạn có thể sử dụng thuộc tính CSS này để khớp độ dày của một dòng với kích thước và / hoặc trọng lượng của phông chữ.

Đây là một ví dụ đầy đủ:

a {
  text-decoration: underline;
  text-decoration-thickness: 2px;

  /* or */
  text-decoration: underline 2px;
  text-underline-position: under;
}

Nhưng trước khi bạn đạt đến text-decoration viết tắt, Šime Vidas có một vài "gotchas" khi sử dụng nó mà đáng xem xét.

Dẫn dắt vào nội dung

Thả mũ là các chữ cái cách điệu có thể được đặt ở đầu tài liệu hoặc phần tài liệu. Chúng đã từng được sử dụng trong các văn bản Latinh, nhưng ngày nay chúng chủ yếu được sử dụng vì lý do trang trí.

Cá nhân tôi nghĩ rằng các nắp giảm cản trở khả năng đọc. Tuy nhiên, chúng có thể là một cách hay để “dẫn dắt” người đọc vào nội dung chính và chúng không nên đưa ra bất kỳ vấn đề nghiêm trọng nào về khả năng truy cập miễn là bạn đang sử dụng ::first-letter phần tử giả. Có khác (cũ hơn) phương pháp liên quan đến nhiều HTML và CSS hơn cũng như việc sử dụng các thuộc tính ARIA để nội dung vẫn có thể truy cập được.

Sử dụng ::first-letter, CSS sẽ trông giống như sau:

/* select the first letter of the first paragraph */
article > p:first-child::first-letter {
  color: #903;
  float: left;
  font-family: Georgia;
  font-size: 75px;
  line-height: 60px;
  padding-top: 4px;
  padding-right: 8px;
  padding-left: 3px;
}

Chắc chắn sẽ rất tuyệt nếu chúng ta có thể sử dụng initial-letter nhưng không có nhiều hỗ trợ cho nó vào thời điểm tôi đang viết bài này. Nếu chúng tôi có nó, tất cả phép toán về kích thước phông chữ và chiều cao dòng sẽ được tính toán cho chúng tôi!

CodePen đã thách thức mọi người thể hiện kỹ năng tạo kiểu mũ lưỡi trai của họ vài năm trước và bạn có thể thấy một loạt các ví dụ rõ ràng từ nó trong bộ sưu tập này.

Bỏ qua nội dung chính

Trình đọc màn hình cho phép người dùng bỏ qua nội dung chính miễn là nó kết thúc nội dung đó trong <main> yếu tố. Tuy nhiên, những người điều hướng các trang web bằng cách tab không được lợi từ điều này. Thay vào đó, chúng ta phải tạo một liên kết neo “chuyển đến nội dung chính”. Liên kết này thường bị ẩn nhưng được tiết lộ khi người dùng thực hiện tab đầu tiên của họ (tức là hiển thị trên tiêu điểm).

Nó sẽ trông giống như thế này:

<!-- anchor -->
<a id="skip-link" href="#main">Skip to main content</a>

<!-- target -->
<main class="main">
  <!-- main content -->
</main>

#skip-link {
  position: absolute; /* remove it from the flow */
  transform: translateX(-100%); /* move it off-screen so that it appears hidden but remains focusable */
}
#skip-link:focus {
  position: unset; /* insert it back into the flow */
  transform: unset; /* move it back onto the screen */
}

.main {
  scroll-margin: 1rem; /* adds breathing room above the scroll target */
}

Tất nhiên, có nhiều cách khác để tiếp tục. Dưới đây là một số nghiên cứu sâu hơn về việc tạo liên kết bỏ qua.

Hình ảnh liền mạch

Tôi thích những hình minh họa trong bài viết này. Mặc dù chúng trông đáng kinh ngạc như thế nào, chúng không đòi hỏi quá nhiều sự chú ý về mặt nhận thức. Họ giới thiệu những khoảnh khắc thú vị ngắn ngủi nhưng cũng gợi ý rằng bản thân bài báo có điều gì đó quan trọng hơn để nói. Một phần, điều này xuất phát từ việc sử dụng độ trong suốt, trong khi hình ảnh hình chữ nhật thu được nhiều không gian tiêu cực hơn và do đó đòi hỏi sự chú ý nhiều hơn (điều này tốt nếu đó là hiệu ứng mong muốn và hình ảnh là yếu tố quan trọng đối với câu chuyện).

Tuy nhiên, điều quan trọng cần biết là hình ảnh không thực sự trong suốt mà thay vào đó là ảnh JPEG không trong suốt có cùng màu nền với nội dung. Tôi cho rằng đó là để giữ cho kích thước của hình ảnh nhỏ hơn so với PNG hỗ trợ độ trong suốt.

Nhược điểm của việc “làm giả” một nền trong suốt như thế này là nó sẽ yêu cầu thêm thủ thuật (và bảo trì) để hỗ trợ giao diện người dùng chế độ tối nếu trang web của bạn tình cờ cung cấp một. Nếu các hình minh họa khá phẳng và đơn giản, thì SVG có thể là cách để đi thay vì nó nhỏ, có thể mở rộng và có khả năng hòa trộn vào bất kỳ nền nào mà nó trên đó.

Nhưng nếu bạn buộc phải sử dụng hình ảnh raster và muốn làm việc với các tệp PNG để có độ trong suốt, bạn sẽ muốn xem xét việc sử dụng hình ảnh đáp ứng và loading="lazy" thuộc tính cho thời gian tải nhanh hơn.

Tập trung vào kiểu và ngữ nghĩa

Bạn có thể có rất ít lời nói làm thế nào or Ở đâu ai đó đọc nội dung trên web những ngày này. Cho dù người dùng nhận nó trong nguồn cấp dữ liệu RSS, nhận nó qua email, xem nó được sao chép và dán từ đồng nghiệp, tìm thấy nó trên một trang web cóp nhặt hay không, nội dung của bạn có thể trông như thế nào khác nhau hơn bạn muốn. Bạn có thể thiết kế những gì bạn nghĩ là bài báo tuyệt vời nhất trong tất cả các vùng đất và người dùng vẫn có thể đập nút Chế độ đọc đó khiến bạn mất tinh thần.

Vậy là được rồi! Khả năng khám phá của nội dung cũng quan trọng như thiết kế của nó, và nhiều người dùng có những cách riêng để khám phá nội dung và sở thích về những gì tạo nên trải nghiệm đọc tốt.

Nhưng có những lý do khiến ai đó muốn có Chế độ đọc. Đối với một, nó giống như "không nhìn thấy bất kỳ CSS nào". Ý tôi là Chế độ đọc của Safari or Trình đọc tốc độ dũng cảm, sử dụng máy học để phát hiện các bài báo. Không có tìm nạp hoặc thực thi CSS, JavaScript hoặc hình ảnh không phải bài viết, điều này giúp tăng hiệu suất và cũng chặn quảng cáo và theo dõi.

Loại này “Vũ phu chủ nghĩa tối giản ” tập trung vào nội dung hơn là phong cách. Vì vậy, bạn có thể thực sự muốn để nắm bắt các phong cách đọc cố định của trình duyệt dành riêng cho mục đích đó.

Cách để làm điều đó không phải bằng cách sử dụng CSS, mà bằng cách chú ý hơn đến HTML của bạn. Chế độ đọc hoạt động tốt nhất với đánh dấu sử dụng HTML đơn giản, ngữ nghĩa, liên quan đến bài viết. Bạn phải làm nhiều việc hơn là chỉ tát xung quanh bài viết để tận dụng tối đa nó.

Bạn có thể chỉ thấy rằng một thiết kế tối thiểu nhấn mạnh tính dễ đọc hơn là sự bóng bẩy thực sự là một chiến lược tốt để sử dụng trong thiết kế trang web của bạn. Tôi thực sự khuyên bạn nên đọc bài đăng của Robin trên “Nhỏ nhất CSS ”để có trải nghiệm đọc tốt.

Tổng hợp các bài báo dài!

Tôi đã chia sẻ rất nhiều điều tôi nghĩ tạo ra trải nghiệm đọc tuyệt vời cho các bài báo dài trên web. Nhưng nhìn thấy là tin và tôi đã tổng hợp một loạt các ví dụ thể hiện những gì chúng tôi đã đề cập.