Some Rules of Thumb

Let me share some design rules of thumb. These are ways to think about your pages, not ways to code them.

The Web is NOT on paper

People who are accustomed to design work on paper documents have a hard time making the transition to the web. The web is a fundamentally different medium, for better and for worse. A good designer will use a medium to its best advantage, and will minimize its weaknesses.

You cannot control layout on the web; trying to do so will ensure that some readers will not be able to use your pages at all. HTML is a structuring language that lets you give hints about presentation, but the final presentation is a combination of your document plus the reader's browser, the reader's preferences, and the reader's window size for the browser. All of these latter items are out of your control.

This doesn't mean that everything you know about layout is useless; you can still do things such as flowing text around an image and adding white space.

The web is a hypertext environment. Paper documents can only begin to approach the possibilities, through such things as indexes, tables of contents, and cross-references. Web documents can bring these tools to life by providing live links that go immediately to the referenced topic. And hence, the web's non-lenieraity.

At present, the web is accessed almost entirely through computer screens. This does have its drawbacks; screens have much lower resolution and sharpness than paper. They are also harder for many people to read for other reasons. Typographical controls should be approached with great restraint, especially when it comes to body text in your documents. If you override these choices, you may be degrading the reading conditions for the most important person in your life - the person who reads your pages.

Another important use of the web is searching, and how you code your documents does affect their accessibility to search engines. META tags are important for providing the right information to search engines, but the search robots will read the rest of your document as well. Some things simply won't be available to the robots, such as text in images, hence alt text is important, and words which are split by mark-up embedded in the words (e.g., drop caps).

You are a guest in your reader's environment

When you visit the home of someone you've never met, do you immediately tell them to replace their carpet or rearrange their furniture? Do you carry a portable stereo into their homes and turn it up with your favorite music?

Each of the following is just as rude:

• telling the reader to get a new browser
• expecting the reader to resize their page to fit your design
• playing background sounds that the user can't control
• setting type size or font in ways that the reader cannot override

It isn't simply that you don't know what your reader's environment might be, but you don't and can't know what things might be important to them, or why. Anything you do which forces conditions on your reader might violate some basic need that determines how they configure their system. Telling a reader to reconfigure their system just to accommodate your page is rude; if it does so in a way to breaks their work routine, they will probably leave your page immediately.

And you'll never know.

Make no assumptions about your user's browser

I've already said that you shouldn't try to dictate what browser the reader uses. Since you really have no control over this anyway, you might as well start with the assumption that your reader may use anything under the sun.

Always use alt="..." attributes for your images, and provide text alternatives for image maps. There are many reasons why a reader might not be loading your images.
If you use frames, make sure that your site works just as well without them.
If you use proprietary tags, don't depend on them to get your message across. The same goes for Java and for features that require plug-ins like flash; think of those as enhancements rather than requirements.

Designing for any possible browser isn't that hard. You start with a subset of HTML that is universally recognized. Restrict yourself to this set of tags when you add your content and design your navigation. Then add the rest as enhancements, making sure that your pages are readable and transmit their content on browsers that don't support those special features. Also, it's a good idea to keep an outdated version of a second-rate browser, and to use it periodically to check out your own pages - before you put those pages out on the web where other people might view them with the same outdated, second-rate browser.

Keep your toys to yourself

There is a tendency at many sites to clutter up the home page with stuff that is of no interest to readers. Counters. Awards. Things the author cares about, but no one else.

The key point here is focus. Your web site has a purpose. Each page has a purpose. Everything should contribute to that.

This is not to say that you can't have fun with things. Take awards, for instance, they should all be stashed away on an awards page; those who are interested can look, and those who don't care don't have to deal with it. Awards really don't belong on your home page.

Counters are another sticking point. No one cares how many other people have been to your web site. If you need them, get your access counts from your server's logs.

And then there are the people who collect animated gifs and flash. These are incredibly distracting. They are confections. As Bruce Sterling once said, no one ever cried over the beauty of a cupcake. If needed make them subtle, and hidden away in the place where they are most appropriate.

Your reader is not an idiot

If a person has been using a web browser long enough to find your page, they probably understand what a link is, and how to activate it. It is not necessary to tell your reader to "click here."

Don't try to be cool

Being cool generally means that your web site isn't so cool. "Cool" generally means distractions, self-promotion, and such. A lot of it is counter-productive.

The human visual system tracks to motion. This is why blink is so evil, and why animated gifs are distracting. At first, these things sound great: "I want this to be noticed!" The question is whether you want your reader to see anything else on your page. Every blink, every movement, is going to draw attention away from everything else. And if you use these to draw attention to something adjacent to them, such as text, their mere presence will be extremely annoying when the reader is trying to read what you want them to read.

