Biggest Mistakes in Web Design 1995-2015 | Hacker News Reader

Biggest Mistakes in Web Design 1995-2015

webpagesthatsuck.com

78 pointsuser_23571155 comments

"A long web page means you have failed to organize your site properly."

I think this is outdated. Longer homepages—ones that scroll down and appropriately present the content with good flow, organization, and spacing—are just fine. The Docker homepage[1], for example, is not afraid of the scroll bar.

I only bring this up because I think the opposite idea of trying to cram everything above the fold or spread it out across 12 micro-pages creates even more problems.

[1] https://www.docker.com/

I totally agree. Long homepages is a good example of how much what is considered good web design has changed since 1994. I remember making lots of micro-pages, submenus and subsubmenus for even the smallest sites, to avoid scrolling on small 15" CRT screens in 1995. JavaScript was considered really bad practice until Gmail was launched in 2005 and jQuery in 2006. So there was no dropdown menus, unless you used applets. I remember overselling Java applets instead to clients in 1996 and 1997. Applets with listboxes and checkboxes looked different in all the different browsers. Embossed shiny buttons made in photoshop is hardly in use anymore.

In another 20 years time, what is considered good web design will probably be totally different anyway.

You don't need JS or applets for dropdowns.

You did back then.

Javascript was very popular for drop-down menu ever since Netscape Navigator 2 and IE 3 (DHTML).

Java applets were a lot less common. Macromedia's Flash 5/MX took over that Java applet marketshare around 2000.

Yeah, GP said "dont need JS or applets", but you did indeed need JS.

Maps is what changed the game on JS to me. It was magic what they did. And then Gmail came and leveled it up again.

I still remember a great Joel on Software article where Spolsky talks about "things that just aren't possible on the web" like red underlines for misspelled words. We get that now from the browser in text controls, but even if we didn't, it would be pretty trivial.

Progress!

This made me think of Wikipedia. Some of their topics have incredibly long pages. It's clearly very poor advice as a blanket statement. Wikipedia would be a much worse site if they made you navigate page-to-page for each section about a topic.

Hacker News too.

I personally hate such design - what's the point of having a 24" monitor when the web page looks like it's optimized for mobile/tablet anyway?

Why would you say that?

That website is firmly optimised for large screens, certainly not phones. It’s not even a little bit responsive. And it still manages to have too long line-lengths (though I do like it’s hierarchy and use of white space).

The information density (text/meaningful graphics per square inch) is very low - most of the space is unused, the text is large etc. I assumed that, on smaller screens, the page would be laid out so that there's less wasted space...

It's not a clear-cut to me. The scrollable design has its own usability problems if you look closer at the Docker page: multiple access paths, content spread, and more often than not people just don't notice there's a scrollbar (with 16:9 they are so tiny that a distracted visitor may not notice it). You can tell that the designer of the Docker page had this problem because you see three times "What is docker?" on that page, two of them being actual links.

But there's a related problem with docker.com: The site is so afraid that you might miss any of its very important links that it misses any comprehensible organization of its content (at least on the main page). Instead, it presents the content in various ways, often in parallel, leaving you without a (mental) map. Thus, you will probably miss some of the content advertised there ...

Longer home pages are not just fine. The current trend to have a huge scrollable page is generally bad design.

For a landing page, it's a bad thing.

For a content page, you should absolutely not split content, except on major logical boundaries (e.g., chapters or larger sections within a book).

A site I refer to with great frequency is the Project Gutenberg copy of Adam Smith's Wealth of Nations. This packs over 1,000 pages of printed text on a single web page.

It's actually pretty usable, and it makes searching for text a lot easier than separate pages.

http://www.gutenberg.org/files/3300/3300-h/3300-h.htm

I agree with most of these, but as others have noted, the comments about JS are out of date.

I'd like to nominate as an honorable mention "giant popover that tries to get you to subscribe to the newsletter/install the app before you've even seen the site.", because that's not happening with me. Ever.

I don't think the comments about JS are out of date at all. I use NoScript and it breaks a shocking number of pages that are serving essentially static content that shouldn't require Javascript.

I wonder why bugging someone with a big modal has gotten so popular, I still think doing that leads to less engagement.

They look at the extra 50 people that sign up for whatever or install the app, but don't think about the 500 people that clicked the back button and resolved to never go to their site again.

A better way of handling this, IMO, would be to let the readers see (some largish number to be determined) pages from the site and then ask them if they want to install the app. That way you're directing the pitch toward people who might actually be interested in seeing continuing content from the site.

I increasingly 1) back out of such sites and 2) add them as a 0.0.0.0 routed entry in /etc/hosts.

I think this particular site (Hacker News) is really bad when considering contrast. Just look at this comment after a while.

Are you assuming that it's going to get downvoted so much that it becomes illegible?

Well, I may have made a bad prediction there. We can't be sure though... :)

Contrast issues are definitely my biggest pet peeve. I can't believe so many designers aren't concerned that their content is unreadable. If you want to hide it, maybe it shouldn't be there in the first place. If you're not trying to hide it, then why is it so damn hard to read?

When scrolling down for a while, i find it hard to see if a comment is as the top level (no parent)

http://stylebot.me/styles/2945

I think #2 should be #1, it is insane on how many people can not articulate what their website is about in a sentence or two. It becomes so frustrating for a brand new user to visit a website and reads a bunch of marketing gibberish.

Sometimes I think that a good test would be to have a 7 year old come to home page of the website. Let him look around and then report back to you what the website is about. :)

Absolutely a HUGE gripe of mine.

I spun out a quick rant on HN some time back which became among my most popular comments of all time. Eventually posted it as an article on its on, "Please Forward to Marketing":

http://www.reddit.com/r/dredmorbius/comments/27d5xr/please_f...

