CSS: the true language of web design

primary concepts and methods found in css
Learning backwards. It's a phenomenon common to human foibles-and Web development. But, as we strive to keep up or move ahead with the technologies we use to build the Web, sometimes we find that hindsight is indeed 20/20, giving us opportunity to clearly see where we've been and how we got here. Knowing our history can certainly help us serve our future with more innovative solutions.

Last month, I described the importance of separating document presentation from document structure. This process helps streamline our Web documents and move us into a future where document management, portability, and accessibility all co-exist with innovative visual design. Of course, this means looking back at the way we've written our Web markup, and it also means that we need to focus our studies on presentational design-which in terms of markup means really learning CSS.

As most WOW members are already well aware, CSS is the broad term used to refer to the application of presentational properties to documents. In this case, think of a style as any kind of design characteristic: typeface, background, text, link colors, margin controls, and placement of objects on a page.

So why should you use style sheets if markup can do at least some of this work by itself? The developers of HTML originally intended for HTML to be only a markup language, responsible for the basic structure of a page, including body, headers, paragraphs, and a few specific items such as bulleted lists. Web designers and browser developers are the ones who have pushed and pulled at HTML to make it accommodate aspects of presentation, and as a result HTML and XHTML have inherited this legacy.

To gain some separation between HTML's original function as a structural markup tool but still offer a powerful addition to the designer's toolbox in terms of style, Cascading Style Sheets were developed. In fact, as of the HTML 4.0 recommendation, many of the style-oriented elements were deprecated (considered undesirable and may not be present in future language versions) in favor of CSS.

CSS is not a difficult language per se. But it is complex. Now that you know a little about the history and rationale of CSS, it's time to learn backwards and discover what the concepts of CSS embrace in theory, and how that in turn becomes practice. In this article, you'll learn important topics such as cascade and inheritance, and various methods of delivering style to a document.

Style methodsStyle can be delivered to a document by a variety of methods including:

Inline
This method allows you to take any tag and add a style to it. Using the inline method gives you maximum control over a precise aspect of a Web document. Say you want to control the look and feel of a specific paragraph. You could simply add a style="x" attribute to the paragraph tag, and the browser would display that paragraph using the style values you added to the code.
Embedded
Embedding allows for control of a full document. Using the style element, which you place within the head section of a document, you can insert detailed style attributes to be applied to the entire page.
Linked
Also referred to as an "external" style sheet, a linked style sheet provides a powerful way for you to create master styles that you can apply to an entire site. You create a main style sheet document using the .css extension. This document contains the styles you want a single page or even thousands of pages to adopt. Any page that links to this document takes on the styles called for in that document.
Imported
This method works similarly to linked style except that it uses the @import rule. Although I won't discuss imported style in this column, I will in later columns when I discuss layout methods.
User defined
These are style sheets that you can create to override any other style sheets. You can learn more about how to create a user defined style sheet via the external resources I've provided in the resources sidebar.
In the next column, we'll take a very close look at what each of these look like from a code perspective. For now, let's move on to learn a bit about the way hierarchies and relationships in CSS work.

Cascade and inheritance
One of the powers of style sheets is that there is a hierarchy of relationships. Cascade in this context refers to the order in which style is applied. Multiple sheets and types of sheets can be used, each one being applied one after another. This creates a hierarchy of application.

For example, you can combine inline, embedded, and linked styles, or any number of individual types of style sheets, for maximum control. Say you have a large site that you're controlling with a single style sheet. However, you have a page on which you want to alter some of the styles. No problem! You can simply place the modified style as an embedded sheet within the individual page. The browser will first look for the embedded style and apply that information. Whatever isn't covered in the embedded sheet the browser will seek out in the linked sheet.

You also can override both styles by adding an inline style. When all three forms are in place, the style sheet[nd]compliant browser looks for that style first, then the embedded style, and then the linked sheet; it reads the information in that order.

Web Designing is as easy as 1-2-3, claim some of the software tools on the market that "generate" your pages for you. Unfortunately, many web designers today have fallen prey to this marketing gimmick - and the results are obvious. Every now and then, one comes across a website that looks good with a particular browser and a particular screen-resolution; but view it with a different browser, and you can't even read the plain text on the page. Worse still, given the number of operating systems that are used by netizens worldwide, these pages will never be seen properly by more than a half of the intended surfers.

Technical level: Intermediate || Date: 16th December 2002 || Author: Manas Tungare

Now let's assume that this web page belongs to a site that sells stuff online. The very fact that half the users cannot even see the page, translates into losses worth half the amount straightaway (perhaps, even more!) I guess that makes a good case for the raison d'être of this article! Web Designing is, in my opinion, a cocktail of creative skills & technical prowess - and one is no less important than the other.

In the following lines, I have jotted down a few points that I noticed during my online journeys, important from the point of view of web designers. Some of them may be taken with a pinch of salt; for it is not possible to please everyone everytime. But most of them are simple enough to be used as a rule of thumb.

A picture, they say, is worth a thousand words. A picture file, alas, is also almost as big. Images, no doubt, enhance the look of a page, but it is not advisable to go overboard in stuffing your page with a truckload of images. Most net-surfers use a dial-up connection, and the average time to load a page should be no longer than 5 seconds. If it's longer, the surfer will most probably click away elsewhere. So, within this time, all the images on a page must be loaded as well. So, as a rough yardstick, keep the aggregate page size less than 30k.

Another important point to note is that each file on the page requires a separate HTTP request to the server. So a lot of small images - even if they do not add up to a lot in terms of bytes - will slow down the loading a lot.

Even when you must use images for navigation, please give a second thought to the users who will not be seeing those jazzy, fantastic & truly amazing buttons that you spent hours to design. Yes, I'm talking of the ALT text attribute of the IMG tag. Do not forget to provide an Alternate Text for each image that you use for navigation. (It may be left blank for certain images that are purely for aesthetic reasons, but let that be an exception, rather than the rule.) Though not obviously apparent, ALT text can help such users immensely.

Modern browsers offer users a choice to turn off images. This gives an idea of how troublesome the unwanted images could be.

A couple of more attributes that make your pages load faster are the HEIGHT and WIDTH attributes. Without these, the browser must wait for the image to download since it cannot know how much space to leave for them!

Navigability & functionality come before artistic excellence. It is no use making your site a masterpiece of art if users cannot navigate around it - even after they reach the main page, they have no clue as to how to go where they want to go.

Especially common, is a kind of navigation that some people call Mystery Meat Navigation. That means, that unless your mouse moves over an image, you have no idea where that link might take you. Only when the mouse hovers do you see the actual link. This is cumbersome because users need to move their mouse all over the place to find out which part is a link and which is not.

Follow the K.I.S.S. principle: Keep it simple, stupid!

Next is a very important practical suggestion: whenever your whole page is within a TABLE, the page cannot render (i.e., the page does not show on the screen) unless the entire table is downloaded. You might have noticed this on several websites, when there is no activity for a long time, and suddenly the entire page is visible. Hence, to avoid such a situation, what you should do is this: Split the table up into two tables one below the other, and let the top one be a short table that displays just the page header and a few navigation links. So now, immediately upon downloading this part of the page, users can see the page header - and this prepares them for the long wait ahead, as well as keeps them from leaving your site to go to other sites, in case of a slow connection.

The ongoing browser wars have left only one casualty - the user. As a word of caution, stay away from all browser-specific functions. Because if a certain feature is supported by one browser, it will most definitely not be supported by another. Where you must use such features, it should not hamper the display of the page in the other browser which does not support such functionality. In other words, your page should degrade gracefully.

Creating a new browser window should be the authority of the user only. Do not try to popup new windows to clutter the user's screen. All links must open in the same window by default. An exception, however, may be made for pages containing a links list. It is convenient in such cases to open links in another window, so that the user can come back to the links page easily. Even in such cases, it is advisable to give the user a prior note that links would open in a new window.

Keep in mind the fonts-challenged users too. The ultra-jazzy "Cloister Black MT Light" font that looks so amazing on your machine may well be degraded into plain old Times New Roman on your user's machine. The reason? He/she does not have the font installed on his/her machine - and one thing's obvious - there's nothing you can do about the situation, sitting halfway across the globe from them.

