News for hackers. Stuff that matters.
Re:Guidelines for Brutalist Web Design by lsiebert on Saturday July 07, 2018 @04:25PM (#17480377)
"A friend gave me design advice once. He said to start with left-aligned black text on a white background, and to apply styling only to solve a specific problem. This is good advice. Embrace this, and you embrace Brutalist Web Design. Focus on your content and your visitors will enjoy you and your website. Focus on decoration or tricking your visitors into clicking ads, and your content will suffer, along with your visitors."

That's something I'm going to keep in mind.

Re:Guidelines for Brutalist Web Design by red_admiral on Sunday July 08, 2018 @03:08AM (#17482518)
This site does use styling to solve one specific problem: overlong lines on wide screens.

A sensible max-width and line-height can do wonders for readability, to the point that there are "reading mode" extensions that do pretty much just that.

This site has main.max-width = 34em and line-height = 1.5 which is a good choice in my opinion.

There also seems to be some nice vertical rhythm going on with the paragraph and title spacing.

Re:Guidelines for Brutalist Web Design by pmlnr on Saturday July 07, 2018 @05:26PM (#17480682)
This is a very good advice indeed.
Re:Guidelines for Brutalist Web Design by l0gical1 on Friday July 20, 2018 @09:54AM (#17574979)
That is a great piece of advice. I've been programming for the web for a long time now, and have never heard it described so simply.
Re:Guidelines for Brutalist Web Design by robertAngst on Sunday July 08, 2018 @08:31AM (#17483455)
> Focus on your content and your visitors will enjoy you and your website. Focus on decoration

Yeah its time for that person to take a marketing class.

Despite my website having best-in-class content, it took a custom wordpress theme for people to begin taking it seriously/sharing. My conversion doubled overnight.

Re:Guidelines for Brutalist Web Design by mynewtb on Sunday July 08, 2018 @10:31AM (#17483955)
What's your site's topic? Is your site about sharing information or making money from one-time visitors?
Re:Guidelines for Brutalist Web Design by robertAngst on Monday July 09, 2018 @09:59AM (#17490178)
Sharing information, google calories per dollar, thats the site.
Re:Guidelines for Brutalist Web Design by Jarwain on Sunday July 08, 2018 @01:50PM (#17485115)
It sounds like you applied styling to improve your conversion rates
Re:Guidelines for Brutalist Web Design by loco5niner on Monday July 09, 2018 @01:41PM (#17491989)
> Despite my website having best-in-class content...

That's quite a claim. I'm not sure which website is your's so I can't dispute it. Personally, I frequent websites with higher quality content and avoid "gotta-sell-you-something" sites.

Also, as another commentor mentioned: > It sounds like you applied styling to improve your conversion rates

Re:Guidelines for Brutalist Web Design by paulie_a on Sunday July 08, 2018 @11:51AM (#17484353)
Please don't encourage people taking marketing classes. The internet needs less advertising not more.
Re:Guidelines for Brutalist Web Design by conanbatt on Sunday July 08, 2018 @11:54AM (#17484364)
Marketing != advertising
Re:Guidelines for Brutalist Web Design by paulie_a on Sunday July 08, 2018 @12:00PM (#17484393)
Call it what you want, it's all annoying to the person that received it.
Re:Guidelines for Brutalist Web Design by snowwrestler on Sunday July 08, 2018 @12:33PM (#17484627)
This conversation is about the design of websites, which are pieces of marketing you only receive if you request one.

Are you annoyed that you just received Hackers News, which is a piece of marketing for Ycombinator?

Re:Guidelines for Brutalist Web Design by fifnir on Monday July 09, 2018 @05:28AM (#17488989)
Sites are not marketing, they are the shop itsself in most cases.
Re:Guidelines for Brutalist Web Design by lenzm on Sunday July 08, 2018 @04:17PM (#17485959)
The point is that advertising is a subset of marketing, not another name for the same thing. In addition to advertising, marketing includes building websites and providing information, research to determine market demand, and determining optimal pricing.
Re:Guidelines for Brutalist Web Design by conanbatt on Sunday July 08, 2018 @12:03PM (#17484409)
Surely if companies all dropped their marketing budgets to 0, they will increase the profits enormously and provide way more value to their customers! They dont understand anything!!
Re:Guidelines for Brutalist Web Design by paulie_a on Sunday July 08, 2018 @01:19PM (#17484926)
That would be a wonderful world to live in. I can seek out the services/products I want and not have them thrust on me. Sounds like a win.
Re:Guidelines for Brutalist Web Design by conanbatt on Sunday July 08, 2018 @06:51PM (#17486718)
Yes, its called the 1900's, it was great.
Re:Guidelines for Brutalist Web Design by fifnir on Monday July 09, 2018 @05:37AM (#17489031)
People tried to sell just as much back then. But they were only about 2billion so the average person didnt have to wade through a swamp of thirsty advertising 24/7. Maybe the whole thing is unsustainable, maybe we can control ourselves, maybe we are better that bacteria in a closed system that multiply untill they kill themselves

"But that's the last 2 generations did things, I can't possibly imagine any other way for life to work"

Re:Guidelines for Brutalist Web Design by fifnir on Monday July 09, 2018 @05:32AM (#17489008)
Do the words "provide value" make anyone else puke in their mouth a little bit?
Re:Guidelines for Brutalist Web Design by conanbatt on Saturday July 14, 2018 @11:47PM (#17533693)
Who is against value??? What do you even mean??
Re:Guidelines for Brutalist Web Design by fifnir on Monday July 16, 2018 @01:31PM (#17543095)
I'm not against value, I'm against the term "provide value" because (to me, and I'm probably a huge minority in HN) it is a term loaded with capitalist meanings.

We don't talk about providing value in academia, I assume they don't talk about providing value in philanthropic organizations or political movements. Whenever I hear the term it essentially means "to make money".

I appreciate that this is my personal interpretation of this though

Re:Guidelines for Brutalist Web Design by conanbatt on Wednesday July 18, 2018 @06:30PM (#17562576)
> We don't talk about providing value in academia

I am not surprised. The requirement to provide value in academia would go very much against getting any funding for it.

Re:Guidelines for Brutalist Web Design by loco5niner on Monday July 09, 2018 @01:37PM (#17491955)
Good point. I will correct the above statement:

Please don't encourage people taking advertising classes. The internet needs less marketing not more.

Re:Guidelines for Brutalist Web Design by jcelerier on Sunday July 08, 2018 @06:08AM (#17483026)
> with left-aligned black text

ugh, please justify !

Re:Guidelines for Brutalist Web Design by tiborsaas on Sunday July 08, 2018 @06:31AM (#17483091)
Please don't ever. Justified text is the hardest to read and it's meant for print anyways.
Re:Guidelines for Brutalist Web Design by bovine3dom on Sunday July 08, 2018 @08:20AM (#17483421)
Do you have any citations for this claim? I can only find scholarly sources from the 1980s.

If it is the hardest to read, why is it used in print? What distinguishes print from electronic media that means that justification works in one place but not the other?

I would be particularly interested to read anything recent that considers legibility in print, the advent of high pixel density displays, and the impact of good justification such as that offered by microtype.

I'm slightly biased here: I believe that justification has got a bad reputation due to how badly web browsers (especially Chrome which doesn't even support hyphenation) handle it.

Re:Guidelines for Brutalist Web Design by blattimwind on Sunday July 08, 2018 @09:41AM (#17483744)
> What distinguishes print from electronic media that means that justification works in one place but not the other?

Browser are pretty bad typesetting engines. Word breaking doesn't work very well, they don't and can't do protrusion or expansion. The low resolution of displays means you microadjustments don't really work, because they at most slightly shift contrast from one anti-aliased edge to the opposing edge.

Justified text works very well if you're able to competently apply all those techniques (e.g. MS Word and similar document editors didn't do any of that for a long time).

Bad justification results in rivers, uneven spacing, broken edges etc.

Re:Guidelines for Brutalist Web Design by rangibaby on Sunday July 08, 2018 @09:17AM (#17483638)
Justification was used because people thought equal width columns looked better. Columns of text are generally unnessary in the digital world because you can have one infinitely long column.

In Grid Systems in Graphic Design (1981) the author argued against justification because he thought having spaces of different lengths between words created a poor rhythm (I will find the exact quote tomorrow).

Re:Guidelines for Brutalist Web Design by bovine3dom on Sunday July 08, 2018 @09:50AM (#17483783)
But most publications using justification initially didn't use columns, e.g. books.

I do think multi-column layouts are sorely underutilised on the web. Modern websites make a mockery of desktop wide-screen displays where they use about a quarter of the screen and fill the rest with adverts.

Maybe I'm just a contrarian.

Re:Guidelines for Brutalist Web Design by adregan on Sunday July 08, 2018 @11:25AM (#17484219)
Don't books have 2 columns for each spread of pages? You still have the potential for there to be uneven columns.
Re:Guidelines for Brutalist Web Design by miao on Sunday July 08, 2018 @09:51AM (#17483787)
You can use justified text, but if and only if you also use hyphenation. This way, you won't have varying widths of whitespace between each word. But hyphenation on the web is... not satisfying.
Re:Guidelines for Brutalist Web Design by blattimwind on Sunday July 08, 2018 @11:51AM (#17484349)
Hyphenation is technically not required. A low number of hyphenated words can be regarded as a quality metric of well justified text.
Re:Guidelines for Brutalist Web Design by kowdermeister on Sunday July 08, 2018 @09:12AM (#17483611)
It is used in print to pack in the most letters into a single line, because the layout is fixed and words can be broken. It was simply economic to do so. Today we don't have that constraint and with tons of displays we can't be sure how the text will look fully justified.

Browsers are indeed bad at it, but we don't need fully justified text in the first place. For me personally, I prefer varying line lengths because I can easily keep track where the previous line was.

https://ux.stackexchange.com/questions/93429/why-is-text-jus...

https://ux.stackexchange.com/questions/24025/should-text-on-...

Re:Guidelines for Brutalist Web Design by bovine3dom on Sunday July 08, 2018 @09:46AM (#17483767)
I was hoping for rigorous studies rather than opinions as I have plenty of those myself :)

Thank you for taking the time to respond, though. I had not heard the columns-as-line-separators argument before, but I'm not sure I buy it as most books are justified but do not use multiple columns.

> with tons of displays we can't be sure how the text will look fully justified.

This argument could be applied to ragged text, too. Are you saying that you can't be sure how it looks and therefore you can't justify it? The answer then seems to simply be "compute the layout on the client", as is done anyway.

Re:Guidelines for Brutalist Web Design by kowdermeister on Sunday July 08, 2018 @10:12AM (#17483885)
There is none I'm aware of, but there are some quotes though :) I think we have justified text because of historic reason, it doesn't make much use on the web since it's a totally new medium.

> Are you saying that you can't be sure how it looks and therefore you can't justify it?

No, I'm saying it's unpredictable so we should avoid using it, while left aligned text is the default that works best in any circumstance.

Re:Guidelines for Brutalist Web Design by Someone on Sunday July 08, 2018 @09:48AM (#17483775)
”It is used in print to pack in the most letters into a single line”

Huh? I would think that, for every fully justified line there’s a left-justified one with the same content that is, at worst, equally wide, but typically less wide.

I think full justification traditionally is done for aesthetics, possibly with a bit of “look what we can do” added (it takes a better typesetter to set a line fully justified than it does to set a left-justified one with equal-sized spacing, even when both cases use kerning)

Re:Guidelines for Brutalist Web Design by kowdermeister on Sunday July 08, 2018 @10:18AM (#17483908)
> for every fully justified line there’s a left-justified one with the same content

Justification makes sense when you can hyphenate words, that way you can pack more letters, otherwise the whole word would break into the next line.

Re:Guidelines for Brutalist Web Design by Someone on Tuesday July 10, 2018 @12:01PM (#17499271)
You can hyphenate ragged lines, too. And that’s not frowned upon by typographers (at least not by all of them). https://practicaltypography.com/hyphenation.html:

”In left-aligned text, hyphenation evens the irregular right edge of the text, called the rag.”

Re:Guidelines for Brutalist Web Design by alo75 on Sunday July 08, 2018 @09:42AM (#17483754)
Never justify text for the web
Re:Guidelines for Brutalist Web Design by jbenner-radham on Sunday July 08, 2018 @12:26PM (#17484578)
For accessibility it’s recommended to not justify text since it’s difficult to read for people with dyslexia.
Re:Guidelines for Brutalist Web Design by DonHopkins on Sunday July 08, 2018 @07:21AM (#17483231)
Black text is always justified. And you can never go wrong with a pale blue background.
Re:Guidelines for Brutalist Web Design by Filligree on Saturday July 07, 2018 @10:40PM (#17481883)
Please don't. Pure-white pages are painful to look at, let alone try to read -- just because our monitors can go all the way to #fff doesn't mean that's a good color to use more than once in a (rare) while.
Re:Guidelines for Brutalist Web Design by occams_chainsaw on Sunday July 08, 2018 @01:50AM (#17482346)
Oh look, changing the background color solves a specific problem. Just like the post you replied to mentioned.
Re:Guidelines for Brutalist Web Design by bhrgunatha on Sunday July 08, 2018 @01:15AM (#17482260)
Ultimately I'd prefer a slight tweak - for example eee/111 or similar but I'd still prefer fff/000 to the ridiculously low contrast foreground/background trend in recent years. Perfect example: https://peach-melpa.org/ - on my equipment and with my eye sight, that's literally unreadable.
Re:Guidelines for Brutalist Web Design by Jarwain on Sunday July 08, 2018 @01:54PM (#17485132)
Scrolling on that site on my phone is incredibly broken too
Re:Guidelines for Brutalist Web Design by callmekit on Sunday July 08, 2018 @02:20AM (#17482431)
If it's really painful, make sure you lower your monitor's brightness. Basically, the white color on the monitor should be the of same brightness as a sheet of white paper near it.
Re:Guidelines for Brutalist Web Design by kqr on Sunday July 08, 2018 @03:43AM (#17482599)
At the expense of losing details in the blacks? I have some monitors where gamm adjustments only will take me so far.
Re:Guidelines for Brutalist Web Design by na85 on Sunday July 08, 2018 @10:21AM (#17483918)
Sounds like you have a cheap, low-quality monitor.
Re:Guidelines for Brutalist Web Design by Retra on Sunday July 08, 2018 @10:50AM (#17484030)
Is that relevant?
Re:Guidelines for Brutalist Web Design by m3rc on Saturday July 07, 2018 @10:57PM (#17481943)
Then that's a problem that you can solve, typically with a single line in your stylesheet. Doesn't damn the concept by any means.
Re:Guidelines for Brutalist Web Design by aloner on Saturday July 07, 2018 @10:49PM (#17481921)
You're saying this because black on white hurts your eyes? Because if I'm reading something, I really don't care about what the text looks like and that's what black on white is good at: distraction free reading.
Re:Guidelines for Brutalist Web Design by chrismorgan on Sunday July 08, 2018 @03:21AM (#17482552)
If black-on-white is painful to look at, your monitor is too bright. Sadly, this is the case for the substantial majority of people, and so as web developers/designers/implementers we have to take it into account.

Laptops tend to have the ability to conveniently adjust brightness, but then everyone went with ambient light sensors, and because they’re really pretty terrible at getting it right, laptop and OS manufacturers opted for erring on the side of excessive brightness, and so laptop screens are normally somewhere between too bright and way too bright.

Desktop screens tend to be hard to adjust the brightness of, because the physical unit’s OSD approach to changing brightness is awful, and OS vendors haven’t hooked anything helpful into it for reasons that quite escape me. So most people still have their screens set at the default brightness level, which is way too bright for anything but direct sunlight.

I remember with fondness CRTs that had a physical brightness dial that you could turn. So much better than what we have now.

Phone screens… yeah, they’re normally too bright too for similar reasons to laptops. Again I criticise ambient light sensors.

I went to quite some length to get the screen brightnesses for my Windows laptop and the external displays I normally use even vaguely sane, involving obscure freeware from ten years ago and deep diving into Windows APIs; there are basically two different APIs for working with display brightnesses: laptops’ internal displays use one, and external displays use the other (the internal display is also available through the other, but it doesn’t actually work for changing brightness). Said other API which external monitors need is exposed absolutely nowhere in any UI at all. (Windows basically lies about being unable to adjust brightness of external displays in its Settings app.) Screen-brightness-adjusting keys don’t seem to be interceptable (no hooking onto XF86MonBrightnessUp and XF86MonBrightnessDown as I did on my previous, Arch Linux, laptop), so your only recourse for linking the external displays’ brightness would be detecting the internal monitor’s brightness changing and effecting. (Incidentally, the jump from 0% brightness to 10% brightness is consistently massive on LCDs; I worked around this on Linux by making a logarithmic scale wrapper around xbacklight, but I can’t fix that conveniently on this laptop.)

At present, I just type “b 0”, “b 40” or whatever into Command Prompt and it invokes a CLI-based external-screen-brightness-adjusting program.

In my home office, my external displays normally operate at 20–40% brightness during the day, though I’ve gone up to 70% on occasion before, and 0% brightness during the evening (and I’d prefer −20–−10%; most screens’ minimum brightness is unreasonably bright).

Re:Guidelines for Brutalist Web Design by TheOtherHobbes on Sunday July 08, 2018 @03:57AM (#17482637)
People use the brightness they use. They may have Reasons.

It’s not anyone’s job as a web designer to insist they're wrong.

Re:Guidelines for Brutalist Web Design by chrismorgan on Sunday July 08, 2018 @04:09AM (#17482672)
They may indeed have reasons, but in the substantial majority of cases they don’t, or their reasons are badly flawed, and they would do well to reduce their brightness.

I will continue to recommend that people reduce their brightness in almost all cases. That’s my job as a friendly person.

As a web developer, though, there is little scope for insisting that they’re wrong, which is why I say we have to take most people’s badly configured monitors into account.

Re:Guidelines for Brutalist Web Design by tompazourek on Sunday July 08, 2018 @09:04AM (#17483579)
Lot of displays I encountered use PWM when you reduce the brightness. That causes the screen to flicker if it's not on 100% (see it yourself via a slow motion cam on you phone).
Re:Guidelines for Brutalist Web Design by chrismorgan on Sunday July 08, 2018 @01:41PM (#17485067)
Good to know. I admit I haven’t seriously used anything but a good quality monitor for the last few years, and simple research suggests PWM is only likely to cause visible artefacts on LED backlights (TFTs are slow enough that they don’t dim completely when cycling quickly), which only became popular fairly recently, so that might account for my being unfamiliar with the probelm. Certainly there are still some types of patterns or of content which when scrolling look awful on LCDs and I understand that PWM (though I didn’t know that was the specific term) can be part of the problem there. Yet for reference, in my earlier teen years and before I always found it hard to cope with CRTs at 60Hz (it rapidly produced migraines, so I used polarising sunglasses to help; 80Hz was barely OK, 90Hz was acceptable and 120Hz which I could use on one monitor was lovely).
Re:Guidelines for Brutalist Web Design by danShumway on Sunday July 08, 2018 @12:39PM (#17484661)
> It’s not anyone’s job as a web designer to insist they're wrong.

But this goes both ways. I've seen developers complain about the W3C accessibility standards on contrast because it looks too severe on their retina display full-brightness Macbook.

But the relative cost of having too much contrast (it's uncomfortable to read, but still perfectly legible) and the relative ease of fixing it (turn down your laptop brightness) is very minor when compared against the many people with crappy, low-light displays that can't adjust their brightness or fix the problem of low contrast text.

Often what people mean when they say to optimize for what people have is that they'd prefer to optimize for the highest quality devices first. But for a nontrivial number of websites and demographics, those devices are the minority, and in those situations high-contrast black-on-white text will look better on a wider variety of the devices that ordinary people are using.

Re:Guidelines for Brutalist Web Design by solatic on Sunday July 08, 2018 @12:45AM (#17482230)
I feel like this is an idea for a simple browser plugin. If the site is #000 text on a #fff background, apply a stylesheet with lower contrast.

If high contrast is painful to look at, and you can't control web designers throughout the world, but you can control your own web browser... then why are you still suffering?

Re:Guidelines for Brutalist Web Design by tomasduda on Sunday July 08, 2018 @01:26PM (#17484978)
There's an extension for that. http://darkreader.org/
Re:Guidelines for Brutalist Web Design by dredmorbius on Sunday July 08, 2018 @09:13AM (#17483617)
Some browsers (Chrome Android) don't support plugins.
Re:Guidelines for Brutalist Web Design by zoom6628 on Sunday July 08, 2018 @02:45AM (#17482465)
Agree. Good proportion of us suffer from glare, pure white is literally painful to read. I usually reach for a dark mode just to be more pleasant. The whole premise of BWD is sound .... Content first, add bling only to solve a UX problem.
Re:Guidelines for Brutalist Web Design by adito on Sunday July 08, 2018 @07:40AM (#17483306)
What's acceptable background/foreground color combinations that isn't painful to look at, but also not too low on contrast?
Re:Guidelines for Brutalist Web Design by dredmorbius on Sunday July 08, 2018 @09:10AM (#17483604)
I tend toward color: #330; background: #fffff0;

Just off-black on a slightly creamy white.

May even stick with #000 for text.

Giving users ability to select a white, off-white, inverse, or solarised scheme is also useful.

See also https://contrastrebellion.com

Re:Guidelines for Brutalist Web Design by Moru on Sunday July 08, 2018 @09:56AM (#17483804)
That page is funny, I can only read the big text, the rest is too small and zooming is disabled. Message not really understood.
Re:Guidelines for Brutalist Web Design by dredmorbius on Sunday July 08, 2018 @01:18PM (#17484912)
Most useful for the message, though I find it generally readable.

My variant:

https://codepen.io/dredmorbius/pen/KpMqqB

Re:Guidelines for Brutalist Web Design by Moru on Sunday July 08, 2018 @06:07PM (#17486514)
Still too small text to read on my screen and can't zoom
Re:Guidelines for Brutalist Web Design by path411 on Monday July 09, 2018 @03:40PM (#17492845)
Is it not computing to 16px for your screen? I feel like you must have problems on 99% of websites if 16px font does not render large enough for you to read. Heck, HackerNews renders at 10.6/12px for me.
Re:Guidelines for Brutalist Web Design by Moru on Thursday July 19, 2018 @02:14AM (#17564238)
Ah, the page has a setting for displaysize. It was set to 0.5x when I ooened the link. Most pages work just fine if someone does not fiddle with stuff ;)