Tell me what the fuck it is EVERY GODDAMNED TIME YOU COMMUNICATE ABOUT THE PRODUCT. It doesn't have to be long or detailed, you can link to your detailed description in the communication. But your press releases, emails, Tweets, blog posts, marketing collateral, etc., are going to get passed around, word-of-mouthed, and/or pulled out of drawers (or browser history / searches) for weeks, months, and years to come. Make them work for you. A link back to your primary site should be present where at all possible -- in your Twitter profile if not the Tweet itself. Absolutely include links to your primary site from blog posts.

.... and more.

About the Flash thing though. While there's a lot of sucky .swf files out there, Flash itself is probably the best web design tool out there.

Super intuitive and minimalist UI. Whether you need smooth lines and shapes or grid-snapped pixel graphics -- everything is always in vector until you export it to PNG. By combining its layers with its timeline, you get a sort of 3-dimensional layering system which boosts your productivity by a long shot. Then there's the whole animations / ActionScript universe if you're feeling frisky. The perfect design tool. I'm so glad Adobe bought it from Macromedia.

Like they say: "Flash for graphics, Photoshop for photos, Illustrator for fine arts, and Fireworks for kids."

#0: inline advertisements that match the font of the article

#2 is still a huge problem. Half the time I can't figure out what a new startup or project actually does for me. All I can tell is that they claim to be innovative and better than their competitors.

Right. When people are so engulfed in what they are creating they forget how much of it other people don't know. My own personal rule is "start by stating the obvious", and then refine as appropriate.

Some reasonable points here but overall it feels like I'm reading tips (with examples) from 2005. The final point about JS made me cringe...

"My home page goes from 31,803 bytes to 71,488 because of the JavaScript I've added to track visitors to my page and what they do. "

Using bytes to make it sound extreme is just silly. 70KB is hardly relevant today.

> 70KB is hardly relevant today.

That mentality got us into this mess in the first place.

Former YouTube developer Chris Zacharias has an informative story of the effect of reducing the page size from 1200 KB to 98:

>When we plotted the data geographically and compared it to our total numbers broken out by region, there was a disproportionate increase in traffic from places like Southeast Asia, South America, Africa, and even remote regions of Siberia... Large numbers of people who were previously unable to use YouTube before were suddenly able to.

Granted, that's a bigger leap than the one that made you cringe, but if it takes 2 minutes to load the new version in these areas (the number Zacharias gives), cutting 40 KB saves them 30 seconds.

The full article: http://blog.chriszacharias.com/page-weight-matters.

You're forgetting latency. Speed of light isn't getting any faster.

With all the round trips that TCP/IP makes, and the congestion control and TCP slow start (especially if your connection occasionally drops packets, which often happens on mobile / wireless connections), surprisingly little additional data can add a surprisingly long delay. Especially considering the multiple round-trips to third-party servers often required by JS libraries.

While many, if not all statements made there are true, the page seems to be adding the biggest mistake itself: The virtual tag-line is apparently, "How to make a flashing website, if you've nothing to say and no intention to do so, but for your interest in making money from it." (At least for me, this is oozing through most of the lines, since there is seemingly no notion of any interest behind engaging in a website at all.)

To paraphrase #1: Do you really think people will visit your site just for you to make profits on it? – Actually, there has to be some honest and credible commitment, one way or the other, in order to create some link to your visitors. This is your major investment.

You're not reading the piece well in this case.

First point: "These women are laughing at you. Why? You designed your website for your needs, not theirs."

Write these two sentences where you can see them as you're working:

1. The only reason my website exists is to solve my customers' problems.

2. What problems does the page I'm looking at solve?

If your interest is in providing an informational site (as mine typically is), then the problem you're addressing is "what information is my reader looking for, how can I convince them that I'm satisfying it, and then satisfy it?".

The article is a bit dated, it covers only "1995-2010".

Web designers haven't advanced in intelligence in the past four years.

hmm, hmmm i would add somewhere in the list:

not caring about webperformance.

i would put it before nr. 3.

if the contrast of a site is shit, well that sucks. if your site does not show up in time, it's broken. and with "in time" i mean 700ms start render on desktop. a site with a start render > 1.4s is completely and utterly broken, you can have great webdesign, but people won't see it, because they will not use your site anyway.

Those screen captures of embedded Youtube videos are a "bait-and-switch" usability issue IMO.

I think fixed menus and the like popping up all over the place deserves to be in there. I often resort to 'inspect element' and the delete key to be rid of them.

Stylebot and element inspector. I've got ~2000 site-specific stylesheets to address annoyances such as this.

I find visiting websites without my set of CSS mods extremely painful.

Readability (or similar services) aren't a bad substitute.

Web design isn't the solution, web design is the problem.

Decent overview of the past two decades. But it's ironic the navigation and decoration on that site are also great examples of bad web design.

They could have a search bar. That would be a nice design decision since it should be easy to get to a certain article or website.

Not mentioned: using a large font size so each line contains only five words. For example, webpagesthatsuck.com does this.

Sadly, sizing fonts such that they're universally appropriate is difficult. Building a site which defaults to the user's preferred font size (though this often isn't set), and otherwise scales up and down in size, helps.

I find setting the main body to a 45em width, with 4em padding, and auto margins, is pretty close to perfect (desktop/laptop).

#1 for me: anchor text containing the word 'here'. Bonus points for 'click here'

This isn't so bad if it's embedded in a sentence explaining where "here" is. It can help in paragraphs where redundant information just clutters things up.

Physician, heal thyself.

... but he read "Naked Lunch" at age 15!

JS conflicts (as described)? Today? Really?

Yeah, that whole section read like something from 2002 to me as well.

Reply on news.ycombinator.com