Stay clear of out-of-the-way hard-to-find fonts. Use plain vanilla fonts like Arial, Verdana, Tahoma, and Courier. If need be, make your jazzy fonts into an image and put that on the page. (and while you're there, do not forget Tip #1.)

A new design trick that is increasingly being used on the web has caught my fancy: It is a very functional navigation bar that guides you across all possible paths within the site. It looks something like this:

Home > Section > Subsection > Page

What better than to give your users a handy way of visiting just about any other page on your own site, and informing them where they are!

Another new trend on the web is not all that inviting - various vendors come up with "revolutionary plug-ins" and undoubtedly, most amateur web designers jump up to spruce up their pages using them. The reality is that most people won't have them installed, and wouldn't care about it anyway. Come to think of it, have you seen plug-ins on any of the most popular sites, including Yahoo.com, Amazon.com or Google.com? It's simply not the best thing to do. Mention must be made here of Macromedia's Shockwave Flash plug-in, which has now made its way onto most computers today, and thus presents no harm in using vector animation on your site.

Java is yet another often-misused technology on webpages. Use Java as a utilitarian programming language, not as a graphics front-end for your photos/images. There are various things you can do with Java; that does not mean you should do all of them. Java applets are known to run slower, so users experience a certain sluggishness in performance. And worse still, Java has been known to crash certain browsers. This is not something everyone likes, especially if it is done for the sole purpose of showing a set of images in a slideshow!

The moral: Use it, but with discretion.

Never underestimate the importance of those META tags. They can make all the difference between your users coming to your site and going to your competitor's - just because they couldn't find yours. Search Engines heavily rely upon the Keywords & Description Meta tags to populate their search database. And once again, use discretion in writing these. Including a huge number of keywords for the same page can spell trouble. The description should be a small, meaningful summary of the whole page that makes sense even when seen out-of-context of the webpage itself, say, in a listing of search engine results.

And the final point that summarizes all the points so forth: Write for all browsers, all resolutions, and all color-depths. If you show people pages that look best with their own browser and their own resolution, that makes them feel "at home", and you get a better response. Compare this with a website that proclaims "Viewed best with Browser X at a resolution of 1024x768." I'll give you a choice between two options when you see such a page: download the suggested browser (which might well be over 50 Megs), then go get a new monitor that supports the high-resolution, and then adjust your screen setting so you get the perfect picture. Or simply click away to another site. Which do you prefer?

The web waits for no one. And furthermore, the user is king. Try your best to keep the user happy. And to keep all users happy. For, a good website is like a good storefront - it can mean all the difference between a casual surfer and a serious customer.

Many Actions With One Form Submission

There are three ways to make one form "submit" button click do more than one action: Using the JavaScript onSubmit command to run one or more JavaScript functions before sending the form information to the regular form handling program on the server.
Using JavaScript to select one from among several form handling programs to submit the form information to.
Sending the form information to a form handling program on the server that then posts the form information to other form handling programs.
The above can be combined.

The first two have been covered in earlier articles and tips. I'll mention them briefly, with references.

The last is possible with a brand new Master Series CGI program.

How CGI Works

CGI requires three steps:


The browser sends something to a program on the server.
The program on the server does something, presumably something useful.
The program on the server sends something back to the browser.
That's the CGI cycle. The program on the server is called a CGI program because it accepts something from the browser and sends something back to the browser, all according to the CGI protocol.

The CGI protocol is too deep to wade into with this article, but it boils down to the above three steps.

For further light reading on the subject, see the "How CGI Works" article at http://willmaster.com/a/24h/pl.pl?art243a.

Usually, the first step of the CGI cycle is accomplished through the use of a form. Your visitor fills in one or more blanks and clicks a submit button.

Once the submit button is clicked, the form handling program (which is a CGI program) does something with the information it received from the form and then sends something back to the browser.

What's sent back to the browser is commonly a "thank you" page of some kind, a receipt page, a download page, another form, or just an information page. But something must be sent back to the browser or else the browser just sits there waiting for an answer from the CGI program until the browser times out.

If you want to acquire a basic understanding of how forms work and how to use them, see the "HTML Form Tutorial" article at http://willmaster.com/a/24h/pl.pl?art243b

Working Around the One-URL Action Restriction

In the past, form information was submitted to one form handling CGI program on the server. The program URL was specified in the action="___" attribute of the FORM tag. That was all that could be done.

It was all that was required for most web sites.

Some web sites, however, needed more.

"More" is what this article is about. More can be done while remaining true to the CGI protocol and the one-URL form action restriction.

Using the JavaScript onSubmit Command

With JavaSCript, functions can be run with the onSubmit command. Form fields can be checked for errors and messages could be sent to the user in the form of alert boxes or popup windows, as examples.

Either or both the onSubmit command in the FORM tag and the onClick command in the submit button input tag can be used for this purpose.

The JavaScript function is run before the form information is submitted to the form handling CGI program. The function can return a value of false to abort the submission, or a value of true to allow the submission to occur.

See the "Multiple onClick Form Submit Attributes" tip for a method of running multiple JavaScript functions whenever a submit button is clicked.

Using JavaScript to Select a Form Handling Program

Once in a while, a method of submitting the form information to an alternate form handling CGI program is desired.

JavaScript can be used to change the action="_______" URL when certain form fields contain certain information — if "pay by check" is selected instead of "pay by credit card," for instance.

The "Changing Form Action URLs On-The-Fly" article contains detailed instructions for accomplishing that.

The JavaScript onSubmit command can be used to run other JavaScript functions, in conjunction with this method of selecting an alternate form handling program.

Multiple Form Handling Programs with One Submission

Master Form Action+ makes it possible to have form information submitted to more than one form handling program. The Master Form Action+ product description page is at http://willmaster.com/a/24h/pl.pl?art243e

Master Form Action+ works by accepting the form information submitted to it, then sending that information to other form CGI handling programs, in sequence, according to what you've specified in the Master Form Action+ control panel.

For example, let's suppose you have a bid request form and that you want the form submission to go to three different form handling CGI programs. This is only an example scenario. Master Form Action+ can actually do more and in other ways. For more Master Form Action+ product information, see http://willmaster.com/a/24h/pl.pl?art243e

In the stated example, the form's information is submitted to the Master Form Action+ CGI program, which then:


The first form handling CGI program is a follow-up autoresponder to send a note the next day saying that you're diligently working on the bid. This autoresponder might be on your server or it might be at a service you pay to send your messages.

You've set up the Master Form Action+ control panel so it sends the bid requestor's email address and name to the autoresponder. You've also set it up so that should this submission fail then a certain form field name will contain a certain value, name "failed" with an "ouch!" value, for instance.

Once Master Form Action+ has submitted the email address and name to your autoresponder program and received an answer back (it's CGI, so it waits for an answer), it does the next step in the sequence.


On your bid request form you have a checkbox the bid requestor can check to be added to your mailing list. So you've set up the Master Form Action+ control panel to send the person's email address to your list management CGI program if, and only if, the checkbox is checked.

Like the autoresponder, the list management program can be on your server or it can be at a list hosting service. Any URL on the Internet is good enough for Master Form Action+.


The last form handling CGI program in the sequence is your bid request information handling program. You've set up Master Form Action+ so it sends all form information to the bid handling program, including the autoresponder "failed" name and value if it's present.

In the Master Form Action+ control panel, you've specified that the page to send back to the browser is the "thank you" page your bid request handling program generates.
The last form handling CGI program in the sequence is the only program that can send content back to the browser, because sending content to the browser is the last step in the CGI cycle.

The first step in the CGI cycle is the form's initial information submission to Master Form Action+. The second step is the entire sequence of form handling CGI programs the information is submitted to. And the final step is sending something back to the browser.

The content returned by the previous CGI programs in the sequence is dealt with according to what you specify on the control panel, or ignored if you don't specify anything.

The options are:


Specifying a field name and value in case the submission is successful.
Specifying a field name and value in case the submission is not successful.
Storing the code returned by the server (200 for success, 404 for URL not found, etc.) in a field name you specify.
Storing the content returned by the form handling CGI program in a field name you specify.
Master Form Action+ makes it possible to accomplish a lot of action with a single click of a submit button.

Determining How Design Affects Branding

Designers often tell us part of their responsibilities is to enhance the branding of a site, product, or organization. In recent years, we've focused our research on understanding how design can have a positive effect on a brand.

In our research, we've learned that brands are an investment instrument. With a savings account, money is deposited so that interest accrues -- the investment grows over time.

Similarly, with branding, money is spent on building the perception of the brand with individuals -- we call this: strengthening the brand. At some point, the brand will be strong enough to have a serious effect on an individual's purchase behavior, such as paying more for a product because it's a "brand I trust."

For an individual, brands are a perception. Harvard University is a brand. Many people perceive Harvard University as an outstanding educational institution. Many people also perceive Harvard University as being extremely expensive. These two perceptions (among others) make up Harvard's brand.

Brand elements, such as names, logos, tag lines, trademarks, and packaging, are shortcuts to those perceptions. People use these shortcuts when making purchase decisions. For example, if a consumer has a perception that the film produced by Kodak makes better pictures, they'll use the Kodak logo and trademarks as a shortcut to decide which product to purchase.

We are currently studying what designers can do to strengthen brands and create the shortcuts between brand elements and individuals' brand perceptions. For example, on e-commerce sites a strong site brand could translate into repeat sales. During a customer's initial visit, what could designers do to strengthen the site's brand so that the shopper returns to the site for future purchases?

In recent studies, we've been measuring the strength of key brands at predetermined points in the user's online experience with a site. We've been trying to see if we can spot a correlation between design elements and changes in the strength of these brands.

Our initial results are very encouraging. We've found that when people are done shopping on certain e-commerce sites, their perceptions of the brand are often strengthened, while other sites seem to consistently weaken their brands.

For example, in a recent study of apparel and home goods sites, we found that when people shopped on the sites for the Gap and Lands' End, their perceptions of those brands were more positive after the shopping experience than before. In the same study, shoppers on Macys.com consistently reported that their attitudes towards the Macy's brand were substantially reduced after their experience than before.

It could be that the Gap and Lands' End offer better quality products than Macy's, and that's why we saw the difference in attitude changes. However, when we asked the shoppers about the quality of the products, they basically rated them all equivalently.

In reviewing our data from the study, we found some fascinating correlations:
Shoppers interested in specific products were more likely to purchase those products on the Gap's and Lands' End's sites than on Macy's site. In fact, across the 13 sites in the study, purchasing the products the shoppers were seeking correlated very highly with brand strength. The more shoppers could purchase their desired products, the more their positive attitudes about the site's brand increased.
The usage of certain design elements correlated very strongly with people's brand attitude changes. For example, shoppers who used size charts while buying apparel were more likely to show brand strength increases on those sites. While shoppers who used Search correlated strongly with decreases in brand strength.
These two findings tell us that when we create designs that focus on ensuring users accomplish their goals, we are likely having a long-term positive effect on the strength of the brand.

This also helps us understand why sites that have always focused on helping users accomplish their goals are now reporting profits. Amazon and eBay (eBay has always been profitable) spend a lot of their development effort innovating new designs elements that ensure users achieve what they come to the site for. Whereas, companies like Boo.com and Pets.com, who spent millions on advertising campaigns, failed to strengthen their brand.

We're very encouraged by our initial findings. We believe that we're on the trail to identifying how designers can affect the strengthening of brands. From this, we can calculate ROI using the investment in a design and the return that comes from brand strength. •


By Jared M. Spool
http://www.uie.com

Designing sites for universal access:

The web is a magical place, a place where you can be transported to places you have never before seen. It is growing rapidly, as magical places do, limited only by the imagination of the web site creators. As it continues to grow, users with special needs will increase. 1 in 5 Americans between the ages of 15 and 64 years has a disability. Almost 30 percent of all families in the United States are affected by a member who has some type of disability. (as measured by having an activity limitation - see the blue box at the end of this article.).

Web site creators will need to rethink their designs to accommodate them. Fortunately, designing a site for visitors with special needs is not difficult and often results in a much cleaner and more usable site. By making a few simple changes to the site web site designers will be able to enjoy visits from people from all walks of life.

What are these special needs likely to be?

Visually impaired (blind, color-blind)

Deaf

Motion impaired; difficulty using a keyboard or mouse

Cognitive impairments

Text only browsers (Lynx)

Good web design will automatically accommodate many special needs visitors. For example, clearly specifying the purpose of a page and laying out the navigation logically without relying solely on Java-Script, as well as using alt tags for images, would help all visitors. After all, you never know who will be visiting with their graphics turned off because they must pay for every microsecond of time. Or perhaps they will be using an older browser that does not recognize java scripts. Designing accessible sites often means offering two different methods to achieve the same goal.

It helps to understand how people with special needs envision the web. Blind people typically use screen reader software, which reads the page to them one word at a time, row by row. Think about this for a moment. When you first see a web page, your eyes take in the whole layout - the headers, subheaders, side topics, advertisements, etc. You can quickly see the purpose and organization of the page and skip right to the information you need.

People who use screen reader software do not have this advantage. Their. reader. reads. one. word. at. a. time. straight. across. the. page. including. any. alt. tag. information. Think of how confusing top listed links must be! The way to avoid this is to either label your links as links (confusing to the sighted visitor) or use a clear gif with the alt tag information "Navigation bar.
Home


Services


Articles


Portfolio


Contact Us


Books


Resources


Your Website


The speech synthesizer will read the alt tag information and then the links. Invisible to the sighted user, this trick is invaluable to those trying to make sense out of a series of seemingly unrelated words being spoken by a speech synthesizer. You could also use a bracketed layout, like this: [link] [link] [link]. The speech synthesizer will read this as, "bracket link bracket bracket link bracket bracket link bracket."

Using ALT text is the primary method of explaining graphics used on the site. If the image is just decoration, use the description "" so the speech synthesizer will ignore it. If the images are links placed next to each other, make sure the ALT text has a trailing space, or is surrounded with brackets. Otherwise, the speech synthesizer will attempt to read all the alt texts as one long word. If the graphics are image maps needed for navigation or information, be sure to label each section with the appropriate ALT text and make sure the information is available in another way as well.

Consider using good sized buttons as the alternate method of access. This provides help to those with motion impairments who can’t click on a small area of a map as well as those that need the visual cues. Page layout and navigation should be consistent on all pages, i.e., always on top or on the left. This will aid visitors using small screens such as telephone devices, as well as visitors with special needs. If your links are going to open a new window or activate a Java-Script, make sure and tell that to your visitors.

Clearly labeled navigation is important to all users, not only those with special needs. While not underlining your links but showing them in a different color looks really cool, it is confusing for new users of the net who are looking for underlined links and impossible to interpret for users who are color-blind or using a black and white display.

Use color carefully. Approximately 8% of web users have difficulty distinguishing colors to some extent. Your colors should not be so dense as to appear black to a black-and-white screen, nor so alike in value as to appear identical to viewers who can’t differentiate between red and green, the most common form of color blindness. The foreground and background colors should contrast sufficiently with each other. Don’t use mystery links. If you need to put your cursor over a link to see where it goes, you are going to not only confuse new users of the web but also make it difficult for visitors with motion impairments. Try to stick with web safe colors - older screen readers have problems with non web safe colors. Web safe colors are easy to identify - the hexadecimal number will be three pairs of matching digits. The only digits you will see in a web safe color are: 00, 33, 66, 99, CC and FF.

A logical navigation layout, besides being good design, is essential for viewers who might be learning disabled, or using a speech synthesizer. A logical design uses HTML tags that identify text for what it is and not just how it looks. For example, headings should be marked up using proper "" tags. Speech synthesizers can read this HTML and will give proper emphasis to headings and subheadings if they are marked up with the "" attribute. A properly marked up web page can be imported into Word with the headings (H1) and subheadings (H2 etc.) displaying as an outline. Again, a benefit for the visually impaired who may need a quick review of your site. Incidentally, images can be surrounded with" " tags if you wish to give the images’ ALT text special emphasis.

Another example of a logical markup is the use of the "" tag rather then the tag. The tag gives text an italic look. The "" tag gives text an italic look and an emphasis while being read by a speech synthesizer. works in place of the same way. Also, all attribute values must be quoted, even those which appear to be numeric, as many screen readers rely on those quotes. They maybe required for sites having to abide by government guidelines fo accessibility, too.

Does your site rely on scripts, applets, plug-ins or frames for navigation and/or information? Provide a second way for users to obtain the same information. For example, audio clips should be accompanied by a transcript for the deaf user. Video clips should not be essential to the information presented on the site. If they are, you may want to consider including a hyperlink to an information page which will convey the information in a textual manner. Animated presentations should have an explanatory ALT description for the visually impaired. Don’t make this description too long, however, some speech synthesizers have size limits.

Keep in mind that your text will be read straight across - if you have a picture in the middle of text, the speech synthesizer will read, "text text text picture description text text." It’s often best to align the picture to the right or left of the text so the alt description is read separately. If you really like the look of the surrounded picture, use brackets in your alt description so it will be read as, "text text text bracket picture description bracket text text." Frames are difficult for a speech synthesizer to interpret. If you must design your site in frames, label the top frame clearly with alternate navigational methods.

To assist motion impaired users, navigation options should be clearly labeled and easy to click on. The words "click here" are not the best choice as a motion-impaired user may not be able to hit a target that small. Use descriptive text instead. Avoid the use of the "drop down-box-and-[GO]-button." This is an unnecessary bit of extra clicks even for people without motion impairments.

If you use tables for your layout, keep all the information pertaining to a topic in one cell. Remember that a speech synthesizer will read cells next to each other in sequence. If you have information that is more than one cell long, use shift-enter to keep all the material in the same cell. Avoid very complex tables to display content, if possible. If the table is too complicated, it may confuse the screen reader. If you must use these tables, set short-cut keys and specify the tab order of your elements.

Using bulleted lists are often a good way to present information. Besides being visually attractive and easier to read, numbered lists make it easier for people who are listening to the information. If you use an image as your bullet, be sure to give each image the appropriate ALT text.

As a double check, run your text through a spelling and grammar checker. Speech synthesizers will always try to read a word, even if it is misspelled.Run your page through the validator at http://www.cast.org/bobby/. Bobby is a Web-based tool that analyzes web pages for their accessibility to people with disabilities. Bobby will examine your site and give you a report indicating any accessibility and browser compatibility errors found on the page. Once all the pages of your site receive a Bobby Approved rating, you are entitled to display a Bobby Approved icon. This is a real feather in your cap, so do it today!

How to Make Your Homepage Flow

If you want your visitors to stay as long as possible. This is the only way your site is going to succeed. Your site must be interesting, persuading, and easy to navigate.

First let me tell you a couple of misconceptions about how to design websites.
1. Many people assume that because the internet is so "big" and covers such a vast amount of areas around the world, their website has to be everything to everybody. They design their website for "everybody" in the world and never have a distinct purpose. No purpose and no direction results in no sales! That's a profound statement but so true.

How many websites have you visited that had no purpose, no direction, and no real valuable information that you stayed and surfed around the site a while?

You click to that site only to find twenty links that are all non-related to the site's description nor to each other. A link to the left takes you to a computer store online while a link to the right takes you to a sports website. Five banners straight down the middle of the homepage all going in five different directions. No direction or purpose whatsoever. Even if that company did offer what you were looking for, you probably would not consider that company as an expert or even trustworthy after one glance at the website, would you?

2. The second misconception is that selling on the web is different or easier than selling offline. I know from experience that sales is sales is sales. Even if your business is on the web, you still must take the same steps to gain a customer's trust as you do offline. Your
product will not sell itself, just like your website will not promote itself. You must take the necessary steps to promote your site as well as give a persuading presentation once the visitor arrives.

Now that you know a couple of the most common misconceptions
on the web, you can move forward with designing your website with these in mind. Don't worry, if you've already designed your website for "everybody", it's not too late to focus in on your sole purpose. It's far less painful to design your website with your one purpose in mind from the beginning -- and less costly.

Below are 3 important steps you can take while designing your website to insure navigation ease for your visitors: 1. Place your "appealing headline" below any banner or logo at the top of the page. This is the headline that persuades your visitor to continue reading your homepage -- to spark their interest in your product or service. Write your headline to your target customer. The visitor should have no doubt about what kind of website he/she just entered.

If your purpose is to sell books, your headline should say something about books or a particular book that's very popular. This will insure your "targeted" potential customers that they are at the right site for what they're searching for. Visitors who aren't looking for books really aren't your customers, are they? You're letting them know up front that they're in the wrong website.

The reason for placing your headline below your logo or banner is because people tend to look at the "picture" first and then begin reading below the picture.

2. Place a side bar or navigation bar at the right hand or left hand side of your homepage. A general rule of thumb is to place your navigational bar on the left hand side if your website is information-based and you offer just one to three products. Place your navigational bar on the right hand side if your website is set up like a catalog offering many different products.

The navigation bar provides your visitor with options to move around within your website without crowding the homepage. Your homepage should be an introduction to your website or your product or service, not your entire website. The information should be intriging to your "target" visitor and lead the visitor to the next page or to your desired response at the bottom of the homepage.

3. Continue your homepage. Write to your visitor in a way that he/she can't wait to go to the next page and continue. But don't stop there -- when your visitor gets to the bottom, be sure to say "Go to the Next Page Here..." or "Continue to Next Page...", something to
persuade your visitor to go the next page. The ... always leaves a sense of continuance also!

Implement these three methods while designing your homepage to insure navigation ability for your visitors. Remember, your visitors can only turn into paying customers if you get a chance to make your presentation.

by Candice Pardue,
Online Success for Internet Business

What are auto responders? Auto responders are the automatic responses you get when you send someone an email. There are many uses for these time savers that can benefit you and your inquirer.

Here are 5 Ways You Can Incorporate Auto Responders to Compliment Your Website:
1. You can let others know that you have received their email and will respond within a certain amount of time. This eases their tension of waiting and gives you time to promptly and carefully respond to each individual email without being rushed.

2. Auto responders can be utilized to inform your inquirer that you will be out of the office for a few days and will respond when you return.

This helps prevent emails like the ones below while you're gone:

-- First Email: Hi, I have a question for you, etc...

-- Second Email: Hi, I wrote to you yesterday with a question. Did you get my email?...

-- Third Email: I still haven't heard from you. Are you there???

-- Fourth Email: Well, I guess you just don't want my business. Don't bother writing back!

... and you haven't read the "first email" yet.

3. Subscribers to your ezine or newsletter are able to receive their first issue automatically when they subscribe. This gives your subscribers "immediate gratification" for their efforts.

4. You can send an order confirmation to your customers immediately after their purchase. This method helps to soothe buyer's remorse until your customer receives the product.

5. Auto responders can also be used for thank you letters to customers and/or subscribers to let them know you appreciate their interest or business.

There are many other useful avenues you can take with auto responders. Use them wisely to save time and build effective relationships with your website visitors.

To build auto responders for your website, check with your hosting
service for instructions. Most hosting services offer auto responders as a free service and will teach you how to use them.

Implement auto responders today to help your website grow.

-----

5 Very Important Tips for Web Design Beginners

The tips below are for beginners just starting out in web design. I thought that you may be under a little stress in the beginning - I know how you feel. I've been there and am still learning as I go. When I first began in web design, I knew absolutely nothing about computer programming. I was not internet savvy, nor did I have experience with the program I was using. So I was definitely in the category of "beginner."
I'm still a beginner when it comes to some of the "fancy" stuff, but that didn't stop me from designing my own website and writing my own personal ezine - this one! So, relax, read the tips, and enjoy your
learning experience...

Below are 5 Very Important Tips to Web Design Beginners:

1. Don't try to learn everything at once. Take your web design learning step by step. If you try to learn how to do everything up front, you will get confused and very discouraged, and probably end up quitting.

2. Leave logo and graphic "design" to the "techies" for now. Learn the basics of web design and internet functions first.

3. Have a plan. Why do you want to learn web design? Do you have a purpose for designing your own website? Ask yourself these questions before you get started.

4. Are you learning web design with the right software or program? This is important because some software is easier too understand for beginners. Our web design course uses Netscape Composer to train in web design. I found that Netscape Composer is the simplest program to use when training beginners.

5. Keep your new website simple. Try to stay focused on one subject, theme, business product, or topic whatever your website's purpose, keep it simple.

Candice Pardue
www.webmastercourse.com

Why Not to Use Frames in Your Website

Over the years, as the Internet has grown and expanded, website developers have worked very hard to try and stay just a "little fresher", or one step ahead of the competition. Different sizes of text, different colors of text, graphics, tables, bit maps, animations, frames, push technology, pull technology, layering, all of these are a means to an end... to get your page read!
I'm not going to discuss the others here (I'll save those for future reports). Today, I would like to talk to you about frames. I personally like frames if they are used properly. Some people seem to use them just because they can. This can make your site harder to navigate and a whole lot more confusing if not used properly.

Using frames should be like another type of advertising or marketing strategy you use for your business, base the decision on whether or not it will enhance the message you are trying to get across. But make sure that you understand the trade-offs that go along with using them.

1. The biggest trade-off and probably enough reason by itself NOT to use frames: Search engine robots do NOT read pages with frames!

When they encounter a frames page all they see is the outline of the frames. They don't see any links so they assume it is a dead page (or a dead site) and they move on. This can be disastrous for a website.

If you want to generate sales, you need customers. To get customers you first need to get people to your website. To do this, you need the search engines. To go through the time, trouble, and expense of setting up an Internet Store (website) and then to deliberately block your site from the search engines is like opening up a retail store but painting the windows black and not putting up a sign. You are open for business, but nobody knows it, unless they happen to accidently stumble in.

2. Frames can often times be confusing, especially if all of them have scrollbars going up/down and left/right. Besides taking up a lot of your already limited screenspace, the scrollbars are just distracting. This can cause a lot of people to leave your site immediately. They figure that if your front page is confusing (and that is the page you are using to draw them in) that the rest of the site probably isn't worth their time or trouble either.

3. Navigation. You have to have everything just right when you are using frames. If you don't, when you click on a link, it can come up in the wrong window, thus destroying what was there and probably blowing any and all formatting that you had done. And, if linked pages come up in the window where the links are supposed to be, the person is trapped on your site, in your frames, with nowhere to go.

Frames can be useful, but having your main site done in frames is not wise. Look around at other sites that have frames, try to navigate them, and try to read and see everything using all the scrollbars. Then... think about your average customer. Is this something you would want to put them through? Is it something you would want to have to go through if you were the client?

------------------------------------------------------
by: Victor H. Schlosser
webmastercourse.com
------------------------------------------------------

Creating A Quality Web Site Design

In this article, I will attempt to cover the basics of creating a great quality web design template for your site. Now it's a known fact that the layout or "eye candy" as I put it will determine whether your visitors will stay more than 15 seconds or they will just become another statistic.

That's right, if you don't catch your visitors attention right away, statistics shows us that your visitors will come and go within 15 seconds or less.

That doesn't leave you with a lot of time to grab someone's attention!

Some of you may be asking yourself: Well why does this happen????

See when you think about it, 15 seconds to the "browsing eye" is like an eternity. In other words, it takes about 15 seconds for the average person to browse your main page and determine whether they will explore your site further!

So with that being said; How do we grab your visitors attention????

Every new client of mine is asked to perform the same tasks. I ask them to explore their competitors web sites and look for specific triggers that would make them want to click on or buy right away. More times than none, my clients will notice specific "Headlines" or "Graphics" that really peek their interest. In doing this, you'll have 1st hand knowledge on what you expect your visitors will see and possibly expect themselves.

Step 2, I'll ask my clients to do one more process just like the previous one. I'll ask them to make a list of all the "eye candy" that really caught their attention and write me a little note as to why it caught their attention. In doing this, it will give your web designer a 1st hand knowledge on what to implement within your site!!!

With these great tasks, you've made your job and the job of your web designer a lot easyer to target your audience.

Sites that sell "Web Site Templates" :
You may have seen some sites that sell your the right for a specific "Template Style". There are 100's of resources out there. I need to clarify something for you, these templates are targeted at web designers only!!! Reason being, the files that you recieve will no doubt require some expensive and time consuming software just to open them.

Now being a designer, I'm not about to "knock" pre-made templates but there's a couple of things you may want to consider:

1) Although the templates you may encounter are very impressive, you will be sharing your layout template with 100's, maybe 1000's of other sites. The reason why they are so cheap is because those "specific templates" are sold and re-sold as much as possible!

