Long-Form Websites and Typography

Eric Lawler

April 08, 2019

Filed under “

Or, how to build an anti-Medium.com

Two curiously-related pieces of content were shared on Hacker News today. The first was a short article by Joshua Li, explaining how a few basic CSS styles can make for a great-looking website—across varying devices. The second was a longer post by Marco Fioretti on how Google is “forgetting” the old web.

The latter post kicked up the usual fierce debates …and people arguing about whether a search engine should actually return results matching what you type in. around whether the internet is still an open place if one gatekeeper determines whether you can find and read certain content.

The former article was berated for having too much CSS …or not enough CSS. Or not including styles for printers. or for using the CSS “rem” unit, instead of ems or pixels or vws.

But what really drew my eye was a comment from Marcus Holmes:

Is it just me, then, that hates the "narrow strip of text down the middle of my large monitor" school of web design? I don't understand why I'm being forced to scroll when there's all this blank space to the sides.

Marcus Holmes, comment on news.ycombinator.com

Great question, Marcus. Actually, it’s so I can use these sick side notes and margin notes! Thank you, Tufte CSS. Why doesn’t this website fill 100% of your 1080p or 4K monitor’s screen with text? There’s a very specific reason, and that is text measure.

A block of text or paragraph has a maximum line length that fits a determined design. If the lines are too short then the text becomes disjointed; if they are too long the content loses rhythm as the reader searches for the start of each line.

Wikipedia entry on “Measure (typography)”, 2019

The optimal width of a paragraph of text is anywhere from 50–80 charactersIn both typography- and computer-speak, a character is an individual letter or typographic mark. per line, depending on which of the many studies you cite. If a paragraph is too wide, your eye loses its place when tracking back to the beginning of the next line. This decreases reading comprehension—and increases my irritation when I realize I’m re-reading the same line. 🤦

So what’s the point?

For Firefox offers a “Reader” mode that will automatically constrain the page to the same ~68 character maximum width. Again, this is not a coincidence! this website, I chose a text measure that is approximately 70 characters wide, with average line widths of 65-68 characters. After your eye adjusts to the “constrained” width for reading long articles, Wikipedia begins to tire you out.

It took several iterations to strike the right balance in this design between too-wide and too-narrow. My final measurement was to drag a bunch of books off the shelf, type out a line from each of them, and arrive at my own ideal width based on what the professionals chose. To my surprise, regardless of the book’s physical page sizes and typeface size, all of them were exactly 66 characters wide.Given how many web typography dissertations I read in the course of refining this design, I shouldn’t have been surprised the professionals use consistent text measures—across publishers.

What’s this have to do with the other article?

The Fioretti article references a serious problem with the most-used search engine on the planet: It literally will not answer search results for sites that are “too old.” This could be a post written in 2007, or 2012. No one knows exactly how the Google algorithms rank and prune pages.

Lawler.io was inspired by Gwern, a self-proclaimed “freelance writer & researcher who lives in Virginia.” He wrote something concerning his own website that runs deeply counter to the current online culture: Gwern.net is home to “stable long-term essays which improve over time.”

Stable, long-term

A key ingredient to Gwern’s website is his decision to use incredibly robust computer-y bits behind the scenes, to ensure his website isn’t going anywhere for a long, long time.

While I am not going to the same extremes as Gwern to keep lawler.io online for decades, it is very appealing to create a simple, easy-to-maintain website that can persist for years to come.

Much has been written about link rot, the phenomena that most of what goes on the internet disappear after a few weeks or months. Frankly, a lot of the content deserves to rot and disappear. The world has no need for another listicle of 13 Must-Know Viral MemesYou won’t believe #7!.

The first challenge is putting content on that website that deserves to persist. The second, easierEasier for this hacker-generalist CTO, at least. challenge, is keeping it online and living at the same web address.

Kaizen: Continuous improvement over time

Journalists are paid to write articles. Buzzfeed-esque I’m going to use “Buzzfeed” as the Kleenex of “short web articles with outlandish titles and a splashy lead image to get people to click to open the article and share with all their friends but otherwise leave no impact on the ‘reader’ whatsoever.” I understand Buzzfeed News has “real” journalists now and does “serious” work. This does not change the impact they had on online content. listicles come from “content farms” that pay writers to… write. Your writing must hit certain key metrics or your paychecks will dry up. The most important metric? How many people open up your article, of course!

