Don't Let The World Suffer From Your Website Too

Here’s a few things that you want to avoid when you’re building your website. Don’t worry, you’ll save time by avoiding them. And the world will benefit.

Don’t Make Links go Bold on Mouseover

Some sites think it’s cool to make links turn bold when the user moves the mouse over them. Please don’t do this. Your users won’t be able to click on the link.

Chances are that your link will fit neatly on one line under normal circumstances, but when the user moves his mouse over the link, and it goes bold, it takes up more horizontal space, and the browser has to wrap the link onto the next line. Of couse, this means the link moves out of the spot where the mouse pointer is. so now you can’t click it. The browser hasn’t really noticed yet that the mouse isn’t over the link anymore, it doesn’t see that until you move your mouse ever so slightly. In which case the link goes back to normal, and swaps back in place.

Here’s what such a link looks like: <a href=”#” class=”bold”>This is a link, try moving your mouse over it.

Don’t Use Frames—Just Don’t

When you publish something on the web, you want other people to link to your pages. Links, whether on a web page or in an email, is word-of-mouth, the only form of advertising that’s ever worked (and everybody knows that, although your average marketing guy might not admit to it). You actively want people to link to your site.

When using frames, people can’t link to the pages that interest them—the interesting part is almost never the opening page. So people won’t link to your site. Too bad, because that means lost visitors.

Besides, frames are simply bad user interfaces. When you’re using frames, they’ll usually not have the right size for my font size, screen size or whatever, and I’ll have to scroll around them. But before I can scroll, I’ll usually have to reach for the mouse and click in the frame I want to scroll. Ugh! Frames stink. Such a disgrace to see that one of the Gods of interaction design is using frames on his website. What does that tell you? Be sceptical when he talks about designing for the web.

Leave The Link Colors Alone

Links is the key user interface on the web. The user’s manual for a web browser reads: “If it’s blue and underlined, click on it!”. Don’t mess with link colors. They should be blue and underlined. A visited link should show in a slightly darker color. The visited link color is actually very important when navigating the web. It’s a subtle, mostly subconscious reminder, that you’ve been there, it sort of marks off your territory as you go along, like a dog spraying telephone poles. Some webmasters think it’s better to force the visited link color to be the same as the fresh link color. They’re dead wrong. It’s not. (Note! I used to have a link to AOLserver here, but they’ve changed it.)

And don’t fall for the temptations of CSS to <a href=”http://synkron.com/default.asp?id=33”>make links only underlined when the mouse is over them, or other stupid tricks like that. The user interface of that sucks. If you do that, your readers will have to let their mouse wander over all of the page like a combine harvester before they realize what’s clickable and what’s not. It might look good, but it doesn’t work well in practice.

Why Links Are So Important

Why are the links so important? Because the links are what brings value to a web page. Who wrote it or what web page it’s on is not as important as helping your reader find the information she needs. Think about it! The number one most visited page on the web is <a href=”http://yahoo.com”>Yahoo!, and that page almost exclusively contain links. This even goes one step further: Today, it’s not as important to know the answer to a lot of things, as it is to know where to find answers, and being able to connect the people in need of answers with the people that have the answers.

Don’t Set Explicit Font Sizes

Most browsers are equipped with the ability to scale fonts on-screen at my discretion. If you’re running MSIE on Windows and you’re equipped with a wheel mouse, you can even hold down the Ctrl key and roll your wheel to scale fonts up and down. But it doesn’t work, if the publisher has decided to put explicit font sizes in his HTML or CSS code. I can tell my browser to adjust the font size as much as I like, but nothing changes, except perhaps the size of the bullets in a bulleted list! I know that I can go to my browser config and tell it to use my settings over the publishers, but not everybody will figure that out. And why should I have to do it? Most of the time I’m quite happy with what the publisher has decided, but sometimes it’s simply too small or too big, depending on what screen resolution the designer happened to be using. And that’s when I hit Ctrl and the wheel and — nothing happens.

Here’s first an example of what you shouldn’t do (absolute size specified in points), and an example of what you should do. Try for yourself to scale the font size. Note in particular how the bullet in the first line is resized, but the text’s the same.

• This line has a fixed size of 12 pt

  <p style="font-size: 12pt;"> ... </p>

  
  
  

• This line has a size setting saying large

  <p style="font-size: large;"> ... </p>

  
  
  

Be Careful When Using Flash

Flash is sort-of the right idea: Using vector graphics for the web. It’s right, because vector graphics will display well at all screen sizes and resolutions, plus it’s relatively small and therefore fast to download. It’s even more right, because we do need ways to enrich the user interfaces that a browser is able to present.

It’s just that Flash is so poorly engineered. Flash doesn’t support dynamic websites very well. True, the <a href=”http://openswf.org”>file format used by Flash is open. But it’s an annoying binary format which is hard to debug. And Macromedia has never been very good at software engineering. In other words, Flash lacks a plain-text representation reflecting the fact that Flas is simply yet another programming language.

Moreover, Flash encourages the author to completely circumvent the existing UI of the browser, including scroll lists, links, back buttons and much more. Instead, authors will typically completely reinvent the user interface from scratch each time, and while the author think it looks very k00l, the fact is that users don’t have any interest whatsoever in your user interface, they want things done. So having non-standard interface idioms is simply bad business.

There’s also the basic problem of forcing your users to download a plug-in; a plug-in that doesn’t even exist for several flavors of unixes.

For an example of a truly horrible Flash site, go to <a href=”http://www.siemens.com/en2/flash/”>Siemens homepage. Several things suck about this page. First and foremost, links aren’t blue and underlined anymore, as they should be. Second, Their reinvention of the scrolling list (“by category”) t happens to not work the same way as the user is used to (clicking in the darker area between the arrow and the slider only scrolls one line and not a screenful as usually; clicking and holding the mousebutton down on the arrows only scrolls one line, not continuous as it would normally). You also have to wait while all the things scroll into place, which is a very good way of making sure nobody will every want to use this site as part of their daily work. The mouseover effect on the top navbar might look k00l to some, but it’s so slow it doesn’t work as a UI feedback effect.

I’ll be fair and give Flash a chance to defend itself

References

Don’t forget to visit the <a href=”http://stgtech.com/staff/gcallah/BadHTML/bad1.html”>How to Create Really Cool Web Sites page.