How to Design for the Modern Web | Hacker News Reader

How to Design for the Modern Web

medium.com

227 pointsgeocar93 comments

Medium is doing a great job on the web design front already! Reading on my laptop, there was a fixed header taking up about 10-15% of my screen height (in fullscreen), a fixed social networking sidebar on the left and a lovely dialog box attached to the bottom of the screen letting me know I can subscribe to Medium for $5/month. Best part about that bottom bar is that just in case I haven't subscribed when I closed it out, it is more than happy to show up after a few minutes when I've switched back to the tab, as it did while I was composing this commentary.

Really helps the readability of the website, which I especially appreciate on a website devoted entirely to reading. Really makes me wonder why Firefox even bothers with a Reader mode when we have high quality web design like this!

Let's never go back to hosting our own writing on our own websites. Medium has made that obsolete.

^/s

It’s impossible to read any article regarding web design on Medium without having to seriously question whether it’s intended to be satire or not.

This.. “Don’t know anything about web development at all? Don’t worry you can just take a week long bootcamp! Already a web developer? Buy the C programming language book here and get out while you still can.”

The article in this post is clearly satire.

Yup. I like to hold my phone landscape. The overlays reduced the viewing area to a single line of text. Closed the tab.

Stylus[1] (permanently removing all the fixed elements) and Firefox reader mode are the only things that make Medium bearable. Static site generators are the way to go.

[1] https://addons.mozilla.org/en-US/firefox/addon/styl-us/

In a mobile browser, they also obscure the article text with an "Open in app" button that stays on screen as you scroll.

Ha! Satire aside:

With high quality open source publishing tools like Hugo[1] and Ghost[2], and free hosting from GitLab/GitHub pages, there's little excuse not to self-publish.

Even using a paid service like Squarespace would be a step up in my opinion.

[1] https://gohugo.io/ [2] https://ghost.org/

> and free hosting from GitLab/GitHub pages, there's little excuse not to self-publish

Seems like satire has settled in for the duration.

what's the problem with GitHub pages?

I'm amused to see GitHub thought of as self-publishing. It is nothing of the kind. It's someone else's platform granting you an instantly revocable right to use their facilities, no - or just a few thousand - strings attached. In principle no different from Facebook and Twitter and all the other shoddy complimentary crap.

It's different in that I am the customer, I literally give them money to host my stuff. They can of course stop hosting my stuff at any time, but then I will also stop giving them money.

I'm not 100% sure since I'm a developer and not an entrepreneur, but I think they prefer to receive money rather than not receive money.

For you, yes. If you look up at the ancestor posts you'll see the discussion was about free hosting at GitHub/gitlab.

This seems to be a silly distinction because I doubt you will find many sites which pass your bar for being self-published. Unless you bought your own hardware, host it on land you own, connect to the internet via your ISP, and call it something under your TLD there are still a lot of people who can revoke your access to the internet arbitrarily and have terms of service. Nobody is an island.

With GitHub you can use your own domain and have full access to the code. GitHub revokes or kicks you off? Just upload the code somewhere else and point your domain there. That's not the same situation as publishing on Medium.

Gathering an audience is way harder without Medium. It might be atrocious in other ways, but it vastly increases the chances of your content getting read.

Does it really tho? This one seemingly got featured by someone at Medium and it pulled in around 10 000 hits from newsletters. While it's more than nothing its no where near the majority source of my traffic.

On principle I'll avoid viewing an article if it's being hosted on medium and skim the comments to decide whether it's worth viewing directly. Probably go on to view the original about 1% of the time. Sorry author, but using medium already counts against you.

And what's with all these sites that now force you to accept their cookie policy? Totally pointless when you configure the browser to delete cookies when the browser exits...

For writers who feel stuck on Medium given it's recent downward trajectory, I'll just leave this here: https://github.com/ageitgey/medium_to_ghost

Did you try Make Medium Readable again ?

HN discussion: https://news.ycombinator.com/item?id=16516126

Chrome: https://chrome.google.com/webstore/detail/make-medium-readab...

Firefox: https://addons.mozilla.org/en-US/firefox/addon/make-medium-r...

Firefox has a reader mode. I use that for websites with terrible designs that are ostensibly made with the idea I would read them, but seem to have a completely different goal the poor writers on the other end are not clued in on.

Add-ons designed to "fix" a specific website are to be considered harmful. If a website can't respect its readership, an add-on isn't going to fix their attitude. To be clear this isn't a choice of otherwise equal trade-offs and which you make are a matter of taste. The types of sites described within the original article, the type of page I described upon loading Medium for the first time in probably a couple of months, and the behaviors described in the comments from the people that replied to my post are blatantly disrespectful to their readers.

its so great they run a freemium model with amateur writers

> Really makes me wonder why Firefox even bothers with a Reader mode when we have high quality web design like this!

Perhaps someone will make a 'medium' plugin for FF to make the plain reader mode behave more like medium? ;)

Reader mode is about:reader, which is protected from modifications by extensions. (This annoys me, because I’d like an actual black on white theme in reader mode, and I can’t do that without, if I recall correctly, userContent.css modifications, which you can’t do on mobile.)

Check out the ff plugin Dark background an light text

On Android: turn on reader mode, press the Aa button in the bottom right, press Light. The page is displayed with black text on white background.

Whoops, I meant white on black, which is much better than light grey on dark grey, on devices like OLED displays. Sigh.

That's the default for me, or touch Dark in that screen.

Ah, I zoomed in and saw it: the text is not white, it's light gray.

#eee on #333 is a long way off #fff on #000.

Yep. I used to have a Samsung SG2 with AMOLED and I hated grayish backgrounds in dark rooms at night: they emit light and hurt eyes when a pure black one doesn't emit any. Luckily my ebook reader of choice (Cool Reader) let me set the colors for day and night modes.

`Clean Up` bookmarklet is your friend:

    javascript:(function(){(function(){var%20i,elements=document.querySelectorAll('body%20*');for(i=0;i<elements.length;i++){var%20p=getComputedStyle(elements[i]).position;if(p==='fixed'||p==='sticky'||p==='-webkit-sticky'){elements[i].parentNode.removeChild(elements[i]);}}})()})()

This is great, thank you.

Refactored to be shorter and more modern:

    javascript:Array.from(document.querySelectorAll('body *')).filter(tag => ['fixed', 'sticky', '-webkit-sticky'].some(prop => window.getComputedStyle(tag).position === prop)).forEach(tag => tag.parentNode.removeChild(tag))

