HTML Smells
When does a site start to stink? When do you know it’s time to refactor? These are questions I’m considering in Chapter 1 of my new book, Refactoring HTML. Here are some of the smells I’ve already written about:
- Illegible code
-
The most obvious symptom is that you do a view source on the page and it might as well be written in Greek (unless of course you’re working in Greece). Most coders know ugly code when we see it. Ugly code looks ugly.
- Slow page rendering times
-
If any major browser takes more than half a second to display a page, you have a problem. This one can be a little hard to judge, because many slow pages are caused by network latency or overloaded databases and HTTP servers. These are problems too, though they are ones you cannot usually fix by changing the HTML. However, if even a page saved on a local file system takes over half a second to render in the web browser, then you need to refactor it to improve that time.
- Pages appear different in different browsers.
-
Pages do not need to look identical between browsers. However all content and functionality should be accessible to everyone using any reasonably current browser. If the page is illegible or nonfunctional in Safari, Opera, Internet Explorer, or Firefox, you have a problem. For instance, you may see the page starting with a full screen width sidebar, which the content pane follows. Alternately the sidebar may show up below the content rather than above it. This usually means the page looks perfectly fine in the page author’s browser. However he or she did not bother to check it in the one you’re using. Be sure to check your pages in all the major browsers.
- Pages require dangerous or non-standard technologies.
-
Many sites require cookies, JavaScript, Flash, PDF, Java, or other non-HTML technologies. While these all have their place, they are vastly overused on the Web. They are not nearly as interoperable or reliable in the wild as most web designers think. They are all the subject if frequent security notices telling users to turn them off in one browser or another to avoid the crack of the week. They are also unsupported by Google and most other search engine robots. Consequently you should strive to make sure that most pages on your site function properly even if these technologies are unavailable.
- Your company’s home page suddenly says, “Pwned by Elite Doodz.”
-
Web site defacements are a major wakeup call, and one that gets everybody’s attention really quick. There are a number of reasons this can happen, but by far the most common is a code injection attack directed at a poorly designed form processing script.
- Your first appearance on Google is on p. 17.
-
Search engine optimization is a major driver for web site refactoring. Search engines value text over images, and early text over later text. They don’t understand table layouts, and they don’t much care for ????.
- The CEO can’t fill out his travel expense vouchers.
-
Usability on the Web has improved in the last few years but not nearly as much as it can or should. All but the best sites can benefit by refocusing more on the readers and less on the writers and the designers. A few simple changes aimed at improving usability can have disproportionately great returns in productivity. This is especially important for intranet sites, and any site that is attempting to sell to consumers.
- Readers send e-mail saying your site is broken
-
This is one of the absolute best ways of finding out you have a problem.
What would you add to this list? What else tells you you have a problem? Comments appreciated.
February 13th, 2007 at 11:31 am
You want to make a change but it’s too hard.
February 13th, 2007 at 12:08 pm
It looks dreadful?
(May be intentional, but I’ve had some decompose over time…)
Somewhere around there is “no-one over 50 can read your typeface”.
February 13th, 2007 at 2:17 pm
Your site has an “intro page”.
Joseph’s is probably the best one though “You want to make a change but it’s too hard.”
Just to be more specific, and I see this all the time:
> You want to add a page/article and the person creating the content has no idea how to do it
> You want to change the font style and you have to modify a 1,000 pages by hand (no use of CSS)
February 13th, 2007 at 3:40 pm
* You try to increase (or decrease) the font size, but nothing happens
* Only a third of the width of your 23″ screen is used
* The pages are unprintable
* The friend you’ve sent a link to the most interesting part of the site to complains it only takes him to the home page
* You get a migraine from trying to read the cool mini-font in brillant white on a black background
* The back button doesn’t work
* You can’t bookmark anything
February 13th, 2007 at 8:59 pm
* Your URLs look like line noise.
* You get nasty emails from visually disabled users.
February 14th, 2007 at 12:33 pm
When your CSS style names include:
BodyText10pt
BodyText10ptRED
BodyTitleRed
BodyBOLDRED
BodyTextBOLDBLK11
Yes, I worked with a graphic designer who did that.
February 16th, 2007 at 7:42 am
I have a problem with glub programmers that spell everything with a j in front and can’t think with protocols a decade after the web took over the network.
Get real, buddy, HTML is here to stay as-is, written in the stone of a zillion applications.
One thing that smells bad today in the web development toolbox is Java, not HTML. We’re still expecting a J2EE implementation of REST seven years after the paper’s publication. According to the latest news, an API should be released in march 2008. But I’m not sure that any one cares any more about Java and the web at this point …
February 19th, 2007 at 2:04 am
Laurent:
> Get real, buddy, HTML is here to stay as-is, written in the stone of a zillion applications.
Your post only makes sense if you just read the title of the post (HTML Smells) but not its content. You should go ahead and try to read what is written in front of you.
February 22nd, 2007 at 1:45 pm
I hate it when you print an article on the web and all I get is a very narrow column of text taking 1/10th of the page width. Even worse when the page has a printer-symbol and the text on the printed page is for a page that is an inch wider than my paper.
You can specify a layout for printing in the stylesheet without affecting the normal page layout!
This page is only semi-smart. When you print it the width and layout is OK, but I don’t really need the two extra pages with the navigation links (shown on the right in the browser) at the end!
March 7th, 2007 at 12:06 am
How does one represent an apostrophy? ’ how intuitive!
March 15th, 2007 at 11:26 am
* Only a third of the width of your 23″ screen is used
This can be argued. Having very wide text lines is hard to read, that’s why newspapers have several columns…
* I hate it when you print an article on the web and all I get is a very narrow column of text taking 1/10th of the page width. Even worse when the page has a printer-symbol and the text on the printed page is for a page that is an inch wider than my paper.
This right, printed page should have less rigid layout. Thus, if your printer driver allows multi-column layout, you are free to use it.
Note that Firefox extensions like Aardvark or Web Developer / Firebug can be used to lift these limitations…
I will add: “The right button is disabled so you can’t see the source nor steal the images”, or so the site “designer” thinks…