Oh man I don't know where to begin. So many people utterly fail at web design these days.

Ads suck, sure. They're generally designed to annoy. That's another topic entirely.

More and more sites seem to be designed by people who don't know how to design websites. Not just in the sense that they don't know how to lay them out and make them nice and usable, but more in the sense that they don't know how to use the tools. Using Javascript to re-implement the functionality of basic HTML, Flash to re-implement the functionality of Javascript, and multiple Flash files (each having to be loaded in series) where one should have been. (I'm looking at you, MSPA.) And of course, when you use the wrong tool for the job, chances are you're doing it wrong and re-implementing things poorly and wrongly.

I see plenty of sites using scripts to perform such basic HTML functions as:

• Forwarding to another page. (You want the meta tag, which also won't fuck with the back button.)


• Making a button submit a form. (You want <input type="submit">.)


• Saving user preferences. (You want cookies and server-side scripting.)


• Displaying a confirmation prompt. (You want another page, with a form on it. You can then use scripts to display a popup prompt and bypass that page, once the page is working.)


• Making a link lead to another page. (You want the a tag. Yes that's a single 'a', like <a href="http://ww.example.com">This is a link without Javascript!</a> )


• Making a button lead to another page. (You want the a tag again; you can put a button tag inside, but really, just use an ordinary link.)


• Retrieving and displaying content from a database or another page. (You want server-side scripting, or possibly the iframe tag in some cases.)


• Making a link open in another window. (See below.)


• Displaying an image. (You want the img tag.)


• Displaying text. (You want just embed the fucking text in the HTML.)


• Displaying the entire fucking page. (I don't even know how you manage this.)

Some places deliberately misuse scripts to annoy people into enabling them so their ad scripts will work, but these are usually trivial to circumvent. Most of the time, it's just design fail.

Then there are cases where scripts are used to break the functionality of HTML, such as...

• Making links open in a new window or the same window, instead of what the user wanted.


• Trying to interfere with context menus. (Thankfully this practice seems to have pretty much died.)


• Scripts that toggle the visibility of some container. The problem with these is they are rarely implemented correctly. The container should be set to visible, and the script should change it to invisible when it first runs and then toggle when activated. Otherwise, without scripts there is no way to display the content.

Some sites use scripts or attributes to make a link open in a new window or not. Don't. The user will decide, by which mouse button or menu option they use, whether to open in the current window, a new tab, or a new window. Your attempts to override their choice will only annoy them.
Twitter manages to actually break this one in the opposite manner from most sites: Middle-clicking a link opens in the current window, instead of a new tab. This means I can't open a link and let it load and sit in the background while still reading the feed. REALLY FUCKING ANNOYING.

The proper use of Javascript (and, for that matter, CSS) is to enhance pages. You write your page in HTML ONLY and make it usable, then you add CSS to make it look nice, then you add Javascript to enhance it (e.g. popping up confirmation prompts instead of using a transition page). If, after these steps, your page is not fully functional with both Javascript and CSS disabled, you have failed.
(Exceptions of course for web apps that can't be implemented in HTML alone. Note the term "web app". Your web page is not a web app. Google Documents is a web app. Mibbit is a web app.)

Disqus is one of my favourite offenders. We can't display text on a page without using a script, but we can still manage to plug our broken "service". My god go die in a hole.


More annoyances:
Requiring login to post comments (CAPTCHA would like a word with you), or to even view a page. Please explain to me why I should take the time to register and give you my email and other personal information. Ideally by making it not mandatory.
Bonus points if you let the user spend several minutes writing something or filling something out before telling them "oh sorry, you need to be logged in." Those forms tend to find themselves processing several megabytes of garbage submissions repeatedly.

Sites that don't work in small windows. Not everyone has their browser maximized on a 1920x1080 screen at all times. Annoyances range from having to scroll left and right frequently, to having the content actually clipped off the side with no way to reach it. This is bad enough on a desktop - don't even think someone on a small mobile device is going to be able to see anything.

Sites that don't work in large windows. When someone does have their browser maximized at 1920x1080, a 20% margin makes for a huge gap of nothingness. Worse are pages that use a fixed pixel width, thus failing entirely on all but a small range of window sizes.

Sites that specify a text colour but not a background colour and vice-versa. Not enough people know that web browsers' default colours are user-selectable. Some people like light text on a dark background. Then they'll find site after site after site that specifies black text but leaves the background colour unspecified, using the user's dark default colour.
This is a simple rule - specify both foreground and background colour, or neither - and test with non-default settings. It's such a common mistake that for a while, even Google's homepage demonstrated it.

Some pages want to embed an image between paragraphs, and also make that image link somewhere. This is how you do it:

This is not how you do it:

Point your mouse beside each image to see why this method fails. If someone is multitasking, they'll want to be able to click any empty region on the page to switch focus back to it. Having huge empty regions serve as links interferes with that.
If you look at the image properties, you'll see a second failure: the second image has no alt attribute. Besides being required by standards, this means the user has nothing to click on before the image has loaded.

Some forum systems have a quick reply box at the bottom of threads. Some require you to click a button to enable it. What is the point of this? Oh, and no points if you guessed what that button does without Javascript.

A lot of sites have a small login box, with two text fields. It's usually fairly obvious from the "login" button what these are for, but they feel the need to label the boxes - by putting their descriptions inside them, as default values. This of course means without scripts you need to manually delete these strings, but there's a much bigger fail here: the password box is labelled with a default value, despite that it is a password box. A label of ******** isn't all that helpful.

Stop browser sniffing. It is not 1999. There are more browsers than IE and Netscape, and they are being updated frequently with new features. You cannot determine feature support by user agent string. Test for each feature before using it.

When your article is 200px
wide and surrounded on
all sides by hundreds
of pixels of ads,
"related content", and other
nonsense, nobody is going to
bother reading it. You are
writing a web page, not a
haiku.

Similarly, when you split a one-page article into 10 pages, you're only annoying your users. Of course the only real reason to do this is to make then view 10 pages to read the article, thus generating more ad views, so you're probably trying to annoy them. Go die.

Many pages use Javascript to embed Flash. This is semi-excusable: Flash's own generated embed code does it (their fail, not yours), there hasn't for a long time been a good standards-compliant HTML way, and Flash is a type of script too, so those who have scripts disabled probably don't care about not seeing it. The flaw here is, most of these sites don't fall back to a message saying "Scripts must be enabled to view this content." Instead, they say "Flash Player is not installed." This is usually not true, and is just going to confuse and frustrate your users. Changing the text to accurately report the problem is trivial. Learning how to embed without scripts and even just copying and pasting that simple code where you need it isn't hard either.


Some ask, why do you care about scripts? Why not just stop whining and turn them on and live with it? A few good reasons...

• Machines can't see content that isn't visible without scripts. That means search engines and readers for the blind, for two significant examples. It also means most text-based browsers - this isn't usually a big deal, but if your site is explaining how to set up graphic drivers, it probably shouldn't require something present only in graphical browsers. Yes, this is a common problem.


• Javascript is used to annoy far more often than it's used for good, and browsers generally do a terrible job of preventing it from doing such nasty things as hogging CPU and memory resources (deliberately or not), locking up the interface, taking down the entire browser and even being a security hole. A sane user won't trust random web pages, and an untrusted page shouldn't be allowed to execute arbitrary code. A properly-designed web browser would have scripts disabled by default on each site.


• Those who re-implement functionality using scripts almost always do so poorly. Using scripts to make a link for example means you can't choose whether to open in a new tab or not, right-click and copy the location or bookmark the link, or search for links to certain pages, and the browser can't apply the "visited" style.

This has been Web Design 101, thank you for reading, there will be a quiz, and probably a followup post or two as I think of more things I forgot.

____________________