Background graphics is another way for coolness to interfere with your website. Most backgrounds, even lightly textured ones, reduce legibility of plain text. Different browsers - even different versions of the same browser - differ considerably in the amount of contrast displayed in a background, so what looks OK to you might not be legible to someone else. Solid colors that contrast strongly with text colors are really the only way to ensure legibility.

It should go without saying that high-contrast or extremely busy backgrounds are really very un-cool. It should go without saying, but there are some really hideous backgrounds on the web that totally destroy their pages.

Understatement works surprisingly well on the web. Remember that when your page comes up, your reader will be completely focused on it. So know what it is that you want to say, then say it and be done with it. If you've done your job well, you'll get your point across. If you haven't, no amount of cool is going to compensate.

Leave the reader in control

There are a lot of things that go into this, more than some of the really awful sins. One peeve of mine is the auto-refresh. Please, let me decide when I want to go to the next page.

A more subtle interpretation of this is to make your page usable as quickly as possible, even before it is completely loaded. Don't force your reader to wait for netlag.

Use height=nn and width=nn attributes on all of your images. Most browsers will format the page immediately and load the image later, so at least the text of your page is usable.
Break long pages into several pages, unless the page really focuses on a single issue. Long pages are most likely to be appropriate on detail pages, and least likely to be appreciated on your home page.
Use the top of each page to give the reader enough information to decide whether they want to stay on that page.
There are other ways of taking control away from the user. Frames are bad about this, because they take up valuable screen space, and most framed sites don't give you a way to make the frames go away.

Keep your hands off the status line! Status-line crawlers are a popular toy, but they take away link information that the user may consider more important than your crawler. Not to mention that crawlers, either in the status line or elsewhere, are nearly as evil and distracting as blinking text. Some people also use JavaScript to put link descriptions in the status line when the mouse is over a link. If you have a link description that's that good, use it for the link text. Again, you're taking the URL away from the reader at exactly the moment that they're likely to be looking at the status line to see where a link is going to take them.

Background sound is another bad idea; most sounds are fairly large, and a reader should be able to choose whether they want to spend the time waiting for a large download. The same is true of large graphics; give readers a thumbnail to select, and let them know before they select that they're going to be downloading something huge.

Provide redundant navigation

People learn in different ways. People behave in different ways. People's perceptions respond to different cues. So be good to everyone, and provide navigation that works in multiple ways.

This is one of the arguments for using both image maps and text. Some people are going to use the text links, even if they are loading graphics and the image map is right there on their screen.

There are other ways to provide useful redundancy, including horizontal linkage between pages at the same level in the same area , vertical linking especially upward to all levels, including pages in more than one subject area when appropriate, putting cross-links in context within articles where it is appropriate, and for large sites, a site map page whose only purpose is to link to every page in the site in some organized manner. For site maps, it helps if every page links back to the site map as well. For the primary navigational links which provide structure to your site, be as consistent as possible about the placement of these links.

The "three-click rule" is important in navigation. It should be possible to get from any page in your site to any other page in your site with no more than three links. It's even better if there are multiple three-links-or-less paths, because different readers will try different paths between the same pair of pages.

Listen to hear yourself say, "Yes, but..."

If you find yourself defending the design of your pages, especially to the people who read them, be open to the possibility that your pages really do have a design problem.

Remember that most people aren't going to tell you about errors or problems. If your content is worth staying for and the problems aren't too obnoxious, they may stay and read. Otherwise, they're likely to hit the back button and never come to your pages again. You'll never know how often that happens, so listen carefully when you do get feedback.

Better yet, seek out feedback from others. They'll be happy to tell you everything that you're doing wrong. You don't have to agree with them, but do listen carefully to their explanations of why they think some particular feature is a problem.

Make your pages error-free

Make sure your graphics load. Make sure that your links work. Where you link pages at other sites, review your links regularly to catch sites that have moved.

Validate your pages. Errors in your HTML can cause strange behavior, including information that doesn't display.

Look at your pages. It's truly amazing to see a page that doesn't even load correctly; it says that someone didn't care enough to look even once before putting that page on the web. While you're looking, make sure that the page displays the way you intended for it to display. Do this in several browsers; not all browsers implement the same tags, or implement them the same way. Browsers also tend not to follow HTML syntax faithfully; validation is no guarantee that any particular browser will render your page in a readable, useful manner.

