การออกแบบสำหรับบทความขนาดยาว

การออกแบบ "บทความ" ที่สวยงามต้องคำนึงถึงหลายสิ่งหลายอย่าง บทความแบบยาวไม่เหมือนกับโฮมเพจที่เกี่ยวกับการออกแบบอินเทอร์เฟซมากกว่าการออกแบบข้อความในลักษณะที่สร้างประสบการณ์การอ่านที่ผ่อนคลายและสะดวกสบาย

นั่นเป็นเพราะบทความเกี่ยวข้องกับเนื้อหาแบบยาว ซึ่งในทางกลับกัน มีแนวโน้มที่จะได้รับคุณค่าจากการโต้ตอบ ”เวลาบนหน้า” กับผู้ใช้ เราอยากให้ใครซักคนอ่านเรื่องราวที่สมบูรณ์ มีช่องว่างระหว่างเวลาที่มีคนเข้ามาอ่านบทความและอ่านทุกคำ และหวังว่าพื้นที่นั้นจะดื่มด่ำมากพอที่จะไม่เพียงแค่ดึงดูดใจผู้ใช้เท่านั้น แต่ยังกระตุ้นความคิด ความคิด และการกระทำที่อาจเป็นไปได้ อย่างน้อยนั่นคือสิ่งที่ฉันหวังว่าในขณะที่ฉันได้รับความสนใจจากคุณและคุณพยายามอ่านบทความที่คุณกำลังอ่านอยู่

มีความสมดุล ด้านหนึ่งเราได้ยินว่า “ไม่มีใครอ่านอินเทอร์เน็ต” อีกด้านหนึ่ง บทความแบบยาวต้องการความเอาใจใส่อย่างระมัดระวัง เมื่อพิจารณาถึงมูลค่าปัจจุบันของการตลาดเนื้อหาและความไม่อดทนที่เพิ่มขึ้นของผู้ใช้แล้ว การดึงดูดผู้อ่านให้นานที่สุดน่าจะเป็นประเด็นสำคัญ มาดูแนวทางปฏิบัติที่ดีที่สุดและตัวอย่างหน้าบทความที่น่าเหลือเชื่อเพื่อให้เข้าใจมากขึ้นว่าอะไรทำให้ประสบการณ์การอ่านที่น่าดึงดูดสำหรับบทความขนาดยาว (โดยไม่เสียประสบการณ์ของผู้ใช้) และวิธีที่เราสามารถจำลองเอฟเฟกต์ได้

ชนะอย่างรวดเร็ว

ให้ฉันเขียนสิ่งที่ฉันคิดว่าอาจชัดเจนอยู่แล้วสำหรับพวกคุณหลายๆ คนอย่างรวดเร็ว แต่เป็นสิ่งที่มีประสิทธิภาพสำหรับความชัดเจนของเนื้อหา:

• เพิ่มขนาดตัวอักษร: เรารู้ว่า 16px เป็นค่าเริ่มต้นและใช้ได้อย่างสมบูรณ์แบบในหลาย ๆ แบบ แต่ขนาดตัวอักษรที่ใหญ่กว่านั้นน่าดึงดูดใจ ซึ่งหมายความว่าผู้ใช้มีอิสระที่จะเอนหลังและปรับตัวโดยไม่ต้องเอียงหน้าจอไปข้างหน้าเพื่ออ่าน
• เล็งไปที่ตัวอักษรต่อบรรทัด: น้อยคนนักที่ฉันรู้จักชอบทำงานหนักเกินความจำเป็น และนั่นก็เพื่อการอ่านเช่นกัน แทนที่จะใช้ความกว้างของวิวพอร์ตแบบเต็ม ให้ลองจำกัดสิ่งต่างๆ ให้แคบลงและปรับสมดุลด้วยขนาดฟอนต์ที่ใหญ่ขึ้นเพื่อให้ได้ น้อยลง ตัวอักษรในแต่ละบรรทัดของข้อความ จุดที่น่าสนใจของคุณอาจแตกต่างกันไป แม้ว่าหลายคนจะแนะนำอักขระระหว่าง 45-75 ตัวต่อบรรทัดเพื่อช่วยจำกัดระยะสายตาของผู้อ่านในการไล่จากซ้ายไปขวา คริสมี bookmarklet เพื่อช่วยนับตัวอักษรแต่เรายังมี ch หน่วยใน CSS เพื่อให้ได้ผลลัพธ์ที่คาดเดาได้
• ชนความสูงของเส้น: ความสูงของบรรทัดเริ่มต้นจะรู้สึกว่าถูกทุบ เป็นเรื่องตลก แต่ช่องว่างระหว่างบรรทัดมากขึ้น (จนถึงจุดหนึ่งแน่นอน) ใช้สายตาได้น้อยกว่า ซึ่งดูเหมือนจะตรงกันข้ามกับคำแนะนำอักขระต่อบรรทัด ซึ่งโดยทั่วไปแล้วเราต้องการให้ดวงตาเดินทางไปในระยะทางที่สั้นกว่า ความสูงของเส้นระหว่าง 1.2 และ 1.5 ดูเหมือนจะเป็นช่วงปกติสำหรับเนื้อหาแบบยาว