This incentivizes the creation of short articles that draw lots of clicks“Engagement” in social media marketing terms., but don’t leave much of an impact on the reader.

For this kind of content, it almost makes sense that Google would stop surfacing Buzzfeed articles from 2012. It wasn’t worth reading then and it certainly isn’t worth reading now.

Medium.com

Medium.com exploded in popularity because it, too, used to respect the typography rules we discussed above. Today, it’s a bit too wide for my personal taste: ~77 characters It used simple black-ish text on a white-ish background. A straight-forward design that got out of your way and let you read. And read we did.

But Medium needed to make money. As more authors poured onto the site, as more companies chose to host their blogs on white-labeled Medium.com domains, Medium’s design evolved. Nowadays, it’s cluttered with crap. Here’s a screenshot of a “Recommended” article from tonight:

Medium.com is a messScreenshot of an article linked to from Medium.com's homepage. (The thin typeface got squished when the image was resized)

It’s cluttered with a huge call to action to join the website, a bunch of nav on the top, and a social widget that follows you down the page during the entire read. Of course, when you hit the bottom, the clutter maximizes with more call-to-actions, obligatory comment boxesNever forget your engagement KPIs. and other content you might want to read.

I digress. The real thing that Medium.com has changed is expectations on what “long” content is. The pictured article has an impressive 5-minute reading estimateSquint and you can see it under the author’s name and link to follow her writing on Medium.. Most of the content I see on Medium are 2-3 minute reads. Any more than that and you seriously risk losing readers.

In fact, that’s the second point in the quote I led off with. “I don’t understand why I’m being forced to scroll.” Though we can be assured Mr. Holmes is willing to scroll on a computer to read long articles, most of the people on the internet can’t be bothered. Buzzfeed knows this. Medium.com knows this, too.

But is there another form of consumer? Is there a form of content on the internet that takes longer than 5 minutes to read? Is anyone writing longer articles that repulse the casual surfer, mindlessly flicking through links on their iPhone X? Apparently, such a fiend does exist! Quietly typing away, hundreds of individuals are crafting articles designed to be truly thought-provoking, to stand the test of time and Deserve To Be Read decades later.

Gwern’s I, too, quietly tidy up these humble scrivings, tightening them over time. Full edit histories, with explanatory commit messages, are in GitHub for interested parties. taken this approach to the next level—he continuously updates his posts as he learns new information on the topic. His experiments will have periodic updates for years. Years!

Aspirations

My aspiration is to create some substantive content that Deserves To Be Read. While this piece is certainly not one of them, it’s a start. A way of painfully filing off the rust from my long-neglected long-form writing skills. A way of unblocking writers block and getting the juices flowing.

The answer

What do these two articles have to do with one another? Simple: My website was designed to fit into both categories. An aesthetically-pleasing, easy-to-read website with no tracking codes. A home for long-form content that repulses article skimmers. A place for writing that Google will certainly ignore in 5 years.

Finalized at 10:48 PM. Tidied up on April 09, 2019 @ 10:42 AM.

Tagged with meta and long-form.


Notes from The Goal

Eric Lawler

April 02, 2019

Filed under “

King of business books

The Goal remains one of the best business books. Facts are true. Their truth does not change with the passage of time. No matter how our hairstyles evolve and computers continue to shrink, the theory of constraints remains a powerful explanation for how work is accomplished. Very few business books have stood this same test of time.

30 years after his initial book was published, an anniversary edition was released containing praise from Kevin Behr, a co-author of The Phoenix ProjectMr. Behr’s book is an attempt to rewrite The Goal for computer-y types—ditching the manufacturing setting for the dull vinyl flooring of a Fortune 1000 company’s IT department..

Now more than ever, The Goal is my first recommendation for CIOs, CTOs and DevOps to better see What to Change, What to Change to and just How to Cause the Change. Thank you, Eli!

Kevin Behr, co-author of The Phoenix Project

Despite taking more words to describe the same concepts, The Phoenix Project is landing on numerous “Top 10 Books Every New And Experienced Engineering Manager Should Read” listicles written in the past year. I heartily recommend every CTO or CIO read the original dissertation on the Theory of Constraints before reading Mr. Behr’s less-useful, devops-heavy application of ToC.