2) I've noticed that many template examples out there on the web are extremely "Graphic Driven". This will resuly in "slow loading times". I'm sure we've all come across a site that seemed to take FOREVER to load!! How long did you actually wait for the site to load????

The best way to get a template is to have someone professional design your web site layout for you! This will ensure that your template is uniquely deisgned for your business. It will be easier for you to make changes in the future. Typically, a template may cost you between $0-$500 depending on the intensity and added features!

Now, we've talked about "Slow loading pages". I've found a good "norm" to stick with when it comes to size and speed: Web sites are compiled of 2 elements:

Graphics & Layouts
Programming & Pages
Both of them require memory from your computer when downloading them. If one or the other is too large then this may result in negative results for your visitors.

Here's a good norm to stick with, either you or your web designer should stick with these specs:

Graphic Design Layout: Should be no more than: 30-50K in size
Programming Pages: Shouldn't be more than: 10-30k in size
Giving your entire web page no more than 40k-80k in size. Anything drastically more will result in the loss of many visitors from slow downloading pages.

Animation: Last but not least, making "some" aspects of you page stand out by adding small size animations. PLEASE NOTE: DO NOT overkill your site with graphics and animation!!! I can't stress this enough, your visitors will most likely get a head ache from it and won't be coming back very soon.

Instead, try targeting specific promotions or services you wish to attract your visitors to right away! Many sites exchange "animated banners" with other sites to exchange traffic. I personally NEVER take part in adding ANY banners on my site. I honestly feel that banners only take away from the design, not add to it! A typical "Banner Dimension" is 468px x 60px.

