"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.
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.
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.
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.
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.
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.
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...
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 ...
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.
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.
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?
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. :)
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":
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.
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."
#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.
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.
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.
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?".
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.
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.
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).
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.
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/