หากคุณไม่เคยเห็นมาก่อน Pierrick Calvez มีความยอดเยี่ยม “ห้านาที” คู่มือการพิมพ์ ที่ใส่พวงผลไม้ห้อยต่ำแบบนี้

ออกแบบสำหรับห้องหายใจเพิ่มเติม

คุณอาจเคยชินกับการออกแบบ "ครึ่งหน้าบน" โดยที่อสังหาริมทรัพย์เป็นสินค้าสำคัญ นั่นก็เหมือนกับที่ดินติดชายหาดในโลกของเว็บ เพราะเป็นที่ที่เราเคยจัดของที่มีมูลค่าสูง เช่น ป้ายฮีโร่ คำกระตุ้นการตัดสินใจ และอื่นๆ เพื่อช่วยขายของ ครึ่งหน้าบนอาจเป็นเหมือนย่านใจกลางเมืองที่หนาแน่นซึ่งมีการจราจรหนาแน่นและอาคารสูง

บทความมีความแตกต่างกัน พวกเขาช่วยให้คุณยืดออกเล็กน้อย หากเราต้องการนำการเปรียบเทียบการพัฒนาเมืองไปอีกเล็กน้อย บทความต่างๆ ก็มีเนื้อที่ที่จะพึ่งพาแนวทางการออกแบบแบบ "น้อยแต่มาก" นั่นคือสิ่งที่ทำให้ตัวเลือกการออกแบบที่ดูเล็ก เช่น ประเภท มีความสำคัญต่อประสบการณ์โดยรวม

ดูตัวอย่างด้านล่าง ลิงก์ที่ขีดเส้นใต้มีพื้นที่ให้หายใจเพิ่มขึ้นเล็กน้อย นี่คือสิ่งที่คุณสามารถเปิดใช้งานทั่วทั้งไซต์ได้ แต่ดูดีเป็นพิเศษในหน้าบทความเนื่องจากเพิ่มความสามารถในการอ่าน นั่นคือตัวเลือกการออกแบบที่ละเอียดอ่อนที่ช่วยเพิ่มพื้นที่หายใจ

text-underline-position: under; เป็นบรรทัดของ CSS ที่ทำให้สิ่งนี้ใช้งานได้ โดยธรรมชาติแล้ว text-decoration ต้องตั้งค่าอย่างอื่นที่ไม่ใช่ none (underline ในกรณีนี้) ด้วย

ตัวอย่างข้างต้นยังมีคุณสมบัติ text-decoration-thicknessซึ่งจะเปลี่ยนความหนาของขีดเส้นใต้ (และเส้นประเภทอื่นๆ) คุณสามารถใช้คุณสมบัติ CSS นี้เพื่อจับคู่ความหนาของเส้นกับขนาดและ/หรือน้ำหนักของแบบอักษร

นี่คือตัวอย่างที่สมบูรณ์:

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

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

แต่ก่อนที่คุณจะไปถึง text-decoration ชวเลข Šime Vidas has ไม่กี่ "gotchas" เมื่อใช้แล้วควรค่าแก่การรีวิว

นำไปสู่เนื้อหา

วางหมวก เป็นตัวอักษรที่ทำสไตไลซ์ที่สามารถวางไว้ที่จุดเริ่มต้นของเอกสารหรือส่วนเอกสาร ครั้งหนึ่งเคยใช้ในตำราภาษาละตินแต่ทุกวันนี้ส่วนใหญ่ใช้เพื่อการตกแต่ง