There are many other sizes!

What I will usually take part in, if any, is smaller, more unique banners that are gueared to complimenting an article or text with it. This is much more effective because study shows us that "Content (text)" accompanied by a "graphic image" is more likely to be read by our visitors than just text on it's own.

By Martin Lemieux at Smartads.Info

Designing Your Website for Browser and Platform Compatibility


In the early days of the Internet, I used to come across many sites advertising "Best viewed with Netscape" or "Best viewed with Internet Explorer" or the like.

These days, such labels seem to be rarer. And no wonder. Webmasters today put an inordinate amount of effort to promote their sites on the search engines and elsewhere, and it's unlikely that they'll want to turn away any visitor just because he/she uses a different browser.

Along with this principle of catering to the widest possible audience is the principle of designing your page for compatibility with different browsers, operating systems and hardware.

In this article, I will discuss four compatibility issues. They are by no means exhaustive, but they are at least starting points to designing a site that will be viewable by more visitors.

1. Screen Resolution Issues
When I first wrote this article in 2000, the majority of visitors (53%) arriving at thefreecountry.com (where this article was first published before thesitewizard.com came into existance) used a display resolution of 800x600, 31% used 1024x768, and only 8% used 640x480. This situation has changed, and today, the bulk of my visitors at both sites are roughly divided between using a screen resolution of 800x600 and 1024x768 (with insignificant numbers using other resolutions).

If you design your site with fixed widths, you need to be aware of the above. For example, if you design for the 1024x768 screen resolution, you will force almost half your visitors (if your site has the same visitor make-up as mine) to scroll their screens horizontally to see the entire page. Horizontal scrolling irritates a number people (particularly if they have to scroll left and right continually just to read your sentences), hence many sites try to avoid it. They do this by either designing with a fluid design (as thesitewizard.com currently does), where the page automatically fits whatever screen resolution the visitor uses, or by designing it for a worst case screen resolution (either 800x600 or 640x480).

If fixed width is your cup of tea, in my opinion, you should not design your pages to require more than a 800x600 display resolution. Doing so will probably displease at least half your visitors, who will have to repeatedly scroll horizontally (back and forth) just to read the sentences on your page. If, despite this, you feel that you need a fixed canvas larger than 800x600, you can use a trick I've noticed on some sites: they put optional material (like advertisements) in the rightmost column of their web page. This allows visitors who have smaller screens to ignore the rightmost column; they can read the main content without having to scroll horizontally.

Of course, if you only use relative widths with percentages like 100%, 80%, your page already caters to different screen resolutions (unless you put graphic images on your page that exceed the widths of the columns).

2. Colour Limitations
It may or may not come as a surprise to you that a colour code like "#F2C3BE" results in different colours on different systems, depending on the number of colours in your visitors' colour palettes, their monitors, etc.