Bet your ego on your readers' assessment

We all want to have the best-looking, most effective pages on the web.

Unfortunately, our own opinions of our work are highly unreliable. The only opinions that matter are the opinions of your readers. Base your ego on that.

A Harsh Mistress

What is it that matters to you?

If you can't answer this question, go away. You don't have any business designing or having a website.

Oh, you think you have an answer? Then it's time for my next question:

Why should I care?

Yes, this is me talking, that hypothetical person who might someday stumble across your website. Except for one thing: I'm not hypothetical. Not only am I real, I'm impatient, I'm jaded, and I get bored before most pages load. So what are you going to do about it? Huh?

I'll tell you what you can do. Make me care. Compel me to care. Don't leave me any choice in the matter. You've got ten seconds.

Why should you care whether I care?

Well this gets down to the nub of it, doesn't it? You're designing or getting designed webpages and putting them on the world-wide-web. Why? If I go to your page and leave before I've read ten words, then I'll never know what it is that matters to you. Is that what you want?

So how do you get me to stay?

Ahhh. Now we're getting down to the important things.

Remember that I'm the most important person in my world. I may be curious, or I may not. I may already know about your subject matter, or I may not. You don't know what mental state I might be in. So assume the worst and start from there.

That's why openings are important. Don't waste time, don't waste pages, don't waste bandwidth. Don't let any distractions take my attention away. Your opening page is a contract with me; it's your promise of what you're going to deliver. So get to the point. Give me a hook that I can't resist. And make it quick.

Ten seconds? Are you serious?

You'd better believe I'm serious. After ten seconds, human beings lose focus on whatever they were paying attention to. They may consciously be more forgiving of net-lag, but the basic mechanisms of the mind don't work that way.

What can you do in ten seconds? More than you'd think, actually. You don't have to deliver everything, but your page had better be usable within ten seconds. Ten seconds is still only ten seconds; for an average reader, for instance, that's enough time to read perhaps 40 words.

Forty words is a good opening, and remember what I said about openings: They are your contract with your reader. This is true for your site, it is true for each page, and it is true for the first glimpse of each page. Of course, you also have to deliver on your promise, but you don't have to accomplish that in ten seconds. Look at it this way: every link followed within your site represents a promise and delivery, followed by another promise. That's how you build trust, on the web or anywhere else. Once your reader trusts that you will deliver, you have a lot more freedom... as long as you continue to deliver.

What kind of promises can you make? It will vary. Sometimes you promise an attitude: "This page will entertain you." Sometimes you promise content: "You want to know about this? Well, here it is." Sometimes you promise organization: "This will help you find what you're looking for."

But ten seconds is still ten seconds. During that time, the reader's machine has to contact a web server, and that server has to send a page. If you've got graphics to load, that's another server connection, one per image. If you're using frames, that's at least two more server connections before anything interesting or useful even gets sent to the reader.

This is one reason why text will always be crucial to good web pages. Text gets delivered with the first server connection. Text formats immediately, provided you've done the right thing by providing height and width for images, and kept your initial tables small. Text loading can't get turned off by net-weary users. Forty words. Ten seconds. Make your promise.

That's not to denigrate the value of images or anything else; it's simply recognizing what's going to show up first. Do you need images to make your point? Don't neglect text, whether it's captions, alt text for images, a quick index, or a short, pithy comment. Text - or the lack of it - is the first thing your reader will see.

By the way, this is what usability engineering is about. It's understanding what works for people, and making sure that you meet those needs. It's about using those ten seconds wisely, which requires good planning, good design, and good execution. And you've only got ten seconds because of the net; on your local machine, when you're designing, make it immediate - although you really can't assess net-lag effects without the net.

Am I setting a high standard?

Yes, but why not? I'm a reader too, especially when it comes to your pages. And you want me to like your pages, don't you?

This is why I compare a web site to a harsh mistress. You've got to be aware of the effect of everything you do, not on how you perceive your pages, but on how your readers may perceive them. You have to be constantly aware of the cycle of promise, fulfill, promise. You have to be alert for flaws in your concepts, your design, your implementation, your understanding of your readers. When you find flaws, you fix them, because part of your reputation rides on your responsiveness, and even on your foresight, because the most important reader is always the next one, not the one before.

You've got to be aware of these issues at every level, from the cognitive to the subconscious. You've made a promise, and fulfilled. Where's the next promise? It had better be right there; don't make the reader look for it. Site navigation has to be invisible until it's needed, then suddenly blatantly obvious.