โดยส่วนตัวแล้ว ฉันคิดว่าดรอปแคปขัดขวางความสามารถในการอ่าน อย่างไรก็ตาม อาจเป็นวิธีที่ดีในการ "นำ" ผู้อ่านเข้าสู่เนื้อหาหลัก และไม่ควรนำเสนอปัญหาการเข้าถึงที่ร้ายแรงใดๆ ตราบใดที่คุณใช้ ::first-letter องค์ประกอบหลอก มี อื่นๆ (เก่ากว่า) วิธีการ ที่เกี่ยวข้องกับ HTML และ CSS มากขึ้น รวมถึงการใช้แอตทริบิวต์ ARIA เพื่อให้เนื้อหายังคงสามารถเข้าถึงได้

การใช้ ::first-letterCSS จะมีลักษณะดังนี้:

/* 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;
}

มันคงจะดีถ้าเราใช้ initial-letter ทรัพย์สิน แต่แทบไม่มีการสนับสนุนในขณะที่ฉันเขียนสิ่งนี้ ถ้าเรามี คณิตศาสตร์ทั้งหมดสำหรับขนาดตัวอักษรและความสูงของบรรทัดจะถูกคำนวณสำหรับเรา!

CodePen ท้าทายผู้คนให้อวดทักษะการจัดวางสไตล์ดร็อปแคปเมื่อหลายปีก่อน และคุณสามารถดูตัวอย่างที่เรียบร้อยทั้งหมดได้จากมันใน คอลเล็กชันนี้.

ไปยังเนื้อหาหลัก

โปรแกรมอ่านหน้าจออนุญาตให้ผู้ใช้ข้ามไปยังเนื้อหาหลักได้ตราบเท่าที่เนื้อหาอยู่ใน a <main> ธาตุ. อย่างไรก็ตาม ผู้ที่นำทางเว็บไซต์ด้วยการแท็บจะไม่ได้รับประโยชน์จากสิ่งนี้ เราต้องสร้างลิงก์ "ข้ามไปยังเนื้อหาหลัก" แทน ลิงก์นี้ถูกซ่อนไว้ตามปกติ แต่จะเปิดเผยเมื่อผู้ใช้สร้างแท็บแรก (เช่น แสดงเมื่อโฟกัส)

มันจะมีลักษณะเช่นนี้:

<!-- 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 */
}

มีวิธีอื่นในการดำเนินการนี้แน่นอน ต่อไปนี้คือข้อมูลเชิงลึกสองสามข้อเกี่ยวกับการสร้างลิงก์ข้าม

ภาพที่ไร้รอยต่อ

ฉันชอบภาพประกอบใน บทความนี้. แม้จะดูน่าเหลือเชื่อเพียงใด แต่ก็ไม่ต้องการการเอาใจใส่ทางปัญญามากเกินไป พวกเขาแนะนำช่วงเวลาสั้น ๆ ของความสุข แต่ยังแนะนำว่าตัวบทความเองมีบางสิ่งที่สำคัญกว่าที่จะพูด ส่วนหนึ่งเป็นผลมาจากการใช้ความโปร่งใส ในขณะที่รูปภาพสี่เหลี่ยมจะจับภาพพื้นที่เชิงลบมากกว่าและดังนั้นจึงต้องการความสนใจมากขึ้น (ซึ่งก็ดีถ้านั่นเป็นเอฟเฟกต์ที่ต้องการและรูปภาพมีความสำคัญต่อเรื่องราว)

อย่างไรก็ตาม สิ่งสำคัญคือต้องรู้ว่ารูปภาพไม่โปร่งใสเลย แต่เป็น JPEG ที่ไม่โปร่งใสซึ่งมีสีพื้นหลังเหมือนกันกับเนื้อหา ฉันคิดว่านั่นคือการรักษาขนาดของรูปภาพให้เล็กลงเมื่อเทียบกับ PNG ที่รองรับความโปร่งใส

