Motherfucking Website 301 points by titlex on Nov 24, 2013 | hide | past | favorite | 129 comments

 The one thing I remember from economics class is the concept of marginal utility. It basically says — if I remember correctly — that the perceived value of a good declines as a consumer accumulates more of it. One cookie? Delicious. Ten cookies? Each one doesn't taste quite as good.I mention this because I think that fucks are like cookies....The first one: well, that's something special. It's funny. It makes a statement. The 70th one? Well, I'm not sure what to do with all these fucks.In other words, I can tell that there's a potentially poignant idea about web design in this post, but it was a little drowned out because of the way it was presented.
 Have you ever seen that scene in "Team America: World Police" where the protagonist puppet barfs in the street? The first few times are funny. The next few times are tedious. Then, right when you're thinking to yourself, "I get it, you can make a marionette hurl in the street, please stop", they double down and have that damn puppet puke its guts out like it's going to barf up a lung. And that's when you break down, doubled over with laughter, splitting your sides over a puking puppet.One fuck is startling. Four fucks is tedious. Thirty-three fucks is art.
 Well, I'm not sure what to do with all these fucks.You could be generous and give them to people; just think of all the fucks you could be giving!
 I'm just gonna leave this here: http://www.gadgetsandgear.com/flying-fuck.html
 The man has a point.
 > In other words, I can tell that there's a potentially poignant idea about web design in this post, but it was a little drowned out because of the way it was presented.I think it would be difficult to find an idea in this post that hasn't already been more poignantly formulated on [0] or more funny and even less respectfully on [1]. I really don't see the point.
 I think profanity does has a place in the English language, but I found this article childish from the start.I also agree that web sites should be simple, but this reads like it was written by a 6th-grader.
 What's wrong with childish? If someone is responding to an inherently childish concept ("I know, let's write all our websites with 150Mb of JavaScript rather than using HTML simply and straight-forwardly like it was designed to be used"), sometimes a childishly obscene response is the only appropriate response.
 Its not an effective way to frame an argument. Claiming that it is an appropriate response is basically saying that people who write overly complicated websites are so stupid that they cannot understand a reasonable, adult conversation. This is just plain ridiculous. The majority of people who write bloated websites are probably very smart individuals who just need to learn more about design.
 It clearly wasn't meant to come off formal at all.
 I agree. I never mentioned formality. I just happen to think that it was poorly written, even by the standards of informal writing.
 I read this entire post in Samuel L. Jackson's voice from Pulp Fiction. I think that's what the writer was going for.
 I read it in Zed Shaw's voice, doing a Samuel L. Jackson impression.
 Well, I read it letting my eyes sweep back and forth.
 I think the point of this style of presentation is to reach that saturation point. It conveys the sense of crossing out of raging to weary frustration.
 Are you saying that with each fuck, you have less fucks to give?
 Fewer fucks to give. Fucks are numerable.
 Don't be a fucking pedant.
 Some have argued that their fucks are innumerable. :)
 no fucks are given at the moment
 It reads to me like extreme advertising. It was popular on 4chan for a while.
 I can certainly relate, but please don't try to pretend that this is a pleasant reading experience on a desktop. Lines of text should be about 45–90 characters long (including spaces) in order to create a pleasant reading experience. Do not make me resize my browser window to do this for you.
 You can also just hit Ctrl-+ to zoom in and out to make the text larger, therefore easier to read.Alternatively, since most websites reset CSS anyway, you can change your browser defaults to make it a more "pleasurable reading experience". If you're into that.I'm just saying, these problems aren't really problems. The web was created for desktop viewing...
 The issue is not the size of the text (which is small but still legible) but the line length -- that is, how wide the lines are. If lines are too long, then reading becomes an exhausting experience as you sweep your eyes back and forth across the page like a lighthouse.It's not really possible to enforce line-length with a user stylesheet (increasing the point size doesn't solve the problem, it just balloons the letters up to goofy proportions). This page just needs max-width set somewhere on the text container.
 It's still a problem with web user agents, not with the website.> This page just needs max-width set somewhere on the text container.So, set max-width on body in your user.css?Personally I've long since stopped reading the web in "full screen" -- I'm more than a little surprised that people still do that. Assuming you're reading text, why would you want to have to move your eyes across the entire screen to take it in? Much better to have an appropriately sized window IMNHO.
 I'm not disagreeing with you but I thought I'd try this as a user stylesheet for this page just now and it looks pretty great on my screen: body { -webkit-column-count: 3; } // or -moz- or no prefix or whatever
 I'm note a huge fan of column layouts, but first time I saw that particular trick.Might split out the header separately.
 Yeah... and doing it on the whole body would be fatiguing on long pages because you have to scroll up and down the whole page after each column. I'd probably want to do column-split content areas over a certain width (e.g. an