Even more shorter and modern :)

    javascript:(() => document.body.querySelectorAll('*').forEach(el => { if (['fixed', 'sticky', '-webkit-sticky'].includes(getComputedStyle(el).position)) { el.remove() }))()

Medium is not doing any type of good job. Going on the website, i'm immediately flooded with a layout of pictures and headlines designed to gain my attention. Clicking on an article, I get two notifications that pop-up regarding their privacy policy and then their premium service. Their entire schtick is designed to distract you and keep you on their site for as long as possible, as part of a scheme to monetize as much out of every visitor. For a much better design, check out something like instapaper or it's competitors.

I know people say that sarcasm is hard to pick up in text form, but I didn't think it was that tough.

Read the comments to the article on medium.

Fortunately, the comments are only accessible to members of that particular blog. Open commentary is so 2015.

My friend, my comrade in arms, your technological taste and superior sensibilities are second to none.

The comment you're responding to was sarcastic/satirical.

I think their fixed header is way too big, even on my monitor.

> Let's never go back to hosting our own writing on our own websites. Medium has made that obsolete.

Medium has not made that obsolete at all, and you sound like a shill. Encouraging people to host their own websites leads to a more free future. Search, networking and analytics can be done on top of that layer. Strong network coherence is why social networks currently exist as centralized services, but it's a bandaid that patches an unsolved problem.

Pretty sure it was satire

This screenshot of Medium is on a 1080p monitor at 100% scaling: https://imgur.com/a/gMa8dQT

Almost half the view space is Medium surrounding the article with whatever intentions they want to push on readers.

I publish all of my posts directly on my site (static site with Jekyll) but I used to republish most of them on Medium, but as of a few months ago I pulled all of them off Medium. Medium really doesn't do anything for you unless you use them as their primary platform and YOU drive traffic to the articles, in which case, you might as well just use your own platform.

This is a bit glib, I know, but my method of not needing to show an annoying cookies box on my personal website was to... Not use cookies.

Or analytics.

Or third party fonts.

Or even JavaScript—I just haven't needed it yet. It's just a content site; why bother?

I bought some fonts I could host myself. Bought a base CSS / HTML template for so cheap I kinda felt bad about it. Did some edits to the template. I also had a blind person to review the site with their screen reader and we pleased when they came back saying it was one of the best they'd ever, uh, heard?

I host my own images too. It's all first party and it honestly feels great to focus on the content rather than stress about random numbers on an analytics dashboard. I have no idea how many reads the stuff has, but people are translating[0] articles for free and requesting RSS feeds. (Which I also quickly coded up. Did I mention I rolled my own static site compiler too? Ruby is really great at this kind of thing.)

The only thing I don't like right now is that I don't have an easy way to write first drafts and have them edited unless I want to shuffle the data from something like Google Docs. In an ideal world I'd pay my editor to learn the markdown inspired template language I created[1] and how to run a pull request in GitHub.

[0] Never did I expect someone to offer to translate something for me for free; let alone into languages as obscure as Uzbek.

[1] Markdown is great, but if you want to make content that's more HTML-y with ease I find it gets out of the way too quickly. I want to be able to open a <blockquote> and not have to put a bunch of paragraph tags in there.

I'm with you, I don't cookie up any of my websites and have no intention of doing so. (Right now, my sites are super-primitive; my main one I've had for 22 years or so, but I'll be doing more).

But I do need to say that third-party fonts are not the problem here, or shouldn't be. Neither Google Fonts[1] nor Typekit[2] sets cookies. I don't know off the top of my hand if any of the other services do, but if so I would agree it's a good reason not to use them.

Disclosure: I helped launch Google Fonts and was involved in the decisions to make it privacy-friendly.

[1] https://developers.google.com/fonts/faq#what_does_using_the_...

[2] https://www.adobe.com/privacy/policies/typekit.html

I'm certainly not going to rail against third party fonts. The web is a mess and this is just a small part of the mess and certainly not the worst offender.

That being said, however, it's certainly possible to fingerprint traffic if you serve fonts as a third party; even if you don't use cookies. Most third party font suppliers use JS, and even if they didn't, let's not pretend that cookies is the only thing we have to worry about. One of the issues I have with the web is that I want technical guarantees when the answer is often "just trust us" even if we shouldn't need to.

Take fonts, for example. There is zero reason that fonts need to be served third party. All we should need to do is to specify a URL-based UUID for a font in our HTML and provide a cryptographic signature from the font owner that authorizes its use at this URL. Complex licensing is completely pushed to a different layer. The only tricky part is keeping ownership keys secure.

No judgements—I get that people are lazy and use the tools they have, so JS wins.

But for me, and my lowly personal website, we shall use secure headers. We shall host our fonts and images ourselves; and as the monks of yesteryear, our austereness advances an end unto itself.

> There is zero reason that fonts need to be served third party.

I use the service Icomoon[0] in production. It's been immensely helpful for generating a custom icon font. Our designers upload icons they create, and Icomoon bundles them all in one font file. Easier than multiple SVGs and only one HTTP request. I wouldn't want to manage that myself — so there's one reason for fonts to be served third party.

[0] https://icomoon.io

I personally don't like sites that bundle icons into fonts. I got sick of reading a different font on every website, some being very hard to read, so I override the font on every website with stylus. All the icons, which should be images, become square boxes.

Right but you shouldn't need to. In my proposed solution the browser could just make a separate, non-third party request for the font to icomoon.io and on load, if browser needs that font and doesn't already have it. It should get it from your OS provisioner (Google / Mozilla / Apple / Microsoft) directly and if they don't have it (or Icomoons public key) they could request it from Icomoon on your behalf. Or, if Icomoon is up to shady tactics, refuse the request.

You said there's zero reason for fonts to be served by a third party.

And then you're saying that part of your proposed solution is for the user (party 1) to download the font not from your site (party 2) but from Icomoon (party 3, i.e. literally a third party).

Did I miss something?

The point is that copying or hosting the font shouldn't be what is copyrightable. It should be use. Most commonly used fonts should be pre-installed. Only for the very weird situations should the browser resort to downloading the font and, in my opinion, should do it in a way that is not trackable.

The way we currently download third-party fonts exposes the content that we're viewing to the font hoster. That's really stupid. If we need to download from a third party it shouldn't be in the same browser context. I.e., the party shouldn't be able to execute arbitrary JS or see the document Origin.

"There is zero reason that fonts need to be served third party."

Except for caching. If you use the same font as another web site I've visited recently, I'd rather my browser re-use the already-downloaded font file, rather than downloading the (probably) same file from you. Especially if it's a large font file with Chinese characters.

Nice, you've described my website too. :) One other thing, that I've not seen offered anywhere, that I have on my website in addition to what you described, is a download link for a tarball of the offline version of the website that works perfectly for offline reading via file:// protocol.

I have made it because I have made my static site generator for the purpose of storing my Linux administration knowledge, and having an offline version is good if you get cut off from the internet, or you're offline and want to figure out how to setup that gprs modem again on Linux.

I added the feature to my public websites too, because why not. It might be useful to someone somewhere and it also adds weight to the claim that "I don't track you".

What happened to single pixel analytics that we used to do? Not everyone ditching Javascript analytics wants to do Goaccess self host route.

I know a lot of people wanted to go Web Apps direction or even what I called a Web OS direction, where you have the whole OS write in Javascript running inside your browser. But I just want good old Web Page, may be with a little interaction.

Why cant we have a few Web Fonts as default and ship with every browser instead of downloading it 10 zillion times? Most of the time I hate Web Fonts because I hate reflow.

How glorious that to read this I had to duck under a 'download the medium app' popup and hop over a 'sign up to premium' popup. Always good to see dogfooding.

You might find this useful[0], basically removes clutter. Found on some recent topic.

[0] http://outline.com/3JqpTH

With JS disabled, this page comes up blank.

Would have been funnier if you came from Reddit mobile... ;-)

