[{"data":1,"prerenderedAt":146},["ShallowReactive",2],{"page:\u002Fpattern-bench\u002Farchive-card-density\u002F":3},{"id":4,"title":5,"body":6,"dateModified":129,"datePublished":130,"description":131,"extension":132,"heroAlt":133,"heroImage":134,"layout":135,"meta":136,"navigation":138,"ogDescription":139,"ogImage":134,"ogTitle":140,"path":141,"schema":142,"seo":143,"stem":144,"__hash__":145},"content\u002Fpattern-bench\u002Farchive-card-density.md","Archive Card Density",{"type":7,"value":8,"toc":121},"minimark",[9,13,16,21,24,30,33,36,41,44,47,51,54,57,62,75,78,82,85,88,91,96,107],[10,11,12],"p",{},"An archive is a list. How dense that list feels, and how easy it is to move through, depends on whether individual entries give enough information to make a click decision and whether the spacing creates clear visual separation without consuming too much page height.",[10,14,15],{},"Blaskan uses a stacked vertical list for its archive. This is a considered default, not a limitation. Grid layouts have their place but introduce specific tradeoffs that matter for reading-focused blogs.",[17,18,20],"h2",{"id":19},"stacked-list-vs-grid","Stacked List vs. Grid",[10,22,23],{},"A stacked list presents one post entry per row, reading from top to bottom. A grid presents multiple post entries per row, arranged in columns.",[10,25,26],{},[27,28,29],"strong",{},"Why a stacked list works well for reading blogs:",[10,31,32],{},"The stacked list treats all posts as equally important within their row, which they are (the only ordering is by date). Each entry has the full column width for its title, which means titles are not truncated to fit a narrow card. An excerpt of 40 or 50 words is legible at full column width in a stacked list; in a three-column grid, that same excerpt creates a dense block of small text.",[10,34,35],{},"The stacked list also makes it easier to read and compare entries on a first pass. Your eye moves in a single direction (downward) rather than zigzagging across a grid.",[10,37,38],{},[27,39,40],{},"Where grids work better:",[10,42,43],{},"Grids compress archive density. A grid showing three posts per row lets the reader see three times as many posts in the same vertical space. For a high-volume archive (hundreds of posts), this compression helps. For a photography-heavy blog or a portfolio, the grid emphasizes visual assets over text and benefits from the format.",[10,45,46],{},"For a reading-focused blog where text content is the primary value, the stacked list is almost always the better choice.",[17,48,50],{"id":49},"spacing-between-entries","Spacing Between Entries",[10,52,53],{},"Entry spacing in Blaskan's archive gives each post entry a clear visual separation from the one above and below it. The gap between entries is large enough that the entries do not blur together on a quick scroll, but not so large that it feels like padding for its own sake.",[10,55,56],{},"The boundary between entries is established by vertical white space rather than a divider line. A divider line can create a grid-like visual rhythm that works against a soft reading environment. White space alone is sufficient when the entry spacing is calibrated correctly.",[10,58,59],{},[27,60,61],{},"What breaks entry spacing:",[63,64,65,69,72],"ul",{},[66,67,68],"li",{},"Very long excerpts that extend entries to inconsistent heights",[66,70,71],{},"Absence of featured images on some posts when most posts have them",[66,73,74],{},"Very long post titles that wrap to three or more lines on the first post in the list",[10,76,77],{},"Each of these creates vertical variability in entry height, which makes the archive feel uneven. Consistent excerpt length and consistent featured image use resolve most of it.",[17,79,81],{"id":80},"excerpt-density-and-entry-height","Excerpt Density and Entry Height",[10,83,84],{},"An entry with a featured image, a two-line title, a 40-word excerpt, category label, and date occupies substantial vertical space. At 17px body text on a desktop layout, this entry is roughly 300 to 400 pixels tall depending on image height.",[10,86,87],{},"With a 10-post archive page, this means a reader scrolls approximately 3000 to 4000 pixels through the archive. That is several screens of content. The first-page archive is doing a lot of work as a gateway to the rest of the blog.",[10,89,90],{},"The practical implication: if archive pages feel long and heavy, reducing featured image use or switching to shorter excerpts will have more effect than any layout change.",[10,92,93],{},[27,94,95],{},"Finding the right density:",[63,97,98,101,104],{},[66,99,100],{},"Short excerpts (15 to 25 words) work well for high-frequency publication schedules (daily or near-daily posts)",[66,102,103],{},"Medium excerpts (30 to 50 words) work well for sites publishing several times a week",[66,105,106],{},"Long excerpts (60 to 80 words) work best for monthly or infrequent publishing, where each entry represents a significant piece of content",[10,108,109,110,115,116,120],{},"For notes on how to set and control excerpts in WordPress, see ",[111,112,114],"a",{"href":113},"\u002Fdocumentation\u002Ffeatured-images-excerpts-and-archive-rhythm\u002F","featured images, excerpts, and archive rhythm",". For category label placement in archive entries, see ",[111,117,119],{"href":118},"\u002Fpattern-bench\u002Fcategory-and-tag-structure-that-stays-readable\u002F","category and tag structure that stays readable",".",{"title":122,"searchDepth":123,"depth":124,"links":125},"",2,3,[126,127,128],{"id":19,"depth":123,"text":20},{"id":49,"depth":123,"text":50},{"id":80,"depth":123,"text":81},"2025-11-20","2024-05-01","A comparison of stacked list versus grid archive layouts in Blaskan, examining spacing, excerpt density, and how post volume affects layout choice.","md","Blaskan archive view showing posts in a stacked vertical list with consistent spacing","\u002Fimages\u002Fpages\u002Farchive-card-density-1600x900.jpg","default",{"heroLabel":137},"Pattern Bench",true,"Stacked vs grid archive layouts: spacing, excerpt density, and how post volume affects the right layout choice.","Archive Card Density in Blaskan","\u002Fpattern-bench\u002Farchive-card-density","article",{"title":5,"description":131},"pattern-bench\u002Farchive-card-density","pAU-Xu-9xvehaXmc6JBc2zjMqrg7RXjyjGGPOcSFOzE",1775942365386]