For example, if you choose a colour that looks good on your 24-bit colour system ("True Color" on Windows, "millions of colors" on Mac), and your visitor goes to your site using a 256 colour setting on his system, your colour will be dithered to fit into the more limited number of colours in his palette.

What looks to you like beautiful shades of colours may thus turn out to be ugly combinations on a different system.

Of course, few people use 256 colours on their system anymore. As such, many webmasters are abandoning the old technique of only using colour combinations that are multiples of the hexadecimal "33" (which are supposed to be safe to use in that they display fairly similarly across the main platforms).

However, if you think that you can now use the next lowest denominator, the 16-bit colour setting ("High Color" on Windows, "thousands of colors" on Mac) safely, think again. Contrary to what you might expect, the 16-bit colour palette is not a subset of the 24-bit colour palette: apart from black and white, the colours in the two palettes are not identical. If you design the colour scheme of your site while working from one palette, be sure to switch to the other colour setting to make sure that your colour scheme blends well in the other setting as well.

3. Frames
I'm looking at frames from two points of views here: screen resolution and people who browse your site using speech software.

One common complaint that people have against sites using frames is usually that webmasters tend to forget that visitors don't have the same large screen resolution that the designers have when they created the web page. Sites with frames tend to provide a smaller area for people to view the main content of the site, since the outer frames occupy some of the screen real estate as well. If the web designer has not checked his site using a lower screen resolution like 800x600 and 640x468, and tested its usability with those lower resolutions, he may not be aware that the site is difficult to use in such situations. Visitors may have to scroll horizontally and vertically continually just to read the content. The situation is worse if the designer removed the scroll bar (because it looked fine without it on his high resolution screen), and visitors find they can no longer scroll left/right/up/down to read the content.

If you use frames on your site - be sure to check how it appears under lower resolutions. By "check", I don't mean to see if your site still looks pretty. Try reading all the content on your site with those resolutions. If you find that the site is inconvenient to use under those resolutions, you may need to rethink your design. Remember, your visitors don't have the same amount of patience with your site that you have.

Framed pages also pose certain difficulties for people who have to use speech software to access your pages, such as the visually impaired. Unlike people using a visual web browser, the speech software reads every item on your pages and frames serially. The person using such software does not have to ability to skip portions of the page because it appears irrelevant. Neither is he able to match what is displayed on one frame with the content appearing in another. Remember - matching the content of one frame with another requires ability to see the layout.

I'm not saying that this necessarily precludes the use of frames on your site. What is needed, instead, if you think you really need to use frames on your site, is to plan carefully so that both the user with a low screen resolution and the person using speech software are able to access your site as you intend.

4. JavaScript Availability
Should you use JavaScript on your web page? While it is true that many people use browsers like Internet Explorer, Netscape, Mozilla (and derivatives) and Opera, all of which support it, it is also true that there is a small percentage of people who use browsers that do not support JavaScript. This small percentage is not confined to people using old browsers or those that have disabled JavaScript in their browsers. People who use handheld devices may not be able to read the content generated using JavaScript on your site.

My personal preference is not to rely entirely on JavaScript to get the job done. That is, whenever I use JavaScript in my pages, I try to make the page work even if JavaScript is not available. By "work", I mean that the visitor is still able to navigate the site and read the material on the page. In certain situations, I use a combination of JavaScript and server side scripts (such as PHP scripts) to do the job: the JavaScript is used if possible, else, a server side script is invoked if the visitor hits a form button.

Conclusion
Plan your website from the start to take into account compatibility issues. This way, you know that your site will benefit from the widest audience that you've strived so hard to obtain.

by Christopher Heng,
thesitewizard.com

How to Avoid the 12 Common Web Design Mistakes

Are people visiting your web site but not buying? This may be a sign and the time to do some redesign of your web site. Often you are so close to what you have created, that you can't see obvious design mistakes. I often do the same when writing an article – everything looks fine when I have finished, yet when I review it the next day and I'm amazed at how many mistakes I have made.

Let's look at some of the most common Web Design mistakes:

1.Sloppy Web Site Copy – your heading and first paragraph should clearly indicate the purpose of your web site. "Content is King" on the Net, so make sure there is plenty of focused information for your visitors. The content should draw the visitor through the site to take action in the end. Include contact information on every page in case people have questions.

2.Bad Color Coordination – avoid using dark text on a dark background. Use dark text on a light background, such as black on white. Use colors that blend well together – observe nature or look at paintings to get some idea of good color combinations.

3.Pages Load Too Slowly – using too many images or inserting large images on a web page, slow down the loading time of your web page. Optimize your images (reduce their size) before you insert them on your site, otherwise your visitors will leave before your site is loaded.

4.Poor Navigation – this means visitors can't easily find the information. They experience broken links, error pages or discover too many moving objects (animations, flash, scrolling text, marquees) – all these will annoy the visitor and cause him to click elsewhere. Keep your navigation simple by creating clear links on all web pages.

5.Orphan Pages – these are pages other than your homepage, where the visitor has no idea how it fits in with the overall structure of your web site. You should always have a link to the homepage, so visitors know where they are on your web site.

6.Long Scrolling – the visitor has to scroll horizontally, or many pages vertically to view the whole web page. Create the width of your web page to fit on one screen, to avoid horizontal scrolling and have a maximum of 3 pages to be scrolled vertically.

7.Meta Tags Missing – without optimizing your web page with a description or keywords, people can't find you on the search engines. Research key words or phrases relevant to your site content. Include them in your title, description and Web Site copy.

8.Lack of Marketing Strategy – a beautiful lawn without sun or water will soon die. A Web Site without visitors will soon die also. They are the life blood for your website. Create numerous marketing strategies to attract visitors to your web site – you never know which one will be the most effective.

9.Poor Layout and Design – create an aesthetically pleasing design to keep the visitors on your site. Create enough white space between your text and images by using margins. Don't overlap text and images and avoid capitalizing all text – it gives the impression you are shouting at your visitors. Use font type such as Arial or Verdana to make it easier to read on your computer screen.

10.Avoid Using Frames – frames don't allow you to bookmark the page or return to it and sometimes the URLS stop working.