You've got to remember that human beings are pattern-making animals. We'll make a pattern out of cues from the environment, whether there's a pattern behind them or not. So make sure that everything on your site and on your pages matters. Understand the patterns you want to create, and throw out anything that isn't part of that pattern, no matter how much you may care about it for its own sake. What matters is the patterns that your readers perceive, and understand now and forever that those patterns are a product of your presentation and their expectations. People always come with preconceived notions, and that's your starting point - even if you have no idea what those notions might be.

What's in it for me?

Here's one reader expectation that you don't have to guess about. People don't come to your web site, or stay at your web site, because your site is important to you. They come for what they can get out of your site. If they ever pause to ask, even for a split-second, what's in it for me? when it comes time to follow a link, or to wait for a page to load, or to scroll down a page, you've lost them.

There are three fundamentals you can count on.

• People don't like to read.
• People don't like to scroll.
• People don't like to wait for graphics to load.

This is not to say that people won't do these things; it's just that every time you ask them to, you are cashing in on their tolerance. Think of these as inertia. People have to have reasons to do these things, and the reasons have to be their reasons. It's up to you to overcome their inertia.

People will give you a little bit of tolerance when they first come to your site, but from that point on, you're on your own. Think of it like a bank account. Every time you make a promise and fulfill it, you increase the tolerance in that account. Every time you make your reader wait, you lose some tolerance. Every time your reader sees an error on your site, you lose a lot of tolerance. Every time your reader has to search to find what they want, the longer they search, the more trouble you're in. If that tolerance ever goes to zero, that reader is gone... and will never come back.

The only way you can keep things going is to keep satisfying that reader. Not once, but every time the reader expects it. Every time you promise it. The way you fulfill your promises to the reader is the way you sell your reader on staying to see more.

So let's talk

Think of your web site as one side of a conversation.

It's not as one-sided a concept as it sounds. Sometimes when people talk, one person does have something to say, something that needs to continue until it's all said. What does the other person do during this time? Lots of things, from nodding to eye contact to small vocalizations ("um, hm") to the occasional question. As the person talking, you are aware of these things; as long as they continue, you know you still have that person's attention. When they stop, you've lost them.

The web works on much the same model; you have a web site that has something to say. The reader acknowledges continued interest by responding with scrolling, waiting, following links, and most of all, reading and thinking. As long as you can hold their interest, they'll keep coming back for more.

It's just a different way of looking at the same set of issues.

Isn't this a lot of work?

Yes, it is. I've been doing it for a while myself, and it's still a lot of work. But it's been worth it; all things considered, I think I've gotten out of it the things that I wanted to get.

That's really what matters, knowing that you've entertained someone, or informed them, or whatever your purpose might be. Not assuming, but knowing.

That's what makes it worthwhile to keep such a demanding mistress as a website.

Should you use Twitter for your business?

Yes if you know how. No if you don’t.
Twitter is a short message service for the web. Its like a small broadcasting station on the web that allows you to publish small messages that could make a lot of sense, but are usually garbled by strange symbols and odd collections of letters, numbers, dashes and slashes. However, used in its simplest form – as a short messaging service – it can be a powerful marketing tool. I am assuming here that you at least have created a twitter account and know how to send out an occasional message.

So what do you do need to use it for business?

1. Having something unique to say.
   
   As a business most likely you do have something unique to say. Even though you may not be in a unique business, for those who listen to you, you may be the only person they know in your business. So what you have to say is most likely something that they are not likely to hear from anyone else – or atleast from very few others.
   
   
2. Say something that is useful to people listening to you.
   
   Sure you can use Twitter to let people know what you are doing and how great your new store is. But if that’s the only thing you have to say and you don’t have something of value to your listener, why should they listen to you?
   
   
3. Make sure you say it regularly.
   
   Like any good branding effort, consistency and routine work in Twitter as well. Identify a schedule for your messages and stick to it. If your users can expect to hear from you with a certain regularity, they begin to trust that you are there for keeps and not just a flash in the pan.
   
   
4. Link your messages back to your services or business.
   
   This is a tricky one. Obviously you are going to be tweeting about your business – so what does linking it back mean? Well, try to match every blog post, tweet or forum post to a service offering that we have. That way we can establish interest in a particular service and know whom to approach to make our offers to.
   
   
5. Have content to back up your tweets.
   
   Make sure that you have content on your website or some other source that can expand on what you tweet about. A tweet is only 140 characters. Just not enough to get a full idea across. At best it’s a reminder to your followers that you have something to say. It’s the content that ultimately matters.

If you can do the above five things, you can work out an effective Twitter strategy.