How to Design for the Web in 2019 | Hacker News Reader

How to Design for the Web in 2019

medium.com

199 pointscruxex95 comments

I love the tone of the article.

Excerpt:

> Tip: Don’t serve the prompt to disable DNT on the guide that shows the users how to disable DNT as the conversion rate ends up being rather poor.

However, 4 unwarranted mentions of Brave (with affiliated links) and a big link to download Brave at the top of the article?

Hell no, please download Firefox instead! (just had to counter-balance this big advertisement on the HN front page).

edit: also, the original title is "How to Design for the Web in 2019"

> Hell no, please download Firefox instead!

My main browser is FF and secondary is Brave.

What's the problem with Brave - did I miss a memo?

I was just countering what I see as an obvious unwarranted advertisement for Brave. I think it is our duty to counter such advertisements here on HN.

As for the problems I see with Brave, though that was not my point:

- their business model, based on Basic Attention Tokens: "Basic Attention Token radically improves the efficiency of digital advertising by creating a new token that can be exchanged between publishers, advertisers, and users.". Well, I don't want to improve the efficiency of digital advertising. Even the name is telling. I do not want to sell my attention.

- they are based on Chromium. I don't want this browser engine monopoly, controlled by Google.

Also part of the use of the tokens is to pay creators on sites they operate but the creators have to opt in to get paid, and until they do Brave keeps all of the money people are "donating".

A youtuber asked them not to collect money in his name and they said no [1], which would be illegal if it were real money.

[1] https://news.ycombinator.com/item?id=18734999

Use Dissenter, a version of Brave, with all the BAT support removed.

https://dissenter.com/

I wrote "they are based on Chromium. I don't want this browser engine monopoly, controlled by Google."

Why would I use a fork of Brave?

edit: From https://en.wikipedia.org/wiki/Gab_(social_network)

> Gab is an English-language social media website, launched publicly in 2017, known for its mainly far-right user base. The site has been described as "extremist friendly" or a "safe haven" for neo-Nazis, white supremacists, and the alt-right. The site allows its users to read and write multimedia messages of up to 3,000 characters, called "gabs". In financial filings, Gab stated that conservative, libertarian, nationalist and populist internet users were its target markets.

> Gab promotes itself as a vehicle for "free speech", "individual liberty", and "the free flow of information online"; these claims of free speech have been criticized by scholars as "merely a shield behind which its alt-right users hide" and "an echo chamber for right-leaning content dissemination". Gab primarily attracts far-right and alt-right users who have been banned from other social networks. A majority of Gab's users are white, a majority are male, and a majority are conservative. Antisemitism is a prominent part of the site's content and the platform itself has engaged in antisemitic commentary.

Well, not really interested (for context, Dissenter seems to be a browser built to integrate the Gab social network).

> Why would I use a fork of Brave?

Yes, that's true. But I wanted to let you know about a way to avoid BAT.

> Gab promotes itself as a vehicle for "free speech"... ... ...

I run Dissenter as my primary browser, but don't have a Gab account, so I pay no attention to the comment feature. I just want a browser that blocks all the things natively, and doesn't have BAT.

Good points! Sorry if my comment felt a bit harsh. I am probably a bit overcautious in this thread.

That's because the whole article is Brave ad.

Clever one, but still just an ad.

It's an ad for "K&R's The C Programming Language" actually ;)

It's funny you should mention yourself here the affiliated Amazon link you put at the end of the article :-)

I've decided to renounce the web after more than 7 years as a professional web developer. My current plan is to see if I can transition to making Swift apps for Apple devices instead.

This was partly triggered by the recent news that Google is taking aim at ad-blockers in Chrome. I doubt I would have ever wanted to go into web development if I knew what the web of 2019 would look like without ad-blockers.

A couple things drew me to the web.

1. You could write a site once, and it would work (pretty much) in any browser.

2. The dev experience of being able to instantly see changes was great.

3. It was easier than app development.

After dipping into some recent WWDC videos, I was impressed to see how far app development had come.

1. With SwiftUI, you can learn once, and build apps for pretty much any Apple device.

2. The dev experience is great with instant live previews (in the beta version of Mac OS Catalina).

3. SwiftUI is very easy to reason about, particularly when coming from a component-based architecture framework such as React or Angular.

At this point, waiting for an "app-like" experience for web apps feels a bit like waiting for the year of the linux desktop.

Progressive Web Apps have come far, but they still have a long way to go, particularly in "feeling" like a native app experience. When interruptible animations are introduced, I'll give them another look.

