Comment by ComputerGuru | Hacker News Reader

Comment by ComputerGuru | Hacker News Reader

My first, knee-jerk reaction was “God, that loaded fast!” even though I already knew going in what to expect.

Text-only doesn’t have to be _ugly_ though. Once you embrace minimalism, you realize that aesthetics are primarily a concept of white space and typography. And neither one of those interferes with text only, thank god.

While modern CSS has been inching towards becoming Turing complete (is it already now? I think so long as adding html elements via :before/:after remains disallowed we aren’t there yet?), CSS’ biggest saving grace is that it was a declarative and Turing incomplete.

Of course when the web first started, the idea was that it would serve stylable but-unstyled-by-default content _and then the user would style it as they liked_ so they could enjoy a consistent and customized experience no matter what they were browsing. I don’t know many people that still customize their Browser default style sheets (can you even do that in Edge, I wonder?).

I personally don’t because I appreciate the value in judging people (and the content they produce) by how they’ve styled it (or haven’t, which can oftentimes be preferable).

EDIT

OK, with the caveat that I'm not a designer and have been told I haven't an artistic bone in my body, here's what NPR looks like with only some extremely basic CSS applied to html, body, and a elements and no changes to the actual HTML:† https://dev.neosmart.net/npr/1.html

And here's what it looks like with no changes to the HTML but with some additional CSS styling applied to the various sections of the document: https://dev.neosmart.net/npr/2.html

The focus isn't "design" per se, but merely readability. Less harsh contrast, fonts with better hinting, limiting horizontal eye travel, keeping content from reaching the very edges of the screen on mobile, and making the size of elements (and how much DOM real estate space they take up) match their relative importance.

† A charset=utf-8 meta tag was added to the HTML since the NPR document was served without a charset but contained UTF-8 encoded elements (instead of their HTML-encoded counterparts)

The vision of CSS included the notion of alternate stylesheets and some capability in browsers for the user to pick the stylesheet; as well as the notion of user styles which sometimes supplement, sometimes override the page author's style; all governed by the famous 'cascade' i.e. the resolution rules that determine which styles get applied [1][2].

Firefox (perhaps under its previous name, I can't remember) initially provided a statusbar-based UI to quickly switch styles, but it was removed [3] sometime in 2004. After that, browsers, if at all, only provided a bare minimum UI to switch stylesheets, usually though the application menu. Outside of hobbyist circles, page authors stopped providing alternate stylesheets. User-applied styles lived on in various ways: through addons, through alternate user-agents, but tends to be relegated to specific audiences or passionate fans of the capability; not a mainstream phenomenon.

EDIT: To experience this blast from the past, Mozilla has a sample page [4]. If the directions seem nonsensical, it's because the default browser UI now hides the menu bar [5], demonstrating just how obscure this option has become.

[1] https://www.w3.org/TR/CSS1/#the-cascade [2] https://www.w3.org/TR/CSS2/cascade.html#cascade [3] http://forums.mozillazine.org/viewtopic.php?f=8&t=118119 [4] https://developer.mozilla.org/samples/cssref/altstyles/index... [5] https://support.mozilla.org/en-US/kb/what-happened-to-the-fi...

And in all honesty one of the easiest things to do in css is color themes, but marketing/designers tend to want to stick you to one “brand” or the css is implemented in a poor way to be able to swap colors. I’d love a dark theme for the New York Times but I doubt they’ll ever apply it.

Of course there’s all the edge cases with image based text which does pose a problem.. but I do wish designers would prioritize themes a lot more.

On the plus side, I think things like firefox reader mode are finally fulfilling this vision, just differently. Unlike custom css it's usable for average people too, it just needs more options like allowing web designers to turn it on by default, maybe some inline headers, etc. It's far from perfect but I consider it the first step in the right direction for 20 years.

Firefox's reader mode is incredibly useful and a vision of a much better future.

>Firefox (perhaps under its previous name, I can't remember)

Netscape Navigator? Phoenix?

My Firefox still has this... View > Page Style. It lists available stylesheets including none. Most websites are poorly designed and look like garbage with none.

Safari 11 still has this feature! Can you believe that?! I do indeed use a simple css file that sets a sans-serif font as the default (which I prefer). It's basically just this:

html{font-family:'SFUIText-Regular',sans-serif;-webkit-text-size-adjust:100%}

I wish the SF font family included a Georgia lookalike with modern optimizations. Sans serif can become a problem in a wall of text.

See https://github.com/oxalorg/sakura

"Just drop in sakura.css to any webpage and go from ugly looking 1900's website to a pretty modern website in literally 0 seconds."

Bookmarklet instructions here: https://oxal.org/projects/sakura/bookmark

Personally I've copied it to my own site and set up a bookmarklet so that I'm not introducing any resources I don't control when loading it.

There is no css being loaded on http://thin.npr.org, just the default browser styling for html elements.

Oh I know. I'm lamenting the fact that default browser sheets suck (any sane developer/designer is going to import a CSS reset as the first step, so there's no reason to make the default look so ugly).

Of course, depending on the reasons behind the existence of thin.npr.org in the first place, NPR could add something really simple that doesn't add more than a few bytes and make it look several orders of magnitude more palatable.

I like that it's just user agent styling. I think that was what they were going for. Also, you can change the user agent stylesheet if you want.

Does this work on Chrome? I found some old articles but none of the instructions work for letting me change the user agent stylesheet in Chrome.

You complain of 'ugly', but your 'beautified' version is harder to read, and I have normal vision and am using a big screen. It's a typical example of "designing for me", not "designing for everyone".

Screw the CSS, let the thin page stand as a thin page.

What's wrong with 'designing for me' when it's his own stylesheet for the page?

Because he's wanting the source to implement it server-side, for everyone. No-one would give a rat's arse if he was designing it for his own consumption and leaving the source alone.

I don’t know. All the objective literature I’ve read to date (sorry on a phone right now) has been to avoid harsh contrast, increase line spacing, avoid extreme contrast, and set a cap on max width. Just because you have a big screen (I wrote it on a 30” 4K monitor myself) doesn’t mean it’s wise to extend the content from Edge to Edge (not that this content is long enough to do that).

Some people need the whole size of the screen to be able to read. If you put a hard limit on the width, they will be very unhappy when they blow up the font-size to 200... But I doubt this works on any modern homepage anyway. Was a long time since I met these users last time. At that time there was still Netscape.

If you want to accommodate people with impaired vision who use large font size, define your content width in ems. I believe 90 characters per line is recommended but that's off the top of my head and I could be wrong.

I haven't seen anyone advocate to avoid "harsh" contrasts. Just people complaining about how it makes stuff harder to read. Which it does.

Actually, the viewport meta tag is (being made) CSS [1], and it’s way beyond me why unstyled HTML is rendered unreadably small on mobile devices without it (and without any fixed layout to speak of)...

[1] https://www.w3.org/TR/css-device-adapt-1/

> it’s way beyond me why unstyled HTML is rendered unreadably small on mobile devices without it

Because browsers that did that would be both breaking spec compliance and introducing vendor-specific rendering, two things that IE proved were very very bad.

Every browser in use today has a default stylesheet that injects styles into every site (if not explicitly overriden). Even for sites that have their own stylesheets.

It's just that a) they're really ugly, and b) the mobile ones are ironically not mobile optimized.