11.No Cross Browser Compatibility – you may be losing many customers if your Web Site is not compatible to the browsers most people are using. Internet Explorer (IE 4, 5, 6) is currently the dominant browser, and most users are displaying 800x600 pixels or more, with a color depth of at least 65K colors. (http://www.w3schools.com/browsers/browsers_stats.asp) . Therefore check your design with these statistics in mind.

12.Outdated Information – your web site is like a garden. If you allow weeds to block out the sun and take over your garden, it will be destroyed. Attracting and keeping web site visitors, means continually adding new information (i.e. latest news), deleting irrelevant, outdated information and removing broken links.

Continuous maintenance of your web site is crucial to attracting and retaining visitors. If you don't have time to do it yourself, hire a Web Gardener (Web Designer), to keep your site looking fresh, clean and fast loading.

by:Herman Drost
Flash-web-design-company.com

Creating Your First Business Website


What are the primary goals of everyone venturing into e-commerce?

To get a website online fast and make money. Putting it simply. So how do people do it? What works and what doesn't?

According to Milana Leshinsky of http://www.firstbusinesswebsite.com and author of the Create Your First Business Web Site CD and tutorial, you don't need to learn HTML, you don't have to buy expensive programs, and you need to be able to update your website yourself any time you choose.

In my professional experience with clients and my personal experience with http://www.SuccessPromotions.com the biggest pitfall for most webpreneurs is NOT being able to edit their own website and being always at the mercy of a webmaster. The most important thing is to have an internet presence that truly reflects what your business is and what it offers.

Remember that if you cannot edit your website yourself then every price change, every product addition, and every special or clearance sale must be planned farther and farther in advance. And if you're selling widgets on your website just like a million other websites are selling widgets you have to be able to differentiate yourself from the marketplace.

Milana Leshinsky's tutorial is one of the finest web design teaching tools on the market. And its endorsed by some of the biggest names in e-commerce!

When it comes to creating an internet presence, you cannot rely on the loyalty of your customers to shop or continue to shop with you. And you cannot rely on the search engines to provide quality search engine listings without lots of work. You cannot count on people finding your site by accident AND shopping there. So you have to lay a solid business foundation from the very start with a quality product or service represented on a quality website.

Many people struggle through the design of a website only to struggle further to actually publish it to the internet and get it hosted. One of the greatest aspects of Milana's book is that it provides you with ALL the resources you need to move from concept to reality with your first business web site. Not only does Ms. Leshinsky's tutorial teach you what you need to know and refer you to the resources you need to use what you learn, but it saves you thousands of dollars in software licenses and design fees. So, now that you know where to go to get your first business web site, what are you going to do with it?

Success Promotions provides tons of internet marketing resources online in addition to their professional website marketing services. If you want to create AND market your business website yourself, then you need to plan to spend at least ten hours per week wearing your marketing hat. If you do that, your first business website will be the only one you'll need. But what the heck? If the first one is successful, then continue to build and reap the online rewards.

The Science of Web Design

Moving Beyond a Site That's Just "What You Like"

Many people get into Web design and development because they secretly want to be designers. Think about it, when you first found the TextArt in Word, you fell in love. Every one of your documents had to have some fancy coding and pretty text or images, even if it was just the color of the text.

HTML and Web Development gives people who would normally be programmers working with code a chance to be more visually creative, and this is fun.

But there can be a science behind Web design. Your choice of font and the width of your page shouldn't just be based on "what you like". Follow these simple steps to be more scientific in your Web design:


Usability Testing

Usability testing can be as elaborate or simple as you need, but no matter whether you have your mom look at your pages or do a complete usability test scenario, you should have someone not familiar with your site look at it. If you can, try to be in the room while they test. Watch what they click on and what they ignore. If they're ignoring your buy button and you've created an ecommerce site this is a serious problem.

Browser testing

Never assume that because it looks fine in your favorite browser, that it will look fine in every other one. This also includes the same browser on another operating system. Check your Web page on every combination of browser and OS that you can get your hands on.

Learn from DTP

Many new Web designers have never had any formal training in design and end up trying to reinvent the wheel when it comes to layout and style rules. Line lengths for readability, colors for emphasis, and margins for look are all basic principles of DTP and can be translated to the Web.

Use your log files
Log files can be very tedious, but the are a valuable tool for designers. Get a good log analysis tool and use it to find out thing like:
where people go from your front page
what they click on the most
what pages are least successful
Once you have this information, you can modify your site to lead your customers where you want them to go.
Don't be afraid to redo
One of the biggest advantages to the Web is how easy it is to make changes. If you create a design and later it doesn't work as well as you'd planned, then change it.
Designing a Web site is a lot of fun, but bringing some structure and science into the design will help you create a page that your customers will find beautiful and usable.

By:Jeniffer Kyrnin
Webdesign.about.com

How To Automate Your Website and Increase Sales By 43% or More Part 1 of 3


Is Your Site Automated?
In today's internet marketplace, where competing sites are only "a click away" .. you must provide an easy to use web site, with up-to-date information that meets your visitors needs. To do this without software and a database of some type would take excessive amounts of time, and make your web designer very wealthy!

Quite often your data is scattered on different systems, from your web site, to your email software, to your desktop databases. This makes it challenging, and time consuming, to stay connected with your clients and prospects on a regular basis, as well as be able to easily organize all your data.

Using a database, along with special software, tools or 3rd party services, you can automate the information you present to your clients, automate your site maintenance, lower your overhead as well as save time and make more money. By keeping your data in one place, it allows you to stay organized and have all your pertinent client and business information at your fingertips. Automation is truly the fastest and smartest way to run a successful, and profitable online business.

For example, all web hosting companies now offer support for some type of "middleware" applications like ASP, Cold Fusion, PHP, Perl/CGI, and Java, among others, that allow you to use pre-made and custom functions to automate routine tasks like uploading files, adding dynamic contact forms, shopping carts, maintaining databases, adding newsletter subscribe functions, displaying special offers, showing current date and time, and more.

Here are a few of the top "must-have" web site functions you need to automate today:

===> 1. Automate your newsletter signup process

If you're not building a newsletter list now, drop everything and start today. The main reason most successful web businesses online today became successful, and stayed that way, was by building a large list of prospects or clients. Whether you choose a 3rd party mailing list service, or create your own newsletter database, choose to do so today. Don't wait. This one item could make or break your business.

===> 2. Automate your client or prospect follow up
Follow up is one of the most vital components in building a successful business. On average, a prospect needs to see your message 7 times ... that's right .. 7 times .. before doing business with you. Don't rely on your memory or manual methods of following up with your leads. Use a 3rd party autoresponder system (Aweber, Get Response, Net Office .. and others) and capture your leads name and email address automatically. Use a pop-up window and add a subscribe form to every page of your site. Use built-in functions and examples from these services to create subscribe forms as well as the functions available in software like Cold Fusion, ASP, and Perl/CGI to automate this process for you. Just set it up once, and you'll have a follow up system in place for life.

===> 3. Automate your order processing
Processing orders by hand (authorizing credit cards, emailing, verifying, etc) is costly and mostly a waste of time. Some ordering systems must have a human factor for one reason or another, but try to automate as much as possible. Your competitors are doing it, and you won't be able to stay competitive on price, or keep your overhead down, if you don't automate at least part of your ordering process .. online or off-line. Automating your ordering most often increases your sales, and instantly lowers your overhead, saving you time and money. A recent example of automating a client's sales process skyrocketed their sales 43% in just 2 weeks! Another client realized a 1038% jump in sales over a 9 month period. And those numbers keep growing every month with no increase in overhead, thanks to automation.

by Mark Idzik
http://www.DatabaseProfits.com

The One Vital Web Design Element That Virtually No One Is Telling You About

You've probably seen articles that cover the "Top Ten Web Design Mistakes" or something to that effect. They all seem to say the same things, don't they? No animation, keep the appearance professional, use easy navigation, and so on. You've done everything those articles told you to do, but your site still isn't making the progress you'd like. What's wrong?

You know, out of all the ebooks I've seen - and all the articles on Web design I've read - one thing is rarely mentioned. You would think, since this element is absolutely vital to any Web site's success, that it would be the talk of the town. That one vital element is... your customer.

Before you read another article or ebook on Web site design, consider these facts:

* Your customer is the reason you are in business.
* Your customer pays your bills.
* Your Web site should be specifically and intentionally designed to meet your customer's every need.
* In order to design your site to meet his/her needs, you must first know who your customer is.

Once you discover who your perfect customer is, and what needs he/she is looking to you to fill, you can apply all those other techniques in the "Top Ten Web Design Mistakes" articles with great success. But the questions remain - "Who is your target customer" and "What does he/she want from you"?

It's simple really. Just ask a few questions like:

* What types of customers visit my site?
* What is the common denominator of all these site visitors?
* What brings them to the point of needing my products/services?
* What problems do my products/services solve for my visitors?

The answers to all these questions will reveal an amazing portrait of your customers, of what they want, and of how you can supply what they need.

When you implement your design, or make changes to your existing design, do EVERYTHING with your target customer in mind. Does your site design need to be "fun" or "business-like"? That depends on whether your visitors are looking to fill a need for entertainment or professional services. Should you use vibrant pink and lime green shades, or muted blues and grays? Senior citizens would most likely shy away from "fad-ish" colors, but teenagers wouldn't get very excited over dark, drab tones. See? It all depends on your customer. Every decision you make about your Web site design should focus on and revolve around one thing... your customer.

Now, rather than repeat what thousands of other authors have written, I'll just ask that you go back and read those "Top Ten Web Design Mistakes" articles once more. But... this time, apply their advice with your perfect site visitor in mind. You'll be simply amazed at the results you'll get once your focus is clearly set on the primary person involved... your customer.

by: Doug Parr
Source:smallbiz2000.com

Website Design templates: A web designers secret weapon

Web design templates (website templates) can be an excellent tool when building a new web site; a tool that can speed up the production schedule, improve the quality of the final website and just make the whole process of building a website much easier.

A fast way to build quality websites

Now that the web has matured, the experts have discovered what works and what doesn't work when it comes to website design. Out of this experience comes web templates; websites designs that have been tried and tested. Like with building a house, there is no longer a need to reinvent the wheel with every project – today you can select a web design template and get it online fast!

Don't reinvent the wheel!

As a software architect and programmer, I can tell you that a core rule in that field is to not reinvent the wheel. This basically means is that if someone else has built it already, you should use it! You are wasting your time and money trying to recreate things from scratch.
Instead of having to build everything from scratch, you can now select from a huge collection of proven website styles that you can use 'out of the box' or use the website template as the foundation to your own creation.
My own experience
I've been creating web sites since 1994-95 and have seen and tried just about all the possible ways of approaching a web project.
In the early years we would create all our websites from scratch; this was a slow, tedious and expensive process. Besides trying to make the web pages look good, you had to figure out how to make it work with all the browser and within the limits of your potential visitors computers:
Will the website end up being fast enough for people on slow modems? Will it work with Netscape and Internet Explorer? Can we fit all the required sections so it works in an 800x600 screen resolution? In those days I was not to keen on web design templates because I wanted to produce an 'original website'. But I always discovered that the website ended up looking like other websites already out there!

Why was this happening?

It happened (and still happens) because web developers have figured out what works ... and they do it! In the same way that the automobile industry has figured out that a car seems to work best with four wheels, web designers over the years have figured out the best way to structure and design a web page. As such you're going to see most websites work with the same handful of proven designs and styles ... given a projects' needs.

The website designers point of view

If you try hard enough, you can probably come up with some funky style for a page with for example, a new wacky navigational menu. The problem is that everybody expects to see a web page layout follow certain basic rules; navigation sections have to be arranged in a certain way, links have to look a certain way ... being consistent makes the web site more usable and easier for the visitor to use.
No worries, you can still be original within the context of a template; people do it all the time. The web site template serves as the framework for designers, where it eliminates the grueling structural work and frees you to develop the subtlety of the websites' style.
With so many web site templates to choose from these days, you are almost guaranteed to find the basic style and layout you are looking for. You can then build off of that, speeding up the process - makes good sense for you and your clients!

The business point of view

Website templates save you time and money; the production cycle of a website project is at least cut in half when you use a website template. Another advantage of using templates is that you can show the website designers what you want rather than trying to describe it to them. The reverse is also true where the designer can show the client several templates that he/she can choose from – this in of itself will always be a great tool!
I have also found over the years that most people don't really know what they want until they actually see it. Templates allows the business owner to identify what they really want in a website and actually buy it right there and then. They can hand the template off to the web designer for the personalized touches.

Even the great artists develop a 'template' of their own

This is just a side note, but it may be worth considering:
An artist typically becomes known for their style, this style is consistently applied in their work and it defines their careers. Picasso is one such artist; if you look at any of his paintings, you can clearly see that it's a Picasso.
Other examples are found in the music of the Beatles and the Rolling Stones; you may have never heard a particular song, but their styles are so well defined you instantly know whose song it is.
An artist's style is really just a template of what works for them. In a sense, an accomplished artist creates his or her own design template and then applies it to their work

By: Stefan Mischook

How to Choose a Web Designer

If you do not not choose a web designer carefully, much money and time can be wasted. I have heard my share of horror stories of expensive, bloated websites that failed because of unintelligent design. . .

Because the Internet is a valuable business tool, the best web designers think like business owners. They understand that for most small businesses, a website must do four primary things:

Find and target your market on the Web

Get your message across clearly

Make relevant information easy to use and find

Give potential customers a clear, easy way to contact you or buy your product

In choosing a web designer, ask yourself the following questions: Does he or she understand how design can affect website popularity in search engines? Does their portfolio show websites that I find easy to navigate? Is it easy to read information on their websites? Does the design show a clear understanding of the audience? Do I find myself getting impatient with slow loading graphics and useless animations?

In order for your website to be useful, it needs to be easy to find. That usually means making sure that the web design meets the requirements of major search engines. A good web designer has a solid understanding of search engine requirements and a proven ability in designing websites that work well in them. The designer should be able to suggest ways to fine tune your content so that search engines will index it properly under relevant keywords or phrases.

Good web design for most businesses means good information design. Information regarding your message or product must be easy to find and read. Good web design never overpowers or distracts from the information people are looking for. Rather, it supports your message and serves to improve its clarity and impact. Also, good web design is focused on simplicity. Clear, easy to navigate pages can be a competitive advantage that makes you stand out in the Internet. Navigation should be consistent from page to page and easy to figure out. Information should not be muddled by odd colors or graphics.

Good web design is, in most cases, simple web design. Slow loading graphics and annoying animations can kill a website. The Web is not a toy for most potential customers. They are on your site for information to assist in making buying decisions. If you make them wait for the information with a huge Flash animation, they will go to another site. A good web designer knows when enough is enough. They do not add useless 'bells and whistles" simply because they can.

What do you want people to do when they come to your website? The "call to action" should be clear and simple. Do you want them to call you, email you or fill out a form? The means to do so should never be more than a click away. If you want them to buy your product, is the process a simple one? Your website should not be a maze. The paths should always be clear and simple.

Of course, these are not the only requirements for selecting a good web designer. They are ways to help you find a web designer that will also be a good business partner . . . making your website useful and worthwhile.


Source:newark1.com

Navigation and reading tools for Better Web Design

Working on Accessible Web Content Guidelines and Designing More Usable Documents - This report outlines work completed at Trace related to document navigation and provides an overview of the tools listed below. You may notice that many of our projects only work with Microsoft Internet Explorer 4.x and 5.x. Why is that? At this time, MSIE4/5 provides the most straightforward programmatic interface for us to use to accomplish our design ideas. The following tools are prototypes that we will be testing and refining, and as such we wanted to get them up and running as soon as possible to collect feedback.


Headers Power Toy (zip archive) (for Microsoft Internet Explorer 4.x and higher) - Our power toy allows a user to select a header from a list of headers to take them to that header in the current page. Developed by Mark Novak.

Links Power Toy for Internet Explorer 4.x and 5.x (zip archive), for Internet Explorer 6 and higher (zip archive) - This power toy differs from the power toy provided by Microsoft in that the alt-text of images used as links is displayed rather than the document address (URL). Developed by Mark Novak.

Table navigation JavaScript (for Microsoft Internet Explorer 4.x and 5.x) - This script was the proof of concept was the ground work for HelpDB. It needs to exist on the same page as the table you wish to navigate, or it could be included in a frameset and be somewhat persistent on a Web site. It was developed by Mark Novak, Jon Reinberg, and Wendy Chisholm.

"HelpDB" program (zip archive) (for Microsoft Internet Explorer 4.x and 5.x) - HelpDB uses Microsoft's component object model (COM) and several publicly available application program interfaces (APIs) to communicate and inter-operate with Internet Explorer version 4.0+ and above. HelpDB does not expose or allow the user to interact with all elements on a web page. Helped is being developed as a "proof-of-concept" model, focusing on improving the ability of users to navigate web page tables, as well as the user's ability to infer web page "structure" by listing all link, header, and table elements contained on a particular web page in their order of occurrence.

Tunnel.dll (for Microsoft Internet Explorer 4.x and 5.x) - This proof of concept tool demonstrates Header Navigation in-process in the Internet Explorer application using a dynamic link library (DLL) application. Tunnel.dll provides a user with a tree view component that contains a list of headers on a Web page and allows users to quickly navigate to the point in the page where each header occurs.

Differences Between Print Design and Web Design

It is an astounding experience to walk the halls at the annual meeting of the Society for News Design (SND): every wall is covered with full-pages spreads from the best-designed newspapers around the world. The book reprinting the award-winning pages is a great design resource, but the physical presence of the full-size newsprint was utterly overwhelming.
Newspaper designers have a huge canvas to play with. Their designs can be striking and yet intricate and pack much more impact than a web page; especially because the entire double-page spread is in-your-face in a fraction of a second. Wham, here's the news.

The page in the figure is a great example of the possibilities in print: a large, high-resolution map sets the stage for a story about Chile and does double duty as an information graphic for several data nuggets. More data is visualized in smaller graphics around the page. And, of course, there is room for a large amount of text that is set in high-resolution type and nicely integrated with the headlines and graphics in a pleasing over-all layout that allows the eye to move from overview to details in a fraction of a second.

The above image does not do justice to the awards book which is printed in super-high resolution on heavy-duty glossy paper. In the book, it is possible to actually read the body text on the page. For online, I had to squeeze the JPEG quality down quite a bit in order to achieve the required 10-second download time for modem users. Another benefit of print!

Dimensionality
Print design is 2-dimensional, with much attention paid to layout. It is obviously possible for the reader to turn the page, but substantial interplay between different spreads is rare. Typically, each view is a design unit created for a fixed size canvas - often a big canvas when designing newspapers or posters.
In contrast, Web design is simultaneously 1-dimensional and N-dimensional.

A web page is fundamentally a scrolling experience for the user as opposed to a canvas experience. A small amount of 2-dimensional layout is possible, but not to the extent of creating a pre-planned experience with a fixed spatial relationship between elements. Users often begin scrolling before all elements have been rendered, and different users will scroll the page in different ways throughout their reading experience.

Precise placement of elements on a web page goes against the nature of HTML and can only be achieved to an approximation for pages that are able to adjust to different window sizes. Thus, 2-dimensional relationships between page elements are less important than 1-dimensional relationships (what's early on the page; what's later on the page).

Navigation
The N-dimensional aspect of web design follows from the hypertext navigation that is the essence of the Web. Moving around is what the Web is all about. When analyzing the "look-and-feel" of a website, the feel completely dominates the user experience. After all, doing is more memorable and makes a stronger emotional impact than seeing.
In print, navigation mainly consists of page turning: an ultra-simple user interface which is one of the printed medium's great benefits. Because page turning is so limited, it is often not even thought of as a design element. In contrast, hypertext navigation is a major component of web design, requiring decisions like

appearance of links
how to explain where users can go and where each link will lead
visualization of the user's current location
information architecture
Response Time, Resolution, and Canvas Size
Print is immensely superior to the Web in terms of speed, type and image quality, and the size of the visible space. These differences are not fundamental. We will eventually get:
bandwidth fast enough to download a Web page as fast as one can turn the page in a newspaper
screen resolution sharp enough to render type so crisply that reading speed from screens reaches that of paper
huge screens the size of a newspaper spread - in fact, I think that newspaper-sized screens are about the limit where it may not make sense to make screens any larger
For the next ten years or so, the differences will remain and will dictate restrictions on web design: less graphics, smaller graphics, shorter text (since it is unpleasant to read online), less fancy typography (since you don't know what fonts the user has installed), and less ambitious layouts.

Even when we get perfect hardware in ten years, it will continue to be necessary to limit the word count since users are more impatient online and are motivated to move on. It will also be necessary to design web information for small-canvas layouts since portable devices will retain small screens even as we get huge screens in the office.

I predict that new, non-window-based screen management techniques will appear that will allow more interesting utilization of the future huge displays. A bigger display doesn't simply imply larger windows, even though some systems currently promote the notion of "maximization" as the ultimate user goal.

Multimedia, Interactivity, and Overlays
Print can stun the reader with high-impact visualization, but the online medium ultimately wins because of the user engagement that is made possible by non-static design elements. The Web can show moving images under user control and it can allow the user to manipulate interactive widgets. In the future, it will also be possible to use alpha-channel blending and overlay multiple layers of information.
Basic web technology easily allows an interactive map of Chile where the user can click on a city or region to go to a specialized page with more in-depth information. An even greater amount of engagement follows from a more closely integrated interactive visualization where pointing to objects results in explanations or expansions in context, possibly using pop-ups, overlays, or voice-over. Such highly interactive information graphics require the use of non-standard technology and are therefore not currently recommended on mainstream web pages, but they can be used in specialized services and will hopefully become a common part of the Web's future.

Respect (no, Relish) the Differences
Anything that is a great print design is likely to be a lousy web design. There are so many differences between the two media that it is necessary to take different design approaches to utilize the strengths of each medium and minimize its weaknesses.

Print design is based on letting the eyes walk over the information, selectively looking at information objects and using spatial juxtaposition to make page elements enhance and explain each other.
Web design functions by letting the hands move the information (by scrolling or clicking); information relationships are expressed temporally as part of an interaction and user movement.
With better hardware, differences in terms of appearance and layout may diminish. At the same time, more powerful software and a better understanding of interactive information objects will increase the differences in terms of interaction and user control. Current web designs are insufficiently interactive and have extremely poor use of multimedia. It is rare to see a web animation that has any goal besides annoying the user.

Print design is highly refined, as evidenced by glancing through the recent book of award-winning designs. Web design is impoverished because too many sites strive for the wrong standards of excellence that made sense in the print world but do not make sufficient advances in interactivity.

By:Jakob Nielsen's Alertbox
Source:http://www.useit.com

Getting people to look at and return to your web site is important. The greatest web site is useless if it can not be found. How can you get people to come and look at your web site?

Mr. Dunn lists four steps to follow to achieve maximum effectiveness to get people looking:


1. Unique content on each page. Don't just repeat the same information on each page. Give an overview on the homepage and then expand topics on other pages devoted strictly to that topic.


2. Keep your content fresh. Update the information on the pages. Search Engines index thousands of web sites and favor those that provide current information.


3. Create relevant copy on your pages. If your page is about golfing, don't include
information about fly fishing. Create a new page for fly fishing. Use words on your page that people use in their searches. If people most often search for "hotel Ogunquit Maine," have those words, in that order, in your text and title. "Ogunquit Maine hotel" will have less relevance for that specific search. In general, the Search Engines give higher ranking to web sites which have text that exactly matches the search string.

4. Keep your content visible to the search engines. As I have talked about in each of the previous newsletters, the exclusive use of frames , Flash and graphic navigation buttons can render your web site invisible to the Search Engines. It is important to use text along with Flash and graphic navigation buttons. Graphics are great for the human looking at your site. But the Search Engines need text to get these people to the site in the first place.


For the most part, Search Engines rely on the text of your web site to establish your ranking for search terms. Each of your pages should provide unique and relevant text. The Roaring Brook Consultants web site, www.roaringbrook.com, has multiple pages, each with its own focus. These are updated regularly to present a fresh appearance to the search engines.

Source:rbcwebdesign.com

Web Design Tips:
Categories

Categories help your visitor move about your site quickly and efficiently. If visitors get frustrated, chances are they will lose interest and find a site easier to navigate. Well defined categories often require a lot of planning and quite a bit of thought, but the time is well spent. Well defined categories may mean the difference between a buyer and someone who just surfs on in frustration.

Be A Site Visitor
In the first case, we mean visit other sites. Note navigation that works, what entices you to look further and what frustrates you to the point of irritation.

Next, we suggest you put yourself in the shoes of your target site visitor. What do you want to find and how do you go about finding it. Pretend a little here, forget that you have ever seen the site before or that you know its content. Really challenge yourself to find what doesn't work well. Look for intuitive ways to find site content. What clues are used to get you where you want to go?

Get opinions from others and then listen well. It's hard to take criticism but you really need people to surf about the site and tell you what does not work for them. When you hear " I couldn't find my way home", don't chalk it up to them being an idiot not able to find their way out of a paper bag. Instead, realize that while clicking on the banner with the logo seemed obvious to you, it wasn't to someone else.

Consistency and Predictability
Sounds pretty boring, doesn't it? We all want to make our site just a tad different and try new things. But listen up! Try your creativity when writing your content, designing your graphics, choosing your colors (but nothing ugly !), customizing your content. Do not try it with your navigation system. Visitors don't like to figure out how to move about a site. Surfers want predictable and consistent navigation, so stick with it and be creative elsewhere. Many want to move about quickly and if you do not allow them to do so, they'll be off in a flash! After all, navigation is not where you want your visitors to focus.

Speaking of navigation, have two different systems with at least one navigation system not dependant on graphics. Not everyone surfs with images on and many sight disabled people do surf the Internet.


Loud Colors Do Not Equal Creativity
Creative design does not mean you should make your visitors pull out their sunglasses or run off to throw-up! Cutting edge design work does not mean using colors no one else would think of using! Nor does it mean showing that you can use every font color available. Believe it or not, cutting edge designs are often so simplistic that others miss the boat with their gee whiz effects and whirling graphics. Unless you are selling graphics, you certainly don't want your graphics and visual effects to down play your content. Images and colors are enhancements, not the main focal point of a site.

Use Technology as a Friend, Not a Distracter
Once again, there is a lot to be said for simplicity and subtlety. New technologies develop every day, but this doesn't mean that you have to incorporate each and every one in your site to demonstrate your abilities. Indeed, some technology is overused. Let's rephrase that - most new technology is over used at the beginning. Everyone wants to show their ability to grasp the latest and greatest and unfortunately, their attempts usually go over board until they lose their fascination of the new look. For example, a bit of Flash is nice in the right place at the right time for the right site. But, be wise, a 4 minute Flash movie feels like an hour and a half on the Internet. Not too many people are going to wait around for it. Don't get me wrong, Flash is cool, but a little Flash goes a long way. More importantly, Flash is just not right for many sites.

In essence you get to experience what every cook has experienced for years - it takes hours to make, but people want to consume it in a very short period of time. Don't try to elongate their experience.

While we are speaking about technology and things going a long way, unless you are a musician or selling music, please opt out of music files. Most of us have a different preference in music. Should we want music while we surf, we play our own. Audio files slow your page loads and irritate many visitors. Some of us surf late at night and don't wish to wake our households to the tunes of Doggy Dog.

Having said that, there are places where music is just the right touch. If you really believe your site is the place (and please think this over long and hard), tune it down with options for increasing volume if necessary and give surfers the chance to opt out quickly.

Image Projection
Face it, great site design really is about understanding and conveying an image, a picture that speaks volumes if you will. Again, I'm going to remind you that the subject matter of the site should be the focus, not your really cool design. Through your words, design, navigation system, colors, graphics and technology, you convey an image. Remember this when you first begin planning your site. Before you decide what the site will look like and what it will contain, ask yourself what is the image you want to convey.

The site you design should leave an impression, a feeling. So what is the impression this particular site needs to convey? Do you want people to laugh? Does the company you are designing for have a conservative image (such as a legal site)? What is the purpose of the site's product or service? If you are designing a site for lumberjacks, leave a subtle impression of wood. Remember, don't scream "wood" with tacky, dark wood paneling, just leave the "feel" of wood with perhaps small graphics of trees and flora, using greens and browns for your site colors and a few small tools used by lumberjacks.

If you are out after a professionalism concept, don't shock your visitors with bright colors, flashy graphics, tons of animation and cartoons. Use fine photographs, subtle colors, simplistic mouse-overs and a conservative layout. Use a compelling writing style void of unsubstantiated claims and "used car salesmanship". Check and recheck your spelling, grammar and punctuation. Provide oodles of knowledgeable content, scholarly articles and links to other professional sites with the same type of content. Avoid banner ads and pop-up windows like the plague.

Repeat Visits
Last but not least, give your visitor a reason to come back. Continually add new content, update your articles, verify site links monthly, offer new contests, newsletters or other content that keeps visitors checking back. Please remember to reward visitors with what they expect (updated content and an ever growing site) when they do return.

Source:KatsueyDesignWorks

SAN JOSE, Calif.--Spider-Man learned it the hard way, and so are Web developers: With great power comes great responsibility.

Software maker Macromedia granted Web professionals great new powers earlier this year with the release of a new version of its Flash animation tools called Flash MX. The revamped tools are focused on creating useful Web applications and integrating them into sites.

The application-centric approach has a lot of promise, Web design guru Jakob Nielsen said Monday at the opening of a weeklong series of tutorials for Web professionals. But it has also created new opportunities to make Web pages confusing, unresponsive and annoying.

The potential pitfalls were amply demonstrated in a recently completed study by Nielsen's consulting firm, Nielsen Norman Group, which observed how ordinary Internet users navigated several dozen cutting-edge Web sites prominently featuring applications designed with Flash MX.

Some encouraging examples in the study demonstrated applications that made it easy for customers to process transactions or gather information. But there were plenty of instances in which applications had Web surfers clicking randomly around the screen looking for the next step or trying to figure out on their own why a procedure wouldn't work. Less than half the consumers surveyed were able to complete the tasks they set out to do, and some sites foiled every potential consumer.

"I think we're seeing that because it's easier to do these Web applications, you're getting people who haven't done a lot of applications before and may not know much about user interfaces and other elements," said Nielsen, who declared Flash use "99 percent bad" in a report published a few years ago.

Issues with new Flash sites include not making it clear how to get from one step to the next, using unfamiliar terms such as "drop-down menu," and offering inconsistent visual feedback. Most mistakes are the results of designers and developers overestimating the average person's familiarity with technology and trying to cram too much onto a Web page, Nielsen said.

"If we leave developers to their own devices, they create complexity," he said. "It's in their genes to love creating new features. You end up with software that's mainly accessible to other geeks."

Such usability issues are much more critical with Web applications than desktop software, Nielsen said, because the threshold for frustration is much lower on the Web. Prevent a person from easily completing a transaction, and they'll just give up and go to another site rather than spend time trying to learn an unfamiliar application.

"The frustration gap is immense," he said. "It's usually just a few seconds before they give up."

Solutions include designing Web applications for tasks that offer significant benefits for the consumer, reducing those tasks to a minimum of steps, and using interface elements borrowed from the most familiar desktop applications.

Nielsen credited Macromedia, which hired him as a consultant earlier this year, for taking usability seriously and paying attention to such issues while Flash is still relatively young.

"I think we're still in the relatively early stages of determining what these Web applications will look like and how they'll work," he said. "There's still a lot of room to learn."

By:David Becker

Source:news.com

If your web site doesn’t project a professional and polished image to your visitors, your credibility and that of your products and services will suffer. Image is everything— especially online where your competitor is only one mouse click away!
Before your first HTML code is written, you will need to consider your web site’s navigational structure, color scheme and page layout. Is your content developed? If not, who is going to write it?

Once you have done the necessary preplanning, then the fun part begins—coding your HTML pages.

Following are some steps to consider when laying out your web pages:

I highly recommend that you try to get your home page to fit on one screen. Ideally, people shouldn’t have to scroll down to see what your site has to offer. You may need to make your graphics smaller, but that’s okay. Smaller graphics mean a quicker download time.

Be sure to check your pages at all the various screen resolutions. Although only a small percentage of users have their monitors set at 640x480, you will want to make sure your site looks good at that resolution. I design my web pages at 800x600, which is the average resolution. However, more and more users have their computer monitors set at higher resolutions, such as 1024x728. You will see that your pages look radically different depending on the resolution. I personally have been horrified at how ugly my “beautiful” pages look on different computer screens.

Browsers are another very important consideration. Netscape and Internet Explorer both perform the same function—display web pages—but the way they do so is strikingly different.

Your code needs to be very clean and pretty much flawless to display correctly on Netscape. If you miss even one table tag, you will be mighty surprised when you get nothing but a blank page on Netscape. Internet Explorer is much more forgiving. It “assumes” what you meant to do. Netscape, on the other hand, is unassuming. If it doesn’t understand your code, it simply will not display it.

NOTE: An excellent site to check your HTML code for browser compatibility, as well as screen size, is www.anybrowser.com

You will no doubt want to employ JavaScript and DHTML on your site because it’s both functional and cool. However, those technologies work better on Internet Explorer than they do on Netscape. Many of the scripts that you can grab for free at sites like www.dynamicdrive.com and www.wsabstract.com are written exclusively for Internet Explorer, so you will need to be very careful when deciding what to use on your web site.

The titles on all of your web pages need to be consistent—not only in font style, size and color but also alignment. Make sure the spacing between the title and the first paragraph is consistent throughout your site. Make sure your spacing is uniform on all pages.

If your navigation is dependent on graphics (e.g., image maps, icons, buttons, Java, JavaScript), some of your visitors will have a problem getting around your site if their browser doesn’t display graphics. It is extremely important to provide text links in addition to graphic links. All of your users will see your text links, plus text loads faster than graphics.

It is an excellent idea to make your logo a clickable link back to your home page from all of the pages of your web site. Many visitors expect to be able to use the logo to go back home. Don’t forget to also include a text link to your home page.

These are only a few considerations in designing your web pages, but they are very important. Don’t let your beautiful pages look ugly on your visitor’s computer screen. If you are like me, you will find these issues among the most challenging aspects of designing professional web sites.

About the author: Joanne Glasspoole is an accomplished web designer who specializes in developing search engine friendly web sites. Her clients include small businesses and nonprofit organizations in Minneapolis/St. Paul. www.glasspoole.com

By:Joanne Glasspoole
Source:http://www.stickysauce.com