For a long time, the web had the perception of a free and open democratiser, but it's become completely commercialised. It's a petri dish for privacy violations. Why has my ad-blocker stopped 18,000 trackers in the two months since I've had it running?

I want to make tools, not marketing funnels. Apps that follow Apple's suit will encrypt user data so that not even the app maker can view user data. When was the last time you saw that on the web?

> At this point, waiting for an "app-like" experience for web apps feels a bit like waiting for the year of the linux desktop.

You should check out Webflow and Figma.

Why would you trust some corporation to look after your content into the future. At least with Sketch I know I can continue to use the software after my subscription expires. These companies are only one takeover away from jacking up their prices or removing a little used feature that is crucial to you.

It's called export.

I'm not sure a crappy SVG file is going to cut it in the real world.

You're embarrassing yourself out of ignorance (and arrogance). Go export something in Webflow and report back.

The point was that they feel very close to native apps.

Apps do a huge amount of tracking too, and they have their own dark patterns, like making things really addicting

What's more is apps exist in their walled gardens far more than websites, even if the web has been getting worse in that regard

Yeah when web apps started to take off, circa 2000 I'd say, the big selling point was the ease of deployment and update and the ability to have a single code base for multiple OS's. Also, up to that point application installation mostly consisted of going down to uber electronics store and buying a box with the app burned on a CD.

However, not too much later I found many instances of mom, pop, buddy and sis having no troubles downloading and installing apps like iTunes and, ironically, web browsers; regardless of their operating system. Also, these installed apps phoned home to keep themselves up to date.

Fast forward 10-15 years later and there's a significant increase in internet traffic but the increase is do to thick clients on mobile devices and now it's the same issues as before; how to package and deploy on multiple platforms and maintain a single code base. But the thing to not is users don't seem to mind installing and uninstalling apps if the interface they're using makes it easy.

And that brings us to present day where mobile development has pretty much ditched web apps but desktop development is still holding on to web apps. And it's rather hilarious to watch the schizophrenic evolution of web app technology over time regarding who much of the code to put on the client vs the server.

All that to say, I agree; technologies exist to build multi-platform client applications that reach back to servers for data if they need to. And I wish the whole application in a browser thing would just die and browser would return to what they were designed for, displaying hypertext.

