Anantait asked:
What is web publishing?
What are the goals of your site?
Is the goal to entertain, to provide information or graphics, or to provide some unique service? Or, perhaps, it’s something other than this!
If it’s for a business, are you trying to grab the attention of new customers, give information about products and services, do market research, or provide customer support? Do you also intend to highlight your after sales service?
How does the design and implementation of your web site support your goals?
For commercial sites
If your site is a commercial site, most of the surfers will go to your site with an intention to get information. They won’t be there for “a total web experience,” or to be entertained, or for the thrill of visiting a “Fabulous web site.”
They’ll want to know things like:
“What options are available and what do they cost?”
“What are the features of your products and services?”
“How can I contact your company?”
“Where and how can I buy your products?”
“Do you have a range of products or services?”
A commercial web site is a significant link of your company and, in some cases; it will be the prime option in which your customers and others interact with you in the future.
During the infant stage of the web many companies wanted to “just have a web presence” so they turned to graphics, advertising agencies, and the new generation of web design firms. Although these firms had a good background in graphic arts, most of them were quite novice in the ball game of creating web sites. They over-emphasized the graphics aspect and tried to entertain in the same way as print ads or TV commercials.
However, an effective web site needs a lot more than this. It should start with a requirements definition that evaluates the real needs of the company and how they can best be served through the web. This should be followed by a careful design and planning stage. The next phase is to build and test the site.
But the pitfall here is that a web site needs continuous updating and maintenance to sustain and stay in tune with the times. A lot of sites are designed in a way that failed to adhere to these aspects. You also have to consider the operations aspects of the site, such as guaranteeing response time and availability.
If you plan to build a web site that really makes sense, you should consider engaging the services of a systems architect before you contact the graphics companies or hire those Java programmers. An architect will plan your site as a system designed to meet your corporate goals, rather than just a bunch of interconnected HTML pages.
Make your site easy to navigate
Give serious thoughts to the roadmap of your site and how its different elements are linked. How is this navigational information conveyed to the user?
Could someone, after visiting your site, draw a simple diagram showing how the different elements are connected and how you get from one place to another?
If someone comes to your site looking for a specific piece of information, how easy is it to locate it?
How does a visitor figure out all of the things they can see or do at your site?
How does a visitor figure out how to navigate your particular site?
How can the visitor tell if they have seen everything?
How can a visitor tell what they have and have not seen?
Make it easy for a visitor to determine what is new and when things were changed.
A site that is difficult to navigate will also be difficult to maintain.
Complexity will limit the size of your site.
Complexity will make it difficult to test your site.
Some tips to generate repeat visitors to your site:
Make it large enough to require more than one visit to view the entire site. But make it easy to remember what the visitor has already seen by avoiding complex design.
Change your site often. But make it easy for the visitor to figure out what was changed, and when.
Make your site a source of reference material - a list, an index, a database. Perhaps allowing the user to search it for a particular topic or item.
Make your site an authentic and reliable source on a particular subject.
In the world of the web, every visitor is different
Remember that there are great variations in the computer platform, display setup, processor and disk speed, connection speed, and the particular browser software being used by each individual visitor to your web site. And the visitors themselves will be different, in every conceivable way.
Don’t assume that every visitor to your site has the latest hardware and software, a super-speed connection to the Internet, and the eyesight and reflexes of an energetic young teenager!
There will be a great variation in how your site looks to different users if you rely on fancy HTML gimmicks.
There will be a great variation in how your site looks to different users even if you don’t use fancy HTML gimmicks!
You have to decide whether the goal of your site is to impress those special few with your technical razzle-dazzle, or to make it a site for the enjoyment of masses.
Don’t create a site that caters to the select few of the total visitors you are targeting.
As a result of heavy Internet traffic, web pages bloated with gratuitous graphics, older hardware or software, a fair number of folks are surfing the web with the graphics turned off in their browsers. What does your site look like without its graphics?
You are going to lose a lot of points if you mention Netscape (or Microsoft), in any way, on the first page that your visitors see. This includes describing your site as “Netscape-enhanced,” telling your visitors that your site is only presentable if they have the latest version of Netscape, or pointing to a site where they can download the latest version of Netscape. Think of the message that it sends about you and your site. Think also of the first impression your web site leaves among the first time visitors.
How does your site look with Lynx? Try it and you’ll see how your site looks with a text-only viewer. This may be the only viewer that a Unix user will have, especially in foreign countries. If your site is mainly informational, don’t deny access to these potential visitors.
And you had better prepare yourself for the invasion of the surfers who will reach your site through add-ons to their TV set, cable box, or plug-in for their game playing machine. These new widgets will have limited capabilities, very much like the earlier versions of the more popular browsers.
The major online services have well over 10 million paying customers. Very soon, most of them will have web browsers, but they won’t be the very, very latest version of Netscape. Your pages may look very strange to them.
The people with money to spend do not have time to fool with getting a SLIP or PPP connection running. And they don’t have time to get and tune the latest version of Netscape (when they hear the word “upgrade,” they most likely think of moving to the First Class section).
They will most likely be using browsers that are integrated into a full-featured online service that provides a single package with news, stock portfolio tracking, and a seamless interface to the Internet and the web.
The real point is that if you have a commercial web site, you can keep Netscape around for testing, but make sure it also works with whatever browser is provided by AOL, CompuServe, and Prodigy.
The user interface
When the Macintosh first came out, Apple published a set of user interface guidelines for software developers. Some developers felt that having to adhere to a standardized interface would hamper their creativity. But others realized that it would actually free them to spend more time applying their creativity to step up to the next level of application design.
Consider the signal-to-noise ratio of your interface. How much is useful and interesting, and how much is just noise? Avoid using large or unnecessary graphics that don’t add to the content of the page.
Remember that browsers have a lot of user-configurable features — colors, fonts, etc. These can really mess up your fancy interface.
Don’t make the user confuse where to click.
Don’t replace bullets and horizontal rules with images. It eats bandwidth and confuses the user. If you use images as bullets, your visitors may try clicking on them and wonder why nothing happens.
Be very careful in using graphic elements as controls (buttons, links, etc). The user has to guess what to do.
Try not to have two or more places to click that perform the same action.
Don’t use the “underline” attribute for text. It makes it look like a clickable link.
Find out what your visitors do most often at your site and make that the easiest thing to do. If you’re into intricate jewelry or gemstones embedded jewelry and most of your visitors are there to have a closer and sharper look at your samples, have a big button that says “Get a closer look.” This is a good rule to follow when determining the size and placement of interface elements.
For some reason, most browsers switch to a grey background by default. The easiest way to fix this is to override the browser’s default. Use a white background.
Don’t forget that links show up in different colors than regular text, and may change color after a link is viewed. Consider how these links will show up against a colored background. (And remember that these colors will be different on different browsers and can also be changed by the user.)
You can use a shade of gray as a background if you are not displaying text against it. A lighter shade is advisable.
Keep the interface uniform. Have the same controls perform the same action everywhere.
Avoid putting too many interface elements on the same page. Some sites present the visitor with a bewildering array of image maps, buttons, text links, and images to click on. Don’t use colored, textured, or graphic backgrounds unless absolutely necessary. They may look fine in your browser, but could end up looking quite different in someone else’s browser, or on a computer with different video hardware, color depth, etc. They’re distracting, and they really do make text illegible at times.
Another problem with backgrounds is that they are handled differently by different browsers. On some, your page is first displayed, and then, after some delay, the background suddenly shows up, like a layer of smog descending on the page. With other browsers, you sit and watch a blank page until the background has been downloaded.
Displaying images against anything but a plain background may cause them to be rendered incorrectly by the browser. And it may make it difficult for a visitor to view them. You must have noticed that in Art galleries the paintings are placed with a light background so that the picture comes out well in the eyes of the viewers. Don’t blink anything unless it’s to indicate an emergency such as a life hazard. It’s distracting, and it is quite irritating for the surfer. Try to read something over here while something over there is blinking. It disturbs the attention of the viewer.
Don’t use tricky (or undocumented) HTML to do dissolves or fades or other special effects. They look different on every machine. And after a while, they can get downright annoying. And they may stop working (or work strangely) on different browsers or on new releases of your current browser.
Don’t have something that, when clicked on, takes the visitor back to the page they’re already on. Disorienting. This is common on sites where every page has links to every page.
One way to get a precise block of type, such as a name and address, to appear correctly in every browser is to render the type in an art program, then save it as an image (GIF) file. If done properly, a name-and-address block, including email and web addresses, should be about 2K bytes. (But don’t forget to include a text alternate.)
You can set large (headline) type, normally black, to a shade of gray. But not too light.
Don’t change any of the type colors — either for displayed text or for links. It only disorients the user.
In general, try and keep the user interface simple and uncluttered. Try and use default values whenever possible.
The little red light
Every web browser has one.
It’s a little indicator that turns red when the browser starts to load a page. After all the items on the page have been downloaded successfully, the little red light turns off.
This is especially useful when the web is slow, or when the page is complex. It lets you know when you actually have everything. A very useful element of the browser’s interface.
Unfortunately, there are a number of widgets (like animated images) that you can add to your page that keep the red light from working properly. The one most often encountered is the animated GIF.
With one of these widgets on your page the little red light never goes out. And, as a result, it looks like your page is still loading, even though it may actually have finished. Now the visitor has lost the use of part of the browser’s interface, and has to guess whether the page is complete. Or perhaps wait for the rest of it. Or perhaps give up and move on.
Hint: If the little red light doesn’t go out after your page has loaded, it’s a sign that there’s something on your page that will annoy people.
Use color wisely
Use color to convey information or to draw attention to where it’s really needed.
The standard web interface uses this principle by displaying the hypertext links to other pages in colors that stand out from the rest of the text. In addition, different colors are used to show which links have been visited and which haven’t.
So strong are these clues, that you can look at a web page and tell a lot about it without reading the text.
It’s also a good reason for leaving the text and links in their default colors. Your visitors will have seen hundreds of pages with the text and links in their default colors and will take advantage of this conditioning by being able to navigate a new site without having to constantly relearn the interface.
It’s obvious that if you change the color of the links on your site, or use an image map, much of the possible information will be lost to the visitor and your site will be more difficult to navigate.
Remember, also, that some of your visitors are color blind. At its worst, colors are varying shades of grey. Colored text against a colored background could show up as a grey smudge. Take this into account when you design your pages.
Other visitors, with less-than-perfect vision, may have trouble viewing images and text with strongly contrasting colors (like red text on a blue background). Don’t make your page so that it can only be viewed by teenagers.
Image maps
Avoid putting image maps on your pages unless you have a really good reason for using them. Fancy image maps can be far more confusing than a well-formatted text list or a simple set of buttons.
In many cases, it’s hard to tell just where to click. This is especially true if the map contains both images and words. And since the words are not underlined, it’s hard to tell if they’re links.
Image maps take up a lot of bandwidth and, in most cases, add nothing to your page.
If you use a large image map, your visitors may have to wait for well over a minute before they can begin to navigate your site.
Unlike regular text links, which change color after being clicked on, image maps give no clue about what’s been seen and what hasn’t. This makes it more difficult for the user to navigate your site.
Image maps limit you to a very simple site. It’s difficult to include more than a few items in the map, especially if you are including both icons and text in the map.
The time and effort it takes to modify both the image and the map make the use of image maps a real maintenance headache. It will take far longer to update or change your site if it means modifying the image maps as well. This is especially true if you have used image maps on many of your pages.
If you use an image map, make sure that you include a text list with identical items for those who are confused by your map or are using a browser where images are not being loaded. Locate this alternative list as close to the image map as possible to avoid confusion. Make sure that the list contains all the items on the map, and that they are in the same order.
If your image map is a figure that depicts something real, like a map of the India, USA or Germany, don’t presuppose that your visitors will be able to identify things (Which one is Hamburg or Scotland?) solely by their shape or location.
Also, make sure that your image map gives some sort of a warning if the visitor clicks in an area that doesn’t relate to anything or isn’t defined in the map’s table. (What happens if the visitor clicks in the ocean, next to India?)
Your page’s title
Don’t forget to put a title on every one of your web pages. The title is what shows up at the top of the browser’s window when a page is displayed. If your page doesn’t have a title, the browser will display “Untitled,” or “No Title,” or simply the URL of the page, or perhaps nothing.
The title is important. If someone bookmarks your page, the title is what shows up in their list of bookmarks. Or, if someone puts a link to your site on their page, they’ll probably use your page title as the link text. Or, if the page is indexed by a search engine, the title is what shows up in the search results. You get the picture.
Even if you do have titles on your pages you still might want to reevaluate the actual wording. Make sure that the title actually says something. Instead of “My Web Page,” how about: “Bud Spencer — My Web page?” Imagine viewing the two of them in a bookmark list.
If you have a business site, you may want to go even further. For instance, you may want to put the name of your business (or an abbreviation) in the title of every page on your site. You never know which of your pages will be bookmarked, and it will be far easier to pick you out in a list of bookmarks, or any other list that uses the page’s title.
And don’t forget to tell people about yourself and your activities on the main page of your site. Don’t make them guess. For example: “Splendid tours & travels is a travel house delivering domestic as well as international package tours to Europe and Far East”.
The width of the browser’s window
Imagine you’re an art director and you have to design an advertisement for a number of media vehicles like newspapers, magazines, tabloids etc. Now all these different media require different column sizes for your advertisement. Sounds crazy? How would you design such an ad?
Yet this is one of the biggest problems facing web page designers. The height of the browser’s window has very little effect on how your page is displayed — you just see more or less of it, sort of like a window shade. But as the width of the browser window changes, it can have a spectacular effect on how your page is displayed.
This is because the browser will try to rearrange the web page to make maximum use of the available browser width.
Two factors determine the width of the browser’s window — the width of the visitor’s screen, which determines the maximum width for the browser, and the proportion of the screen that the browser has been set to.
The practical width of computer screens varies from about 640 to 1280 pixels. This is determined by hardware, software, and the display settings the user has chosen. Your web page should work properly with the browser window set >anywhere< within this range.
There are a number of different elements on your page, but they fall into two groups: those items that can be adjusted in width, and those that can’t.
Items that can be adjusted in width are text (which can wrap) and tables and cells (if declared as a percentage of the window’s width).
Items whose width is fixed are images, text given a “NOWRAP” attribute, text within PRE tags, and tables or cells declared as fixed (pixel) width.
Say you design your page for the middle of the browser range — about 800 pixels wide. What happens when your page is viewed at other browser widths?
Let’s start with a narrower window. If the page is designed with the right mix of fixed and variable elements, the page should still work. You might want to use a table with multiple columns where the leftmost is fixed width and the others variable width. If fixed-width elements are used, the page may end up wider than the browser and a horizontal scrollbar will appear at the bottom of the window. Now the visitor will have to scroll left and right to see your page.
If the window is wider than you designed for, a number of things can happen. If you’ve used an image as a background for your page, and it just fits your medium-sized window, it will repeat as the browser adds another copy to the right in order to fill out the increased width. Tables declared as variable width may be rendered strangely, with elements showing up in unexpected places.
In addition, the way a particular browser juggles your page to fit its width will vary greatly with different browsers. And also with different versions of the same browser.
Obviously, a certain amount of testing and experimentation will be necessary to make sure that your pages display properly at all browser width settings.
A Tip
Keep your home/main page small so that it loads quickly – say 10 seconds would be the ideal time. (Especially important when the web slows down.) This will hook the visitor. Think twice about putting that 90K GIF on your home page. Remember that yours is only one of millions of sites — web surfers have short attention spans.
Images
Don’t present high quality images such as art or photographs against a background that is textured or darker colored. Stick to white, a light shade of grey or, if you must use a colored background, use the lighter shades.
Don’t use an image compression technique that isn’t supported by all browsers. At the present time, GIF and JPEG formats are universally recognized.
A JPEG image may compress to a smaller file than a GIF, taking less time to download, but it may take longer to decompress and display, thus making your effort for naught. This is especially true on older, slower machines.
JPEG compression also imposes a loss of image quality, which may (depending on the settings in your image-conversion program, and your visitor’s hardware) be quite noticeable. But JPEG compression will probably give the best results with photographs or other images with lots of colors or fine detail.
With drawings or line art work, the GIF can actually end up smaller than the JPEG. With line art, a GIF may appear sharper than a JPEG since there is no loss of quality in GIF format. However, GIF images can only show a limited range of colors, and may not be suitable for images such as color photographs.
The best option is to try both compression techniques for each of your images and see which gives the smallest file size, the best image quality, and the best performance in downloading and viewing.
And don’t forget to design your pages so that they still are usable if a visitor has the image loading turned off. Use the “Alt” attribute to provide text alternatives for your images.
Interlaced GIFs
Don’t use interlaced GIFs. These give the effect of the image being continuously redrawn at a higher and higher resolution. The files for these images are actually larger than for the equivalent GIF, and take more time to load.
The effect is annoying and it’s hard to tell when the picture is actually ready to be viewed. It’s especially annoying when used to render fine artwork. It’s also annoying when the web is slow and the image sits half-rendered for a period of time. You may also find that the intermediate image resembles something very different from the actual image. It’s just another special effect that will soon be boring.
Animated Images
Avoid using animated images on your page. They make the page load slower — they use big files, slowing down the loading and viewing of the rest of the page. Your page might just sit there for a considerable time, totally blank, while the first animated image loads.
Because they have much larger file sizes than regular images, animated images eat away a lot more of the Internet’s precious bandwidth. It adds in slowing down the web. Animated images cause the page to load improperly — the little red light on the browser doesn’t go out, so there’s no way to tell if the page has finished loading. If the visitor clicks the ‘Stop’ button, it may turn out that the page hasn’t fully loaded, so it has to be loaded again. They can also keep you from being able to scroll the page while it’s loading.
They’re distracting and annoying, making it harder for the visitor to concentrate on the other things on your page. (It is quite disturbing reading something over here while an animated mailbox is flipping opens and closes over there.)
And although it may look cute the first time you see one, after you’ve seen it repeatedly again and again, you feel like smashing the screen sometimes!
And if you switch to another application, the browser now sits in the background, chewing up processor cycles doing animation.
The animation runs at different speeds, depending on the visitor’s hardware, and what else it’s doing at the same time — crawling on slower machines, and flickering between images on fast machines.
And lastly, a number of folks have reported browser crashes on leaving a page that had an animated image. When the browser crashes, it can mess up things like the browser’s history list, tables of cached items, and your bookmarks file.
Standalone Images
The most common use of standalone images is on a page with a lot of little images where clicking on one of them loads a larger version. If you just link to the image file, it ends up in the upper left corner of the browser window, all by itself.
Use an HTML page to hold the image. This will let you center the picture and put in a page title and other information.
Text
If you’re presenting text documents on your pages, give some thought to making them easy to read.
The viewing area of your browser is much smaller than a normal printed page, so you may have to reformat your documents to fit this new environment, rather than just dropping an existing document into your HTML editor.
Don’t run text the full width of the screen. This creates long lines of text that are difficult to read. Text also needs air around it, to breathe. That’s why most printed documents have margins.
You can easily solve these problems by using the “Block quote” tag, which gives a margin on both sides of the page. You can nest Block quotes to vary the width as necessary.
You can use tables to create more complex text layouts such as columns.
You can use dictionary lists (’DL’) as a simple way of formatting text that requires indentation.
Don’t use long paragraphs of text. It’s hard to read this in printed form and, for some reason, even harder on to read on a computer screen. Try to keep paragraphs to four sentences or less.
If you specify a text font other than the default, make sure that the font (or its equivalent) is one that is standard on your visitors’ computers. And when specifying one of these fonts, don’t forget to specify the equivalent font names for other operating systems and hardware platforms as well.
And try not to put links in your text, especially in the middle of a sentence or paragraph. If you have links that relate to your text, put them at the end, like footnotes. Give your visitors a chance to read your text before sending them somewhere else.
Tables
Learn how to use tables and you will be able to perfectly control the look of your web pages. Tables let you break your page into precise segments and control the placement of graphics and text.
You can use tables to create columns and grids to contain the images and text. You can even use tables within tables to create sub-sections that can be treated as a unit. Table cells can be filled with color to add contrast to parts of the page. Whenever you see a page that looks like a magazine or a newspaper, you can be sure that the structure is based on tables.
Tables can be used as templates or style sheets to impose a uniform look on a web site. And tables can give you some of the functionality of frames, but without the headaches.
There are several ways to learn how to use tables. The easiest way is by studying table-based sites on the web. Any book that covers page layout theory and technique, such as used in newspaper or magazine, will give you some guidance in understanding the aesthetic issues involved. Go to the “Graphic Arts” section of your local library, book store, or art supply store and look for a book on the subject of page layout. Try to find one that utilizes the “grid” method.
Some problems encountered in using tables:
If your page is based on tables in may load more slowly than a page without tables. This is because the browser has to do a lot of calculations to figure out how to place all the items that are in the table. In addition, the browser may not display the table until all the text and graphic items have been downloaded.
You can speed this up in several ways. If the table is very long (more than several screens high) try breaking it into smaller tables, one above the other. Using tables this way will also make it easier to rearrange the elements on the page. Also, make sure that the height and width is specified for all the images in the table. Doing this will allow the browser to size the table before it gets all the images.
Even though tables are part of the earliest HTML standards, there are still differences in the way that they are displayed by different browsers. Getting your tables to display correctly in all the popular browsers can be a challenge. For instance, some browsers won’t display a colored cell unless there is text or an image in it. Others may vary in how they display nested tables or tables stacked one above the other.
So, as you develop your table-based pages, test them continuously with a variety of browsers. It will save from unpleasant surprises further down the line.
Another challenge is determining which parts of the table to make fixed-width (defined in pixels) and which parts to make variable (defined as a percentage of the current browser width). With a variable width table, the horizontal dimensions of the table readjust as you change the browser width.
The trade-off is that fixed width guarantees the final appearance more tightly, but the variable width can take better advantage if the browser has a larger width. In some cases, the optimum results are with a combination of fixed and variable width for the different parts of the table. Again, a certain amount of experimentation is required to find the optimum balance. Make sure that you test your table-based page at different browser widths.
Tables are one area where most WYSIWYG web page editors have problems. The editor’s display can vary greatly from what you see in the browser, especially with complex or nested tables. If you download a trial version of one of these editors, make sure you check the accuracy of how it displays tables.
As mentioned in the section on printing, tables will affect how your web pages print out.
Tables may also affect how your web page scrolls within the browser. Depending on the particular browser, the page may jump rather than scrolling smoothly.
Frames
Don’t use frames just to prove that you know how to use frames.
Your web page is small to begin with, and carving it up with frames can reduce the usable area to a tiny fraction of the screen. Some visitors will have browsers that can’t see frames, so you’ll have to maintain two versions of your site.
Don’t build your site around frames. It makes it difficult to navigate and limits you to having a very simple site. The cursor keys don’t work unless you click in the frame you want to scroll, and the browser’s ‘Back’ button may produce unexpected results.
And there’s also a good chance that a visitor’s attempt to print out your page will end in failure.
And an interesting surprise awaits the visitor who tries to bookmark one of the pages within your site. (They’ll just get the URL of your main page.)
And you may get unexpected results when a search engine indexes your site. Visitors who come to one of your pages from a search engine won’t be entering through the site’s front door and won’t see the frame that would normally be holding the page.
And if your “framed” site has links to other sites, they’ll show up within your frame, masking the identity of the other site and confusing visitors, who’ll wonder where they really are. And you won’t be able to bookmark the linked-to site.
In addition, there may be copyright issues involved if another site shows up within the frame of your site. In any case, it’s certainly unfair to the other site.
And if there’s a problem with one of your framed pages, it’ll be difficult to report since only the URL of the main page is displayed.
Frames also cause problems when the browser is called from another application. Say that you’re reading an email and someone has sent you a message which includes a link to a web site. You double-click on the link and now the browser becomes the front window and begins to load the page. If the last thing you were looking at in the browser was a frame-based site, guess what happens?
You can get some of the functionality of frames, without the complexity, by using tables to lay out your pages.
One possible use for frames is if you have a report where you want to lock the row or column titles so they don’t scroll off the screen.
Java and Javascript
A lot of people are learning how to program in Java and JavaScript. Most of their early efforts seem to be some form of nonstop, repetitive animation that is both annoying and distracting. Some applets keep the page from loading or scrolling properly.
One popular applet overwrites the browser’s status display at the bottom of the window, keeping you from viewing the destinations of the links as you move the cursor over them. It also keeps you from seeing the status of the current page as it is loading.
Another popular use for Java is to open a smaller secondary window above the browser. This may prove to be disorienting if your visitors are not ready for it.
If you are developing Java applets, you may wish to wait until you have something more worthwhile before inflicting your early efforts on unsuspecting visitors.
If you make your site so that it can only be viewed with Java or JavaScript enabled browsers, you’re making a big mistake. An even bigger mistake is to make two versions of your site — one for Java, and one without it!
What will the visitor whose browser does not support Java see at your site? Perhaps an interesting message that the site requires Java. What about the visitor with a Java-capable browser, but with Java disabled? Perhaps a dialog box with an interesting error message.
Some other considerations. Only a fraction of your visitors will have Java-capable browsers. You can test for which browser they’re using (and maintain several versions of your site), but some will be using Java-capable browsers with Java turned off due to security concerns. In this case, they may get an interesting error message from the browser’s JavaScript interpreter.
When your pages are indexed by search engines, they also take an excerpt from the beginning of the page. If the first thing on your page is a lump of JavaScript code, then this is what the search engine will show as the description of your page. Perhaps not what you had in mind.
If, however, you are designing a web-based application to be used on a private Intranet, you may have a valid reason for using one of these new technologies.
Hard Copy
What do the pages on your site look like when they are printed out? Try it. You may be in for a surprise.
You might want hard copy because it makes it easier to design and edit your pages. Just like an advertising layout.
It gives co-workers and customers a way to view and comment on your pages. You can print out information rather than writing it down.
Your visitors can print out a hard copy of the information on your site for later reference.
If you’re using tables to control the layout of your page, they will also have an effect on printing. You can add some control to how the pages print. When printing, the browser may begin a new page if a table won’t fit on the current page (just as it would with an image). Judicious use of tables can force page breaks when the document prints out. But be sure to test this with different browsers.
If your browser has a “Page Preview” option, you can use this to get a preliminary idea of how your pages will print.
If your page has a lot of browser-specific code, it may not print out properly if the visitor has a different browser.
If your page has a black or colored background, it may not print properly.
If your page uses an image for the background, it will probably print without the background.
If your page uses frames, it probably won’t print correctly.
But the biggest surprise awaits those whose ultra-chic pages have black or dark backgrounds with white or light-colored text.
Should you use the latest features?
Each new browser has new HTML tags that it supports. Some are upgrades to the latest HTML standard. Some are proprietary tags for features supported only by this particular browser.
For some, the allure of a new technical challenge is too much to resist. So, instantly the web starts to blossom with pages that use these new features.
Before you start cranking out your new pages, here are some things to consider:
1. Do you absolutely, positively need this new feature for your site, or are you just using it to show off?
2. Which browsers are compatible with this feature?
3. What percentage of your visitors will be using these browsers? Is it worth implementing this feature for only a select few of your visitors?
4. What happens with browsers that don’t support these new tags, or with the right browser, but with the new feature disabled by the user? What will these visitors see?
5. Will you need special versions of your pages with code to handle different browsers?
6. Will you have to maintain several versions of your site in order to support all your visitors?
About HTML
The easiest way to learn HTML is by studying the source from other people’s pages. Most browsers will get the HTML source for the page you’re looking at. It’s also a good way to learn what makes bad pages bad.
Be careful about using new or specialized HTML features. They may not be upward compatible with the newer browsers or new versions of HTML. And it will be a very long time until your visitors have upgraded to a browser that supports these features.
Avoid using browser-specific “enhancements” that only work with one particular make or version of browser.
Use the absolutely smallest set of HTML that will do the job. Make this something you can brag about, rather than how you mastered the fancy commands.
Don’t use undocumented HTML effects to do things such as dissolves or fades. This may stop working in the next release of the particular browser you’re designing it for, and may cause some other browsers to function incorrectly.
Never forget that HTML is not a page description language or page formatting language. It is for displaying information and graphics, and for interacting with the user.
Use as many defaults as possible, Override them only when necessary, such as to set the background color to white, or to center an image.
But the best way to use HTML is not to use it. The newest WYSIWYG web page editors let you put together web pages without coding directly in HTML. It’s like using a word processor. Most of them also have a way of viewing and editing the underlying HTML code so experienced users can still have control over the fine points.
It’s like advancing from assembly language to a high-level language like BASIC. The WYSIWYG editors take care of the annoying details and free you to work at a higher level. In addition, these editors will automatically take care of a lot of the housekeeping for you, like specifying the height and width of all the images so that your page loads faster.
Most of the WYSIWYG web page editors are still in the WYSINQWYG (What You See Is Not Quite What You Get) stage, and some produce more HTML than an optimized, hand-coded page. But the extra text they produce adds little to the download time of a page, and you can be sure that the page won’t have any HTML errors in it. (If you’re really interested in how fast your page loads, how about dumping one of those animated GIFs?)
Advertising
Advertising has come to the web. You will definitely rope in some client that pays you by advertising on your page?
There is a dual benefit by getting paid advertisements on your site. It proves that your site has more visibility and reach among the surfers and it also gets you more revenue in turn.
But while other advertising media are aimed at influencing your next purchase, web ads have a completely different goal — to get a visitor to leave your web page and go to the advertiser’s site. (You only get paid if someone leaves your page and goes to the advertiser’s page.) You can be sure that the designers of the ads will try their very best to get folks to leave your page (and probably not return).
But that’s not all. You may not have any say about what the advertisement says or about the subject matter. Or even worse, what the ad does. Imagine, someone else’s animated image on your page. Hmm… Wonder why your page doesn’t load correctly any more.
A large ad at the top of your page may create a certain amount of confusion as to the actual ownership of the site. And since this is probably the first thing that loads, it’s probably the first thing a visitor will see.
If you have a commercial site, you’re going to look pretty silly with an ad for another company on your pages, especially when the goal of that ad is to get visitors to leave your site. Some might wonder why your company can’t afford to pay for its own web site.
And don’t forget the free ads that many sites carry. Sort of like paying extra for clothing that displays the designer’s name in large letters. Most of these free ads are for the latest browsers or plug-in components that you absolutely must have to view the site properly. Others have created “awards” that you can use to decorate your page. Remember that they’re also links to someone else’s site.
Is anyone getting rich from letting others put an ad on their page? Only a few of the most hit sites. For the rest of us, it’s just another “get rich online” gimmick.
Testing and debugging
In the real world of computer systems development, some consider testing to be the most important phase. In the world of the web, it doesn’t seem to have the same importance. Look at the many web pages with glaring errors such as missing images and non-working links.
If your web page editor has a spelling checker, use it. If it doesn’t, find another way to check the spelling.
Test your pages with several different browsers. You will be amazed at the variations in interpreting even the simplest HTML tags.
Make sure you try your pages with the browsers provided by major online services such as AOL and Prodigy. You may also want to test with previous versions of the more popular browsers. Test all your pages after making even trivial changes to your site, just to make sure you haven’t broken something. (Programmers know that you’re far more likely to introduce an error when making changes than when the original work was done.)
During development, you’ve probably done the testing of your site with all the files on the PC. Make sure you test the site after it’s been moved to the server.
Make sure that you test your pages in a way that forces the browser to get everything — both text and images. This means turning off the caching, emptying the cache from within the browser, or deleting all the files in the browser’s cache directory. This will force the browser to get everything from scratch. You’ll see how long your pages really take to load.
And while you’re doing this, you can measure your browser’s “hang time.” This is how long the browser hangs there with a blank screen before something shows up.
Now go to your browser’s options dialog and make it so that the page always has a white background and the links are their default colors (blue and red). A lot of people will have their browsers set this way to avoid viewing weird backgrounds or strangely-colored links. How does your page look with these settings?
If you can get hold of one, test your site with one of those new widgets that turns your TV into an Internet surfboard. Most of these still have just the capabilities of the very early browsers. They have lower resolution than most browsers and they reformat the page so it can be read on a TV screen.
Turn on the “don’t load images” menu item or checkbox in your browsers option settings. How does your page look without its images? Is it still possible to find your way around?
If your page uses a text font that isn’t one of the defaults, be sure that the page looks right with all the different variations mentioned here.
If your page is blessed with a Java or JavaScript widget, what happens when you look at it with a browser that doesn’t support Java? What about a Java-enabled browser with Java turned off?
If your page needs a special plug-in, or a special helper application, or uses a special file type, test to see what happens if one or more is missing or not supported. It might be enough to make Netscape toss its cookies.
As mentioned previously, there are a number of things that you can put on your page that keep the little red “download” indicator from going out after the page has finished loading. If your page has one, see what happens with different browsers. You should consider replacing these widgets with something that doesn’t keep the browser from functioning properly.
Have other people test your web site. Especially if their computer setup is different from yours.
Have other people proofread your text.
Test on different platforms. In one case, a page that looked fine on a PC didn’t fare as well on a Macintosh. And this was with the same version of the same browser. One source of problems is specifying a text font that’s only available on a PC and forgetting to add the Mac equivalent.
If you’ve got a site which has different versions, depending on the browser, you’ve really upped the ante, testing-wise.
Last, but not least, don’t forget to check your server’s error log. It’s the main error reporting and debugging tool for your site. Look for things like missing images, bad links, and errors from CGI scripts. You should check this log on a regular basis, and especially after making changes or additions to your site.
Pay attention when someone tells you they had trouble viewing your site. For every person who takes the time and trouble to write to you, there are many more who will give up in frustration.
Maintenance
It’s a dirty job, but someone has to do it because change is inevitable. In nature also everything changes, seasons, color of the skies, the aroma around us and what nots! The world changes, the web changes, and one day your site will have to be changed just for the sake of changing. That’s what people want. They want design, different colors, animations, sound etc in your web site. In fact some of the hottest sites like Yahoo, Hotmail and Rediffmail have changed quite a lot since their inception if you have noticed.
Is your site easy to modify? Is it easy to make additions and changes? Some of the things that make a site difficult to change are sloppy formatting of HTML code, image maps, and a site where every page links to every other page.
Can your site be maintained or modified by someone besides you? In the world of commercial web sites, it’s more than likely your site will eventually be inherited by someone else. Have you left them a clear path to follow?
If you use browser-dependent features on your site, you will have to have two or more versions of your pages — a maintenance headache.
Format your HTML documents so that they are easy to read. Use blank lines and spaces to separate elements.
Create a set of uniform formats and styles for your pages so that you can create a new page by copying and modifying an existing page.
If you have links to other sites (”My Movies Cool Link List”), you owe it to your visitors to keep these links up-to-date and accurate. You should check them on a regular basis to change or modify links to sites that have moved, and to remove links that now lead to dead ends. Fortunately, there are a number of shareware tools that can aid in this process.
If you move your site to another URL, make sure that you leave a forwarding address at the old URL.
And make sure that your pages are current. If you have a sale, or a contest, or an offer that ends on May 25th, make sure that the page gets updated or removed within a few days of the expiration. Consider using automated maintenance to build and maintain your HTML pages.
Dead pages:
Web sites can grow to be complex, and may undergo continuous modification and evolution.
As pages become obsolete, you update the links on other pages so that obsolete pages are no longer pointed to. Since nothing on your site points to these old pages, there shouldn’t be a problem, right?
Unfortunately, there may still be links to these obsolete pages — from other people’s web sites. Three possibilities: search engines that have indexed the page, visitors who have added the page to their list of personal bookmarks, and visitors who point to your page with a list of favorite links on their site.
This can be a problem if the pages contain information that is no longer current, authentic, or accurate.
One way to see if this is happening is to check your stats to see if orphaned pages are still getting hits. If you have really good stats, they can tell you who has links that point to you.
One thing you can do when a page is dead is to delete it from the server or rename it. Either way, it will return a “not found” error when someone tries to access it. After this is done, you can re-submit the original URL to the search engines. This will force them to look for the page and, not finding it, remove it from their database. Even if you don’t explicitly submit these pages to the search engines, they will eventually look for them and find them missing.
Another thing you can do is to replace these orphaned pages with a generalized page that has a link that points to the main page of your site.
It is good if you read the above information and use it to your benefits. Of course this exercise could be helpful but time consuming too! The other option is to contact us at our AIT – India Center and discuss your needs with us and rely on us to deliver a fabulous web site that works on the net. The second option would be more sensible it seems!