ข้อเสียของการ “แกล้งทำ” พื้นหลังโปร่งใสเช่นนี้ จะต้องมีกลอุบายเพิ่มเติม (และการบำรุงรักษา) เพื่อรองรับ UI โหมดมืด หากเว็บไซต์ของคุณเสนอให้ หากภาพประกอบค่อนข้างเรียบและเรียบง่าย SVG อาจเป็นวิธีที่ควรทำแทนเนื่องจากมีขนาดเล็ก ปรับขนาดได้ และสามารถผสมผสานเข้ากับพื้นหลังอะไรก็ได้

แต่ถ้าคุณต้องใช้ภาพแรสเตอร์และต้องการทำงานกับไฟล์ PNG เพื่อความโปร่งใส คุณจะต้องพิจารณาใช้ ภาพที่ตอบสนอง และ loading="lazy" คุณลักษณะ เพื่อการโหลดที่เร็วขึ้น

เน้นประเภทและความหมาย

คุณอาจพูดได้น้อยมาก อย่างไร or ที่ไหน มีคนอ่านเนื้อหาบนเว็บในปัจจุบัน ไม่ว่าผู้ใช้จะได้รับมันในฟีด RSS, ได้รับมันทางอีเมล, เห็นมันคัดลอกและวางจากเพื่อนร่วมงาน, พบมันในไซต์ที่คัดลอกมา, หรืออะไรก็ตาม เนื้อหาของคุณอาจดูเหมือน ต่าง มากกว่าที่คุณต้องการ คุณสามารถออกแบบสิ่งที่คุณคิดว่าเป็นบทความที่งดงามที่สุดในดินแดนทั้งหมดและผู้ใช้ยังคงอาจ ทุบปุ่ม Reader Mode นั้น เพื่อความตกใจของคุณ

ไม่เป็นไร! ความสามารถในการค้นพบเนื้อหามีความสำคัญพอๆ กับการออกแบบเนื้อหา และผู้ใช้จำนวนมากมีวิธีการค้นหาเนื้อหาและความชอบของตนเองสำหรับสิ่งที่ทำให้ประสบการณ์การอ่านที่ดี

แต่มีเหตุผลว่าทำไมบางคนถึงต้องการโหมดผู้อ่าน ประการหนึ่ง มันเหมือนกับ "ไม่เห็น CSS ใดๆ" เลย โดยที่ฉันหมายถึง โหมดผู้อ่านของ Safari or SpeedReader ที่กล้าหาญซึ่งใช้แมชชีนเลิร์นนิงเพื่อตรวจหาบทความ ไม่มีการดึงหรือเรียกใช้รูปภาพ CSS, JavaScript หรือรูปภาพที่ไม่ใช่บทความ ซึ่งช่วยเพิ่มประสิทธิภาพและบล็อกโฆษณาและการติดตาม

แบบนี้ “เดรัจฉาน ความเรียบง่าย” เน้นที่เนื้อหามากกว่าสไตล์ ดังนั้น คุณอาจ ต้องการ เพื่อโอบรับรูปแบบการอ่านตามความคิดเห็นของเบราว์เซอร์โดยเฉพาะสำหรับจุดประสงค์นั้น

วิธีการนั้นไม่ใช่การใช้ CSS แต่โดยให้ความสำคัญกับ HTML ของคุณมากขึ้น โหมดผู้อ่านทำงานได้ดีที่สุดกับมาร์กอัปที่ใช้ HTML เชิงความหมายที่เกี่ยวข้องกับบทความ คุณต้องทำมากกว่าแค่ตบ แท็กรอบบทความเพื่อให้ได้ประโยชน์สูงสุดจากมัน

คุณอาจพบว่าการออกแบบขั้นต่ำที่เน้นความชัดเจนมากกว่าความลื่นไหลนั้นเป็นกลยุทธ์ที่ดีที่จะใช้ในการออกแบบเว็บไซต์ของคุณ ฉันขอแนะนำอย่างยิ่งให้อ่านโพสต์ของโรบินบน the “เล็กที่สุด CSS” เพื่อประสบการณ์การอ่านที่มั่นคง.

สรุปบทความยาว!

ฉันได้แบ่งปันสิ่งที่ฉันคิดว่าทำให้ได้รับประสบการณ์การอ่านที่ยอดเยี่ยมสำหรับบทความขนาดยาวบนเว็บ แต่การได้เห็นคือความเชื่อ และฉันได้รวบรวมตัวอย่างบางส่วนที่แสดงสิ่งที่เราได้กล่าวถึงไปแล้ว