There's a lot to be said for sites like this: http://lite.cnn.io/en

It's fast, non intrusive and just gives you the information you want without the annoyances.

It also works far better for disabled people. I know some partially sighted people and some websites are a no-go now as screen readers can't cope

Sure but that could never be the main view. It goes too extreme in the other direction. Which is great for some use cases. But the mainstream will want things like search, categorisation and even images.

So while a "lite" view is good, I'd like websites to improve their main views so they are fast and work well with screen readers and other assistive technologies.

We have the technology, if not the will.

I too find this useful on an old Blackberry phone, along with NPR[0]. Unfortunately, I've found that the CNN site no longer seems to get updated daily.

[0] https://text.npr.org/

Brilliantly, the NPR text site is what you get if you reject their GDRP popup, so one would hope they continue to update it.

whew boy, I love this

This is amazing. Is there a BBC version as well (which would fix not just the design, but also the content)?

Would you pay for it to be the default and make up for the lost ad revenue?

Even as a subscriber news sites are bloated. I wish the subscription got me an optimized mobile first view

yeah, I've become so allergic to modern noisy web that I feel calmer just reading that url

One tip that is not covered: If the user already has the app installed, right on top show some message like, "you can only read 2 more exclusive articles this month", which expands to some marketing speak and option to pay $50. This will make the user immediately run for their wallet and subscribe. I just noticed that Medium has this down.

This is a really good assessment for why I don't use the internet as much as I use to or at least the websites I frequent have become ones that aren't bloated and unusable.

I feel like blocking European users should return a 451 error, "Unavailable for legal reasons"

I'm not sure if these decisions are purely based on legal (and financial) reasons. After all, there are now countless examples of how be compliant.

The only group of websites that I have encountered blocking me are small-town newspapers in the US, mostly the south.

Compliance is almost trivial for a newspaper website that does not ask for any data.

My suspicion, especially considering the regional distribution of these blocks, is that some of these decisions may be driven by politics more than anything. Plus, of course, the possibility that a low-quality rural newspaper can count their European visitors on one hand.

Not sure what lead certain sites to take that path, but the real issue IMHO wasn't really a legal one but rather that the site owner was indeed a teapot.

Wait: block all visitors from Europe instead of making changes to your site?

Nobody had an issue with that? I can’t believe this hasn’t been commented on.

The linked post is definitely satire.

So embarrassed that I didn’t pick up on that the first time. I assumed they were kidding sometimes but not the whole thing.

Poe's law in action, not sure what this says about Medium content in general.

1. The article is satire.

2. This is HackerNews. 99% of us work for companies with free products subsidized by overt tracking and complete disregard of user privacy.

> 99% of us work for companies with free products subsidized by overt tracking and complete disregard of user privacy.

Indeed, also security but that's for another rant.

Linkedin.com is one of the worst offenders here, I avoid using that site because of it.

Oh man, I just found a new one on the Seattle times mobile [0]. They have a sign up for their newsletter pop up on the bottom of the screen and clicking the x to close it flashes the sign up button and does not close it. You can just keep pressing the close button and all it does is flash the sign up button.

[0]: https://www.seattletimes.com/seattle-news/homeless/is-seattl...

I could close it properly.

Do people not realize that this is satire?

With 150 000 reads so far, I hope most do.

How tongue-in-cheek. Love it.

it's basically a 1:1 a description of reddit

Didn’t realise Europeans couldn’t use reddit

Mostly news sites did that from my experience, I just found it ironic with how Americans stereotypically shout freedom of speech at every opportunity and then news outlets turn around with "Oh you're European, can't read our news".

Reddit's mobile website truly hates itself tho.

Certain subreddits are banned in Germany AFAIK.

> Let's never go back to hosting our own writing on our own websites. Medium has made that obsolete

nope! hosting your own site on your hardware puts you in control of your site, i wouldnt hand my house keys over to a housing co-op you shouldnt let someone talk us into doing that to the web.

Is this a joke?

I quote: "A neat little trick is to make the link to close the modal small and put it very close to the link that lets the user install the application. This will make users much more happy as it’s so easy to install the application and not accidentally close the dialogue!"

Go away with your concept of the "modern web". I must be post modern as I do not install random apps. What a stupid horrible negative pattern!

Dude this is a satire

> Is this a joke?

The post, yes it's a joke but reality is just as sad, Reddit, Medium, Facebook, Linkedin etc all do this kind of crap.

Reply on news.ycombinator.com