They’re not necessarily overridden. Percentages and ems are units that are derived relative to their inherited style. If you make your browser default have a base font of 24px instead of 14px and someone back in 2010 made their site css defined as

    html {
      font-size: 2em;
    }

Then your site’s 28px default font size that worked just fine on every browser now becomes 48px on mobile and breaks everything.

That’s actually the original purpose behind the relative sizing, so people could choose a base text size that best suited them.

That was before the pixel-perfect designers got full control over how I read stuff on my own computer :-)

What spec compliance is broken if the browser renders unstyled HTML with a font big enough most humans can read it?

The text size on the linked npr pages was perfect for me on firefox mobile.

The problem arises without the viewport meta tag, and not on all browsers or devices. This site does use this tag, which has become sort of mandatory even when there’s no layout.

Google's Pagespeed gods approve! https://developers.google.com/speed/pagespeed/insights/?url=...

Yeah, there’s clearly little attention given to typography.

About a year ago I got tired of news websites pumping meaningless images and garbage to my browser so I put together https://legiblenews.com/ and focused mostly on typography with a system serif font (if you look at your request console you’ll notice I make one and only one request to load the page).

Kudos to NPR for doing this. I hope more news sites follow suite. I also wouldn’t mind server-side rendered text ads, if that ever happens.

There is literally no attention given to typography. This version lacks a stylesheet and does not have inline font declarations.

In your second example, the total bytes in the page is 3697 bytes, the CSS makes up 948 bytes of that. You're spending about 25.6% of page weight on the CSS alone in that example. Your first example has a better ratio.

I'm not knocking you, as 3.7 kB is still incredibly light, and I think the point you were going for to begin with was to change the browser default stylesheet. Just wanted to post some stats.

Thanks. Yeah, I wasn't going for the byte-pinching approach (lots of good-old-fashion whitespace, not using css one-liner declarations, not bothering to refactor overlapping styles, etc); like you said, the intention was to simply show how a basic (user|site) stylesheet can result in a vastly more user-friendly result without going overboard.

(Now if you want to nitpick... I imagine the css has a better gzip/brotli compression ratio than the html by nature of its repetitive keywords.)

Yeah cheers on keeping it super readable. Now you've got me googling to figure out how to overwrite User-Agent styling.

CSS Resets. Most you'll find only are out of date though, and only handle the basic, non-vendor-specific attributes.

Sans underline: https://i.imgur.com/xMogV4q.png

(Replying to an earlier version of this comment):

You’re right. We’ve become - by and large - engrained to associate links with underlines, but in this context it’s not necessarily necessary (though probably a welcome hint for many).

My take: http://beza1e1.tuxen.de/Text-Only-NPR.org.html

No bullet points, because they have no purpose here.

Some color to be closer to full version and uses the fonts from full site.

I'm really loving the html3/4 default typo. There are people advocating for "better" typography in raw text documents, but even if it's quite prettier, it's not the point.

In Safari, preferences > advanced, you can set a default stylesheet. I've put Bootstrap and the formatting looks nicer (though you loose the page padding). There should be a similar feature in all browsers.

Totally agree. It doesn't have to be a binary choice between 0 styles and JS and the full blown site. You can accomplish lots with a few hundred lines of CSS without really affecting load time noticeably.

You have to work very hard to bloat a non-JS, non-web-font page.

And all-inclusive build of CSS-only bootstrap (arguably the most fully featured CSS library there is) is <20kb compressed. That's the size of a several second animated GIF.

What animated GIFs are you talking about that are not several MB for a 5 second clip? It's 2017 and the only time my 2 gbps internet connection makes me think my browser has gotten stuck is when it's a gif (and not a recent mp4-masquerading-as-a-gif, I mean those uncompressed, "lets repeat all the content in the next frame even though nothing has changed" honest-to-god GIFs).

I turned your styling to a Stylus/Stylish script: https://github.com/taoufix/user-styles/blob/master/dark-thin...

It's a dark version. Feel free to copy/change it.

More importantly, text-only versions should use semantic HTML5 with correct markup and optional microdata.

Less harsh contrast is good, but it's better to knock down the white background a bit, rather than take the font down.

Text only means no CSS.

Reply on news.ycombinator.com