As a fellow web developer, I want to offer a different viewpoint. Firstly, the pros that you listed for the web are equally valid today as they were 7 years ago. But additionally, I want to push back a bit against the "app-ifiction" of the web. I see the web as its own platform, and trying to implement "native" features on it seems counter productive. The web has features which are completely native to it, which are either very difficult, or downright impossible to replicate on Android and iOS apps (proper URL's, standardisations etc., just to give some examples off the top of my head). And yet no one seems to be complaining about that. I understand that this argument comes across as a what-about-ism, but I do genuinely think that the web platform is different, and should be approached on its own terms, rather than trying to mimic an Android or an iOS app experience.

On a higher level, as web developers, I think it is worth remembering that we don't have to build these half broken app experiences. We can still build web sites. We can still open a simple index.html file, put in some markup, and voila, it renders on the browser. We can choose not to implement all the trackers, invasive ads, broken "personalisation" algorithms etc. The fact that these things are implemented on all websites nevertheless is not because of some technical failure of the web platform. I believe it's a human problem of organisational politics, where the business users want these features, and overrule any objections that the developers might have regarding privacy or performance. Additionally, Android and iOS apps also implement these tracking features, with numerous SDK's available to create these marketing funnels that you mentioned. They may not be visible as an ugly badge icon in the top right corner showing how many were blocked, but they are definitely there. At the end of the day, the business/client that we are working for is asking for these things, and we can either try to educate them against these features, cave in and implement these functionalities, or move to a different organization/team/project more in line with our view points. But we cannot solve this with a technical solution like changing platforms.

Finally, regarding the perception that the web is a free and open democratiser, isn't it still one? I can still spin up a web server not hosted on one of the cloud platforms to host and serve my content. Yes, discoverability, scaling etc., are problems, but that's true for practically everything from social media, to e-commerce. Again, from a technical perspective, nothing is stopping us from developing websites or even web apps which are not beholden to commercial and centralised interests. Again, we don't do it, because of "IRL" reasons which don't really have any good technical solutions. In fact, going into the highly controlled and regulated environments of Apple's iOS, and to lesser extent Google's Android, sounds like the exact opposite of free and open.

That being said, if you find that you like working on iOS or Android apps, or you want to build apps which leverage the strengths of those platforms, then go ahead and I hope enjoy it!

All of the problems in the article are caused by corporations trying to maximise profit. This has turned you off developing for a decentralised platform and instead to one under complete control of one corporation.

This company also uses that control granted to it to:

- Force a cut of all payments through them

- Promote their own services and software above all else

- Ban protocols they don't approve of (The decentralised web never would have been made if Apple had their current dominance with their current strategies)

- Censor political views they don't agree with https://en.wikipedia.org/wiki/Censorship_by_Apple

For this corporate dominance the user cannot remove or modify anything they don't like about the app they're using (remove annoyances, make highly calculated addicting software less so, improve accessibility).

Use affiliate links and URL shorteners! People love it when they have no idea where a link will take them, and it will surprise and delight them when they discover it was an affiliate link!

Browsing the internet today is so exhausting.

I would add one more rule "make sure your user has to perform at least 37 clicks before accessing your ad riddled article"

I find that most of the time, the ad-riddled article wasn't worth reading. The number and intrusiveness of advertising grows in proportion to the desperation of the author to make the most of what little time you're going to spend.

The Internet is exhausting because the Internet is exhausted. Good content is hard, and there's less of it than you'd hope. The web gains perhaps a few minutes worth of meaningful content per day, if that. And unless you particularly enjoy being the one trying to ferret it out of the torrent, it's better to let some other aggregator do it for you. Read that, then turn it off and go do something else.

> The number and intrusiveness of advertising grows in proportion to the desperation of the author to make the most of what little time you're going to spend.

I have a rule of thumb that hasn't failed me for a decade now: the trustworthiness of a source is inversely proportional to the amount of advertising it puts up.

So he basically posted the same last year (https://medium.com/s/silicon-satire/how-to-design-for-the-mo...) without the Brave links.

The Medium editorial team kinda messed that one up, I gave permission because I thought it was really funny that Medium was gonna feature me bashing on Medium. Which it was but they kinda just made it dull and ruined the tone.

> This one remains the most important principle and it’s not without reason. Well paid focus groups have shown that the very first thing a user wants to do when visiting your web site in their web browser is to install a mobile application.

_hangs head_

> To make Medium work, we log user data and share it with processors. To use Medium, you must agree to our Privacy Policy, including cookie policy.

LOL, meta-irony?

The title is misleading but the article is a true masterpiece.

My only regret is that it was published on Medium who does implements almost all the bad practices the article criticizes.

It's an illustrated guide with real working examples!

Can't even read it "Keep the story going. Sign up for an extra free read."

I thought that was the joke until I read the comments here and realised there was a full article and Medium actually blocks articles that way now.

Huh. I had no idea I was limited in the number of reads. Amazing how Medium went from consistent minimalist hosting for long-form articles to this.

You can log out to read, or use private mode, or use web archive sites

Why oh why is this being published on Medium? It does all of that and more.

I think that's sort of the point. The irony there just adds to the article.

Great article - poor execution.

Users win when the browser market is competitive. The article heavily promotes Brave. Others to move to are Firefox, Opera and Min.

I'd stay away from Opera. If you don't like Firefox, try Vivaldi instead - feels like "old" Opera, made by the same people, mostly.

“Users win when the browser market is competitive.”

i’ll get downvoted for this, but i simply don’t agree. i think users lose when there are multiple browsers. my argument relies on a basic fact: one cannot guarantee that a new website will work on all browsers without heavy amounts of testing. as such, the battle of the browsers shouldn’t be around engines, which simply duplicates code into different paradigms, instead it should be around ideas.

imagine a world with a single browser: all websites work perfectly, while implementing new tech would be a fierce competitive battle of ideas.

want newTechX implemented? then you’ll have to convince ms, goog and the rest of the community in order to implement it.

users would get both the competitive advantage and a stable “runs anything environment”, instead of the chaos of yesterday.

Sure, while that one browser is functioning perfectly and the company developing it is playing nice/functioning perfectly.

Wouldn’t it be great if everywhere we never had to make any choices between products, there was just one clear perfect choice offered by one perfect company? Yes, but that’s a utopian fantasy.

Sometimes it's very much in the users' interest for websites not to "work perfectly", i.e. do what the designer intended.

I guess I’m a contrarian, I think “all websites work perfectly” when they are allowed to be web sites instead of “apps”.

“Heavy amounts of testing” comes from trying to use the web as a combination of magazine publishing design style and Flash animation interactivity. If you used hypertext with semantic markup, you’d work in anything including Lynx in a terminal and text readers for the blind. Add a minimalist CSS such as https://milligram.io/, change font, spacing, colors of elements, and be done with it.

If you use the web just a piece of paper to convey information, think Economist or The Atlantic instead of Cosmo or Us magazine, it all pretty much “just works”.

By contrast, if you use the web as a SPA (single page app) engine, you’re gonna have a bad time. For that, test in Safari for iOS, Chrome on Android, so you work in their native embedded engine. Given they’re both originally WebKit / KHTML, you’re not too far apart.

This approach downscopes your test footprint dramatically. You’re still worried about “duplicates code into different paradigms” but (a) you should have different paradigms for Android and iOS, they have a very different user expected feel, and (b) its really only the 2 paradigms with 2 modalities each: iOS/Android, phone/tablet.

Recognize this is a contrarian view when these days it’s popular to try to shoot for a single experience on every form factor, and easy to forget most content on the web is still not in app form, it’s just stuff to read. HTML 3.2 / 4 with CSS wasn’t a terrible place to live.

Fun fact: “Internet Explorer 5.0 for the Macintosh (really!), shipped in March 2000, was the first browser to have full (better than 99 percent) CSS 1 support, surpassing Opera, which had been the leader since its introduction of CSS support fifteen months earlier.”

That's right, comrade, that's also why we need a single party, a deeply centralized world government and a great Führer^W Leader to guide us all under its wonderful unifying vision of the brave upcoming world.

Let's all remember that harmony is not unison: our single goal must be to reduce everything until no difference remains and the universe is at last reconciled into the great singularity.

> "[O]ne cannot guarantee that a new website will work on all browsers without heavy amounts of testing."

Then maybe all browsers should implement standards consistently. That's why we have standards.

Even if everyone implemented the same set of standards, there would still be bugs. Considering the code size of browsers, I expect on the order of 10,000s of bugs in each browser. Now that's not going to be a problem for a static blog, but any sufficiently complex web application is bound to hit some of those bugs.

> imagine a world with a single browser

I have a better idea: imagine a world where the specification for how to render websites is simple, clear, unambiguous, and infrequently changed.

Do you hear people saying the world would be better off if there were only one PNG viewer?

When there was a single dominant browser, it didn't reduce the chaos all that much. Are you pining for the days of "This site best viewed in Internet Explorer 5.0"? Considering that currently in the front page there is an article bashing Google for single-handedly introducing <toast> with no outside consultation,at this point if you want new tech introduced Google are the only people you need to convince.

I moved away from Firefox, Vivaldi is just far better...Mozilla screwed up, you can get better built in features in Vivaldi, than Firefox even has addons for.. because those retards at Mozilla.. they might aswel work for Google.

> Many modern browsers these days support a HTTP header called DNT which stands for Do Not Track.

Note that Safari has already removed the Do Not Track header as websites began using it as a way to fingerprint users.

Is it ironic that this is on medium, which is a great example of how not to design for the web?

Does Medium have a team of people here to downvote anyone who points this out? I've seen several comments like this one, and they're dead or nearly.

Re the first point of this article I generally do not want to download the mobile app for a website I like my browser just fine. It annoys me when I get harassed to download the mobile app (Reddit)

Dark Patterns 101 in 2019

> Tip: If you don’t have an actual mobile application, you can just get an intern to package your website in a webview with security disabled and ship that!

Wtf? What the fucking fuck? How on earth is this a tip?

If you don’t have an app which offers anything besides the website itself, why bother with the app at all?

This type of app is the one I hate most of all and immediately lowers my impression of any company.

What a pointless waste of everyone’s time.

Oh the irony of posting this via medium.com ...

It's hilarious but I'm sure some people will think it's a compilation of good pratices.

Yeah, the article is confusing for that matter.

Medium always have had a problem with shallow content. Now they decided to completely screw their website and they are great at it. Stop posting on Medium, please. There really can’t be an audience on that monstrosity of a website, it’s just not worth posting there.

This article wins - because at the very bottom is a link to K & R's C Programming Language book. Some people like cat pictures, memes, clever saying, etc... I like links anything authored by Dennis Ritchie.

IMHO Wrong:

1. Mobile App. The site has to work by itself. Else go PWA

2. DNT. Respect Users decisions. Allow cookieless and JSless.

3. See 2.

4. See 2. + I would't disable adblock in the net, because it the main entry for malware.

5. Block Foreign. Expand as you understand the laws.

6. Max Layout. Called Mobile First, and seams to be national behavior. International pages sometimes look foreign to me. Use your screenspace wisely, yes.

7. Use Notifications. OK, but, see 8 and 9.

8. Prompt User. Don't annoy users. If they are on the net, they know how it regulary works, don't get of the standard behavior patterns.

9. Allow Opt-out. Opt-In is the way to go, else maybe violates GDPR and other laws.

10. Use Javascript. Not all websites require Javascript, most yes, but not all. Don't rely on it, especially impaired users will hat you for 'visually correct' but not screenreader enabled. Use standards.

PS: Don't be an apple hipster. Was biased from the beginning, got confirmed. But, read it.

The whole article is satire, but I can see how one might believe it isn't. It's too real.

Then it got me there. And in respect to a satire, then it's a good one. Reverse it and you have a more accurate Webdev '19 Article.

Am I alone in finding it amusing that this article is on Medium, a site designed for reading, yet decides to cover valuable screen space with fixed headers and footers?

Here's my rebuttal... Don't do almost everything the article says to do and put your site behind a pay wall if you absolutely must monetize.

Hilarious, and depressing, in ~equal measure.

Medium instantly absorbed half the screen to demand I log in and use the app were not lost.

I hope the irony is not lost on the author.

No one:

Medium: You read a lot. We like that. UPGRADE!

This is well-disguised spam from a green user account who has never commented on HN.

Poor title, nice article

Looks like the LinkedIn website

I'd suggest to delete as spam all the new links on Hacker News that are behind a paywall or a mandatory sign-in.

Am I the only one who got paywalled? You folks must not read Medium a lot :-D

Hosting this article on Medium completely undermines it. This is what I see when I open it: https://i.postimg.cc/gk8SC8cT/pot-kettle-black.png

ffs... that's a joke.

I don't even know why I click links to medium.com anymore. I should find a plugin that blocks it instead.

uMatrix can accomplish that (just block everything for that domain).

thanks for the tip

Or the Block Site extension for Firefox.

See the same. I outlined it https://outline.com/sUNND9

I'm seeing inline pop-up spam at the bottom of the Outline page.

Is that stupid idea a new one, or did I just not notice until now?

Not sure either. In fact, I didn't realise there was a popup until after you pointed out.

On mobile you’re blocked by a full screen modal to sign up, followed by a persistent top banner to use their app.

I explicitly block all scripting on Medium websites with uMatrix, and it makes it quite reasonable. If you allow first-party scripts only (uMatrix’s default), all the images break and you get some of the annoyances added.

I also cull the waste-of-space top half of the header bar with a rule `##.js-metabarMiddle` in uBlock Origin.

Given what this article is about, this might be the only appropriate article to post on Medium. It could have been one of the design tips "always use Medium for blogs to ensure your users are as annoyed as possible, by comparison your crappy website will feel great!"

Undermines? In my opinion it confirms it.

Interesting! I'm using Firefox Focus, and it loads fine... There is a prompt at the bottom about my number of free articles, but it didn't affect viewing the article.

I mean, he is actually poking fun at Medium in one of the mock-ups that illustrate the article. Look at the title bar and the URL: https://cdn-images-1.medium.com/max/1600/1*Gfb0mEijJO5D263uD....

Two actually, there's the one with "Maximum" too ;)

They're maximizing the layout, as per the guide.

Holy shit, postimg wants to show me notifications...

http://pichost.org/images/2019/06/13/ScreenShot2019-06-13at1...

Like what kind of notifications? "Bruh you seeing this?"

I have this small script to hide distracting elements on Medium.

https://gist.github.com/kartikynwa/ef9d48fad6a912cd5688083cd...

I don't know why I wrote this because I don't even like the content that gets posted on Medium.

This isn't so much about the "The Web" but about media outlets. None of the websites I visit (directly) are anything like this.

The fun ends when I click a link to a media outlet. For some reason, most outlets seem to follow this "design advice" unironically and to the letter. I think my personal bounce rate is now well over 50%.

Granted, I'm not a "valuable customer" to these companies. I'm not going to subscribe, I block ads/trackers, I'm not going to register a "free account", I'm definitely not going to install the app and of course I don't want to be notified of anything, ever.

My question is: Who is? Who goes through all the trouble? All these annoyances must be working somehow, to get those last 0,0001% of people who actually care. It must have been A/B tested and found to be beneficial.

Therefore, there is no sense in lamenting it. It's like homeshopping - you might think it is completely idiotic, but really it's just adapted perfectly to its customers.

No, many of these apply to web apps like e-commerce stores as well. Go to amazon.ca or wayfair.ca and you'll be greeted with a "download our app" persistent interstitial that promises "advanced features". BS.

They want you to install the app so they can silently get access to a laundry list of permissions that a web browser would throw up dialog windows about. There is no additional functionality on the app for the user, because you can tell the "apps" serve the normal site in a webview wrapper.

Reply on news.ycombinator.com