or something).
 I played around with columns a few years ago[0] after I first saw them being used. I use some JS to keep the containing div the same height as the window and hook into scroll events. This was several years ago fairly soon after columns were being implemented and I'm sure there's a better way of doing it today.
 In desktop, resize your browser window. Fully customizable, and no worry for layout break.In mobile, rotate the device to vertical.
 >In desktop, resize your browser window. Fully customizable, and no worry for layout break.It's better for the user if a site has good readability without them having to do anything.
 > ...site has good readability...Impossible. Because you cannot assume user's taste.Also, if you think readability is not a taste, and you can make a mostly ideal configuration which can be applied to all the users, why don't you let the browser vendors to do that?If browsers are shipped with ideal configuration by default, then now the only obstacle to prevent ideal readability is site-prodivded styling.Actually Safari is trying to do this via Reader button, and shows always great result if it is available.
 "why don't you let the browser vendors to do that?"Opera Mobile does automatic text resizing and wrapping, and it's the reason it's my favourite mobile browser.Haven't tried Safari.
 'The ideal line length for text layout is based on the physiology of the human eye [...] At normal reading distance the arc of the visual field is only a few inches – about the width of a well-designed column of text, or about 12 words per line. Research shows that reading slows and retention rates fall as line length begins to exceed the ideal width, because the reader then needs to use the muscles of the eye and neck to track from the end of one line to the beginning of the next line. If the eye must traverse great distances on the page, the reader is easily lost and must hunt for the beginning of the next line. Quantitative studies show that moderate line lengths significantly increase the legibility of text.'Web Style Guide – Basic Design Principles for Creating Website Patrick J. Lynch and Sarah Horton 2nd edition, page 97.
 That's funnny I actually do most of my reading on a screen, with plenty using the full width and I actually find reading articles in newspaper and scientific articles with their tiny columns tedious and annoying. So perhaps these things change...
 The real question is why user agents don't set this as default, allowing sites to optionally change it to something else, rather than just presenting paragraph tags as wide as the viewport allows... I don't really think the idea is that the user should have to resize the window. This has been wrong for a long time (even 800 pixels is too wide for most text/standard browser style sheets)...
 Apparently HN style is broken, as your comment is between 22-28 words per line.
 Of course it is. HN is known for a lot of good things, but its visual design has certainly never been one of them.
 I for one love the simple design.
 Well, there are degrees of brokenness. There are compromises both with the spec support for columns and with how you'd manage threaded conversation in that sort of layout.
 It's really easy to format the webpage the way you want it. That's what a lot of web designers do wrong; they don't let CSS or whatever do the formatting work, and then the plaintext web page looks like a broken mess.
 ^ totally agree. I'm a Computer Science student and not a designer at all and I think that has actually helped keep my websites nice and simple:http://www.danielchatfield.com/articles/gay-marriage/https://www.volcanicpixels.com/terms
 Sometimes keeping things simple isn't possible, when the site isn't as trivial as your examples.
 Agreed, additionally its majority that rules.
 I agree but it's nothing a bit of max-width wouldn't solve.
 Your max width may well differ from someone else's.Oddly enough, I've got a set of stylesheets I've created to deal with effed-up websites. I've also got an "unstyled.css" stylesheet I apply to websites that have no or very minimal styling. Chief among what it does: give me some motherfucking margins, because I just love my motherfucking margins.A few other bits, but all told, it's pretty damned light (one gratuitous styling effect, but hey, that's me): a { color: #427fed; text-decoration: none; } a:visited { color: #6f32ad; } a:hover { text-decoration: underline; } a:active { background-color: #427fed; color: #fffff6; } body { background-color: #fffff6; background-image: none; color: #440; font-family: georgia; font-size: 15pt; margin: 2em auto; max-width: 40em; width: auto; } h1, h2, h3, h4, h5, h6 { color: #703820; line-height: 1.2em; } img { float: right; padding: 10px; margin: 20px; border: solid 1px #888; box-shadow: 6px 10px 8px rgba(0, 0, 0, 0.7); } p, li, dd, dt, blockquote, span { font-size: 15pt; line-height: 1.4em; }
 It all starts with one style attribute ;)
 Lines of text should be as long as they are, and you can scale your view accordingly for comfortable reading.
 Make your window narrower. Stop wasting screen space.
 Most web designers assume you are browsing full screen. Dumbasses.
 The vast majority of desktop web users will view a site in a window that is maximized. See these articles from 2006 (before mobile browsing took off):http://mentalized.net/journal/2006/10/24/browser_size_does_m... (this one is the most interesting because its data is collected from a variety of sites)http://www.baekdal.com/insights/actual-browser-sizesAnd this one from 2012:
 Haven't we just established that most web designers are idiots?
 Well, if most users browse the web in full screen, I guess it's the browser developers that are idiots for not accounting for that with standard style sheets?It'd be fine to have a "proper" stylesheet and use it only for unstyled html -- and then a "proper" normalized stylesheet used for everything else...
 I don't know, maybe. Where are we? I was trying to work out some css and now I've lost one of my shoes. I think it has my house keys in it.
 I love this negative ending to a negative thread on a negative article.
 Yeah, it might be responsive and nice, but the line lengths on my resolution are so ridiculously long, they're unreadable... How about setting a 550px/600px width on the body element to make the lines of satire actually readable, motherfucker?There are some very valid points here, especially the last part about browser problems being created by us developers and designers. It's all true, but honestly, I would rather put the effort in for a website that looks nice, has nice line lengths and heck, if the designers was gimmicky animated background colours, they can have them.One widespread problem I've noticed since the early 00's is the lack of hierarchy. Designers are trying desperately to break the mould of a conventional webpage design but forget to distinguish between headings and page content all too often. I don't remember the last time I saw a website that wasn't a blog that had proper content hierarchy (H1, H2, H3, etc).Internet connections are so fast nowadays that it doesn't even matter if your website is 1mb, even 3G mobile connections can load a page that big in a few seconds. The real problem with modern development is not page weight, it's the abuse of Javascript. Reflows and repaints are the real problem because people have a lack of understanding when it comes to Javascript, not 1mb of Javascript and CSS on a website.
 I disagree about the thing about page sizes, my internet connection is not "so fast it doesn't matter".
 While page sizes do matter (esp. when it's JavaScript and needs to be parsed & run), remember that things like "establishing an SSL handshake" or "resolving a DNS query" can very much be slower than downloading say 10KB of compressed assets. We should be smart about reducing the amount of junk you download when you goto a webpage, but make sure you don't save a penny and lose a pound.
 What kind of Internet connection do you have and average speed?
 This is basically the Web Site Guidelines for the GNU Project [1]: - Our goal is to get information to people. Keeping the site design simple helps accomplish that. - The use of graphics should be minimized, so pages load fast over slow links, especially animations. The GNU Project is for everyone, even those with slow Internet access and/or text-only WWW browsers.  [1]: http://www.gnu.org/server/fsf-html-style-sheet.html
 > Yes, this is fucking satire, you fuckNo. Not it isn't. I don't think you know what satire is. Satire would be if took a jab at the ridiculous 80MB TeehanLax page by making an 800MB one and pretending it was a serious endeavor.> Yes, this is fucking satire, you fuckWhatever it was, you ruined it by trying to explain it.
 Yeah, it's a joke, not satire. It could have been satire if he had incorporated all the bad web practices that he was making fun of, like add jQuery UI just for giggles and have items that were hidden at different resolutions - that sounds like the start of satire...
 And there he goes and spoils it with the GA script. Point taken.
 and by disabling pinch zoom on mobile.
 Absolutely. Takes the most simple-to-render website and makes it unusable for an entire class of device, just by adding:  (wrapped for your viewing pleasure)Why would you ever do this on a page designed for readability?
 And one finger zoom on Chrome mobile. Any zoom really.
  body { max-width: 600px; margin: 0 auto; }  Improves readability by an order of magnitude in my opinion.
 If you want to go for cross-platform compatibility, you'll specify your dimensions in ems. Especially line lengths.
 I went with: body { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; }
 Oh dear sweet good so much this.Not that the site is beautiful as specified (I prefer margins, a slightly narrower text width, and slightly different color schemes). But if the motherfucking idiot designer doesn't overload the sites' CSS in the first place I can simply drop my default style on the page.If the page is overdesigned, then I've got to tear it down and figure out what elements to re-style first. Worst: those Microsoft auto-converted pages with embedded styles. On. Every. Fucking. Element.And for the people saying "but it should be XXX px wide". Don't specify line widths in px -- you almost certainly* mean to use ems. In fact, you probably want pt and ems for _most_ of your dimensions.
 Fucking anyone can pretend they have a fucking insightful fucking idea by using the fucking fuck word enough times. It doesn't fucking prove that you fucking know what you're talking about. Tt fucking only makes you look retarded because you fucking can't express your angry ideas using more fucking varied language. You motherfucker.
 Definitely agree with some of the points in here and I understand that this is the extreme.One thing I would definitely say is that there is minimal structure besides for heading/paragraph and if I was selling something, this website wouldn't work.You need a basic structure through brand recognition > wtf the websites is doing > convince > call to action. Or something along those lines.Again, I understand this is an extreme so the straight up headings & paragraphs are there but I think a nice middle ground would work as long as people THINK about what damn content they put on their site instead of stupid parallax sites for the sake of it./end rant
 I guess it's better than the millionth blatantly obvious Bootstrap layout.
 Every time I see another metoostrap site, I die a little inside.
 This looks like it was inspired by mijustin's post "This is a web page." http://justinjackson.ca/words.html
 Funny but true. I believe that German was a Linux programmer :)May be not designers but hardcore programmers feel the same, why all the bells and whistles while the sole purpose is merely to inform your audience. There are people who still like the Linux black screen, instead of moving mouse or fingering the mobile devices, they love to key-punch the commands.
 agree to some extent.not just programmers there are people who dont like fancy things, like my grandma dont like smartphones, she is still using those pesky telephones.
 From view source: So it's not Zed Shaw?
 They both play the Guitar.
 I don't find this post funny, I agree with the points raised.. and the manner of satire. But its too much over the top. This is a good opportunity to say what I have been holding down for long.I usually substitute words like "FUCK" with "FREAK" .. "WHAT THE FUCK" with "WHAT THE HELL" .. or as Prof. Eric Grimson likes.. instead of "Pain in the ass" .. use "Pain in some part of anatomy"I'm talking about refraining from overexpression.JUST LIKE RIGHT NOW I'M WRITING IN CAPS, THIS WHOLE SENTENCE, IT MIGHT BE BECAUSE I'M EXTREMELY ELATED TO TELL YOU SOMETHING YOU MIGHT HAVE MISSED, BUT THAT DOESN'T DO AWAY WITH THE FACT THAT SOME PEOPLE JUST HATE CAPS BECAUSE IT SEEMS LIKE SHOUTING TO THEM.Yes we all are pretty much very smart[SELECT * FROM DB BODY PARTS] to know that yeah.. use of swears is just a way of expression and not in this way---> a oh soo.. "COOL AWESOME!!!!!! WOAH~!!" type of thing these days.. specially with advent of english and its spreading acceptability as language of choice over [include ] .. they are well at the end of the day still insults. So my point is that, yes its okay to use it sometimes to show how psychologically simulated you are.. but eventually its going to hurt someone out there.What disturbs me, is that use of insults have become too common these days. For example, A friend showing up late might already be crumbling over inside about keeping the other guy waiting, but upon late arrival.. if he just DUDE TALKS you and say "What the fuck were you at man?!!!" .. it may sound normal to the speaker.. but more than a few times it does hurt to be on the receiving end, try putting yourself in his shoes. No one makes a point out of it because life is too short to make the discussion about this, and not just get on with the day.. but as you see:#substituting insults with similar sounding words won't make you uncool!#but it might on that rare occasion save you from hurting someone you cherish.
 > What disturbs me, is that use of insults have become too common these days.It doesn't disturb you that, for example, the USA and its allies have been carrying out or supporting unnecessary military action resulting in the deaths of hundreds of thousands of people in south-western Asia and the Middle East for the last 13 years? It doesn't disturb you that those countries have granted vastly increased power to the state, greatly reduced personal freedoms, and reintroduced torture as an acceptable procedure, in the course of doing so? It doesn't disturb you that they think it is okay to kill people, away from the battlefield, along with any family members that might be nearby, by remote control from the other side of the world?No, apparently what has been disturbing you is that people are using vulgar language in ways which could be perceived as offensive. If you don't like it, then don't have them as your friends, and/or don't read the things they write. No one cares about your prudishness.EDIT: I see your profile says you live in New Delhi so you're probably not paying taxes to directly fund the last decades butchery. Still, I imagine that New Delhi is not short of phenomena more disturbing than vulgar language.
 If anything as such exist as you say, if anyone is responsible.. it is not USA, it is individuals. That is, if so.Besides, that would have been very off-topic
 I care about his prudishness, and share his sentiment despite my displeasure with Amercian foreign action.Don't put words in my mouth.
 The swearing has no connection to being unfunny, it's just unfunny writing. Language is a way to select your audience, consider yourself out of this particular range. I'm out of range because it's not funny.
 can you rephrase that, I didn't quiet understand what you meant. Seems like a interesting opinion.
 Oh my god. To everyone complaining about the overuse of crude language: so what? This is the Internet, not meant to be taken seriously. So put your judgment aside and read the damn article for once without making a snide remark about it.
 There was a similar article on HN a few months back. It was saying, there's no fancy javascript, css and yet you are still reading... Does anyone remember that? It is closely related to this.
 I remember that as well and would love to read it again in light of this post.Tried searching for it but to no avail, though.
 I guess, it's the one : http://justinjackson.ca/words.html
 Yup, that's the one! Thanks!
 Serious question because I am not a web developer at all, is it possible to make a website that looks decent with just raw HTML? And not have it look like this or like it's from 1999.
 I think that depends on what you mean by "decent." If you exclude css entirely, you're left with tables for complex layouts, basic colors (font color, border color, etc) and imagemaps. Not terribly exciting but not necessarily ugly either.
 Only by creating pages as if it was 1999 (but with better taste). Removing all styling functionality from HTML in favor of using HTML for structure only and CSS for styling has been an explicit goal over the last decade.
 Not relevant but I almost thought this is one of those Mother Effing websites :) http://mothereff.in/
 If you view source:And then at the bottom in the quote:> "Good design is as little design as possible." > - some German motherfuckerThere is the following cite:
 I said it recently [1] and I'll say it again, there's nothing wrong with sites that look and function like this. I agree completely that most of the problems we have with web design today are ones we've made.
 Source motherfucker, "".
 It would look better with Bootstrap though.
 "This site doesn't care if you're on an iMac or a motherfucking Tamagotchi."Ha ha, best quote imho :)
 My home page is currently 11 KB (no stylesheets or scripts), and any work on it can be done with one-liner scripts. I don't feel like coming back to the "modern" web again. I would rather continue experimenting with alternative hypertext systems.
 I agree, I find websites like tarsnap[0] to be a welcome break from all of these landing pages with complex scrolling.
 Now just make some t-shirts, maybe put up some google ads for the traffic your site could get, and make  off your rant. Just like http://programming-motherfucker.com/.
 This is one motherfucking 'extremist' message, but funny as hell!
 The comments here are very typical HN... Too much semantics and nit-picking - and I think a lot of people missed the point the site was trying to make.Maybe that means the site failed by being too distracting...\
 Just the other day I was wondering to myself: does anyone A/B test against no-nonsense simple 90s HTML? Because I bet there are some particularly unexpected cases where it would win out.
 "Good design is as little design as possible." - Dieter Rams
 It just works.Btw.: Here is a very popular blog, that has always had this style: http://blog.fefe.de/ [german]
 Sure, this is a website but what the author fails to realize is that while this may work for the Hacker news crowd, it will not be affective if you are trying to target other groups. The general public likes pretty things and in most cases are willing to give up function for looks. Just look at fashion, I'm sure women wear heals because they function better than typical shoes. There's a bigger picture here.
 You know what's amazing? Every website made with HTML, CSS, JS and images can look like that and get all the listed benefits! You can choose to have your JS and your CSS, or you can choose to have only the JS or the CSS, or only have the HTML! "Wait, so you're telling me I don't have to try hard to be unimpressed with new web technologies to make my website look like that?" Yes! You can disable JS, CSS or images on your browser.> Did you seriously load 100kb of jQuery UI just so you could animate the fucking background color of a div? You loaded all 7 fontfaces of a shitty webfont just so you could say "Hi." at 100px height at the beginning of your site? You piece of shit.I try every front end optimization technique I can, and I hate when developers don't even try to optimize their sites, but honestly, I don't subscribe to a fast [1] connection and have a fast, capable computer just to see pages with the default user agent styling. I want the parallax scrolling, the animations, the typefaces, etc. I just want the right to turn them off when I need to, but when I'm just browsing the web, I want websites to look as crazy as they can. That's the beauty of progressive enhancement.[1]: You can hardly call low end DSL fast these days, but I don't have trouble with most websites. Maybe I'm just browsing well-optimized websites most of the time.
 5 KB of html, and 22 KB of Google Analytics JS + 1 gif.It's 2013 and website owners still can't parse theirs motherfuckingwebserver's logs, extract browser info and apply GeoIP database for visitor counting. They speak about privacy, but prefer to send all the data about theirs 5KB motherfuckingpages to motherfuckinggoogle.
 While we're at it, why don't we just switch to fax? But seriously, this article does have a bit of a point.
 Has De Niro recently started coding HTML?
 "Load this motherfucker in IE6. I fucking dare you."-Always looking out for the PRC when I design.
 Littering an unfunny writeup with profanity doesn't make it funny, it just makes you sound like a middle schooler.
 I use a handful of JS libraries in my website because I need to add stuff like equations (MathJax) and syntax highlighting (prism.js). His premise is wrong because he thinks sites only convey message using plain text and nothing else.Imagine how unreadable equations and code can be if they are presented as plain text.
 You could create images for equations and put them on the site.
 this is motherfucking funny
 I felt inspired and updated my own site. rocketships.ca/
 But does it scale?
 It scales like a motherfucker.
 Reminds me of this, only not as funny : http://gradientsmotherfucker.com/
 I love it. The original idea of the web was, like gopher, to detach content from presentation and universalize it. Custom design especially flash has gotten away from that.Then again, it was also fun to play with.
 And yet there is javascript on the site. And it's not even in the head section. Now that's what I call humour.
 There's no rule that js has to go in the head. It's more common for it not be these days.
 I wouldn't make a similar thing to my clients XD.

Search: