
How to Design for the Modern Web - geocar
https://medium.com/commitlog/how-to-design-for-the-modern-web-52eaa926bae2
======
SllX
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.

~~~
winningcontinue
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.

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

~~~
n0tme
Read the comments to the article on medium.

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

------
3pt14159
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.

~~~
raphlinus
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_...](https://developers.google.com/fonts/faq#what_does_using_the_google_fonts_api_mean_for_the_privacy_of_my_users)

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

~~~
3pt14159
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.

~~~
andrethegiant
> 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](https://icomoon.io)

~~~
3pt14159
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.

~~~
rahimnathwani
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?

~~~
3pt14159
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.

------
boffinism
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.

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

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

~~~
forgotmypw
With JS disabled, this page comes up blank.

------
jjbinx007
There's a lot to be said for sites like this:
[http://lite.cnn.io/en](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

~~~
roter
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/](https://text.npr.org/)

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

------
riantogo
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.

------
redefineminimal
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.

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

~~~
caspervonb
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.

------
projectramo
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.

~~~
burlesona
The linked post is definitely satire.

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

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

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

------
mrep
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...](https://www.seattletimes.com/seattle-news/homeless/is-seattles-
homeless-crisis-the-worst-in-the-country/)

~~~
bausshf
I could close it properly.

------
anonytrary
Do people not realize that this is satire?

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

------
zebraflask
How tongue-in-cheek. Love it.

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

~~~
jayflux
Didn’t realise Europeans couldn’t use reddit

~~~
caspervonb
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.

------
nuthersox
> _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.

------
worik
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!

~~~
caspervonb
> 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.

