Let me share some design rules of thumb. These are ways to think about your pages, not ways to code them.
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).
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:
And you'll never know.
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.
.gif)
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.
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.
.png)
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.
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.
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.
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.
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.
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
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.
Posts
0 comments:
Post a Comment