"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."
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.
> 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.
> 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
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.
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!!
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"
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
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.
> 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.
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).
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.
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.
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.
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.
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.
”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)
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.
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.
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.
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.
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).
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.
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).
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).
> 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.
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?
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.
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.
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 ;)
If you’ve never tried, load something like "lite.cnn.io" and be amazed at how quickly you can see 50 different headlines and links, on any type of device. Similarly, "old.reddit.com" and other simplified designs.
I now strictly bookmark only what I consider the “sensible” versions of a site. And if there isn’t a sensible version, I stop using the site entirely.
Also, in 2018 you are doing yourself a disservice on the desktop if you don’t have the best content blockers installed. (I use "uBlock Origin" and "uMatrix", not because I want sites to suffer but because web browsing IS intolerable without a blocker.)
Just to add to the list: the best way to access Facebook on a mobile device is "mbasic.facebook.com". It loads considerably faster than the alternatives and doesn't block you from using using the messages feature.
I have a throwaway account on reddit that I sometimes log in to, and it surprises me just how much worst the new reddit design is. It's so incredibly slow and seems to make my browser struggle.
I was very active on reddit for the past 6 years or so, precisely because it was ugly and oldschool. Now, it feels more like a mainstream social media website. I don't know, man. Not a fan, I spend less and less time there.
A couple of days ago I threw together [a barebones extension](https://github.com/SilverEzhik/ReaderMode) that removes all of a website's CSS and replaces it with just something very minimal.
Honestly tempted to go further with it and turn it into some sort of a web 'debloater', something that would not just strip CSS, but also where possible redirect people to no-bullshit versions of websites - e.g. news websites to their lite text-only versions.
A related tip for mobile users is Firefox Focus.
It is a variant of Firefox that does the following:
"The new Firefox Focus automatically blocks a wide range of online trackers—from the moment you launch it to the second you leave it. Easily erase your history, passwords and cookies, so you won’t get followed by things like unwanted ads."
I.e. it has the aforementioned extensions built-in, and is a small binary. It's also light-weight in the sense that it has very limited support for broswer tabs—prevents you from mindlessly opening a ton of them.
Asks me to sign up or login with an annoying pop over every time I navigate. It isn't making me want to sign up if it's going to prevent me reading public threads.
Quota prevented me from reading the rest of a post yesterday too. Wouldn't let me continue without installing their app.
If they made consuming the content enjoyable without annoying me, I may login to contribute where I feel I can. Otherwise the desperation to track just turns me away.
To answer your point directly, no. uMatrix can block entire (sub)domains, but it does not import ad and tracking lists to block individual scripts. Therefore, both are needed, because most of the time you want ads and tracking to be automatically blocked, and sometimes you need precise control over what content from each domain is allowed. Different tools for different purposes.
I like to use uBlock Origin's element picker to remove parts of websites that I don't want to look at. I don't think uMatrix can do that, although it covers the most basic adblocker functionality.
You right click an element, select block element, in the dialogue that opens, you select pick, click on the element you want gone permanently, preview how the site will look and then click create.
I think brutalist web design would be different. These design elements like hyperlink styles, colours... these are not so much a representation of the cconstruction materials. They just feel like arbitrary design choices that through the power of ‘default’ become ubiquitous and so damn played out that they are offensive to the eye imho.
The construction of websites these days would be revealed in visible responsive columns. Visible cookies... Visible scripts, indented into the page, modular html5 tags...
Sticky nav bars are brutalist I think. Don’t they just feel brutalist? It’s the blocky additional toolbar vibe, it feels like a utilitarian UI choice.
I guess what I’m trying to say is that the OP’s idea of brutalism feels a little lazy. It feels more anti-design then true to brutalism. The brutalist buildings in my city don’t feel like textfiles. They feel raw, geometric and useful.. kind of like the fan of my old PC tower...
If nothing else, then for the sake of my eyes please just change your colours a bit and go to google fonts and switch it up. This isn’t Morse code.
Also, there is no way a brutalist architect would put their profile picture at the base of their building.
I get what you’re saying. But the OP addresses this argument, shifting attention away from code and more towards the purpose of the site:
“A website's materials aren't HTML tags, CSS, or JavaScript code. Rather, they are its content and the context in which it's consumed. A website is for a visitor, using a browser, running on a computer to read, watch, listen, or perhaps to interact. A website that embraces Brutalist Web Design is raw in its focus on content, and prioritization of the website visitor.”
same for buildings though... You don't go to a brutalist building to experience the building. The building has the "content" you came for inside. The building houses the content. The webpage isn't the content, it also houses the content.
> brutalist buildings often reflect back the forms used to make them
I like the core concept of brutalism, but I see problems with brutalism in general and in applicability to web design...
The problem I see with brutalism in general is that it doesn't go far enough! removing the veneer and doing away with facades is the first step, the point is to be honest; not to intentionally make things aesthetically displeasing. Once it's honest you can focus on good function and beauty emerging from within.
This principle isn't entirely incompatible with web design, however there is a significant difference that needs to be understood: With web design the aesthetics are not completely separable from the function, because in the most fundamental way - you operate a web page by looking at it.
Because of this, I prefer to focus on minimalism and typography when it comes to creating highly functional, no bullshit web design. In other words, look at how books have been doing it for the past 1000 years, because beyond having to turn a page their basic function is very similar.
The problem I see with brutalist webdesign is that it focuses on the result instead of the process. Applying brutalism principles on the process (the upfront design and the actual code) would let beauty emerge by itself indeed, in a much more honest way.
The process is what is focused on the result: if you carefully avoid putting useless cruft in your pages, you get clean pages.
It isn't a trivial principle because it has to be applied to a great variety of design choices with a great variety of technical means to meet a great variety of purposes.
in the most fundamental way - you operate a web page by looking at it.
I highly disagree with this. The most fundamental aspect of web design is that style is a layer that can be disabled, and that content is accessible to all, even if their access method is different from the norm (for example a screen reader presenting the information as an aural experience to the user).
Screen readers are an exception, 99.9% of use (probably more) will be through looking at the page.
> that style is a layer that can be disabled
It cannot be disabled, only changed. By "removing" the author's style you are replacing it with the default style sheet included in your browser, if you remove the default style sheet you are using the default values for all the css properties built into the rendering engine of your browser when it was compiled. Even if you put the source code in your text editor instead, you are now using your editor and terminal styles instead.
My point is: in order to view text - it must be rendered, if it is rendered - it has a style, this is why the visually element is also a functional one, you cannot escape that unless you read text without your eyes.
I've done a fair amount of building architecture and design, as well as brochure and catalog design. I do frontend development now. These are my takeaways
Every building has more or less the same requirements - you have a given space, you need X items to fill that space that meet functional Y requirements, etc. Doesn't really matter what you are doing its all the same really. You find the interior design aesthetic that works for your consumer after laying out the foundational "functional" aspects of the building. E.g. where are the toilets, where is the entrance, where are the exits, how large of a space should each tenant want, open or closed design, etc. You understand the user requirements and what the long term vision is for the site.
Catalog, brochure, and book design preceded webdesign. I learned to appreciate the beauty of typography by understanding what problems people dealt with before the web. How do you manage to fit content with high density into a 8.5"x11" page or A4 size? What is the minimal font an average 18-30 year old can read VS someone who has deteriorating eyesight? Which font types work best in typography (Helvetica, times new roman, etc). Which font-types has the best information density per line-length (Arial Narrow)? What is the optimal line length and word count for a single paragraph line (its about 10-15). How many sentences should be in a paragraph for optimal readability? Which fonts have the highest density information in fractional fonts (Calibri). What is the leading typography research used in the past (NASA). 3 hole punch saddle stitch, what should your margins be, what font-size ratios for header tags vs subheaders vs paragraphs, text-justifications, etc. How will the page look with 2 pages side by side in a brochure, do they complmenet each other, etc.
I learned all this above by taking the top 100 catalogs of every industry I could find, getting these books, taking a font ruler like this one https://www.amazon.com/Westcott-Graphic-Arts-Ruler-GA-86/dp/..., and overlaying it on top. Its extremely surprising how different companies handle things like color choices for certain categories, trimming, etc. You can also analyze these same principles sometimes even on their website, both good and bad. You can see a huge disparity difference in this by getting a McMasterCarr/Grainger catalog and comparing it to a fashion catalog.
Webdesign is the same thing really. Actually I still apply many of the same principlces I learned from catalog design. I still put font-rulers onto my screen, measure things out with rulers, even though I have many chrome extensions / chrome debugger for handling this.
When I read things things talking about responsive webdesign, I am reminded that it doesn't really matter what you set your breakpoints at. No mobile manufacturer is going to make a new device below 320px width wide, not many people will care about a site that supports 4K resolution because the human eye has its limitations, etc. People simply aren't going to care about phablets past a certain sizes since it won't fit naturally in most peoples hands.
Breakpoints, I just use bootstrap's 4 breakpoint guidelines with some additions and a grand total of 3 sass mixins for responsive media queries. (320px, 576px, 768px, 992px, 1200px, 1400px, 1600px)
Semantic HTML is like building lego blocks. A webpage is just a bunch of legos. We call this the DOM. Your body tag, html tag, section, etc. You can build the same website with different legos, but at the end of the day you'll favor some over others.
Brutalist design to me is just thinking of content first and the purpose of the site over everything else first. Sometimes this is referred to as "progressive design".
- Don't use JS if CSS can do the job just fine. If you do use JS over CSS, have a good reason why (e.g. favoring simple jQuery statements over css "hacks" like clearfixes / checkboxes / special states)
- Don't use an SPA like react if you don't have complex UI needs or need state management
- HTML should be semantically pretty. You should be able to understand how a site is organized purely by grokking its HTML and class names. Don't have crazy amounts of ID's, if you use multiple classes for an element, have a good reason why (state modifiers).
- Organize things using some CSS methodology (BEM, SMACSS, etc) or combination thereof. Especially if you have 2000+ lines of scss code to work with. Personally I just name things that can be interpreted in very few ways and use BEM for complex nested components.
- If you pick a css framework it has its pros/cons (e.g. bootstrap, bulma). More bloated things to load, easier to get off the around with multiple people working on it (e.g. its opinionated), but harder to reason / modify later. Personally I just make my own versions of things like bootstrap containers, etc.
- Don't overnest your SCSS code past 3 levels deep.
- Use a HTML preprocessor like Jade/pug for websites that favor heavily on many unique HTML page layouts. Its much easier to reason about.
- Design your content first. E.g. If you aren't using an SPA approach, write your HTML first, some CSS, your JS, and then reiterate until you are finished.
- Pick older more established technologies over new shiny tech. You'll find far more resources on blogs and stackoverflow for potential errors you encounter. e.g. startups using ruby on rails.
- Use CSS flexbox whenever possible, ignoring IE11 users because its eventually going to be adopted. Unless you have good reason not too (e.g. developing for government sector, etc).
- Develop in isolated environments for webcomponents (e.g. codepen) so you can reuse it in any project
- Don't waste your time reinventing the wheel unless you have good reason to. E.g. understanding a concept, making a better variant of that library, etc.
- Don't do UX research if you don't have to. Chances are someone else has done the research already for you and published it already. Look at competitors. Use that. This includes things like good webdesign practices, optimal webfonts and families (e.g. roboto), etc.
- Look outward for inspiration in webdesign, and keep a catalog of that somewhere with whatever tool you use (bookmarks, etc). I have a number of systems for doing this depending on each platform I'm on.
- Don't bother wasting too much time invested in one particular languages quirks unless your job demands it, rather understand the underlying principles (computer science, math, design patterns, UX functionality, etc) of what you are doing.
- Use color psychology/theory and color gradients to achieve desired effects. Some colors do not work well with others, using certain colors limits your overall pallete selection. Ideally have less than 4 colors stlyizing your website. For instance, if you use red as a primary, you will automatically most likely be using grey and black as support colors. Think of well established brands like cocacola for inspiration, etc.
- Use HSL colors over RGB or Hex since its designed to be human relatable.
- Use CSS Tools for designing more complex web frontend components. These include box shadows, buttons, textures, etc.
- Don't worry about EM vs REM vs PX this can always be changed down the road for handling impaired users / zooming in effects. If you designed your webpage well with highly readable fonts and sizes, you might not need to do much here anyhow.
- Consider using an image over some complex HTML/CSS component. Instead of building a shopping cart button for instance, load a single image background on a div for an ecommerce site. Other things this would include are global banners and banner buttons.
- Keep it simple stupid (KISS)
- Consider the takt time of how long it takes a user to do simple common tasks for an SPA. E.g. in ecommerce, how long would it take a person to add an item to cart and checkout. How long would it take to look up a specsheet. When you scroll down the page would you as a user get confused by the design for doing common tasks? Most of this is common sense, but you could still benefit from doing UX research.
- Your first performance bottleneck you should consider is images, not the sizes of libraries you are loading in. Learn how to use CSS sprites for instance, and use tools to streamline it.
Basically brutalist design to me is building the crappiest version possible that meets your projects / user requirements (rapid prototyping). Then building iterations on top of it until it looks unique and pretty. Because good UX and aesthetics should still be achieved in the end, but if and only if the building blocks are in place already.
Performance is important but past a certain point it just doesn't matter. Really brutalist design IMO just derives alot of its philosophies from LEAN-based design which is an industrial engineering philosophy. Building an actual product with nice ergonomics is not that much different than shipping out a nice UX frontend. But you need the engineering (circuit board design, CAD model) much like you do in webdesign (organize css code, SPA, libraries, backend, etc).
As much as I hate bloated page sizes, breaking the back button is the absolute worst thing a website can do. It is a disgusting violation of the user's experience. It's like locking the door behind a customer when they enter your store and then forcing them to jump through the window if they want to leave.
If designing around the back button is a pain point because you have to implement some fairly complicated solution is a good sign your design needs work. I'm working on a corporate site now and it's a mess of buttons going to modals or just loading content in place, and getting the back button to work is a HUGE pain and I really wish the designers thought about functionality and not just how stuff looks.
Breaking the back button is an unfortunate consequence of SPA (single page application) frameworks like React. You'd be amazed at just how easy it is to do. Put a junior on a feature and unless there's process in place to look for back button breakage, it can easily find its way into production. Even if you have QA resources, browser history management is not going to be within their wheelhouse so all they can do is note that it's happening and maybe they can give you a rough idea of which feature caused it.
Essentially, SPA architecture replace page loads with changing the DOM directly. Changes to the DOM don't change browser history unless you tell it to. Breakage can happen in two ways. First you can change things without updating browser history, or you can make changes that update history without actually changing the page. Both break the natural flow of the back and forward buttons.
The easy answer is to tell devs to just make new page loads when necessary, but apps can complicate to the point where page loads mean a great deal of reloading stuff. Then the next answer given to devs is to not load lots of stuff, but loading lots of stuff is often dictated by business needs and is over the devs' heads. Good luck moralizing on business people.
Once I saw how often such breakage slipped into the web app that I work on, I got a lot more patient with other websites. It's actually a really hard problem that I'd put right up there with cache invalidation and naming things. There's no established doctrine for browser history management.
> I got a lot more patient with other websites. It's actually a really hard problem
Definitely true in my experience. If I go to a page which contains an image from a web cam and a slider or links or butttons with times, I want to be able to click around on times and see the image from that time -- but I don't want to have to backtrack through all times I have viewed to go back to the previous page.
I guess what I'm saying is that it's hard to nail down what a "location" is in terms of UX. If the context is roughly the same, with only minor elements of the page change, I expect to be able to bookmark that view, but my back button should take me farther back.
You built something and then realize that it breaks if the user presses the back button so instead of fixing the original design you try to change the behavior of the back button.
Imagine a site where we load a list of blog articles with pagination, now I go to page 2 which fetches the API again. Now handling the back button is really hard here.
Do generate more onsite activity. If you leave the site the site doesn't make money off you. It's generally a way to generate mostly fake ad impressions to rip off advertisers.
This is, not surprisingly, overstated. In all of the cases where you used the back button and it didn't work. Yes. That sucked.
There are, however, plenty of places where you did not even attempt to use the back button, and more than a few where it would be nonsensical. Purchased something? Want to repeat the purchase? What about sending an email?
Yes, much of this is covered by "posts can't be 'backed' to." However, the point is still that there is a lot of scenarios where the back button doesn't work that you flat out don't notice.
(And I say this as someone that hates the "forever scroll" pattern we seem to have adopted.)
Yes there are certainly situations where the back button becomes nonsensical. I'm talking more about things like a 30-image slideshow generating a trail of 30 URLs in the history, or (mainly) outright "dark pattern" sites that purposefully make it impossible to leave.
We desperately need this and similar ecologically-sound programming philosophies in high places right now.
Just considering news--Moby Dick is 1.2mb uncompressed in plain-text. That's lower than the "average" news website by quite a bit--I just loaded the New York Times front page. It was 6.6mb. that's more than 5 copies of Moby Dick, solely for a gateway to the actual content that I want. A secondary reload was only 5mb.
I then opened a random article. The article itself was about 1,400 words long, but the page was 5.9mb. That's about 4kb per word without including the gateway (which is required if you're not using social media). Including the gateway, that's about 8kb per word, which is actually about the size of the actual content of the article itself.
So all told, to read just one article from the New York Times, I had to download the equivalent of ten copies of Moby Dick. That's about 4,600 pages. That's approaching the entirety of George R.R. Martin's A Song of Ice and Fire, without appendices.
So all told, if I check the NY Times just 4 times a day and read three articles each time, I'm downloading 100mb worth of stuff (83 Moby-Dicks) to read 72kb worth of plaintext.
Even ignoring first-principles ecological conservatism, that's just insanely inefficient and wasteful, regardless of how inexpensive bandwidth and computing power are in the west.
Faster, sure, once you have facebook loaded.
Unless, of course, you have a news app, which loads the RSS feeds, which, by nature, is way faster than both.
The NYT has photographs. Moby Dick with photographs would use more bytes. Moby Dick doesn't use photographs, because the user has to do all the work to create the images. NYT does what users want, trading cheap bytes to save human processing time.
Photographs can be scaled and compressed. The source of most megabytes visiting a website eats is the stylesheets and the JS the site itself loads, and then what these in turn load from third parties for tracking, analytics, ads, &c, and the constant communication all these scripts do with numerous servers. For most big sites, watching the network connection log using the developer tools is an enlightening experience.
While I like the sentiments here, a few things stand out is very weird and counter-productive to the message:
1) This is obviously hosted on some kind of dynamic site. Producing 8kb took over 20ms, with most of it in TTFB. Even clearly static resources had this.
2) The stylesheet is 2x the size of the page and contains tons of extraneous content.
3) For a brutalist style, it's quite fiddly about letting userscripts touch its styling. The stylesheet contains a ton of directives with !important and not all are about positioning.
(If accessibility and performance really are features, it feels like the author didn't care to work too hard on those features even in the simplest case.)
4) Also: I do not appreciate seeing ANY tracking pings from something like gaug.es. You certainly didn't inform me that you were sharing my presence with a third party that doesn't recognize any of my rights. If you're gonna do this, at least do it on your compute and I/O time and don't waste someone else's. Have your server pass connection details up to your analytics. That also limits the amount of fingerprinting the tracking ping can do to me, were I not blocking it.
>1) This is obviously hosted on some kind of dynamic site. Producing 8kb took over 20ms, with most of it in TTFB. Even clearly static resources had this.
If you check the headers, it's served from s3 via cloudfront. At the bottom of the page, there is a link to a github page that confirms it's a static site.
>2) The stylesheet is 2x the size of the page and contains tons of extraneous content.
>3) For a brutalist style, it's quite fiddly about letting userscripts touch its styling. The stylesheet contains a ton of directives with !important and not all are about positioning.
It looks like it contains at least 2 frameworks, which could explain why. I'm guessing they're needed for the "normal" website comparisons.
>4) Also: I do not appreciate seeing ANY tracking pings from something like gaug.es. You certainly didn't inform me that you were sharing my presence with a third party that doesn't recognize any of my rights.
Your "rights? You're being a little melodramatic here. If you don't want random code to be executed, you should have disabled javascript. I use noscript and it works fine without scripts.
>If you're gonna do this, at least do it on your compute and I/O time and don't waste someone else's.
Who cares? It's not like they're mining cryptocurrencies. They wasted maybe $0.000001 worth of your precious computing resources.
>Have your server pass connection details up to your analytics. That also limits the amount of fingerprinting the tracking ping can do to me, were I not blocking it.
not really viable for a static website hosted on S3
For me though, if you are going to make a site all about how hardcore your design style is... So hardcore that you can’t be bothered to at least choose some less painful colours and typography. Then I want to open your code and get a hardcore hacker vibe like it was made with a punch card or something.
This article isn’t really about code design. It’s about information and interaction design primarily. The audience the author was writing for is probably more focused on the design rather than code.
With that said, this site is open source and so the community could help it become a example of cleaner/clearer/more minimal coding practices too.
Brutalism was about the honest use of materials. In my opinion, any conversation extending that to web pages that doesn't talk about how they're built ignores the spirit of that for another punch take at "use big text."
How is your “safety” being harmed. Really. What is the actual harm from gaug.es? Have you ever used it?
Share the story please of a single person, anywhere at any time that suffered a harm because of gaug.es.
We throw terms like “safety” around so much that they lose their meaning. There are sites (especially news orgs) that do harmful things when it comes to tracking, retargeting and such. But some little site that wants some basic analytics? Come now. That’s comparing a lemonade stand with a Tesco.
Every such site is a potential component in a combination attack against my system. They aren't publicly audited, I don't have a privacy agreement in them. I have no way of knowing if their ownership changes hands, and the authors are doing noting to assert it doesn't become malware.
The number of supposedly minimalist websites that still use 3rd party trackers is surprising to me.
Even http://motherfuckingwebsite.com/ loads Google Analytics. It's like, I get it. Responsible tracking is often useful. But so is NPM.
If the entire point of your website is to satirically get across that overengineering creates its own problems, if the whole point is that content doesn't strictly speaking need the other stuff we attach to it, that it literally just needs a text editor and an ftp server, that everything we do has tradeoffs and that the default state of the web is performant and responsive and readable -
then maybe that's the one scenario where it might be good to skip including analytics?
Joking about it doesn't make it any less ridiculous that the builder couldn't turn off whatever analytics addiction they have for the single site that is literally about not including extra stuff. If they had rendered the entire page in React and downloaded 3 MB of web fonts, sticking <!-- yes, I know --> in a comment wouldn't make me less annoyed at them.
How hard can it be to commit to the bit for one single page?
Then they can go back to their blog or whatever and load whatever extra stuff they want.
I agree 100%, it's a pretty crappy form of deflection. At the very least, they could at least outline their reasoning for it rather than throwing in a glib comment.
Ah, the old 'lampshade our mistakes/bad decisions and hope that makes them okay' trick. It's super common in both web development and media to be honest, and I can't even count the number of TV shows, books, games and other works that think being 'meta' makes up for bad writing, lazy characterisation or deus ex machina esque conclusions.
As someone I follow on YouTube says, lampshading your problems does not make them go away.
> This is obviously hosted on some kind of dynamic site
So? It still loaded fast for me.
> The stylesheet is 2x the size of the page and contains tons of extraneous content.
The article is about what the author terms Brutalist design - not minimalism code gold. The author doesn't say anything about producing the smallest possible CSS file. And the CSS file is 14KB with 7KB of content - that is quite tiny.
> For a brutalist style, it's quite fiddly about letting userscripts touch its styling.
I'm not sure where in the article he talked about avoiding !important or about Brutalist style involving making it easy for a user to customize the website.
> Also: I do not appreciate seeing ANY tracking pings from something like gaug.es
Fair enough - but, that has nothing to do with any point that the article made.
I don't see how any of your complaints relate to the article.
I knew it was just a matter of time before the top comment is something disparaging about the story which was already disparaging about typical modern web design. And this comment beats them all because its disparaging about that comment.
I dont know why people on hacker news have to one up each other all the time. Sometimes you just gotta let something be what it is.
On the contrary, THIS comment one ups YOUR comment by both disagreeing and proposing the opposite of what you said as a thought experiment. Further, I propose that all the above opinions are equally wrong and right, both absolutely and relatively. I for one, am one that begins my sentences with, "I for one." You have no option but to agree.
Now, if someone could wrap this up with an anecdote about working with a famous air-headed media icon or esoteric master of a mundane, niche talent that makes them sound sophisticated, we can call this a thread.
Farewell, netizens. I bid you...(flourishing bow)... adieu.
I will 100% find reasons to be mad about sites with tracking bits on them. It could literally explain how to reliably become immortal and I'd say, "And now we can live for eternity under the grip of our gaug.es overlords."
But for what it's worth, you're a better web programmer than I am. I mistook the long loading time for dynamica but it's just S3 being it's usual awful self. Clearly I haven't looked at these numbers enough.
It could literally explain how to reliably become immortal
Then, like Bowerick Wowbagger, you could travel from internet forum to internet forum indefinitely and yell at everyone who has a tracker on their site. In alphabetical order.
I liked how scrolling actually worked, there was minimal jank, the text was large enough, flow was predictable, and it felt fast. I know places have to keep the lights on which requires a u-turn from this but it was surely refreshing.
Brutalism is the worst architectonic style. I spent quite a bit of time in brutalist buildings and they impact you negatively. Idk why anyone would want to reference that.
Ironically physical brutalism often fails because of poor usability and discomfort, while the brutalist web design manages to be faster and more accessible than whatever the conventional (baroque?) style is.
I think we all benefit from a little bit of useless ornament. Unadorned brut concrete rapidly becomes so ugly that some buildings became notorious suicide spots.
Like any school of archeticture, there are good examples and bad. Largely, over time, only the good examples survive. The older the school, the higher percentage of it will be good, surviving examples.
I find the Barbican in London — which I walk through most days — to be a very uplifting building!
Something that I think the Barbican does well, and The National Theatre (another London brutalist building) also does well, is interesting interior spaces - openess, multi-levels, "floating" staircases, interior views, visible structural elements etc. I find both of these spaces energising and interesting to be in.
Other brutalist buildings are just horid. I worked in Sampson House (just behind Tate Modern) for a couple of years which is also brutalist but the interior is dank corridors and dingy spaces. I also worked at the brutalist IBM offices next door to the National Theatre and it was also a souless space inside. They have absolutely zero-ambition and are the polar opposite of the spaces at the Barbican and National Theatre.
I don’t like brutalist and I don’t like the Barbican. For me, brutalist architecture is defined by an extraordinary level of arrogance and disregard for well established design.
When I was last at the Barbican I found it very hard to navigate, and I was relieved to be told by the staff there about the many “alterations” they’ve had to make to try to make the building less confusing and alien.
Partly this is because the Barbican is exceptionally well kept (much brutalist architecture is associated with slum estates, whereas the Barbican is mostly inhabited by richer people). The concrete is clean, the ponds and fountains are working, the balconies overflow with plants.
There are many exceptional examples of brutalist architecture in Paris, some well kept, some not so much:
I dunno... the Yale Art & Architecture building is a classic early example of brutalism, and I've never been in a space that felt more open to creativity or so honest... it was a revelation the first time I stepped inside of it. I looked forward to classes there because it felt uplifting for my soul, and deeply envied architecture students who got to use it as their workspace, its spirit was so perfect.
Of course I'm sure brutalism can be done badly too (like anything), and I haven't spent time on the inside of too many others... but there can be something profound about it -- a modern building in balance that tries to be exactly what it is, no more, no less.
The problem I think is not so much the brut as the béton. I don't find concrete to be a wonderful material, aesthetically speaking. Even when you take into account the fact that it can be formed and poured into almost any shape. But the philosophy of minimalism/honesty/unity captures some very sound principles.
I’m not so sure about that. At my university (University of Texas at Dallas) we are “blessed” with a legacy of brutalist architecture [1], which I’ve been told won its fair share of architecture awards. [?] (I’ll assume that means it’s been done “right”.
As you can see, it’s been really great for our mental health :) [2]. I can appreciate this style of architecture from an intellectual level, but to be around these kinds of buildings daily is a little exhausting.
>I can appreciate this style of architecture from an intellectual level
Indeed. There are many things – not only architecture – that are interesting to look at for a bit, maybe on paper, but that I would never want to actually have around me in my life. It seems that some people do not consider this difference. Architecture is particularly troublesome, since others force it upon you. You cannot choose it like you can choose what music to engage with, for example.
Architecture is like high fashion -- what architects celebrate is not what's good for users, but what's fun in their art shows. Architecture-as-art uses human environments as their canvas instead of as their goal. Architecture award-winning is usually the opposite of what architecture users consider "done right".
Even so, concrete is unmaintanable and unmodifiable. That's why (self-absorbed) architects love it -- it's a sculpture or "walled garden" (with emphasis on the "wall") where the prole users can't interfere with the architect's art project by making the building usable for their own needs.
I'm surprised that so many folks here (obv not everyone) have so readily accepted the word "brutalist" to apparently mean "simple, functional, and minimal", because that's definitely NOT what brutalism entails in the architectural world!
I really like a lot of brutalist architecture, but much of it is far LESS functional/useful/practical than other styles. Brutalism was an aesthetic, largely a reaction to existing forms--many of which were characterized by their utility! A lot of brutalist architects were rebelling against the bourgeois notion of a building as merely (as they saw it) "a place intended for humans to live, work, and play", and instead asserting the notion of a building as an artistic form in its own right, which often meant intentionally disregarding or downplaying the importance of the building's utility for the humans who interacted with it! Anyone who has lived or worked in a brutalist building can aver this truth: if the building served its function w/r/t humans, it was often DESPITE its artistic intentions, which prioritized almost everything else instead.
Performance should not be sold as a new feature; it should be one of the main drivers from the beginning. I remember reading the verge redesign article where they raged about the speedups compared to their previous site - and the new was still bloated.
Agreed. It’s like advertising that a car has an engine and goes faster than walking. Having an engine isn’t a feature, it’s the the essence of what makes a car, a car.
I have no idea what that section is trying to say? It isn't a feature but a requirement is the common argument. It isn't a primary feature but a result of following minimalist criteria is another..
The example that a long book of text downloads in a second seems to be saying the latter..
> It isn't a feature but a requirement is the common argument.
An argument that no one listens to, which is why the web isn't performant and is instead full of bloated junk. They are acting like performance isn't even a feature, like users don't care about it and shouldn't have it. This is wrong.
You are right, sorry. When I first read it I internalized it as meaning to say that Performance is not an extra feature that you tack on to an existing web app (like you would implement say an offline mode as part of an update) but rather something that needs to be considered from the ground up right in the design stage. But I can see how putting it this way could be confusing.
All of this can be achieved without looking like a text file. This form of brutalism feels like a reaction to BAD design. Step into the world of good design, which does exist, and suddenly these points and much more is being addressed in UX and UI design.
>A website is not an application or a video game. It is for content, and so its design must serve that purpose.
Apparently it could also be titled "Guidelines to make the web great again" or "Guidelines for blogs in 1995" for all the relevance to modern web design.
I appreciate the analogy to architecture. Specific words are useful. You can communicate more information succinctly by labeling something skeuomorphic, brutalist, material, etc.
I feel like that last one misses the point. The first two were good, but the last one has colors everywhere, links every other word, random pictures in text, random images, all this random small text. It's pretty much what the original motherfuckingwebsite was lambasting, minus the jquery.
For example: "It uses some cool technologies like JavaScript JavaScript logo, CSS3 CSS3 logo and HTML5 HTML5 Logo"
Okay.... why? Why does this site need JS? Or CSS? What do those technologies do that furthers the message of this site? You're using them just because they're cool? That's the opposite of the point of motherfuckingwebsite. Is this site trying to parody itself and I'm missing the joke?
The third link is just extending the second website's idea to include JS, and some other nice things. Though, I don't see how it goes against the point of motherfuckingwebsite? The point of motherfuckingwebsite was to keep it accessible and fast, which the third site certainly does.
Sure it doesn't need JS, but it can certainly help make the site better. (The JS is for the inverted view button, and some text that shifts through colors. I wish more sites had a dark mode.)
> Though, I don't see how it goes against the point of motherfuckingwebsite? The point of motherfuckingwebsite was to keep it accessible and fast, which the third site certainly does.
No, I don't think that was the point. The point of the original was that all the extra stuff the "best" version added to improve the orignial is unnecessary in the first place. For example, from the original:
"You thought you needed media queries to be responsive, but no. Responsive means that it responds to whatever motherfucking screensize it's viewed on. This site doesn't care if you're on an iMac or a motherfucking Tamagotchi."
From the "best"
"Every asshole that visits this website can use it without any problem well, kind of"
"It's accessible, so everyone can enjoy it but not everyone can read this - this text is Ant-Accessible"
"It doesn't use a single media query well, not really"
All of the above seems to be explicitly against the aesthetic of the original. The original was 6Kb, while the "Best" is 600% larger, and really doesn't have much more content wise. Certainly not 600% more. And what do you get with all that bloat? Nothing that makes the site more accessible or easier to read than the first. Everything about this "best" is worse than the first and second.
This has got to be parody or else it makes no sense.
> The JS is for the inverted view button, and some text that shifts through colors. I wish more sites had a dark mode.)
If more sites focused on just content the way motherfucking website advocates, it would be easy to style it however you please. It shouldn't be the website's job to adjust itself to your preferred reading conditions. It should give you the content, and then you can decide on fonts and colors. Opera does this right, with a mode that will strip out the stylesheet and replace it with your own, so you can invert any website you like. The problem is, it doesn't work well on sites that get too fancy with JS and CSS.
My favorite is the second one. Those 7 declarations really do improve the site. I think the last site is somewhat excessive but still small compared to most mainstream websites today.
> The term brutalism is derived from the French betón brut, meaning “raw concrete”.
I guess that's true in the case of brutalist architecture ; but more importantly it takes it one step further than « brut » and refers to « brutal » to take the idea into violent territory. Having a raw experience which pays too much attention to the well-being of its users is not brutalist, it's just minimalist.
I appreciate the throwback to more reasonable websites, but really these days you can get something quite good with Vue. Its not hard to get a site under 200 kb. Webassembly is bound to make sites even 2-5x smaller in the near future.
The real problem is poliferation of ads and site owners that "don't care" if sites are hard to load on slow devices and connections. It's not something people really optimize for anymore.
The real problem, which Google tried to "fix" with their dubious AMP program, is that search engines don't punish huge and dog slow websites. Basically every large site is optimized for ads and SEO. Something we wouldn't see if the largest search engine didn't base their business on the same.
If a search engine half as good as Google appears that doesn't tolerate such trash in the search results all these slow sites will go away overnight
I’m just baffled by this, there are many high profile sites that barely work on the misc mobile browsers I use. I avoid them, obviously. I can’t be the only one. The only thing I can think of is that due to business demands, and code cruft, the developers just “make things work” on their desktop.
Then when the managers ask them to speed up the site, they literally can’t do it.
I've worked at plenty of places like this. Sales team wants another analytics WordPress plugin because they barely know how to login to the tools we already have. Slows down page loads by 50%. Sales team complains they they will lose sales, developers told to make the plugin faster because we need it.
Try to load the plugin async and run the hairball through closure compiler. Now only slows down site by 30%. Sales team happy, development manager happy. Cue a repeat in a month
"Webassembly is bound to make sites even 2-5x smaller in the near future."
That's true if you hand code your webapp in WAST :) Otherwise there will be tons of libraries included from C++, Rust or god knows where from. So if you want to draw a few pixels, then prepare for 5 - 10x time size increases.
It's not the goal of WebAssembly to replace JS and HTML/CSS.
It's not a goal but it will happen because the benefits are huge. JavaScript s "tree shaking" is a joke compared to a compilers ability to remove unused code. Since it's all compiled down to WASM bytecode it's possible to remove unused code no matter what the original language. Close to the holy grail
It's compiled bytecode, designed to be compact. JS is "minified" but there's limits to how far you can go. JVM and WASM bytecode is designed to use as little space as possible.
Not sure about WASM but the instruction set in JVM bytecode is intentionally limited in a ton of ways to keep instruction length to 1 byte
If you look at this backwards, brutalist web design is not a merely “back to basic” because at dawn of the web there was no CSS, neither JS and very little tools at your disposal.
HTML pages back then looked too brutal to our eyes, so we visually borrowed from what it was more aesthetically close: Print Design.
We used data tables to design layouts. We used print design tools (PhotoShop, etc) to design shapes, shadows, gradients, custom fonts, even rounded corner (Web 2.0 all-rounded trend came out when browser implemented the border-radius propriety).
Nowadays CSS let us design complex layouts without the need of graphic software. But more than that, in all these years we developed a common “web aesthetic”: Today HTML looks less brutal to our eyes than 27 years ago.
This was true even for photography: it took almost 100 years before it was seen as something else other than an “art for failed painters”.
1. I wish they had mentioned not messing with the "visited" color of hyperlinks. It's so useful and so many sites set it to the same color as unvisited links.
2. "The Non-Designer's Design Book" by Robin Williams[1] is fantastic and I highly recommend it. It's not specifically about website design but it pretty much all applies.
[1] Not the actor/comedian, she just has the same name. She also wrote a manual for PageMaker (remember that!?) that was so good I still enjoy reading it today, years after the program it's for has been left in the dust.
None of this stuff violates the "rules" defined in the article. This isn't minimalism, it seems to be about making the formatting simple and purposeful.
The sites that do the things you list are horrid because they just throw libraries at the problem.
This guy's not a professional designer and the typography on the page is not very good. What's he doing making design guidelines? I guess us programmers are experts in everything.
this is more like a guide to first principles web design -- giving it a name like brutalist web design is really needlessly complicating things. this is all great but what would be even better is if we could get some brutalist web browsers and some brutalist application layer protocols.
html, javascript and css are terrible for 90 percent of the content that they are used to convey. they are bloated, too complicated, too open-ended and open the way for many security problems. also their complicated nature, mainly javascipt, makes implementing browsers too difficult which results in the current situation where there are only two browsers and neither is a reflection of what users want.
for 90 percent of content on the web, we don't need a turing complete programming language or the infinite variability that is afforded by html and css. we need an application layer protocol that is designed around the discreet use-cases that have emerged now that the web is mature. once we have that we can have better browsers that benefit from competition. and once we have all that, brutalist web design might not be a waste of time.
I love the idea but was anyone else aware of just how much the different font styles stood out? There seemed to be 3 or 4 styles, different kerning, sans and it was distracting. Funny how something usually in the background makes such a big impact.
Is there any reason to switch so much? Would not switching be better? I’m not sure either way.
In my opinion the author's suggestions are more minimalist than brutalist. Design aesthetics currently in play at Businessweek and The Outline are more commonly categorized as "brutalist" - but categorizing any style or design trend is a subjective exercise.
Off the top of my head, these are my impressions of what "brutalist web style" means at the moment:
- Playful departure from what western web society considers "good design" in 2018
- Experimental execution of white space occasionally using zero margins, less line spacing, unusual or no grids
- Limited color palettes, black with neon splashes of color
- Text frequently overlaps images (negative margins)
- Nostalgic of early web aesthetics with frequent nods to zine print design
I don't think this is Brutalist. At best it's minimalist.
The problem is, the design here is comfortable and pleasant to read, but every example of Brutalist architecture I've seen exudes... well.. brutality. Those buildings look like they come from a dystopian future where fascist robots took over.
It's a good guide, but poor branding. To me, an actual Brutalist website would be what you see when you view a site's source - raw, unparsed HTML, left to the viewer to make sense of.
I generally agree that websites should be simple. Website for me means that it’s a page that shows mostly static information and there is minimal or no interaction other than reading. For that I think having simple or event brutalist design works fine.
But now, lot of “websites” are actually apps, where there are complex interactions, dynamic information, complex workflows and tools. I don’t think the same approach works anymore
I don’t think anyone who complains about the complex or visual designs of web apps, complains that same way about their native or mobile apps. Do you really want your desktop windows to be all full screen boxes on white background, every action as a blue underlined link? Do you want your programming ide look this way? Do you want that every time you change a view in your apps there is a full page reload of the content? This is where the complex designs, react, animation, data and state management comes in to make the user experience more fluid, enjoyable, understandable, and hopefully meeting the needs of the users.
There is some fair critisim that some or many websites are over designed and over engineered for various reasons. I also see that lot of the web frontend basics are now forgotten or ignored, you just create everything with JavaScript, and then spend half of the time trying fix or rebuild the functionality browsers provide with html out of the box.
Nobody complains about Google Docs being "an app". If a program like that doesn't have "normal scrolling" and a functional "back" button people will tend to forgive them.
Most sites aren't that, though, even if their devs think they are. LinkedIn and Twitter and Reddit are just plain old boring mostly-static collections of pages.
They might have a few good reasons to screw up their UI anyway, though:
- They can attract devs who want on the bandwagon,
- The "man on the street" might actually like crap like the Reddit redesign. Let's not blindly assume that our aesthetic preferences are shared by the public, even if they seem like a clear moral good to us (and especially if that moral intuition is informed by a technical background that is not widely shared.)
Web apps ignoring these types of conventions are fine, but the key issue is that a lot of sites aren't web apps/don't need to be web apps yet are built like they are regardless.
For example, your average news site. So many of them are built as single page applications with JavaScript frameworks like React or Angular, and for what purpose? None. At their core, they're basically blogs. They would work much better with traditional server side rendering and standard page loads and what not.
Same with stuff like Reddit. At it's core, its just a set of forums, with the vote button and a few other minor aspects being the only thing that could possibly benefit from JavaScript. Same with Wikia, which seems to have forgotten its a wiki host and not an application platform.
And the list goes on and on. Why? Probably because either the management team like to think they're 'on the forefront of web technology', ala Google or because the developers wish they were working for Google/Facebook/whatever.
Many sites really are seriously overdesigned and over engineered.
The counter to that is, does everything really need to be an app? Take reddit for example, it was perfectly usable and in fact worked great when it was a static page without any JS going on. The current app-like "new reddit" is by comparison less usable and noticeably slower.
Craigslist is a perfect example of this. I've seen a few competitors pop up like letgo on mobile but it's hard to beat Craigslist's simplicity. The downside to following this approach is that your website can end up looking like Craigslist, at least that's what this site reminds me of.
It looks like CL is hiring a React and Mobile Developer, so it will be interesting to see if that leads anywhere new. Personally, I hope their site looks the same in another 20 years.
There are numerous Craigslist redesign projects on Behance that looks visually stunning down to the smallest details. But, I think there's something about mirroring the text-only aspect of newspaper classifieds that makes Craigslist feel familiar and appropriate.
Obviously that plain text style wouldn't work for Facebook, but probably equally so a highly visual/slick look wouldn't with as well for Craigslist.
spot on article describing a cure to an illness spreading through the web designs of today. for those interested in actual examples of brutalist websites, scroll through http://brutalistwebsites.com/. and the obligatory http://motherfuckingwebsite.com/ should be bookmarked right away!
I feel like the sites on http://brutalistwebsites.com/ aren't really what's described in the OP link, conversely they look full of redundant CSS and JS that hinders efficient reading. Now, http://motherfuckingwebsite.com/ that fits very well, however.
I wish there was an easy way (e.g. browser feature or extension) for people viewing a siteto get the best automated approximation of this for any web site. (actually my firefox extension Aardvark kinda tried/tries -- since 2005! :) -- there's a way of selecting and area of the page and hitting "b" to go black and white, but it also sort of normalizes font sizes, etc and gives most sites something pretty close)
I also wish that web publishers could customize this behavior, possibly simply by have a different css file for it.
It would be great if users could choose to view the web this way as a default, but I don't know if I would choose that option. And I can't get on board wishing every site, or even most sites, were like this. It would be like living in a neighborhood where all the houses were the same shade of white, or that every meal I had was the same thing. I find colors and fonts and graphics appealing, even if they are subtle and played-down like Hacker News.
If you like this look, that's great, but I wouldn't advise it for a web site that wants lots of viewers/users.
The idea that text can be essentially meaningful without a medium that demonstrates competence or craft is an expression of contempt for the reader.
Brutalism as an architectural movement was about creating anti-human symbols that exalted totalitarian institutions, and was a naive mockery of human experience.
Brutalist buildings are abominations we only keep around to serve as a reminder of our capability for hubris. I can only assume brutalist web design serves the same purpose.
Do you have any specific complaints about the design of the linked page? Because you seem to be assuming that the properties of Brutalist architecture that you hate would necessarily be inherited by a web design style named after it. I see no reason that should be the case. We have an example of the style directly at hand, so why not speak in specifics?
This is general good advice but isn't great advice. To explain, the 1st part is to get your message across which is really behind the good part. If you don't do that, you are missing the point so this author is stressing to only worry about point 1 which is good advice for most people as most people aren't super skilled. Great advice is to of course go with point 1 but also point 2 in that you should delight and amaze to pull them in after that point to have an emotional response. https://www.tesla.com/ and https://www.magicleap.com/ are more extreme examples of point 2 as they have a stronger emotional play but most people focusing on point 1 will do just fine if that's all they ever did. Apple is probably the best example I can think of though all around in both point 1 and point 2.
Short: Good advice, if you include your expectations as a "default" or "reset" style that is applied before.
Long: This advice only works as long as browser vendors or users don't take up the liberty the specs grant them: to build a completely customized default ostyle (as mentioned in another comment "white page, left-aligned, black text").
That's funny to see how so many people are pro-brutalist for buildings..
At work we have an on-site coffee bar, they used the "industrial-look": exposed pipes and ceiling, it's very annoying because it's very noisy, I suspect that many brutalist buildings are the same: very unpleasant for those who work there.
I generally agree with the principles. There's so much bloat and poor usability around that it's worth going back to basics. However, part of the pleasure of using a website is the design - put a 'brutalist' site and a 'brutalist with a design pass' infront of people and see which they prefer...
Love the function-first design approach -- e.g., "start with left-aligned black text on a white background, and to apply styling only to solve a specific problem."!
But I'm not sure that "Brutalist" is the best name for it, as it carries a connotation of harsh, even ugly architecture designed around the materials, which brutalizes the user, whereas this web design is all about presenting the content in the best, least distracting way for the user ("When in doubt, do what Tron does: fight for the users.").
I completely agree, I was about to write the same: that name is VERY badly chosen, it conveys the wrong idea to anybody who has not read the origin of the term, and makes it sound horribly pretentious (something I hate).
Whereas the ideas are quite sound (and common sense). I also find it weird, to say the least, that so many people seem to rediscover those ideas that have been known -and advocated- FOREVER by people with a clue (look at Jacob Nielsen for an example).
I also enjoy the irony that the writer uses a VERY BIG font for the titles (H1), that "brutalizes" (LOL) my eyes, especially the HUGE title of the article: they are MUCH too big.
Sadly this site makes mo mention of the hell that is web fonts. Few things frustrate me more than loading a site, then waiting to read the content because the author thought I cared about whatever pretty fonts they wanted to use. I actually have a collection of screenshots of websites in this sad pathetic half-rendered state where you can make out where the text is supposed to be but is missing because the browser is downloading 10Mb of some font that looks barely different from the native font anyways...
I consider my personal site to be Brutalist, in that it matches the features that people mean when they say "Brutalist web design" [0]. I didn't intend that when I made it, I just like my sites to match the system on which they run as much as possible and I got sick of maintaining overly complex sites, and went with"start with black text".
Could we somehow estimate how much electricity unnecessary design - mostly meaning unnecessary js running on pages - costs the planet? I guess it was done already...
Yes, running JS takes energy. Also, transferring this extra data over the network, running servers that process data transferred by JS (ad tracking) and running computers used by frontend developers.
That was one the clearest guideline description I've ever readen in my life.
Obviously I'm not surprise this was written by an Engineer , it's very clear about what to do and what not.
Usually trainings and guidelines made from Designer are useless to developer , they talk about emotion , colors , moods etc... Which is key for marketing and UX but does not help a developer improve it's skill in UI .
Skill in UI, or if something should work generally for everybody, or optimized for a specific audience, is audience dependent.
Design is basically cultural anthropology, extracting real world types and positioning products to adress those types.
Technically it's tough to sperate both worlds, because layout (grids) and behavior (transitions, animations) have strong stylistic implications. This then means that a developer skilled in UI (making it work generally) can't adress specific audiences, most likely racing to the bottom (too many others doing the same and competing for the same general audience).
> The term brutalism is derived from the French betón brut
it's "béton", not "betón". And I'm pretty sure the term comes from the word "brutal" because the style was deemed as such, figuratively, and not the use of concrete "brut", which makes no sense to begin with as buildings would be built with "béton armé" or "béton fibré".
Keep it functional and beautiful. If you had to choose one, choose functionality over design. I believe that’s what this article is essentially saying. Bad design hurts functionality, in that case it’s better to have little to no design at all. If you can keep it functional while applying beautiful design do it by all means.
This page slapped me in the face... But in a good way.
I’m not much of a designer, so I wonder what the main differences between “minimalism” and “brutalism” are. To me, I’m ok with sites running analytics and an ad or two, so long as I can read all the content in one go without the page stuttering on my phone or redirecting me suddenly.
I'd say minimalism is characterized by trying to remove as much non-content as possible, while this philosophy is more about everything serving a purpose. A minimalist might want to get rid of ads because they are not content, while this kind of brutalism prescribes designing the ad in a way that doesn't detract from the content.
This is pretentious nonsense. It was indeed satisfying to scroll to the bottom of the page and see the author's "Colophon". It immediately reminded me of the footer in Maciej Cegłowski's site, http://idlewords.com/.
> This is where a douchier person would write 'colophon'
http://www.hyperfiddle.net/, an exotic fullstack web framework, enforces brutalist design! (cofounded by me) Database effects are buttons and navigation is links, and the rest too. What do you think, HN, does it work?
While I lived in Denys Lasdun's halls of residence at the University of East Anglia it was normal for complete strangers to climb through the kitchen window, as that was the easiest way to get around.
I only take negative inspiration from Brutalism when I think of usability.
I did brutalist webdesign, before it was cool: http://mrtno.com/ (hire me for pure html+css wonders, no images) and I promise: it won't work on your silly smartphone!
HN does not follow all these rules but I would wager it is a better experience. For example, if every link were underlined, the page would be very cluttered visually.
Multiple sites quoting the same soundbite doesn't make it correct.
Plus even the supposed french origin (Béton brut) is derived from the word brutal...again predating concrete. Beton = Concrete, so even that "origin" is fairly recent.
I don't necessarily disagree with your main point — I don't know enough to say either way — but that statement isn't true unless I'm misunderstanding something.
Concrete was used extensively by the Romans, and also before them.
The earliest citations in the OED for "brutal" are 16th century (in English). (It also says "Compare French brutal, 16th cent.") It is derived from a Latin word, but even then it likely doesn't predate concrete.
I hate brutalism in architecture. You can have usability without losing warmth. That said, I love minimalism on the web (and not just because I’m a programmer and not a designer). I love plain html sites, and I think spending all your design time on typography can yield a really zen and snappy website. Unfortunately, what the web really lacks is uniformity across sites, which can be confusing to users. I’d much prefer everyone use semantics tags and let the user decide on the styling, or use a browser default. CSS shouldn’t even be a thing.
Yes! I would argue this steers away from brutalism into a much more sensible, usable place. Definitely the kind of UI I advocate strongly in my book. <shameless type=“plug”> http://uxbook.io </shameless>
This is plain old HTML as it was intended by W3C. It’s good to go back to first principles but no need for new nomenclatures such as “brutalist” to do that —- I find that slightly pretentious.
Agreed on sentiments, critical discussion is important.
The navigation uses anchor tags, these are identified by 'id' and not 'name', therefore not HTML5. This only works because some browsers are generous like that.
The document is not complicated, there are H1 tags followed by lots of p tags in sections.
There is no reason to use classes to style this content or to use a stylesheet that is 96% unused. There is also no need for a huge amount of normalise.css if you are not using forms or anything else 'tricky'.
The content unstyled is still readable on some lame Internet Explorer browser, so normalise is not needed. Stuff can look different. That is allowed.
For visual hierarchy those h1 tags could be h2 after the document title/heading. CSS grid would work nicely to get the white space right with a handful of lines of CSS. Such a trimmed stylesheet for this document could fit on a screen and could therefore be inlined, not externally loaded and made 20 times bigger than it should be.
Actually if you look at the document outline it is all over the place. Things get nested deeper and deeper. The structure should look better than that but it gets thrown off by things like the advert in the middle making subsequent sections sub-sections of the advert according to the outline. A <nav> tag around the TOC would help with the document outline.
The address tag should also be used for attribution at the bottom and the figure tag should be used for images if accessibility matters, coupled with picture and srcsets if you can magically generate them.
A couple of points regarding the content of the article:
I question the insistence on 'ask a designer' as I don't believe the best designers always call themselves 'designers'. Any 'ask a designer' comment is best qualified, e.g. 'ask an experienced user experience designer'.
The premise of 'design for a small screen first' is a conversation that needs to be re-framed as 'design for all devices, all input methods and all orientations' rather than this wireframe for mobile and that wireframe for desktop approach.
Responsive Web Design was a great idea five years ago but the game has moved on. Fluid typography, custom properties and other new HTML5 things such as CSS Grid can't be mocked up with Sketch or Adobe products. The design tools are stuck a generation behind what can be achieved, as are those that only know how to use said tools.
It is fine to have that content as unordered lists and lots of sections whilst you are working on your document structure. It is no good thinking 'burger menu first'. It is as silly to working on a car engine and confining yourself to working in just the engine bay and not on the workbench guided by someone's drawing of what the car with the bonnet/hood closed looks like.
Well, I owe few years that kickstarted my career at a very nice income level to it, but all 3 years as a webdev I hated with passion every request of squeezing js animation into every part of the page. God thanks web development is a thing of the past for me
Though, that dude who incessantly pushes his imaginary "design trend" to every major website is not much a "lesser evil"
It is an "ingenious" business model to raise up hype over "the new great design trend" nobody heard about, and then sell your expertise in it and your design "services" at six digits per project
JS is fine, as long as it has purpose. I think the original idea of progressive enhancement needs a renaissance: use little bits of JS to improve the lives of people who have it enabled (e.g., by autocompleting an input, filtering a large form), but add it after you've made it work without JS.
>The idea of a more interactive web is not "cancer".
I specifically refer to the design trend that spun off from the greater concept. In 9 out of 10 webdev projects, and how it is understood by "business dudes" web 2.0 is only a some kind of design trend, no more. And a kind with 20 animation scripts per page.
> It is an "ingenious" business model to raise up hype over "the new great design trend" nobody heard about, and then sell your expertise in it and your design "services" at six digits per project
That's 99% of marketing: figure out a thing that nobody really needs, figure out a way to make them think they need it, then sell it to them at a ridiculous price.
Twenty points for him linking to a site (his non-brutalist stitch-fix link) that gave me an aneurysm after trying to scroll for a few pages. Not sure what he's trying to say there. "I learned how not to respect my user"?
( https://algorithms-tour.stitchfix.com/ , should you also want to punish your cortex ).
I like the general design philosophy, but I think this website as an example is weakly executed and shows the author's poor commitment to his own philosophical ideals. Specifically, the author claims to maintain a 'Truth to materials', which is summarized on the Wikipedia page he links to as "any material should be used where it is most appropriate and its nature should not be hidden". However, he then goes on to include hidden JavaScript tracker code in the footer of his page:
$ xidel https://brutalist-web.design -s --css='script'
var _gauges = _gauges || [];
(function() {
var t = document.createElement('script');
t.type = 'text/javascript';
t.async = true;
t.id = 'gauges-tracker';
t.setAttribute('data-site-id', '5aff5aa154a1b97a229142e1');
t.setAttribute('data-track-path', 'https://track.gaug.es/track.gif');
t.src = 'https://d2fuc4clr7gvcn.cloudfront.net/track.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(t, s);
})();
Beyond this, the author also minifies his 'built by hand' HTML and includes a few other blobs of webpack-bundled JavaScript code. Sure, this is all not-unexpected for run-of-the-mill websites these days, I was just expecting a better example from a web-design manifesto advocating the exact opposite.
I disagree. I'll grant that if you narrowly idealize 'the visitor' to be a content-consumer who never chooses to 'view source' (let alone use a command-line user-agent to interact with a website), minifying/bundling HTML/JS doesn't affect the 'visitor experience' design.
However, hidden tracker JavaScript definitely impacts every visitor's experience, and directly betrays the 'honest and transparent interaction with a visitor' the author desires:
> a button agrees to submit the visitors information to the server. Hiding this interaction behind a hyperlink or unadorned text betrays the core nature of a website.
The JavaScript tracker hides its interaction behind the browser's JavaScript engine, which is a much greater betrayal than any poorly-styled hyperlink or button.
That's something I'm going to keep in mind.