Key takeaways

While stuck at jury duty chosen to serve the lovely people of beautiful San Diego County, I took the following notes. Anything in quotes is a direct quote. Everything else is my synthesis.

Productivity is meaningless unless you know what your goal is.

Goldratt, 1984, p. 32

Building the foundation (pages 32-59)

The goal is to **make money**. Profit, ROI, and cash flow measure this. Efficiencies, good people, high tech solutions, selling quality products, capturing market share, etc.---these merely *enable* a company to make money, but should never be confused with The Goal.

Net profit and a solid ROI is not enough to stay in business. Cash flow is vital—are we bringing in enough money to meet our expenses each month?

THE GOAL is All three must increase at the same time—no cheating for short-term pops in share price. “to make money by increasing net profit, while simultaneously increasing return on investment, while simultaneously increasing cash flow.” (page 49)

Defining the terms (pages 60-75)

Measurements for daily operation of a manufacturing plant. Put another way, throughput is money coming in. Inventory is money circulating inside the system. Opex is money paid out to make that throughput money come in. These are a form of expressing “The” Goal in terms a plant understands (Mr. Behr does something similar for IT work in The Phoenix Project). See if you can pick up the common element:

  • Throughput: The rate at which the system generates money through sales.
  • Inventory: All the money that the system has invested in purchasing things it intends to sell.
  • Operational expenseOpex, in a non-consulting company, includes all employee time. Working? Idle? No matter what the employee is doing, it’s still opex.: All the money the system spends in order to turn inventory into throughput.

To make money, the value of the product—and the amount charged!—has to be greater than the combination of the investment in inventory and the total operational expense per sold unit. Units waiting to sell do not make you money.

Even buildings and machines are inventoryWhen you see “investment”, think “inventory.”. You can depreciate part of them as opex, but whatever value is left can theoretically be sold as throughput. Making the machine…inventory!

Understanding flow (pages 80-101)

Trimming production capacity to precisely meet marketing demand is doomed to failure.

  • Dependent events and statistical fluctuations necessitate having a buffer on capacity.
  • Keeping everyone “busy” in a plant creates excessive inventory.

Statistical fluctuations are the possible range of time a task can take. If the average time to solder a wire takes 4.3 minutes, but the range is 2.1 -> 6.4 minutes, no one can predict whether any individual wire will take 2.1 or 4.3 or even 7 minutes to completeSetting a new maximum time for soldering..

(Uh, sorry. This needs serious context, but is just for my personal recall.) Even with all the boys walking the same speed, even minor pausesThis is critical. Do you see? You have a bunch of kids walking the same speed, but they’re all randomly pausing the “work,” causing the line to stretch out down the trail…😵 to adjust backpacks creates additional length in the line. But the length can’t decrease because you can’t walk in front of the kid you’re following! Only the line leader has a pace that can be independently set.

  • “Dependency limits the opportunities for higher fluctuations. That can improve throughput.” (page 101)
  • Throughput is the rate at which the last dependent event happens—not the first.

Taking it to the real world (pages 110+)

We always run, never stop; the other option, having some workers idle, is taboo.

Goldratt, 1984, p. 113

Local maxima are useless. (More to come as I finish digesting the final portion of the book) The entire system must be optimized. All processing centers cannot have the same capacity. Downstream centers need additional capacity to absorb the statistical fluctuations from upstream centers.

Curious what to read next?

Ken Cone, CTO of Radeus Labs, CTO, co-owner, and lean manufacturing wizard! encourages anyone interested in the ToC to turn to Dr. Goldratt’s followup, Critical Chain. It provides a detailed explanation of the drum-buffer-rope methodology for controlling the flow of materials through bottlenecks.

If you like this kind of un-orthodox thinking, and are involved in software development, you should also read Kanban: Successful Evolutionary Change for Your Technology Business by David J. Anderson, inventor of the Kanban (capital K) agile software method. He takes a similarly counter-intuitive principle—limiting how many simultaneous tasks development teams can work on—and builds on it to create flexible solutions that scale from 2-man teams all the way up to Microsoft-levels of bureaucracy.