[{"data":1,"prerenderedAt":210},["ShallowReactive",2],{"blog:page:\u002Fen\u002Fblog\u002Freading-first-design":3,"blog:articles:en":152,"blog:translations:\u002Fen\u002Fblog\u002Freading-first-design":207},{"id":4,"title":5,"author":6,"body":7,"cover":137,"coverAlt":138,"date":139,"description":140,"extension":141,"featured":142,"meta":143,"navigation":144,"path":145,"seo":146,"stem":147,"tags":148,"__hash__":151},"blog\u002Fen\u002Fblog\u002F5.reading-first-design\u002Findex.md","A reading page is not a documentation page","John Martin",{"type":8,"value":9,"toc":128},"minimark",[10,14,18,23,26,33,37,40,44,88,99,108,114,117],[11,12,5],"h1",{"id":13},"a-reading-page-is-not-a-documentation-page",[15,16,17],"p",{},"The platform has a documentation surface with a three-column layout: tree,\ncontent, table of contents. That layout is right for reference material and\nwrong for articles. This post is about the differences that matter.",[19,20,22],"h2",{"id":21},"hierarchy-follows-attention","Hierarchy follows attention",[15,24,25],{},"Reference readers scan for an entry. Article readers commit to a line. So the\narticle page keeps one narrow column, pushes navigation to the ends of the\nreading path - previous, next, related - and stays out of the way in between.",[15,27,28],{},[29,30],"img",{"alt":31,"src":32},"Diagram of a public website as three stacked layers, from pages down to static delivery","\u002Fassets\u002Fpublic-web-layers.svg",[19,34,36],{"id":35},"width-is-a-reading-decision","Width is a reading decision",[15,38,39],{},"A line of prose that runs too wide loses the eye at every return sweep. The\narticle column is capped at a width chosen for prose, not for terminals. Code\nblocks get their own horizontal scroll instead of stretching the column for\nevery reader because one line was long.",[19,41,43],{"id":42},"restraint-in-the-head","Restraint in the head",[45,46,47,60],"table",{},[48,49,50],"thead",{},[51,52,53,57],"tr",{},[54,55,56],"th",{},"Docs page",[54,58,59],{},"Article page",[61,62,63,72,80],"tbody",{},[51,64,65,69],{},[66,67,68],"td",{},"Table of contents",[66,70,71],{},"none",[51,73,74,77],{},[66,75,76],{},"Breadcrumbs",[66,78,79],{},"back link to the blog",[51,81,82,85],{},[66,83,84],{},"Cross-reference tree",[66,86,87],{},"related articles",[15,89,90,91,95,96],{},"Neither list is better. They answer different questions: ",[92,93,94],"em",{},"where am I in the\nmanual?"," versus ",[92,97,98],{},"what should I read next?",[19,100,102,103,107],{"id":101},"one-main-labeled-navigation","One ",[104,105,106],"code",{},"\u003Cmain>",", labeled navigation",[15,109,110,111,113],{},"Both surfaces share the public shell, so both inherit the same accessibility\nfloor: a single ",[104,112,106],{}," landmark, skip link, and every navigation region\ncarrying a distinct accessible name. Sharing the shell is what makes that\nfloor free.",[115,116],"hr",{},[15,118,119],{},[92,120,121,122,127],{},"The mechanics behind the shared shell are the same ones behind ",[123,124,126],"a",{"href":125},"\u002Fen\u002Fblog\u002Flocale-switching","locale\nswitching",".",{"title":129,"searchDepth":130,"depth":130,"links":131},"",2,[132,133,134,135],{"id":21,"depth":130,"text":22},{"id":35,"depth":130,"text":36},{"id":42,"depth":130,"text":43},{"id":101,"depth":130,"text":136},"One \u003Cmain>, labeled navigation","\u002Fassets\u002Fcover-reading-first.svg","Cover illustration: a narrow single-column article layout chosen over a cluttered multi-column layout","2026-09-30","Why the blog article layout deliberately differs from the docs layout - hierarchy, width, and restraint.","md",false,{},true,"\u002Fen\u002Fblog\u002Freading-first-design",{"title":5,"description":140},"en\u002Fblog\u002F5.reading-first-design\u002Findex",[149,150],"design","typography","Pr29BEn-bp0Lda1gSygj4niugFSJUxSG9Ev1gQj_Ay4",[153,161,164,176,187,196],{"path":154,"stem":155,"title":156,"description":157,"date":158,"author":6,"tags":159,"featured":142},"\u002Fen\u002Fblog\u002Fdemo-content-note","en\u002Fblog\u002F6.demo-content-note\u002Findex","What this blog is (and is not)","This is a demo vertical slice - real layout, real pipelines, deliberately editorial content.","2026-10-07",[160],"meta",{"path":145,"stem":147,"title":5,"description":140,"date":139,"author":6,"tags":162,"featured":142,"cover":163},[149,150],{"src":137,"alt":138},{"path":165,"stem":166,"title":167,"description":168,"date":169,"author":6,"tags":170,"featured":142,"cover":173},"\u002Fen\u002Fblog\u002Fstatic-deployment","en\u002Fblog\u002F4.static-deployment\u002Findex","Deploying a blog as static assets","No Worker script, no database binding - the whole deployment is a directory of files and a 404 page.","2026-09-23",[171,172],"deployment","cloudflare",{"src":174,"alt":175},"\u002Fassets\u002Fcover-static-deployment.svg","Cover illustration: a folder of HTML and SVG files flowing onto a globe of CDN edge nodes",{"path":125,"stem":177,"title":178,"description":179,"date":180,"author":6,"tags":181,"featured":142,"cover":184},"en\u002Fblog\u002F3.locale-switching\u002Findex","Locale switching that never lies","A language switcher should only offer what exists. Here is how the link list is derived from real content.","2026-09-16",[182,183],"i18n","ux",{"src":185,"alt":186},"\u002Fassets\u002Ftwo-locales-one-page.svg","Cover illustration: two locale paths joining into one shared page layout",{"path":188,"stem":189,"title":190,"description":191,"date":192,"author":6,"tags":193,"featured":142},"\u002Fen\u002Fblog\u002Fbuild-time-content","en\u002Fblog\u002F2.build-time-content\u002Findex","Content is resolved at build time","Why this blog ships as prerendered files instead of a content API - and what that buys.","2026-09-09",[194,195],"architecture","static-sites",{"path":197,"stem":198,"title":199,"description":200,"date":201,"author":6,"tags":202,"featured":144,"cover":204},"\u002Fen\u002Fblog\u002Furl-model","en\u002Fblog\u002F1.url-model\u002Findex","One URL model for every public page","How \u002Flocale\u002Fmount\u002Fpath keeps every public page predictable - and why we enforce it instead of hoping for it.","2026-09-02",[194,203],"urls",{"src":205,"alt":206},"\u002Fassets\u002Fcover-url-model.svg","Cover illustration: a single address bar splitting into locale, mount and path segments",[208,209],"en","vi",1791809694146]