Web Page Design : An experienced visitor's point of view.

1.IDENTIFICATION

Who are you? Why do you have a web page and why should they return or do business with you? These are questions that should be answered on your title page and perhaps included in some form in every page on your site. A simple way of contacting you should be in place. One example of this is an invitation at the bottom of each page, to email comments to you, with a link that activates the email portion of the browser.

2.CONTENT & DESIGN

The download period is your most vulnerable time on your web page. Keep your Index page simple.

Make sure you have text enough in the top of the page to give the visitor something to read while your graphics are loading. Keep graphics to a minimum. Use short paragraphs and a lot of room for the eye to rest. A designer or advertiser calls this "White Space." "White Space" is VERY IMPORTANT. It can make or break any advertising space. Too little makes a document seem too busy. Make sure your text margins can float if your skill or HTML editor can manage it. Include graphics that are in harmony with the rest of the page and the message that you want to present.

Make sure your background and your text can be seen by persons who are colorblind. AND, if you are colorblind make sure someone else who is not colorblind previews your work before uploading it.

Never place a white text on light background or dark text on a dark background. That is an immediate turnoff. It can make your visitor very irritated at the page designer. It may be just the thing to motivate them to look elsewhere for information and that elsewhere may not be on your site!

===Handicap Accessibility. If possible, make your site determine if the visitor browser supports frames. If it does not, you should have an alternate page(s) with the information in large type, text only, for persons who are blind or have other sight problems and are visiting your site with a text reader machine. You may include an image in between paragraphs if it is fully described. If you do not want to do this for some reason the graphics should be at the end of the document with a warning that they are there and that this is the end of the text. Again provide your name, business name, phone number, address, and email address on this page if you want them to have it.

One last thing on the text only page. . . . Extra borders and===or -0=-=-=or the like sound like the text machine or the software has hung up like an old record player. Please do not use them.

3.SITE MAP or INDEX

This is necessary on every page. Link every page in some way to every other page in your site. Failing that, use a frames format and make sure that you preserve your margins on all sides of the frames. Place your site map in the right frame. I suggest that you provide a way for the person to determine where they just came from and a helper to get them back to the very last page presentation they visited on your site. The fewer times a visitor needs the back button on their browser, the less likely they will leave your site till they have seen it all.

4. It is not advisable to provide invitations to leave your site on the top of your index page. If you advertise or provide links to another site, you might want to make sure there is a way for a visitor who left your site to return from THAT link. This is called a reciprocal link. You do not need to hide your links. Just do not leave invitations to leave where a person is really tempted to do so.

5. When making lists with graphical bullets (such as picture of a globe, a diamond or ball), if possible make them into radio buttons or links to the area in your web page that illustrates your point. When using graphics, remember that many people will click on a graphic for a description, or expansion of the information that picture represents. Some websites use this to their advantage to create pleasant surprises for their visitor. Some visitors search for those surprises. Perhaps you should consider providing those surprises.

6. The more often you change your web page, the more often a person may visit. There are services of which you may subscribe that informs the subscribers when a member site has changed.

7. You may also create a guest register. Many people will sign the guest register, thus providing you leads for future activities. You may also notify the resulting mailing list when your web page has changed. If you are so inclined, a newsletter will provide you with a further opportunity to present your views or products.

8. Once you have created your site, view it with as many browsers as you can. Read your site with an IBM and a Macintosh. I have been told that 62% of all web sites are created on a Mac and about 35% of the readers are on Macs.

(Personal Observation)

9. If you are friendly to a Mac User, you have a great chance to gain his loyalty. He may even advertise your site to other Mac Users. If you want a lot of positive hits on your page, create reasons for a Macintosh user to visit and ask for his referral to your page.

These are only nine of the many suggestions I have made when visiting a web site. I visit for only 20 minutes. That is as long as I expect any visitor to remain interested in any site. If they need the bottom scroll bar to read your text, I expect them to leave immediately. Your visitor is your guest. Do not make them work to enjoy your site.

Sitemap
Ecommerce
Financial
B2B
Free Evaluation

Source:http://www.myconet.com

Keeping Images Small

Tips to Optimize Images for Fast Downloads

When you create a great Web page, the first thing that people will notice is if the page loads quickly or slowly. The simplest way to make sure that your page loads quickly is to create small images.

There are three ways to make sure that your images are small and download fast.

1.Keep the dimensions small - crop your imagesProfessional photographers learn to take photos of exactly what they want in the shot, with no wasted space. However, it is very common to see a scanned photo on the Web with one person and a huge expanse of nothing all around them. This makes for an unnecessarily large photo.

2.Use as few colors as possibleWhen you create GIF images, you are given the choice of what palette to save with your images. Most people are aware of the Web palette, but what you may not realize is that if you have a three color image, you are saving 213 additional colors in your palette that your image does not use. This can add additional space.The best way to get around this is to convert your GIF images to the Web palette and then convert them again to the exact palette of the image. This way you will be sure that your image is browser safe, and only uses the minimum number of colors.

3.Put your images through an optimization programIf you don't have the time or inclination to optimize your images, don't worry about it too much, as there are many companies and programs that will do it for you.

Sitemap
Ecommerce
Financial
B2B
Free Evaluation

Source:http://webdesign.about.com

The Role of Flow in Web Design

When things are going well in life, you move through processes without thinking about them. At the point at which you master a skill and can do it without thinking, you are able to use your mind for more advanced kinds of activities. Learning to type, or to drive a car, takes time, but once you obtain the skill you are free to pursue the high-level goals of writing an essay or driving to the beach. In designing Web pages, or anything that people interact with, a prime goal must be the achievement of flow for the user: Enable them to transcend the mechanics of links and navigation, and focus completely on what they want to achieve.

The notion of flow, or optimal experience, is described in eloquent detail in Mihaly Csikszentmihalyi's book "Flow". The experience of flow is most pronounced in creative activities, like writing code or participating in sports, but in a much smaller sense, flow is achievable in almost anything. In a more abstract and functional definition than Mihaly's, I think of flow in a design as the movement of a person from their desire to their satisfaction, in as natural and easy a way as possible. A good developer, designer, or creator of anything strives to allow users to experience this kind of flow.

The irony of flow in design is that when it is achieved, the design itself often goes unnoticed. Paper clips, suspension bridges, and the computer mouse are all great designs, but are noticed by most only when they fail. This traps the egos of many developers and designers, who might feel frustrated by the lack of recognition for their brilliance. Sometimes you'll see a software product or Web site that goes out of its way to make you aware of what the designer has done for you, or what they think about the world, but this is rarely of benefit to the user. True design includes personal restraint to avoid tainting user flow with designer or developer ego. In most cases, if the user noticed something, or had cause to forget their desire and think about the mechanics, you've blown it already. It's a poor tool that places itself before its purpose.

To achieve flow, you have to invest from the first day of your project. Every page and every element of your site has to be created with the user's perspective at the core of your thinking. The easiest way to achieve this is through asking questions of your sketches and designs as you create them, before you bring them into the usability lab. Use these questions as seeds of discussion for brainstorming, and for comparing and generating alternative ideas. There are two kinds of questions about flow: What is the site structure and what is the task your user is trying to achieve?

Flow in Site Structure
When considering designs for an entire Web site, or just key elements like the home page and navigation systems, you must have knowledge about the common activities your users need to do. You can probe for your high-level flow by considering the follow questions in evaluating
your designs:

Why are users coming to your site? What needs or desires do they have?
How will you ensure that those desires or needs are satisfied?
What assumptions can you make about your users and their skills?
What are the 5 or 10 most important commands or tasks users need to complete?
Are these 5 or 10 actions the clearest and simplest for users to access? (And complete?)
How can users navigate between related areas of your site?

In answering these questions, you'll be forced to make choices about how things are presented, including demoting certain things and emphasizing others. This is the heart of design: making trade-offs around a set of constraints. You can't possibly achieve flow if common activities are as difficult for users to pursue as things they never need. Flow requires focus on the part of the designer.

Flow in Tasks
Once your users are in the right place to do what they want, flow comes into play as an attribute of how much work they need to do to satisfy their goal. Imagine being in a rental car and not being able to figure out where to put the key to start the engine. You'd know you were in the right place for your task, but you'd be frustrated as to how to go about completing it. Your questions would not be about location, but about the steps you need to follow to start the car and drive to the beach. For each task, you can examine the task-level flow by considering the following:

Where does the user start this particular task?
How do they get from one step within the task to another?
What happens if they get lost along the way or make a mistake?
How will they know when they are done?
What common mistakes are they likely to make? How are these handled?
How does the layout or organization of the page make the answers to these questions as self-evident as possible for users?
Flow Deferred
Learning Microsoft® Visual Studio® takes time, as does learning to drive a car, or typing at a keyboard. The design trade-off in these examples is the time investment required versus the long-term payoff for making it. You could make a simpler automobile interface, with one push button for turning left and one for turning right, but it would not provide the level of sophistication needed in order for a driver to successfully navigate the road.So, in some cases, it is acceptable to deliberately delay the point at which users can achieve flow through your design. However, this should only be done with real data and deep consideration about the people you are designing for. Is the investment justified? Do they need that much sophistication? In most cases, developers and designers overestimate the complexity of what people need. When in doubt, strive for simplicity. Only make things complex and involved if you have evidence that it's the right
trade-off.

On the Web, creating learning curves is particularly unreasonable. Users spend most of their time on other Web sites, and the return on investment they would receive for the learning curve required on your site is very low. This is why inventing new kinds of navigation structures or using nonstandard conventions hurts users so much. Notable exceptions justifying additional learning curves include Web applications like Hotmail or online banking, where there is manipulation and storage of data. Because the user needs in these domains are more sophisticated, it follows that the tool to satisfy these needs might need to be more elaborate. They should still be as simple as possible, but are likely to be more complex than your average read-only news Web site.

However, even in cases where a high learning curve is warranted, flow still applies. Training users and helping them through the learning process is actually just a different set of user tasks. You can use the same principles and design approaches for helping users move through the learning process as you do for designing the Web site itself. Avoid the trap of relying on cop-outs, such as "once they learn it, they'll like it." You want to strive for making them enjoy using your design even while they're learning it.

Measuring and Using Flow
For most of the questions I've discussed in this column, there are well-established usability engineering techniques that can provide answers. Cognitive walk-throughs and heuristic evaluations are low-cost ways to see how the parts of your Web site fit together from the user's perspective and will give you a sense of how things flow. Usability studies can be designed to examine these aspects of a design, and provide data about where your current designs fail or succeed. Minimally, you can set goals for your project around these questions, comparing this month's designs to last month's, or your Web site against a competitor's. This won't measure your user's internal sense of flow, which is subjective and difficult to capture, but it does give you an approximation that can be measured, compared, and used to make effective decisions.


Sitemap
Ecommerce
Financial
B2B
Free Evaluation

Source:http://uiweb.com

Build Your Site In 9 Steps

So, you are thinking of doing a site? Great! But do you want to know how to create a site where visitors will say WOW! Read On.

1. Think of a topic, idea.

What do you want to make your site about? When you do this, also think as a visitor and why would you come to your site? You have to offer something that people want and need. When you'll be clear about what you want to do, proceed to the next step.

2. You got an idea of your future site, right.

Is that enough for a site? The answer is NO. Now you have to think of a layout, colors, and content. Colors are very important, because if you'll mix the wrong ones, it might be hard for visitor to read your content, which is the heart of your site, and then he'll leave, because he knows that there are hundreds of sites like this on the web. It's recommended to draw your content on a sheet of paper or in an image file.

3. Find a host.

If you don't want to spend any money, there are lost of sites that will host your site for free. Although most of them place a banner or a pop up on your page, which sometimes might look unprofessional. After all, it's completely free. But if you run a business, you should get your own http://www.you.com domain. It costs only 70 dollars for two years, so it's not really that expensive, and it really worth it. To register visit Internic

4. Start writing your first page.

You HAVE to know at least basics of HTML to create a quality site. You don't need to remember all the tags and formats but you got to know how and what is HTML. Although there are hundreds WYSIWYG ( What You See Is What You Get) editors, you'll be able to create a better site with the basic knowledge of HTML. To learn the basics please visit our tutorial section. I'm telling you to do it, because it's the only way you'll be able to fix the errors in your site, and trust me you'll have plenty. Everybody does.

5. Take a look at your page.

Never forget the following factors: 1. Does it loads fast? 2. Does your site has an easy navigation? 3. Is you grammar and spelling is correct? 4. Do you have something that people need or find useful? These are few of the most important factors in each site. A lot of people forget about them, and their site becomes... a shame. Even though your page is one the web, it doesn't mean that you can spell wrong or provide poor content.

6. Redo your page!

90% of people after they look at their first draft find many mistakes. Redo your page and then look at it again. Follow the step 5. It would be very useful if you would show your page to some friends or family. They can notice something, that you didn't find. There are some clubs on Yahoo which specialize on critiquing page. Here's an example: Web Judges. After you'll do it ask yourself: Do you like what you see?

7. Start creating all other pages.

Don't get confused in them, and follow the principle of a tree. It's recommended that all of you page should follow some basic pattern or format. For example, Echo Web's every single page looks somewhat similar, right? All of the pages have red bars and black background with the yellow text.

8. Take a look at your site.

Repeat step 5. Looks good? Great. Upload it to your host. Now it's the time for you to start promoting your site. Otherwise, how will people are going to be able to find it? Visit our tutorials section for a special two-part tutorial on how to promote your web site. It got many tips and tricks that you won't find anywhere else.

9. You finished with all 8 steps.

Now you are waiting for visitors to come. Does it means that you are done with the web site? That you can forget about it? Once again, NO. The web site is a cycle. It's not a newspaper which you publish once and then forget it. People will start coming to your site for a while, but the point is to keep them coming back. How to do that? Update your site at least once in two weeks, have something useful and interesting on your site.

Sitemap
Ecommerce
Financial
B2B
Free Evaluation

Source:http://www.pageresource.com

Color Tips for the Web

Finding Color Triads
If you've read my article on color harmony you will know that color triads are color groups that work well together and bring a lot of life to a design. Using hexadecimal color codes, it's easy to create color triads from any color set you might have.

A very basic color triad might be orange, purple, and sea-gren. Written #fc0, #c0f, and #0fc. In this color triad the three characters are f, c, and 0. By changing the combination of the triplets, you can create different colors that are harmonious with one another. Here's how to do it.

1. Pick your primary color.
For the above color scheme, I used orange: #fc0.

2. Rotate the characters so that the three characters are in completely different positions.
I put f last, c first, and 0 in the middle. This gave me a light purple color: #c0f

3.Rotate the characters one final time so that they are all in different positions.
There is only one combination left where the characters have not been in those positions, a sea-green: #0fc

You can do this with non-browser-safe colors as well, just treat each double character as you did the single characters. For example, in my iris layout I used: blue #859CFE, pink #FE859C, and green #9CFE85. The three double character groups are 85, 9c, and fe.

Is Browser Safe Really Required?
A few weeks ago I posted an article about browser safe Web colors. I got an email from "Jason" saying "please don't encourage those newbies out there to produce even more putrid sites based on the antiquated 'web safe' color palette." While his letter then moved from there to being even more offensive towards me specifically, he does have a point even if he felt the need to be rude to make it.

The browser safe Web palette was developed seven or eight years ago when it was very common to find computers with 8-bit monitors that could only support 256 colors. This meant that if you used a color scheme that used colors that were not browser safe, they would dither and this could look spectacularly ugly on those screens. I saw instances where a color that was a pretty light green ended up looking almost hot pink on an 8-bit monitor.

The thing is...
If you don't know who's viewing your site (either because you don't get browser and monitor stats or because you don't use them) you won't know what your site looks like to them. Using browser safe colors is a safe bet. And unlike Jason's assertion above, it is possible to create nice looking pages using a browser safe color palette. It is also almost easier to create an ugly looking page using non-browser safe colors. After all, there are more of them!

The important thing about browser safe or non-browser safe is that you make the choice knowingly. I chose to use non-browser safe colors on the iris layout because it better matched the iris. However, if I knew that I had customers who used 8-bit monitors, this is not a layout I would recommend and I would consider switching to browser safe colors.

When you choose your color palette, you should understand color theory so that you get colors that go well together. You should also understand your audience, so that you use the Web safe palette if required.

Sitemap
Ecommerce
Financial
B2B
Free Evaluation

Source:http://webdesign.about.com

7 Ways to Create Loyal (and Responsive) Subscribers

When you first start a newsletter, you're excited. You get traffic and subscribers from places where you're a known commodity. You're sincere and focused. You answer your email, promptly and in depth. You have a real relationship with your subscribers.

They know you, they like you, and they trust you. You're having fun.

At some point, if your list is growing like it should, it gets hard to maintain that level of involvement. I mean, how many people can handle continual email from 20,000 close personal friends?

You can't. Fortunately, you don't have to.

Here are 7 things you _can_ do, right now, to develop and maintain the trust and feeling of connection that will help to get your subscribers more active, involved, and likely to buy.

1. It All Starts With Your Welcome Message

You want to establish your personality with the reader, and what they can expect from you, right at the beginning. Write your welcome message with the same tone and attitude that you use when writing your regular issues.
Ask for feedback, make offers, and do just as you always do. Set their expectations for later issues.
Establish a pattern of consistency, which is one of the most important characteristics leading to trust.

2. Communicate With Them One-To-One, Via Email

Sometimes your subscribers will send you unsolicited feedback on your newsletter. While it's not always possible because of volume, you should try to answer as much of this email as possible. Make it personal. Talk with them the way you would with a friend.
You can also get them to email you by simply asking them questions. The key to this, in both word and "voice," is to always remain approachable.
Allan Gardyne (of http://www.associateprograms.com)is a master of this. It's his nature to treat people with respect and personal attention. And believe it, he's got a VERY responsive group of people.

3. Ask Their Opinions - And Act On Them!

Take surveys of what your subscribers want. What types of articles, products, reviews, and editorials? What issues concern them? What features would they like to see added? What types of products are they looking for?
Obviously there will be some requests that you can't fulfill and keep your business working. ("Everything for nothing" is a good example...) Within those constraints, try to give them as much of what they want as you can, while still making a profit.
With just a little imagination, you should be able to find ways to make a profit BY giving them what they want.

4. Give Them Relevant Information

Relevant Information is anything that solves problems or improves their life in some way that's related to what you promised when they subscribed.
If your newsletter is about autoresponder marketing, stick to that. People who subscribe to niche publications want something related to that niche. Anything else undermines their trust in you.
If you run a publication that covers a broader topic, make sure the info you give people is new, related to the topic, and useful to the majority of your subscribers.

5. Publish Their Comments

Ask for reader feedback, and publish it. Whether it's comments on your newsletter, tips and tricks of their own, answering reader questions in a separate column, or guest editorials on hot topics in your area of expertise.

Don't just tell them you're listening. Show them.

6. Consider Your Subscribers As Partners

Think of things you can do WITH your subscribers, that benefit you both.

Run brainstorming chat sessions on topics they suggest. Edit and add to the transcript, and you have the beginnings of a new product.

Create a directory for them to network and set up joint ventures. Join in. Do business with them.

Create a way for them to make special "Subscriber Only" offers to each other. The people making the offers get great advertising, and the rest get good deals.

If you think of your subscribers simply as prospects for your products, you're seriously limiting your options.

Every really good publisher I know understands this.



7. Say "Thank You"

Let them know, in tangible ways, that you appreciate them. Give them something occasionally as a thank you. Perhaps a special article in PDF format, which they can give away to their visitors. Or maybe a free ebook that you bought reprint rights to. Or a piece of software that you had developed that fits your theme.


Sitemap
Ecommerce
Financial
B2B
Free Evaluation

Adding an IE Favorites Icon

Every Web browser has unique characteristics that distinguish it from the others. One of the interesting features of Internet Explorer 5 is that it will add a custom icon to the favorites of readers who bookmark your site.

First Create Your Image
Using a graphics program, create an image that is 16 x 16 pixels. This is small, so try out many different versions until you create the image that will work for your site.

Save the image as a GIF or BMP file with 256 colors or less. Icon files, like Web images, have to display on computer monitors, so they can't reliably display millions of colors. However, since an icon file is for Windows displays only, it can be 256 colors, rather than the Web standard 216.

Converting it to an Icon
Once you have an acceptable image, you need to convert it to the icon format. There are many icon editors available, and Sue Chastain, the Graphics Software Guide, has a list of some good ones. I used IconForge by CursorArts. Be sure to save the file as favicon.ico.

Publishing the Icon
It is simple to publish the icon, simply upload it to the same directory as the file you want bookmarked.

You can also put a different icon on every page of your site (if you like), or point to one icon in many folders. To do this, you add a link reference to the head of every HTML document that you want the favorite icon associated with.

Sitemap
Ecommerce
Financial
B2B
Free Evaluation

Source:http://webdesign.about.com

Adding Audio to your Website

Should you add audio to your website? Before we even start, let's answer one simple question. Do we even need audio on our site? Let me answer this for you…unless your site is in Flash AND has a high level of interactivity, absolutely not!

Why don't I want audio on my site? This is simple really… bandwidth. It's not that you don't have bandwidth, but chances are quite a few of your customers don't (like all those AOL users), even if it's 'streaming audio'. And with all that other insane stuff your slow customers are downloading (ie - java, images, possibly some flash elements, etc.), you don't want to be adding more to their list, especially a 1+mb song. I'm sure the song sounds great, and if your kid wrote/sang/performed it, I'm sure it's wonderful and the world should hear it… but not on your website.

Anyway, you've heard my warning. Here's how you do it anyway because you don't care that I just told you not to do it.

Option #1: Stream your audio via Flash.

This tactic is semi-complicated and will not only require knowledge of both Flash and HTML, but also some basic knowledge of Action script as well. You'll probably be able to find a good tutorial or example on how to do this at Flashkit.com. The advantage to this is that the user never actually downloads the file and streaming the file doesn't take nearly as much bandwidth.


Option #2: Embed your audio into Flash

Why this tactic over others? You can compress the audio more and make your load times faster. This requires no action scripting knowledge and is very simple. There's an easy tutorial in your Flash help on how to do this.

Option #3: Stream the audio with Windows Media

This is a nifty feature, but requires Windows Media Services to be installed on your server. So if you're on Linux, you're out of luck unless you use another method such as Quicktime or Real Media, which are both starting to die. If you can actually pull this off, your server administrator will able to give you code to insert into your site to stream the audio.

Option #4: Attach the audio

This is the not so smart way because the user must download the file before it plays, but it works nonetheless. You'll be able to do this easily via you HTML editor such as Dreamweaver, GoLive or FrontPage. Do some research on the net and you'll even find you can attach audio to a site via CSS. The #1 big problem with this is bandwidth as I've been preaching. But also how the audio is played depends on the user's computer setup. If the user is setup to play all files in Windows Media Player, the player will pop open, which is very annoying.

Some things you might want to remember assuming you have gotten this far in the article (audio is bad, remember?). Never use a WAV file or an unknown file format. They're either too big to download or won't work on everyone's computer. Stick to formats like MP3 or WMA, which are highly compressed, still sound good and work on virtually everybody's computer. Yes, by adding audio you will run into cross-browser compliancy issues, meaning your audio will not play on every browser.

Of course, if you have a high end Flash site with animation, interaction, etc… maybe a Flash intro even, I'd highly recommend adding some audio to jazz things up. Audio simply isn't a logical solution or addition for basic e-commerce websites.


Sitemap
Ecommerce
Financial
B2B
Free Evaluation

Source:http://www.monstersmallbusiness.com

Optimizing Images / Graphics for the Web:

Decrease load time without sacrificing image quality.

Optimizing images for the web will increase the speed of your website
dramatically. Before we begin, there are a few things you are going to need to know.

Image Formats and extensions >>
Every image format ends in a three-letter extension, the most common are .BMP, .JPG, .GIF and the newcomer, .PNG. First and foremost .BMP files are usually huge and can be further optimized. .PNG files are the new bad boys of the net, they are extraordinarily flexible- they can be optimized and while showing excellent quality. That leaves us with the two most common web extensions, .JPG and .GIF.

JPG files are generally used for high quality images since JPG files do a better job at retaining subtle color changes such as gradients and large sums of color. JPG files are used when it's pertinent that you retain quality in your image, but are generally always larger than GIF files because they compress at a color bit rate.

GIF files on the other hand, are always compressed. They can be compressed using 128, colors, 256 colors and using a full range of colors (notice they're not compressed at a bit rate). Naturally, the more colors you use, the larger the file will be. The single most advantageous feature of GIF files is the fact that they can contain a transparent background while JPG files cannot.

This brings us to what rules we should follow in terms of size. On the web we don't think in terms of inches or centimeters, we use a different form of measurement- pixels. The next thing to know is what screen resolution your website is designed for. Many older sites are designed for 640x480, which has nearly died in the web world. Most web sites are now designed for an 800x600 resolution, but that's starting to lose its favor to the now common 1024x768. Playing it safe, anything at about 300x300 is probably a good size for a MonsterCommerce large product view. Every site is different and the best way to find the right size for your images is to experiment with the size for optimal performance.

As a developer for MonsterCommerce stores, I like to compress the daylights out of the thumbnails using GIF images (for faster load times) and provide a really nice high quality image for the actual product image using. JPG's. I figure if a person's going to click on that product they are going to want to see a nice image (they are probably willing to wait a few extra seconds to download the larger image.

So this brings us to the next question. How exactly do we resize and/or compress our images? Well there's hundreds of ways to do it, but I'll run over a few ways that are quick and easy.


Dreamweaver - Yes, Dreamweaver saves the day again! The initial install comes with a 'Create Web Photo Album' option under 'commands' menu. You can use that, but that's not the good one. Visit this link: Click Here and download the Macromedia 'Web Photo Album 2.1'. It's worth it. After you've installed the extension, just open up Dreamweaver and fire up the wizard. Follow the prompts and you'll have your images recreated and optimized in no time.

Windows XP - If you're using Windows XP, there's a neat image re-sizing tool built right into Windows. You can access it simply by browsing to where you have the photo stored and selecting the image, right clicking on the image and select 'resize image'. You'll then be guided through a quick wizard where you can select some options on how you want your images resized.

Fireworks/Photoshop - You can always resize the images individually in Fireworks or Photoshop, but this really isn't the best way to do this since you need to work with each image individually. When exporting as a GIF, note which color settings you choose, 128, 256 or exact. The same goes for your JPG files. Be sure to use the bar selector to select how much compression the image should receive. 80 is the standard in a JPG and it works. Out of the two programs, I find Photoshop better for resizing and compressing images.

ACDsee - As a last resort (if all else fails), visit www.acdsystems.com and download the trial version of ACDsee. After installed, use the program to find your photo(s) and create a web page from the menu. It's as simple as that.

Ultimately, your goal in the end is to come up with an image that is compressed, that looks sharp and that takes up very little disk space. If your image is over 50kb, you may want to consider what you can do to make the file size smaller. You should definitely consider resizing the image if it's over 1mb. Most of the time a form of compression or resizing will help make the file smaller, thus make your site load faster.

Sitemap
Ecommerce
Financial
B2B
Free Evaluation




Source:http://www.monstersmallbusiness.com/

Cascading Style Sheets - Styling with CSS

There is an abundant amount of design and CSS (Cascading Style Sheets) information on the net. But what is CSS and why exactly are Cascading Style Sheets so important?

Style sheets are a style, or skin, of elements contained in a web page. CSS elements enable designers to 'style' or control the look from within an HTML document, including ASP, PHP and other various markup languages.

CSS is almost as simple as HTML and enables you to have more control over your designs.

There are several ways to work with CSS -

1.Inline

2.External sheets

An inline sheet is written and used within your page, typically in the header and an external sheet is imported from the header.

You can start a style in the header the same way with the style tags. Either way, the style works pretty much the same and calls the same commands.

There are several things here to notice.
Notice the name followed by brackets. This tells the HTML page what the style is controlling.


Notice that within these brackets are definitions. Each definition has a setting, separated by a colon. The definition is completed with a semi-colon.


The definition is predetermined. You can find lists of definitions that can be used all over the Internet. I used a few common ones in the example above, but ultimately resort to Dreamweaver's built in reference guide for a complete list of examples and specifically how and when to use them.


The "definition" setting is controlled by you. For instance, I chose the 'font-size' to be 10px. That means the font size will be a size of 10px throughout the body of the document.
So, what can be controlled through CSS? You can control fonts, font colors, backgrounds, table borders, cell widths and heights, background images and a whole lot more.

Now the important question, why is CSS so useful? The benefits of CSS are countless. You can use a style within a single HTML element or you can write a style sheet as we did above in the header to control a single document. You can also import a single style sheet to control various elements on different pages. Importing your sheet allows the flexibility to change HTML elements throughout an entire site without having to change many pages, saving significant amounts of time. Importing is particularly useful when you have a site with a large amount of pages of in a web application.

So should you know CSS? You shouldn't necessarily 'know' it unless you're spending a lot of time designing. Even if you're not a designer, you should at least make an attempt to use the basics of CSS in your design.

CSS also provides added control over future changes and manipulations.

Sitemap
Ecommerce
Financial
B2B
Free Evaluation

Source:http://www.monstersmallbusiness.com

Keyword Competition Analysis & Design Analysis

Designing a successful storefront is not an easy task. How exactly can you exceed the efforts of your competition?

First, its important for you to perform an extensive competition analysis and to define your target market

Keyword Competition Analysis >>
Using the 'View Source' utility in Internet Explorer or 'View Page Source' in Netscape enables you to view the inner working of your competitions sites. You can either read that code by pasting it in notepad or simply copy the code and view it in your favorite HTML editor (if you aren't too adept in reading straight html code).

The most important aspects of the code include the keywords, the title and the descriptions. You certainly do not want to "copy" or plagiarize your competitions work, but you do want to create a database of keywords used by your top ranking competition. You may also want to utilize a keyword suggestion tool to learn the most popular search terms for your industry.

Design Competition Analysis >>
Your next task is to perform a design analysis of your competition. Are your competitors boasting flash with little text, lots of text, little graphics, or lots of graphics? Note certain color schemes and think about which one might work best. For instance, black has a tendency to give a dark and overwhelming feel. Pastels usually give off a Springy look or baby feel while deep blues and maroons combined with khakis and yellows can give off a very professional look. Then ask yourself whether you want a similar look or want something completely different to your competitors. Having this information prepared will save you time and money when building your storefront.

A few other things you may want to consider are current trends on the Internet such as enhanced client communication. What level of communication do you want to provide? What means of communication will you provide your customers? The basics such as phone number, e-mail address and web-based forms are mission critical and chat rooms, bulletin board systems and interactive live chat take communication one-step further.

It's important that you invoke a level of confidence in your products and services. If you wish your online business to succeed in a competitive online landscape you need to be prepared before the design process begins.

Sitemap
Ecommerce
Financial
B2B
Free Evaluation

Source:http://www.monstersmallbusiness.com

Liquid CSS Layouts - Design Alternative to Table Based Websites

How to transform fixed table layouts to liquid CSS based layouts
This article is a step by step case study showing you how to transform your table based web site to liquid CSS based layout. Although the site we're applying the css layout to is a very specific case, throughout the tutorial we will provide various solutions to be applied to your particular case.

Before reading please be aware that in order to fully understand this article you need to:
Have understanding of CSS (Cascading Style Sheets)
Have understanding of HTML
Be familiar to the liquid design concept
Understand the necessity of cross-browser testing
Have some basic knowledge of accessibility guidelines
Have the patience to go through the code and tweak it until the result is satisfactory

Advantages of CSS liquid design over other types of layoutsDecreases the HTML/body text ratio
Is completely flexible
Increases accessibility and usability of a site
Works well on modern browsers and on some older browsers. Proves to be usable on text-only browsers.
Looks as good if not better than table layouts once it's ready. The misconception that css layouts aren't as visually appealing as standard layouts has no argumentative base.

Drawbacks of the process
Requires a lot of work, time and patience in order to make it compatible with older browsers and grasp all the details that make a liquid css layout perfect.


Key principles to CSS layouts
Style sheet layouts are based on the concept of absolute positioning. That means that every element is perceived as a unique entity that can be placed wherever on the page in relation to its edges. In this tutorial we will work with div boxes that act as holders for various elements.

The two most important things to remember are the margins one can set in relation to the edges of the page and the stack order of the div boxes.

The margins of can be set in such a way that a div box can be placed anywhere on the page. There is an illustration of the concept below. You can easily imagine how this box could be placed anywhere on the page. It is extremely useful because while visually they retain the position required by the design, in the source code, it can be placed anywhere.


The stack order of the div boxes allow overlapping or preventing it, if necessary, That way you can hide part of a div box and place something on top instead. Stack order translates to z-index number. Yes, it's that CSS command that everyone finds difficult to understand at first contact with CSS. Below there is an illustration that shows exactly how z-index works.


You can use your imagination to find countless ways to use the z-index and margin properties. The flexibility of CSS allows virtually any layout to be easily created.


Let's begin
Please bear in mind that all snapshots are in fact thumbnails. You can click on them to see the full image.


Liquid CSS layouts tutorial structure
Introduction How to transform fixed table layouts to liquid CSS based layouts
Step 1 Analysing the site's original layout
Step 2 Identifying key areas
Step 3 Analysing the source code of the original and final layout
Step 4 Let's create the CSS layout
Step 5 Let's reinclude some of the initial elements
Step 6 Let's apply liquid design
Step 7 Making the existing boxes expand
Step 8 Creating an additional box for liquidity purposes
Step 9 Left and right margins and other browsers
Step 10 Final testing of liquid CSS design
Step 11 Cross browser testing of CSS layout

Sitemap
Ecommerce
Financial
B2B
Free Evaluation

Source:http://www.mardiros.net

Liquid CSS Layouts - Design Alternative to Table Based Websites

How to transform fixed table layouts to liquid CSS based layouts
This article is a step by step case study showing you how to transform your table based web site to liquid CSS based layout. Although the site we're applying the css layout to is a very specific case, throughout the tutorial we will provide various solutions to be applied to your particular case.

Before reading please be aware that in order to fully understand this article you need to:
Have understanding of CSS (Cascading Style Sheets)
Have understanding of HTML
Be familiar to the liquid design concept
Understand the necessity of cross-browser testing
Have some basic knowledge of accessibility guidelines
Have the patience to go through the code and tweak it until the result is satisfactory

Advantages of CSS liquid design over other types of layoutsDecreases the HTML/body text ratio
Is completely flexible
Increases accessibility and usability of a site
Works well on modern browsers and on some older browsers. Proves to be usable on text-only browsers.
Looks as good if not better than table layouts once it's ready. The misconception that css layouts aren't as visually appealing as standard layouts has no argumentative base.

Drawbacks of the process
Requires a lot of work, time and patience in order to make it compatible with older browsers and grasp all the details that make a liquid css layout perfect.


Key principles to CSS layouts
Style sheet layouts are based on the concept of absolute positioning. That means that every element is perceived as a unique entity that can be placed wherever on the page in relation to its edges. In this tutorial we will work with div boxes that act as holders for various elements.

The two most important things to remember are the margins one can set in relation to the edges of the page and the stack order of the div boxes.

The margins of can be set in such a way that a div box can be placed anywhere on the page. There is an illustration of the concept below. You can easily imagine how this box could be placed anywhere on the page. It is extremely useful because while visually they retain the position required by the design, in the source code, it can be placed anywhere.


The stack order of the div boxes allow overlapping or preventing it, if necessary, That way you can hide part of a div box and place something on top instead. Stack order translates to z-index number. Yes, it's that CSS command that everyone finds difficult to understand at first contact with CSS. Below there is an illustration that shows exactly how z-index works.


You can use your imagination to find countless ways to use the z-index and margin properties. The flexibility of CSS allows virtually any layout to be easily created.


Let's begin
Please bear in mind that all snapshots are in fact thumbnails. You can click on them to see the full image.


Liquid CSS layouts tutorial structure
Introduction How to transform fixed table layouts to liquid CSS based layouts
Step 1 Analysing the site's original layout
Step 2 Identifying key areas
Step 3 Analysing the source code of the original and final layout
Step 4 Let's create the CSS layout
Step 5 Let's reinclude some of the initial elements
Step 6 Let's apply liquid design
Step 7 Making the existing boxes expand
Step 8 Creating an additional box for liquidity purposes
Step 9 Left and right margins and other browsers
Step 10 Final testing of liquid CSS design
Step 11 Cross browser testing of CSS layout

Sitemap
Ecommerce
Financial
B2B
Free Evaluation

Source:http://www.mardiros.net

Using Tables as a Strategic Sales Tool

Why Tables?

Tables have helped me to do the following while designing my website:

1. Establish organization.
2. Create sections on my web pages that are neat and uniform.

3. Build a unique sales presentation with direction.

With tables, I've been able to build an effective site that gets results, and you can too!
Below are a couple of table tips to help you design a customer-oriented site for web success:

Table Tip One - The Two-Column Web Page

What I mean by "two-column" is to divide your table into two columns - one for your text writing, and one for your navigation bar.

Which side your navigation bar will be on is up to you, but it is recommended that your side navigation bar be located on the left for the best results. The reason for this is that a person's eyes are generally drawn to the right of a page (even when online). So, you
can see why it would be wise to have your "headline" and sales presentation to the right.

However, if you're operating a site that's very similar to a mail order catalog with many products, you'll want to place your side navigation bar on the right. Have you ever noticed that most mail order catalogs have their listing indexes on the right-hand side of the pages? And, since your site will attract the same type of customers, you'll want to keep your web page looking close to what they're accustomed to seeing in the catalogs.

Table Tip Two - The 600 Pixels Rule

What's the 600 pixels rule? It's very simple. I discovered quickly that my web pages did not appear the same on every computer system available. And, because I have no control over which system my "potential" customers will use to view my site, I changed my table sizing to be "system" friendly. By making the overall "width" of
your table 600 pixels, you'll have a much better chance of your website looking decent on various computer systems.

Some people online use big screens, some small and some have special set-ups where space is limited for online viewing.

A safe table width size for your web pages is 600 pixels. This size will help prevent your site from looking distorted on systems that are different than your own. I haven't had any complaints since I changed my table sizes to 600 pixels. But, before the re-sizing, I had several people to email me with complaints about my site's design.

Sitemap
Ecommerce
Financial
B2B
Free Evaluation

12 Website Design Decisions Your Business or Organization Will Need to Make Correctly (or you'll have to do it all over within a year)

1.You may be on your first website. But more likely you're faced with redesigning a website that isn't functioning as well as it should. I see 12 vital decisions involved with developing a website, and I want to explain them with you in mind:

2.You're the owner or marketing director of a small business and know that getting your website to pull its share of the load is vital for success. But your budget is severely limited!

3.You've just been assigned the task of redoing your company's website. Congratulations, now you can be blamed if things don't work well. :-)

4.You've volunteered to take your church or organization website and make some sense out of it -- without offending the person who built it in the first place.
This time around you've decided to outsource the job, but you have no idea of how to supervise a design company to make sure they do what you need. Good luck!
I want to help. When I built my first website in 1995 at the very beginning of the commercial Web, I didn't have a clue how to proceed. In those days there was no one to guide you. I've made every mistake you can think of -- some more than once, I hate to admit.

Since then I've built and assisted with dozens of online stores and hundreds of websites for all kinds of businesses and organizations, from mom and pops to major corporations and international organizations. I don't design websites for others these days, but I actively develop and maintain my own site.

There are twelve critical places in building a website where you must make the right decision, or you'll have to repeat this task again and again until you get it right. I won't be talking about how to write HTML; I want to help you with the mindset, the basic approach. I want to take you by the hand and lead you through the critical decisions. The better you grasp these essential points, the better your website will work and the happier camper you'll be.

Okay, let's roll up our sleeves and get started. By the way, why don't you print out this article and then mark it up with your thoughts and ideas as you read. It's designed to serve as a worksheet to clarify your thinking and provide direction at various stages of the project. If you decide to outsource the project, you'll want to share a copy of your marked up worksheet with your website designer. Print it out.

1. Determine Your Website's Chief Purpose
When you begin a website, you must have your main purpose clearly in mind. I say this because it's easy to have conflicting purposes.

If you're a website design firm, you may want to show off your high tech goodies with your client's site as the showpiece.
If you're an employee stuck with this task, you may want to look good for your bosses and not do anything for which you can be blamed -- you've got to protect your backside.
If you're a volunteer, you may just want an excuse to tinker and be praised for it.
If you're a business owner, you probably care about the bottom line. You're wondering, How much this will cost? and Will be worth it in the long run?
Dear friends, recognize your own needs -- they're legitimate. But to build an effective website, you've got to look at the business or organization's needs and make those primary. From the organization's perspective, what must this website do in order to be successful?

Let's look at some common website purposes. Put an X next to all that apply.

Build your brand. Create an online brochure that will help potential clients, customers, and partners learn about your company and look at it in a favorable light. You're trying to enhance your brand or organization image. I've heard people disparage this kind of website as "brochure-ware." But this is very legitimate for some kinds of companies, especially local businesses or organizations that aren't trying to conduct national or international commerce. You want people to know who you are, what you do, where to find you, and how to contact you.

Provide product information to drive local sales of your products and services at dealer locations. Auto dealers are a good example. Many manufacturers don't sell on their sites, but point people to retailers who carry their products.

Sell advertising. A few sites are designed to sell advertising -- Yahoo!, Google, and other portal sites are examples. But these days, there's far too much advertising space and not nearly enough money to fill it all. Internet advertising is in the doldrums. You may be able to sell a little advertising if you're a portal site for an industry, but even that's iffy. Look at advertising sales as a hopeful bonus, not as a sure thing.

Sell products or services directly over the Internet. You want to conduct e-commerce and sell to a national or international market. You'll have some kind of ordering system for one or more products, or perhaps an extensive online catalog. You may offer an online service that can be delivered over the Internet or that can be initiated online.

Earn affiliate commissions for sales and leads generated through links on your website. Savvy marketers are building microsites designed to generate search engine traffic for a particular hot product or service. When a visitor clicks on one of their links, they are referred to an e-commerce site, and, if a sale results, the affiliate gets a commission. Perhaps a form on your site generates leads or subscriptions for another company.

Provide customer service and support. Websites are a great place for troubleshooting guides, FAQs (Frequently Asked Questions), technical information, etc. You can generate Return Merchandise Authorization (RMA) labels. You can provide multiple ways for your customers to contact you (see under Point #9 below).

Save money by means of online efficiencies. Companies have used the Internet to save billions of dollars. Taking orders online with real-time credit card authorization saves paying call center operators and cuts entry errors. Online catalogs save lots in paper, printing, and distribution costs. Online FAQs and knowledge bases cut the number of customer service personnel you need. And I'm just scratching the surface here.

How to Host a Successful Webinar

You’ve decided to test Webinars and add them to your marketing mix. You know your target audience and set your goals. You want plenty of qualified leads.

But before the next hand is dealt come a number of big questions: What will make them attend? When should we hold it? Who is the speaker? How and when do we promote it?

These questions seem daunting, but the answers are not. Some thought, planning and teamwork will bring you a Webinar with solid, qualified leads.

Content is king

No one wants to attend a Webinar that’s an infomercial. Instead, pick a subject that really speaks to the audience you want to reach—one that is educational or answers a problem they face.

What’s the target’s “hot button?” If you offer a topic they need to know about, you’ll grab their attention. Give them useful information and a learning experience.

Content is your top priority. Each of your targets will ask, “What’s in it for me?” Select a good topic, and they will come.

A big name helps

Who will be the main presenter? Choose a recognized expert, an author, a person who has succeeded in solving the problem presented—the more respected and known, the better your attendance.

Selecting someone outside of your organization lends credence to the value of the event. Remember that the keynote presenter doesn’t necessarily present the complete Webinar. Others, including you or your associates, can also participate.

Big-name presenters may be easier to get than you think. Of course, you can pay them, if that’s in your budget. Once they learn about the planned promotion of the event, the amount of publicity they’ll get, and the exposure to an audience they want to reach, they may reduce their fee or do it for free. An offer to share the leads might be all it takes.

The Webinar gives them a platform, access to an audience, a chance to be the expert and gain more recognition for themselves or their company.

But a big-name presenter is not essential. Putting all your eggs in one basket may build a bigger audience for that one Webinar, but a series of content-focused events pull more and better qualified leads in the long run. Multiple events offer prospects more convenient options of dates and times.

Timing is everything

You might have the greatest Webinar ever, but if you have it on the wrong date, weekday or time of day, your target audience will be doing other things. Think about your prospects and check the calendar.

Eliminate holidays and the days before and after them. Forget about Mondays and Fridays. Mondays are too busy, and Fridays are for last-minute projects or early-departure days. Are there any tradeshows that may conflict? How about end-of-the-month quotas?

Consider the time zones of your expected audience. Since most attendees will participate at their desks, when will they be there? If you market nationwide, a good time is 1 p.m. Central time. If you market in only one or two time zones, schedule the event between 11 a.m. and 1 p.m. Many prospects like to attend during lunchtime.

Thirty days away is best

Once you pick a date and time, when should you begin promoting the event and accept registrations? Thirty days is the optimum timeframe. Any amount longer, and the prospect may forget or lose interest. Less than 30 days doesn’t give you enough time to promote for maximum attendance. Also, it’s easier for your prospects to plan to attend something a month away than it is to plan for next week.

Realize that if you are planning only one Webinar, some of your hoped-for audience won’t be able to make that day or time. A series of Webinars is better, or a choice of two dates for the same topic would help solve that problem.

Trying to hit a home run with just one big event on one day is not the best strategy. Some valuable prospects may be vacationing, traveling or ill that day—give them a choice of days or a series.

Four strategies will ensure a full house

Here they are:

Leverage existing relationships. Take a good look at your trade groups, associations that pertain to the topic, your affiliates and your vendors. How can they help? Perhaps they may cosponsor the event. Publicize it in their newsletters. Place a registration link on their Web site. Ask them to participate in some way.


Use your customer base. Unless you’re a one-product or one-service provider, your existing customers should be contacted often. They already know the value of your company and are very likely to attend the Webinar. However, all too often, they may not know about your new offerings. They are your best prospects.

New, qualified prospects are the lifeblood of any company. The goal of the Webinar is to identify and deliver them. It’s easier for new prospects to respond to an informative Webinar, because their worry about the sales pitch is lessoned.


Merge promotion into your normal marketing program. That is the most economical method, because there is little or no additional cost. All your advertising—search engine ads, newsletters, email, banner ads, your own Web site, even print and broadcast—is ideal for mentioning the Webinar and giving the link to register. It’s also a response-builder.

If you exhibit at a tradeshow, have fact sheets and registration materials on display and urge staff to meet, greet and mention the helpful free Webinar. Talking about the Webinar may quickly lead into serious discussions of products and services on the spot.


Special campaigns get attention. In addition to merging the Webinar promotion into your normal marketing, test some solo offers. These should feature the content, the value of attending and the convenience, and they should provide an easy way to respond. As you discover the value and results of Webinars, you’ll budget more for special campaigns.
Involve your sales force and in-house staff

Invitation calls by your sales force to customers and current prospects are a wonderful way to get registrations and warm up prospects. A personal invitation is usually appreciated and remembered. It’s an easy call to make and take, and may lead to some business right on the phone.

In-house staff can also help in the promotion. Be sure they are aware of the Webinar. Provide them a script for discussing it with every customer and prospect they help.

Keep it simple, but get what you need

A quick and easy registration process helps maximize attendance. You don’t want to lose a good prospect by making registration too cumbersome or lengthy. Your goal is to get complete contact information, reinforce the value of attending, find out the source of the lead and get some qualifying information.

All promotions should have the same registration page link so that you work with only one database.

Don’t lose two out of three

Our experience has shown that unless you send reminders after the registration, 67% of registrants won’t show up for the event. What a waste!

To prevent this loss, send an immediate “thank you for registering” email with a request to mark their calendar. Follow this up with another email reminder about 10 days before the Webinar, a phone call reminder the day before and another email one hour before the Webinar starts.

Maximize attendance after the Webinar?

Even with all the reminders, some registrants won’t attend—an unscheduled meeting, an illness, the press of business that day… things happen. You don’t want to lose these prospects, because they have already expressed a level of interest.

Record the Webinar as a Flash file and put it on your Web site. Send non-attendees a “sorry you couldn’t attend” email with a link to the file on your Web site. Preparing the file costs around $500, but this gives you a permanent Webinar that’s on your Web site for other prospects to view.

If you choose not to archive the event, at least send non-attendees another email (or call) with dates and times of repeat Webinars.

Are they hot, or warm?

Right at the end of the event ask the attendees to complete a quick, on-the-spot survey. Webinars are interactive. Use this feature to get immediate feedback and more qualifying information.

About 75% of attendees usually fill out the survey. They ask other questions, provide input that improves future events and, most important, give you insights about their level of interest, needs and timeframe. Plan your survey carefully.

Follow up quickly

After the event, send each attendee a “thanks for attending” email. Send a survey to those who didn’t complete one earlier.

Now that you have hit the jackpot with all of these qualified leads—some warm, some hot, some as connections for the future—implement your sales plan. Get the information to your sales force and monitor progress and results. With a carefully planned event, you are sure to win new business


Sitemap
Ecommerce
Financial
B2B
Free Evaluation

http://www.marketingprofs.com

The Art of UI Prototyping

Even the brightest people make mistakes. This is especially true for teams of people. Somehow, as a project moves forward, small assumptions and well-intentioned but poor decisions accumulate, turning hours of work into a lousy user experience. The smart teams eliminate their mistakes before they ship by using a technique called UI prototyping. Combined with usability studies, prototypes keep teams headed in the right direction.

Why Prototype?
Prototyping is a means of exploring ideas before you invest in them. All experienced craftspeople and engineers create prototypes of their work before they build anything: Architects create models out of paper or cardboard, or with virtual reality tools. Aeronautic engineers use wind tunnels. Bridge builders create stress models. Software and Web designers create mock-ups of how users will interact with their designs.

The best reason to prototype is to save time and resources. The value of the prototype is that it is a facade—like a Hollywood set, where only the front of the building is constructed. Relative to the real product, prototypes are easy and inexpensive to create. So, for a minimal investment, you can find usability and design problems and adjust your UI before you invest heavily in the final design and technologies.

On examining the needs of your particular project, you might come up with reasons for creating a prototype other than saving money. Is the goal to explore a new interface model? Make modifications to one part of the existing design? Investigate a new technology? It's important to be clear about why you're building what you're building before you start. If you begin with clear goals, you can be direct and effective in your efforts. The reasons for creating prototypes fall into three basic categories:

Proof of concept. Among some teams there are disagreements about the future direction of a project. You can use a prototype to prove that an idea or new approach has merit or value. A prototype can help illustrate that an idea works, express its qualities in a visual and interactive way, and/or motivate team members to think about the problem from another perspective.

Design exploration. If you design interactive things, the only way to explore how something will be used is to create a mock-up and interact with it. Sometimes the mock-up is tied to a usability study, where parts of the prototype can be evaluated in a structured way. Sometimes it's just a way to clearly express to a developer how something should work or look. In many cases, a designer might simply be experimenting, in an effort to get a sense for what approach might work. Anyone on the team can use prototypes to explore design issues, although designers are generally the most skilled. Design explorations should be directed at trying to solve specific problems that you've recognized in your product.

Technical exploration. Developers investigating implementation approaches to a problem often try out different coding techniques to see if they work well. Using HTML, Jscript, SQL, DHTML, Win32, or specific coding approaches within each technology have different tradeoffs. Sometimes a prototype represents an exploration into what technology will work well to support a certain UI or web feature.
Sometimes prototypes are created for a combination of these reasons. If a team plans well enough, they can allot time for a developer and a designer or project manager to work together on a prototype. In such cases, it's extremely important to clearly define the goals and the contributions each team member is expected to make. You want everyone to be clear on what the goals are, what's at stake, and what the potential outcome will be.

Who Is Involved?
Prototyping can be done informally by anyone, regardless of their background or role in the project. It's easy to make a simple but effective prototype by taking a bitmap from Adobe Photoshop, putting it into the Microsoft® FrontPage® Web site creation and management tool, and adding active buttons or links. These lightweight prototypes only go so far, and can become unwieldy for complex interactions.

For more formal prototypes by larger teams, a developer or project manager will often collaborate with a designer and a usability engineer. Together they'll generate ideas, build a prototype that represents the best ideas, and then go into the lab to see how effective it is in solving user problems. Developers might get involved if they can spare the time, or if their technical expertise is needed. Often the designer or project manager will do most of the scripting or coding to build the prototype.

When Do You Build a Prototype?
Depending on the scope of the prototype and the level of detail required, prototypes can be built at any time during the project. Most often they are created early in the project, during the planning and specification phase, before developers write any production code. That's when the need for exploration is greatest, and when the time investment needed is most viable. If developers instead of program managers or designers are prototyping, scheduling time becomes even more important because you need to make sure the work invested in the prototype is accounted for in the development schedule. Planning for any UI release should include some level of prototyping.

Late in a project, smaller prototypes can help resolve tough design and technical issues. A quick HTML mock-up of how a dialog box or Web page should behave can help answer a developer's question or give other teammates a feel for what the desired experience should be. In some cases, a strong program manager or designer can implement the behavior in Microsoft JScript® development software and approximate much of the programming logic that developers will need to think through.

The time it takes to create a prototype can vary tremendously, depending on the scope and precision of what the end result needs to look like. An informal prototype could mean a few hours of work by one person; a more organized effort can involve weeks of effort by an entire team.

How Far Should You Go?
In your prototype, build only as much of the design as you need. It's okay to have buttons that don't work, or text that never updates. As long as you can experience the interactions you want to explore, it's fine to use smoke and mirrors for the rest. Here are a few reasons why you should focus your efforts carefully:

Cost of building the prototype. You want to minimize the cost involved in building the prototype. The challenge with prototyping is recognizing the minimal investment needed to effectively answer your questions about the design. This is where usability studies are critical, because they clearly identify the parts of your UI that need the most work. Even without usability studies, you should clearly define what user problems you're trying to solve, or what tasks you're trying to improve, with the design in your prototype.

Limited lifetime. Prototypes should have clearly defined lifetimes. Is the end goal a presentation at a team meeting? An executive review meeting? A spec review? A usability study? Convincing yourself, with your devil's advocate hat on, that the design solves a user problem? Once the needs for these specific objectives are met, the prototype should be set aside. The basic mindset is that the code or bitmaps generated in a prototype will be left behind. There might be exceptions where code or visuals live on in the product, but the expectation should be that this won't be the case.

Risk of overwhelming the team. Showing prototypes to developers and teammates can be tricky. An overly complex or elaborate prototype, sporting amazing visuals and animation, can overwhelm people. You should always have a sense for how far to go and how much of what you're creating in the prototype you want to be taken seriously.
Determining the Scope of Your Prototype
As you determine where to focus your prototyping efforts, here are some things to consider:

Customer needs. If you start with an understanding of the key problems or needs of your users (perhaps something your usability engineer has provided for you), then you have an idea about which parts warrant the most exploration.

Usability study tasks. If you are creating the prototype for a usability study, discuss with the usability engineer what specific tasks will be part of the study, and design around those elements.

Team input. Talk with key developers on your team as the ideas in your prototype are coming together. Get a basic sense from them on what's reasonable, what's possible, and what is beyond consideration for the next release. In some cases, you might deliberately go beyond what they say is possible for one aspect of the design if it's a key point and you think the team needs to be challenged. However, you don't want to do this with every aspect of your prototype. There is a fine line between pushing the limits and overwhelming your team. If you only want to inspire the team by showing them a vision for several versions out, then go for it. However, if you're looking to define specific changes for the next release, then focus your efforts on those changes. Make sure you call out the specific changes in a modular way to show developers a path for building your designs.

Breadth vs. depth. For larger prototypes, there is the additional consideration of breadth versus depth. Do you make each feature in the design work just a little bit, or do you pick one feature and prototype almost all of its pieces and options? If you're not careful, you'll try to do both at the same time and end up with a large, unwieldy prototype that is hard to modify and difficult to throw away.

Wireframe vs. Visual design - Depending on your audience, consider what level of visual design quality you need your prototype to have. Sketches or box drawings may suffice for folks you work with often, that you do not need to impress, or who can understand the difference between the prototype, and what it represents. If you are presenting to less experienced clients, certain executives, or more technical audiences, a more robust and aesthetically invested prototype might be appropriate. An additional consideration is what questions you have for the design itself - if you hope to learn about the impact of your aesthetic and layout choices on usability, and you are planning for a usability test, you need to make that additional investment.

ROI: Return on Investment - Prototypes allow for various forms of evaluation (aesthetic, business, technical, usability). The higher fidelity the prototype is, the greater accuracy your evaluation will have. The most robust prototypes require no explanation - you just point people at it, and let them experience it for themselves. The more you have to explain ("oh, that wouldn't do that in the real version", "the style will be more techno") the less robust it is, and the less accurate the evaluations are likely to be. Of course, you pay a price for the investments you make. Deciding how robust is enough, and how accurate an evaluation you need to make is a judgement call, much like the decision making processes of actual web sites or software products. Your goal is to invest as much as necessary to obtain the information and effects you want, but no more.

Making Prototypes FlexibleOne way to focus your prototyping resources is to concentrate on smart design. You can create more effective prototypes by allowing one piece of prototype code to exercise many different ideas. Instead of having five different prototypes, consider making one prototype that has the options to switch the different attributes of the prototype.

Should the toolbar be located on the left or on the top? Should we show 10 items on the home page or 20? A good prototype has some sort of built-in options panel that allows you to change the parameters of how the prototype looks or works. Keep these option panels hidden in your prototype—you don't want a usability participant accidentally finding them during a test.

The challenge is to keep the prototype simple, but still useful enough that you can show it to a teammate, walk through some of the different options you're thinking about, and get feedback on them.

How Do Beta Releases Differ from Prototypes?
Beta releases don't qualify as prototypes, because they are complete engineering efforts. If you find a critical mistake in a feature of a beta release, you are unlikely to throw it away, even if that might be in the best interest of the product. The developers, testers, and designers have already invested their time, and the pressure to live with bad decisions is very high. Betas certainly do help in finding bugs and defects, but they are rarely useful in making controlled studies of the value of specific design directions.

Tools and Technologies
There are several different tools and technologies you can use for creating prototypes, each of which has its advantages and disadvantages. Consider the type of design work you're trying to prototype and the goals of your prototyping effort as you decide which tool or technology is right for you.

Paper - For usability studies or quick reviews, paper is often the fastest way to prototype a design idea. Using Photoshop, mspaint, or any tool you are comfortable with, produce screens that express the design, and print them out on paper. If you make enough screens, you can simulate walkthroughs, allowing test users to make choices and experience the design. However, for prototypes of moderate complexity, generating paper prototypes can be cumbersome. Highly interactive things like games or chat rooms can not be simulated well on paper. Also, the more elaborate the tasks, the more pages you might need to have handy.

Microsoft Visual Basic—. This is the fastest technology for creating Windows-style UI prototypes. The Web browser object makes it easy to integrate HTML UI with your standard Windows-style components. While it's true that an experienced C/C++ developer might be able to generate UI faster in C/C++, this creates the temptation to reuse code from the UI prototype in your production code. It takes discipline to recognize that the goals of a quick and dirty UI prototype are highly divergent from high-quality engineering. Make sure you know what kind of code you're writing, and that your team or manager understands what will be discarded.

Macromedia Director or Flash. This is one of the most popular UI prototyping tools among designers. It is most useful for multimedia or non-standard GUI designs, or for prototypes that require significant animation. It's high flexibility makes it cumbersome for Windows-style UI compared to Visual Basic. However, a proficient Director user can generate Windows or Web UI without difficultly.

HTML. Dreamweaver, FrontPage and other HTML editors allow for fast creation of simple prototypes. To express an idea, you can often create bitmaps that illustrate a sequence of user interaction, and place them into FrontPage. Then you can create link areas to connect the pages, and simulate how you can interact with the design. JScript and DHTML take things to another level, allowing for very sophisticated logic and interaction. If you are using HTML to prototype your Web site, the warning just described for C/C++ applies here as well—don't fall into the trap of confusing quick prototype code with production-quality engineering.

Sitemap
Ecommerce
Financial
B2B
Free Evaluation


Source:http://www.uiweb.com

Critical Thinking in Web and Interface Design

At the heart of design and engineering is critical thinking. The ability to separate what is worthwhile from what isn't is the hallmark of the best in many fields, from film directors to project managers, programmers to designers. This skill can be learned but, because of its independence from the world of technology, it's often forgotten in our industry. It's clear, however, that most failures in engineering, design,

or usability are caused by poor decisions at higher levels. Developers and designers should all have some awareness of what good critical thinking looks like and the process used to generate it. Critical thinking surfaces in three places in a Web or software development effort: planning, idea generation, and project management. This issue focuses on planning, but I'll cover the others in future issues, provided there's interest.

The most common failure of development projects is the inability to correctly define the problem. If the goal is vague, it's impossible to know whether it's been solved it or not. And even if the goal is well defined, it may be the wrong goal for the situation in which the design will be used. A well-built machine gun won't help you repair a flat tire. So these two kinds of failure, vague goals and the wrong goals, have nothing to do with technical acumen. If you can't prevent these kinds of failures, even the best developers or designers in the world will not succeed. You may write great code or create wonderful designs, but if you don't solve the right problem, your efforts are wasted.

Understanding the Problem
The first step towards critical thinking is to take an objective view on the nature of the problem space. As a developer or designer, you are incredibly biased about the value of what you're doing. You're on the inside, looking out, and cannot possibly see your creations the way outsiders will. To get your bearings, you need to triangulate information from multiple sources. The viewpoint of a developer, manager, single important customer is of little value in isolation. Get the bird's-eye view and as many alternative views as you can find. Make sure to talk directly with the people the design will be made for, and not take people's word for what the problems are. Think of yourself as a politician trying to help your citizens. Would you only consider the opinions of the lobbyists? To do well, and to see things how they really are, you will have to go out of your normal way of doing things.

An additional challenge is that how you approach your customers will impact the kind of information you get from them. If you unintentionally bias your questions, which everyone does unless they've been trained not to, you'll get unreliable information. The skill of observing and understanding customers is complex and is the primary reason first-rate Web and software teams have usability engineers. You can pick up the basics, but if you're intent on doing great work, invest in a professional.

When researching the problems you need to solve, keep the following questions in mind:

Who are our customers? What skills and knowledge do they have?
What different sources of data can we use to understand their experience?
What goals and tasks will they use our product or Web site to complete?
What assumptions are we making and how can we verify them?
What sources of data do we have? (Usability studies and heuristic evaluations are good places to start.)
If you aren't confident in your answers to these questions, you're not done yet. This information is the foundation of your development work. Make sure you have a solid understanding of your customers before you continue. If it's your first release, use whatever information you can find about competitors and their users.

Analysis
As a developer, there are an infinite number of problems you could try to solve or new features you could add. So having an idea isn't enough to warrant building it. Many problems are not worth solving, given the investment required and their limited payoff. Sometimes a solution for one problem creates two new problems. So good judgment implies the ability to separate what should be done from what could be done. After collecting data, the next step towards good judgment is analysis. You have to cultivate the information and create an assessment for where to invest.

With the data collected from customers and other sources, distill that information into one-sentence bullets of specific problems. These sentences should be written with respect for the customer perspective. For example, "Resize edit box width to 15 characters" is not a problem. But "It is too difficult to type in long search terms" is. The difference is dramatic. You rarely want to define the solution and the problem at the same time: You'll usually miss the real problem. In this example, there may be many other ways to solve the problem of search terms, including changing the size of the edit box. But if you are too narrow, you'll never see the alternatives. Good engineering is all about understanding the alternatives.

For each problem statement, provide supporting information. Include details about which customers have the problem, how it was reported, and even potential ideas for solutions. Perhaps only a certain subset of users have the problem, or it only occurs in certain situations. Say as much as you need to allow others to confirm or challenge your assumptions. If you're the only one who has seen all of the supporting information (usability studies, market research, etc.), make it available to them. The more open you are about the sources, the less likely people will be to suspect them.

If you work on a team, create a short document that lists all of the problems, and include the supporting information with each one.

Example problem statements:

It is difficult to navigate from one section of the Web site to another.
Users have to wait too long for the software to load.
Our security error messages are difficult to understand.
The registration page has too many questions, and users often abandon it.
Finding a specific product on the site index is too hard to complete.
Note: There is a fine line between a user problem and a functional bug. I draw the line based on two characteristics. A problem is a bug if 1) the problem represents a failure of the code to function as it was intended; 2) there is an obvious, simple solution. For example: The failure of a dropdown to list all 50 states is a bug, the inability of users to find the dropdown, or use it to complete a task, is a problem.

Bringing It Together: Lists and Priorities
There is a magic in ordered lists. The act of taking a list of items, and ranking them by priority, defines a release. Without clear priorities, teams fight and argue over what things should be done and what things should be cut. The work involved in setting priorities should be easier with the research you've done, but it's always a challenge.

The best process for creating an ordered list is refinement. Someone on the team works through the list and ranks them based on his or her sense of the overall project—the first item in the list being the most important, the last item the least important. Then members of the team should be able to review that list in draft form and comment on it, allowing the owner to revise and update the list. At some point decisions are made and directives are set. If you're working alone, it's usually good to find someone you trust to review your priorities. Again, multiple points of view, filtered by one wise person, tend to bring out the best thinking.

Setting priorities requires the ability to evaluate on at least three criteria: Schedule, Team, and Business. There may be a predefined schedule set for the project, which limits the size and scale of the work that can be done. A problem that is likely to require rewriting half the code-base should not be attempted on a small release cycle.

The makeup and nature of a team defines what kinds of work should be done. What other commitments does the team have? Is there a designer or usability engineer on the team? What skill with Web or UI design does the team have? Last, and most important, are business considerations. What are the revenue goals for this project? Who are the competitors? What advantages will solving certain problems give you? What partnerships can you use?

There may be other considerations involved in your project, but whatever they are, they should be defined before prioritizing the list. The clearer the considerations, the easier it is to prioritize the problems. If you recognize new constraints half way through ordering the list, you'll have to start over and reevaluate.

Once you have an ordered list in place, you can draw a line somewhere in the list, and separate the important items from the less important ones. How many items make it into the first bucket depends on your schedule.

Where's the Fun Part?
Once the goals are set and the problems to be solved have been identified, the fun begins. With a framework and direction, engineers and designers should have free rein in generating ideas that solve the problems. Time should be planned to investigate different alternatives that might solve the problems and to run usability studies on prototypes to see if they actually improve things for customers. Then at a defined point in the schedule, potential solutions are evaluated, and the ones worthy of a full development effort, and commitment into the release, are continued. The rest are cut or postponed to a future release. This can work in a similar way to the problem definition process, where certain criteria are set, and a review process takes place.

The irony is that the initial work of defining problems is liberating, not confining. As long as you are working within important problem spaces, you're guaranteed to be going in a good direction. Provided your problem statements are broad enough, there should be lots of innovative and creative ways to solve them. And even if you can't completely solve an important problem, a partial solution to the right problem is better than a complete solution to the wrong one.

Source:http://www.uiweb.com

Sitemap
Ecommerce
Financial
B2B
Free Evaluation

Strategies of Influence for interaction designers

Unless you have the power to make business and development decisions for your project, some of your energy will be spent influencing those that do. Experienced usability engineers or interaction designers may have limited skill in influence, despite how significantly it can effect their ability to contribute to projects. It’s the smartest and most effective designers that work to understand the human to human interaction within their project teams, as part of their work towards better human to computer interaction.

Focus on the key players
Step back and examine the dynamics of how decisions are made on your team. Who are the leaders, and whose opinions are respected? Before you present or ask questions at group meetings look at the big picture. Who has influence and how do they exercise it? Sometimes one or two developers have more clout in the processes of an entire team than any project manager or executive. Perhaps your energy is better spent influencing one of them directly, rather than trying to respond to activities of the group as a whole. In a full room, you have 5 or 10 people to convince: one on one, your energy can be used more effectively to respond to questions and make your points.

Should you decide to become more active in group settings, become aware of the dynamics between the key players in the room. Who responds well to humor? Who gets defensive, or offended, when challenged? Who thrives on it? What styles of conversation or debate are most supported by the group? It’s not necessary to collect a CIA dossier on each person and their traits, but the more aware you are of what’s really going on in meetings, the more effective you’ll be at communicating within them.

Know your design allies
Out of all of the developers or other team members you work with, which ones do you get along with the best? What about the project managers or Q/A team? These allies can be your strongest asset in obtaining honest and useful feedback. They can give you perspective on the other engineers or managers points of view, and help review your work out of band of normal process. If your project manager friend from another group has the same response to a design idea that your developers did, maybe there’s more to that point of view than you thought. Even if you don’t have any strong relationships, or are new to the group, start with the best ones you have, and invest time in growing them.

Speak their language, know their concepts
A prototype of your new search page design reflects a set of design choices you think should be made. But what are the business impacts of those choices? How long will it take to build? How will it effect advertising rates, or partnerships? What code changes are needed to make it possible? In the abstract, some designers feel these are not design considerations, and instead are just matters of implementation for someone else to figure out. This is a trap. While it’s great to ignore constraints to inspire creative thinking, if your want your work to reach people’s web browsers or desktops, you have to plan to involve yourself in the practicalities of realizing your ideas. The more skilled you are at assessing those aspects of a design, the more welcome you’ll be to participate in the process.

Use your allies and key players as sounding boards before you go into more formal team reviews. Sit down with the development lead for 5 minutes, and get her quick feedback. You’ll learn enough from this brief interaction to re-evaluate your direction, and improve your thinking about the full spectrum of issues in the design. She may tell you that certain things are harder to build than others, or surface ambiguities in the design that you have not yet considered. (You look at designs differently if you have to figure out how to build them).

Coming out of these informal meetings, you might not even make any changes. It’s guaranteed, however, that you’ll know more about how to effectively present your ideas to people without your background. If you collect feedback from several different people, preferably from different disciplines, improving your work and how you present it each time, you’ll feel more confident and prepared when you show it to the larger team or in a more formal review. In a sense, that formal review, will really be your 4th or 5th time around. All of the questions that come up will have already been considered by you. The team will have no choice but to see you as a smart, confident, and prepared, because you will be.

Divide and convince
Key players, as described above, can often be more receptive to discussion when you meet with them one on one. People behave differently depending on the social situation they are in . In a group meeting, team leaders have to take responsibility for the entirety of the discourse taking place. They are careful about how and when they express their opinions, because of the different effects it may have on people in the room. If you take that same person out of the group situation, and talk to them in a personal setting, their behavior and openness to ideas may change dramatically.

In my own experience, I once presented a prototype to an entire team of developers, including the group manager who had a reputation for rejecting new directions. It didn’t go well. There were too many questions I wasn’t ready to answer, and I hadn’t done a good job of setting their expectations. Towards the end, one of the developers made a joke, indirectly about my prototype. The room broke into laughter, including the group manager. I was devastated.

The next day, when I was ready to regroup, I decided to talk to the group manager alone. He granted me 20 minutes after lunch the following day. I did everything I could to prepare, reviewing my slide deck, asking friends for feedback, and revamping how I made my points. The time finally came to meet with him, and once I closed the door, and was alone with him in his office, his demeanor changed. He was curious and inquisitive. He asked tough questions, but he seemed to honestly want good answers to them. We talked about the prototype for almost an hour, and I ended up earning his support, including commitments to the development resources for most of the work.

Not everyone will respond so differently one on one, but many do. If you’ve already been rejected, or turned down, what is there to lose by getting clarification on why? At a minimum, you’ll improve your abilities to approach the situation next time. Also remember that sometimes your own skills as presenting ideas are better when you are in a one on one situation, instead of standing in front of a large group. Know your strengths and play to them when you can.

Perfect later, good now
Formality takes time. In many informal situations, there are opportunities to express ideas through whiteboard drawings or hand sketches. Take these openings when you can, and run with them. It’s in the discussions, the brainstorming, and the hallway banter that people are most open to hearing new ideas, and to considering challenges to their assumptions. Typically, the designer's offhand sketches and quick whiteboard drawings will look better than anything the rest of the team could produce. Being comfortable with informal discussions of ideas, and free flowing dialog around designs, opens you to easier situations for influencing peoples thoughts. Take the pressure off yourself. People may not have the same expectation of design perfection from you that you think they do. Know when speed and flexibility in communication are more important than precision.

Promise and deliverEarning credibility with project teams comes from one primary behavior: making solid commitments and delivering good work on time. Without this, your design skills or powers of influence will only go so far. When you finally convince someone to believe in you, or your ideas, and you don’t follow through, it can be worse than never having convinced them at all. The granting of trust is a complex human process, and nothing damages it more than working to obtain it, and then betraying it. Certainly things may go wrong, and many kinds of problems won’t be your fault, but you should always hold your commitments and promises as intimate, precious things. Be specific about what you can produce by when. Identify the risks you see, communicate them and ask for what you need to protect the team against them. If you communicate how seriously you take your work, and include considerations for how your work effects the work of the rest of the team, everyone will start to take your work seriously too.

The video and the prototype
The two most powerful forces of influence in the interaction designers toolbox are the video and the prototype. Humans are visceral creatures. We respond to things that call on our senses. Specs, code, and even bitmaps are all static, limited attempts to represent what the experience of interaction will be like. It takes an inventive imagination to read these things and accurately visualize anything. It’s typically only those few individuals with practiced imaginations, regardless of job title, that can do this well.

If you need to convince someone that the current design has problems, you must show them. Put together a highlight video tape from the last usability study, showing people struggling to complete important tasks. In 5 minutes, you’ll have changed the minds of everyone in the room. There is something every human being feels when watching someone suffer because of something they made. It effects the most callous business men or misanthropic technologists. No usability report or presentation can have this effect. Be careful not to go too far: be honest about how representative the failure cases shown are, and offer the supporting data to those who have questions. (Most importantly, be prepared with a plan and resource demands for what you need to happen to improve the product). But if you want to get people’s attention around your work and the user experience, there is no better way.

The prototype offers you another form of direct influence. It’s almost a secret weapon. While everyone in the room is debating in front of the whiteboard about what the design should be, or how it should behave, you can show the group a real live working example of your ideas . They can even interact with it depending on what you’ve done. It’s a huge advantage. No one needs to imagine anything when looking at your prototype. If you have visual design skill, or talent with Flash or JavaScript, you’ve probably made it more attractive and responsive than anything others in the room could envision, much less build.

For periods of time on some teams, the prototype is the virtual specification. If you are making the prototype, and are responsible for adding alternatives and new concepts to it, you have influence in the decision making process. Suggestions from executives or key players have to be interpreted through you. Discussions with marketing or business development center on your work, and how their needs can be met through your design, not the other way around. While it’s true that you may need support from developers or other key players, driving the development of a prototype can afford you more influence that any other investment you can make. Be careful to build in support for your prototype as you develop it. If you show up one day with something that blows everyone away, you might be seen as a heretic. Rely again on key players to give early reviews, and endorsements of your prototype. Present it to the group as something you and the key players have been working on, instead of the result of a lone designer.

The voice from outside
Credibility can be a funny thing. Sometimes the same idea presented by a respected outsider, can carry more weight than any number of people within your team. Forwarding a recent article, or journal report, may gain you more support than anything you can say yourself. Inviting a speaker in from another team, or another company, can have similar effects. Even if everyone knows that you invited them to come, the psychological effects of hearing new voices can make them more open to having their minds changed. Like all opportunities, this does have it’s risks. If things don’t go well, or are spun in the wrong way, it can end discussions and close issues. It's the quality and skills of that outside voice that goes a long way towards making this work.

Priming the feedback and review process
Many teams or clients have review meetings, where designs are presented and decisions are made. Before you go into any review process, understand the opinions of one or two of the key players. Invest time in showing them smaller samples of your work along the way, so that their feedback is already built in when you present to the group. Doing this informally takes the pressure off, and reduces the possibility of wasted investments. You won't spend a week going in the wrong direction if you are getting feedback on it every few days. If you do this well, when the time comes for the larger review, the most important people in the room will see no surprises. They’ll see decisions and agreements they’ve already discussed with you in private, and will therefore want a speedy and positive review, so that they can move on to other work. You have to build in your support along the way if you want things to go smoothly.

Sharing goals makes everyone your ally
It's very important to see everyone you work with as having the same direction, and the same high level goals. The more you're able to align yourself with your counterparts in other disciplines, the easier all forms of work on the project will be. Product or release goals should include aspects of the user experience, usability or design, along with business or technological objectives. If no one else asks for these to be included in the planning process, it's your job to raise the issue and suggest items for inclusion. On good teams, everyone has a chance to give feedback on the project goals before the team is fully committed. With shared goals, there is less reason for conflict or adversarial relationships. When debates occur, you can refer back to the project goals, and use them to help prioritize or resolve conflicts. Without clear goals, it's much harder to settle disagreements or get anything done, since basic assumptions have to be re-established too often. So when concieving your designs, rely as heaviliy as you can on whatever project goals their are. The more your work reflects the intended directions of the entire team, the greater the support you can build for your ideas.

You have more users than you think
An excellent way to consider your relationship with your team, is to see them as your users. The work you create as a designer, or usability engineer, is consumed by your team before it is consumed by your true customers. What goals does your team have? What are their needs? How can you craft your output so that it fits into their system of understanding? If you feel that their goals should change, or that they need new skills, how can you be effective in making that happen? Those needs are at a level too deep to be reached by specs, Photoshop files, or usability reports. You may need to become a student of your company’s business, project and development process, in the same way that you study the habits of your users. Design happens at many levels, any the more active you are at examining them, the more successful you’ll be at making positive changes.


http://www.uiweb.com

Why Should You Care About Your Web Site Colors?

How Colors are Used in web design:**
Demarcates screen elements into groups- You can put a blue background for your navagational bar and white for rest of your page. This tells the visitor that the blue area has different elements and grabs his attention.

You can relate different groups of element on your screen- If you want to keep a navigational menu also at the bottom of page, you can use the same blue background. This tells the visitor that both blue areas on the screen has the same information.

Highlights information- If you want to make a line of text prominent, you can use different colored text instead of regular text or use a background for that line of text. Looks nicer- Always colors associate with our mood and perceptions. We always feel the colors. Colored objects draws peoples attention.

**One should always use web safe colors?**

Nah... Unless your audience purely rely on 256 colored monitors. Mostly a remote possibility. You can experiment and enjoy in applying colors in your web design. The worst thing that will happen is the colors are shown to it's nearest color on 256 monitors. They won't look like exactly as they look on your monitor.

**What colors are best?**

One cannot say this exactly. Because the blue which means professionalism to some is death to some.

Here are some colors:

To indicate necessary action, use warm colors Red, orange, yellow.

To provide calm and content feelings use cool colors Green, blue, violet, purple.

Green means growth and vitality. Red means energy and passion. Blue means intuitive, cool and trustworthy. Yellow means enthusiastic and optimistic. Orange means courage and success. Purple means passionate and spiritual.

Grays and browns seem dull. But they can take on a more cheerful attitude with compliments of red and orange. Emotions like this will help your visitors to associate your site with stableness and confidence.

**Tips to follow in appying colors on your website:**
1. White background is always preferable to keep your content. It makes easy to read and eye fatigue will be lessen with plain white background.

2. To make the things elegent use one or two contrast colors next to white. Like blue, green, orange etc.

3. Never use more than 3-4 colors on a page.(unless your site goes with graphics or other multimedia themes)

4. Check the colors and it appears on different browsers using online tools like- http://www.anybrowser.com/

5. Background of your web site pages: ALWAYS use a web safe color as a background color to your web site. This makes your graphics and text appear on a clean interface on any type of monitors.

Liquid Design - A Step Forward To Making Web Sites Accessible

Liquid design is used in order to make web sites more accessible and user-friendly. Among the many problems web designers often encounter, one in particular is this accessibility issue. As we mentioned before in other articles, accessibility determines in what degree a site is accessible to its users. Web sites should be universally accessible disregarding the tools people use to view them. One must take in consideration culture, language, disabilities as well as technical details like width of design - hence, the idea of liquid design. Creating an universally accessible website is nearly impossible to achieve. However, there are small things webmasters and web designers can do to get closer to creating accessible sites.


What is 'liquid design'
As users, we often see the monitor screen as a square box which displays information, images etc. We perceive it as a fixed medium, at standard resolution, which never changes. For web designers the monitor screen does not have fixed width or height because these variables change, at times in unpredictable ways. People might have larger buttons, toolbars such as Yahoo or Google, they open the Favorites page on the left, they have a double task bar and so on. Therefore the width and height of the screen is different from user to user.

Liquid design means that the web site adapts itself to the available space, the same way water takes the shape of the glass it is in.


Importance of 'liquid design' in creating accessible web design
The goal of liquid design is providing similar experience to people and eliminate possible irritating design flaws such as too much white space, disappearance of certain sectors of information due to lack of space etc. If you decide liquid design is suitable for your web site, here is a simple way to do it.


Resolution statistics and interpretation
A web designer's task is to predict the available space the web site can use to display. One must consider first of all what the web site's target audience is. For example, people who work with computers every day (programmers, other designers etc) often like to have a "bigger picture" of things hence they are more likely to have high resolutions - 1024x768 or even higher. People who access the Internet from universities or educational institutes are likely to use older computers and may use 480x640 or 600x800 resolutions.

Recent statistics show that most people use 1024x768 resolutions (nearly 44%) and 600x800 resolutions (50%). Until recently, the number of those who used 1024x768 resolutions was much lower, while 480x640 resolution was the preferred resolution by users. As technology evolves, the percentages change. Nowadays, web designers have started designing for the 600x800 and above.

The effective screen space is smaller than the actual number of pixels (e.g. width of 800 pixels and height of 600 pixels for 600x800 resolutions). The reason is that people use up space by adding toolbars and different additional buttons to their browser window. For example, when designing for a 600x800 resolution the web designer should in fact design for 409x741 (width of 741 pixels and height of 409 pixels) although this is not fail-proof for every situation.


Ice sites, Jelly sites and Liquid sites
According to design style, web sites fall into three categories:

Ice web sites: are very rigid sites. The box that holds the content is fixed to the left. On higher resolutions appears a blank space stripe on the right causing a lack of equilibrium in the design.

Jelly web sites: are the middle solution between rigid and flexible. The box holding the content is centered at any resolution thus preserving equilibrium, while still not using up all of the available space.

Liquid web sites: are the utopia of flexibility, a site with no constraints whatsoever. Liquid sites expand or shrink to the available space on the screen monitor, no matter what browser window size or resolution the user might be using.

Is liquid design adequate for any web site?
In order to make a decision whether liquid design is suitable for a web site, factors such as type of content, structure, amount of information must be taken in consideration. Liquid design is ideal for sites with a lot of information. The elasticity of such sites increases readability.


Practical method of implementing liquid design
Unfortunately, in order make liquid web sites, you must think the layout around the concept of elasticity.

If you're using tables the way to make them liquid is to specify the width in percentages (e.g. 100%). Hence the copy inside the table will expand along with it.

The problem arises when the content of the table cell is graphics. It is difficult, but not impossible to apply liquid design to graphical sites. When creating the graphics bear in mind that they have to "stretch". The way to achieve that is to create a section of graphics that, if repeated (either horizontally or vertically) it can still give the impression of continuos and unified design. Once you've done that, you will use the respective section as background of the table.

Take this very site for example. You will notice that the header at the top expands in the middle until it fills the entire screen, no matter the resolution. That is liquid design. What we did was to create the impression of continuity by repeating the background over and over again until we achieved the desired effect.


One last tip for web designers
You must make sure text lines aren't too long and hard to read. You should test this by trying to read the text yourself. If you encounter difficulties while reading then try to shorten the lines. One way to achieve this and still use liquid design is to make tables 90% wide or less and also include columns in your website's layout.

http://www.mardiros.net

Why Re-Design?

My site is working fine. The links work. Content is added regularly. We have new features. Why does my company need a re-design?

Those are all great things. Sites should be updated regularly, have new features added, and by far have working links. However, as the site grows it soon outgrows its foundation. Leading to an unorganized use of content, poor usability, and eventually chaos. A re-design is a perfect opportunity to take an inventory and put things back on track. It will also allow for a better user experience.

New Foundation
With any re-design it is a great time to do a little rethinking. Looking at the current site a question needs to be asked. What is it that people want when coming to my site? By understanding what it is people are looking for from your site you will be able to better position that information within the architecture of the entire site.

Judging by the Cover

The old adage "Never judge a book by its cover" doesn't apply to your website. Users to your site make quick and often harsh judgment calls within seconds of viewing your homepage. By making outstanding first impression with a crisp, clean, professional look the user gets a sense of trust from the company behind the site.

Follow the Leader

Your site could have the exact information a specific user is looking for. However, if it takes too long for them to locate it chances are they will go somewhere else to find the information. By making your site as user friendly as possible you will be able to guide the user to specific areas of content. Bringing content that is hidden under multiple clicks to the forefront makes it easy for a user to locate. As well as, leads the user to other areas of your site that they might not have known about.

New Experience

New features can dramatically improve the user experience. Online calendars that allow a user to register for events are a perfect example of how a simple feature increases the value of a site. No longer does the user have to call or mail in an RSVP card. As such, the company doesn't need a person to answer the phone for every registration.

Cheapest Employee

Your website could be your cheapest employee. It has already been mentioned that your site could make your day-to-day tasks a think of the past. By adding features to your site that help educate your user base, ehhance marketing efforts, as well as, develope a sense of who your users are you are in reality making your site work harder for you. The simple fact is that you have a site. Why not make it work harder and do more for you and your company? An offshoot of adding features like this is that your users have more interaction with your site and your company.

Your Future Customers

The whole goal of a re-design is to create a better experience for your users. There are many approaches to attain such a goal. Maybe it is a new look, a revised navigation scheme, or a complete overhaul. Whatever the outcome, your site should reflect the company behind the site and insure a sense of trust with you future customers.

http://www.hooverwebdesign.com

Designing a Website and Making it work for YOU!

Congratulations! You have made the decision to bring your business to the World Wide Web! There are a few important points that you need to keep in mind when looking for a web designer or designing a website yourself. Your website is a direct representation of your business and should be created in a way that accurately reflects that. If you are a fun, whimsical company that caters to individual orders, then make your site fun and playful. If you are a company that focuses on the corporate orders, you will need a site that is professional and informative.

Some important design techniques to keep in mind whether designing yourself or having someone do it for you are:


Contact Information!!! Make sure your address and telephone number are easily located. People like to know whom they are ordering from and that if there is a problem, they can get in touch with you. Your phone number is very important, as some customers still prefer to talk to a person when placing an order.

Create a site that loads quickly. Studies show that customers will not wait for a site to load, but move on to the next business. You must keep in mind that customers, for the most part, are shopping online to make it quick and easy. They should be able to find what they need right away.

Make sure that your website is easy to navigate. Customers should be able to click and find what they need without getting confused or lost on your site. When creating a website, always keep the phrase "Keep It Simple Stupid" in mind. You need to create your site in a way that the customer does not have to think in order to find what they are looking for.

Create a site with a simple, light colored background. Studies show that customers are more receptive and willing to stay on sites that are light colored. The dark or busy backgrounds tend to distract from what you are trying to say and sell. Remember, the main focus of your site, should be your products.

When it comes to your product pictures, it is important that they are clear and professional looking. This does not mean you need to hire someone to do them for you. If taking them yourself, make sure you have a backdrop of some kind and take them in a well-lit area, preferably outside. You need to get as close up to the product as possible. Again, you must remember, it is your product that the customer is interested in, not the background. They want to see what they are paying for.
While it works for some sites, music, or sounds of any kind, is a turnoff to most customers. Many people find it annoying and may move away from your site for this reason. Remember, the most important thing in site design is to keep the customers looking…and ordering!!

Keep your ordering process easy!! Make sure that your shopping cart is easy to navigate and that there is no way to misunderstand the ordering process. They may love your product and want to order one, but if they get confused in the ordering process, they may move on. Make sure that there are areas for them to fill in their information, the recipients information (if different), and that they get their total charge, including shipping and taxes.

Make sure to include a policy or information page that states how your business handles different situations. This can include everything from satisfaction guarantees and return policies, to confidentiality statements, cancellations, shipping information, and more.


Now that you have these basic design ideas together and have created your website, you have to make it work for you!! You may have the most beautiful website and the most wonderful product around, but if customers don't know you are there, or can't find you, then your efforts will be lost! The search engines are constantly changing in the way they rank sites, but there are a few main items that all search engines look for.


The first, and most important item is your website content! Your home page should include the keywords you want to target. For example, if you are a gift basket business in San Diego, California and want to attract customers looking for gifts in this area, you would want to have something like "Offering Custom Gift Baskets in San Diego, California and surrounding areas." For the main keywords you want to rank in the search engines under, you want to have them on your page a few times. Something else that can increase your rankings in regard to your content words, is having the keywords done in bold. Say you have a total of five keywords or phrases that you are trying to optimize for. Normally you would have each of those keywords or phrases mentioned 3-4 times on your page. Only make ONE of each of those keywords bold and only make the keywords bold, not entire sentences. For example: Buy your custom gift basket from Premier Gifts, San Diego's #1 gift basket retailer.


The next item is your websites Title Tag. This is where you need to be able to create html code and write your meta tags. The title tag is becoming more and more important to search engine algorithms. High search engine ranking can be achieved by ensuring your title contains sufficient keywords while still remaining attractively descriptive of your sites contents. For example: Custom Gift Baskets, Corporate gifts in San Diego California by Premier Gifts.

Next is the Keyword Tag. Although nearly all search engines ignore this tag, it can be useful to place keywords here in order to help you focus on the keywords when writing your website text. A top search engine ranking is never achieved through stuffing keywords in your meta tag. Search engines like content!

Another very important tag is the Description Tag. This tag allows search engines to match what you have said about your site to the content you have listed in your site, and is a great way to improve rankings on search engines like Lycos, MSN, and HotBot. Your Description Tag is just what it says, a brief description of your website and what is there. Two main tips are to keep your description below 250 characters and do not list strings of keywords. For Example: Beautiful custom gift baskets for all occasions from Christmas to Easter, Mother's Day to Thanks you gifts, and much more. Delivering to San Diego, California and surrounding areas. Nationwide shipping of all gift baskets also available.

Now that you have created a website that is search engine friendly, you have to let the search engines know you are there. There are many ways to do this. Many search engines still allow you to submit for free, though they do not guarantee listings. Msn/Hotbot (fed through Inktomi), Alta Vista, and Ask Jeeves are 3 good places to start for the paid search engine submissions. Their fees start at about $30.00/year. Another form of search engine submission is the Pay-per-click option. We have not found this to be very productive, though your experiences may be different. You can achieve high rankings without having to pay for people to click on your site.
One of the biggest tools to increase your search engine rankings is what is called reciprocal links. The more websites on the World Wide Web that link to your website, the higher your rankings will be. Gift Basket directories, free advertising websites, and wedding directory sites are just a few good places to get more links to your site. The search engines want to see that you have joined in the "ocean of the internet" and are not just a lone fish!!


Now, if all this sounds like too much for you to do yourself, then the time has come to find a website designer that will work with you to get the site that you are looking for. There are many web designers out there that offer many different packages and prices. Here are a few key items to keep in mind when looking for a designer:


First and foremost, you want to find a designer with whom you are comfortable working with. Follow your instincts. If something is uncomfortable, chances are it will make things much more difficult for you to achieve the site you want.
Find out if domain registration is included in their packages. If not, you will need to register your domain separately.
Ask for references and check out other sites they have designed.
Check out their different design packages and what is included with each one. With a good web designer, you will pay for your basic start up design, hosting, and usually some free time each month included for changes. You should look for a package that includes 20 - 30 minutes of page changes per month before additional charges are incurred. This is going to be your site! Make sure you can have changes made without large fees adding up each month!!

Find out if they design your site as well as optimize it for the search engines. Also find out if they submit to search engines for you and if that charge is included. Once again, a beautiful site is great, but if no one can find it, the website will not work for you!!!


Taking your business to the World Wide Web is a big step, but can be a very profitable one if it is done right. Always remember that for your website and any other marketing tool you create, your products and the services you offer, should be the main focus!!! Don't spend your time adding fluff and stuff to your site, just give the customers what they are looking for…your products or services!!! Now is the time to introduce your business to the World Wide Web, so take the steps and create a winning site that works for you!!!

Create a Simple, Effective PHP Form for Your Web Site


If you have been struggling to set up forms on your web site
using cgi, then definitely read this article. Installing a
simple PHP form is much easier and faster than installing a cgi
form and doesn't need any programming experience.

How does a PHP form work?

PHP is short for "PHP: Hypertext Preprocessor". It is a
server-side, cross-platform, HTML embedded scripting language.

A server side scripting language allows you to create dynamic
web pages. Web pages that have been enabled with PHP are
treated just the same as any other HTML page, and PHP even lets
you create and edit them the same way you would create and edit
your HTML pages.

This PHP form consists of 3 web pages, an html page, a PHP page
(PHP script) and a thank you page. You collect the visitors
information when he fills out the form on the html page. It is
then processed by the PHP script which resides on the server.
The visitor automatically receives a "thank you for
subscribing" message. The form results are returned from the
server to your email box.

Server requirements for your PHP form

Check with your web host you have PHP4 installed on your server
Most Unix servers do - if so you are in luck and ready to go.

How to create the simple PHP form

You will create a very simple, effective form in which you will
collect the name, email address and comments of your visitors.
The form results will be sent to your email address.

1. Create the PHP script - copy and paste this code
Jack's FormMail.php script:

http://www.dtheatre.com/scripts/formmail

into notepad (not MS Word) and save it as formmail.php

2. Edit the fields - the only recommended field to edit is the
"referers" field. This field defines the domains that allow
forms to reside on and use your FormMail.php script. If you try
to put the form on another server, that is not the specified
domain or ip, you will receive an error message when someone
tries to fill out your form.

ie: $referers = ('ihost-websites.com','209.123.240.161');

3. Upload the formmail.php script to the web directory which you
are planning to use.

4. Configure your PHP form - create a web page (ie contact.htm)
for your PHP form.

5. Point the action of your form to the formmail.php script you
created in Step 1.


6. Add the necessary form fields - the "recipient field" is the
only form field that you must have in your form, for
formmail.php to work correctly.

This form field allows you to specify where you want your
form results to be mailed. Most likely you will want to
configure this option as a hidden form field with a value equal
to that of your e-mail address.

7. Enter optional form fields

"subject field" - this allows you to specify the subject that
you wish to appear in the e-mail that is sent to you after this
form has been filled out. If you do not have this option turned
on, then the script will default to a message subject: "Form
Submission".


8. Create a thank you page (thankyou.htm) - this web page will
automatically thank visitors for subscribing. Add your own
comments you wish them to receive. Upload this web page to your
server.

Tip: Use your own domain name, email and IP address in the
fields above.


9. Copy and paste this html form into your web page - name it
anything you like (ie contact.htm), then upload it to your
server.

10. Test out your form - when you fill out the form, you should
immediately receive the reply from your thankyou.htm page
and receive the form results in your email box.

Conclusion - you now have a fully functional and flexible PHP
form on your web site to collect visitor information. You can
add more fields to the form if necessary. You may also add any
number of HTML forms to your web site and still use the same
PHP script.

Log Analysis - a Tribute To Success

A completed website that is listed in search engines, hosted on a reliable server, and ready for action is a great thing. It holds nothing but promise and potential for greatness. A new site owner will look at the site with pride. Eventually, however, that pride turns to worry. Why? Because questions start to arise.

*Did I do something wrong that is turning customers away?
*How many people view the site and versus how many actually buy something?
*What can I change to improve my sales?

These questions, and more, can be answered by analyzing the log files kept by most web servers and hosts. You may or may not have access to these files, depending upon your host's setup. Here at Aaronz WebWorkz, your files are located on the /log directory of your website space. You can access them through FTP. Better yet, if you're a newsletter subscriber and hosted by Aaronz WebWorkz, ask how you can get your log analysis done once a month for FREE.

If you do not have access to your log files because of your current host's restrictions or setup, then you have the alternative of setting up a "free" tracking service. Be careful, however, as the statistics shown there can usually be viewed by anyone and are not always as in-depth or accurate as they could be. Plus they usually involve adding a new button or logo to your website to advertise for the free service provider.

If you have access to your raw logs, you can use software which will analyze these log files for you and give you a breakdown of statistics for the site. These programs are not always cheap. Generally, you get what you pay for. I have tried several "free" or very inexpensive ones and found them all to be lacking in some way or another. I finally spent the money ($100) and bought software that does the job efficiently and very well. I use "Open Web Scope" software, which can be found by going to:
http://openwebscope.com/Default.asp?vid=258

As a quick run-down of what can be seen in your Web logs and the power they will give you, here are a few basic features of most web log analysis:

"Unique Visitors"
This is the number of visitors which have accessed the website each day, week, and/or month (depending on your software). This tells you how many visitors have accessed your site and does not include people who visited more than once during the time period measured. This is an important number and, by itself, is enough to set you on fire as you begin seeing how many visitors versus sales you're making. Most logs measure unique visitors per day by default.

"Hits" & "Unique Hits"
This term should not be confused with "Unique Visitors" (above). "Hits" are a measure of how often something has been accessed, regardless of who accessed it when. So someone accessing your site several times a day will be counted each time they access each file and page of your site (a page could include fifteen or more images, all counted as hits!). Similarly, a "Unique Hits" measurement records the same number, but only once per visitor per time period (see "Unique Visitors" above). These numbers are nearly useless except as a basic measure of your site's activity. If you are worried about page loading times, however, this number for each page can tell you where you could possibly optimize to limit the number of "hits" per page (the more hits, the longer it takes for the page to load).

"Referring Sites" or "Referral URLs"
This is a great piece of information. Some logs give the last ten while others track all of them. The best ones give you the top ten followed by a complete list. The top ten are, of course, of main interest because these are the sites or IP addresses (if they cannot be resolved to a website address) that refer to your site most often. Usually they will be search engines, affiliate sites, or similar places. Most of these links refer directly to the web page the users were sent from so you can visit them yourself. Additionally, this will give you an idea of the keywords being used to access your site.

"Errors Reported"
This is another great tool for site optimization. These errors are usually nondescript and mean nothing to you - especially server-type errors such as "Cached reload" or similar. However, if you notice a lot of "Page Not Found" or "404" errors listed, you may need to double-check your site's links as something may be wrong!

"Days of the Week"
This is another useful tidbit of information as it tells you when your site is accessed most often. It usually includes the time of day as well. This also tells you the best day for updates (the day before the most popular day, obviously) and the best day to include incentives or promotions on your site.

These simple tools and bits of information are the basics of what you need to analyze your website's statistics and really begin focusing your marketing efforts towards realizing higher profits for you and a better user experience for your site visitors.

How to Install a CGI Script and Increase Web Site Interactivity

You may have delayed cgi script installation due to the apparently complex
process. Well, I avoided it also for several years, however if you want to
increase your web site's interactivity it's a necessity to know how to do it.
It's not hard to learn and you don't have to be a programmer.

What is CGI ?

Common Gateway Interface or CGI is a program that can interact with an
html form on your web site, and processes the results on your server using
a cgi script. The result generated is a dynamic web page. The cgi script is
written in a language called PERL ("practical extraction and reporting
language").

Uses of CGI Scripts

CGI scripts are most commonly used for creating user interaction with an html
form on your web site. Other uses include: autoresponders, shopping carts,
counters, mailing list managers, ad management, surveys, polls, discussion
boards, content management, calendars and click tracking.

There are 100s of free cgi scripts that can be found on the Net. Just do a search
on Google for "free cgi scripts" or visit the resources at the end of this article.

We will create an html email form to collect the name, email address and
comments of subscribers using a secure cgi formmail script. An automatic
confirmation will be sent and the results of the email form will be passed
on to your email address.

Steps to installing your own cgi script

1. Check that your web host supports CGI - your web host will have a cgi-bin
folder installed on the server. The cgi-bin is a special directory in the server
where all the files which require security are kept. This is where you will
upload your cgi script once it has been modified.

2. Download the cgi script - this is a secure cgi formmail script. Spammers
can't access and harvest your email address from this script.

http://nms-cgi.sourceforge.net/formmail.zip

3. Read the documentation that comes with the script - this will give you a
thorough understanding what changes you need to make to have it work
correctly with your web site and server. It will also provide you with some
examples.

Editing your script

4. Open and edit your cgi script using notepad (don't use an html editor as this
can create errors).

5. Remove the html tags from the script (at the top and bottom).

6. Change the path to perl to: #!/usr/bin/perl -wT (this is the first line of the
script to be edited).

7. Edit the script

8. Rename your cgi script - name your script something else besides
formmail (ie contactus.pl), as this is the most common name people use.
This will prevent spammers from harvesting your email address.

9. Create your html form (10. Create a confirmation page (ie thankyou.htm) - this will automatically
thank people for filling in your form. It can be a simple html page with the
comments "Thank you for your interest. We will respond shortly".

Uploading the cgi script and html email form.

Use your favorite FTP program for uploading to your server (I use
SmartFTP.com which you can download for free).

11. Set permissions to 755 - in SmartFTP right click on the script file you
wish to upload, click on Properties/CHMOD and set the permissions to 755.

12. Upload the cgi script - there are two modes of uploading, ASCII and Binary.
Upload the cgi script (contactus.pl) and any txt files in ASCII mode. Upload
the script to the cgi-bin folder. If you don't follow this you will not be able to
execute the script.

13. Upload the html form and any image files like .jpg or .gif in Binary mode.

14. Test your cgi script by filling out the html email form and submitting it.
You should receive an immediate confirmation.

By adding interactivity to your web site using a cgi script, you can expand the
functions of your web site and create a more interesting experience for your
visitors. This will keep them coming back and help you stay ahead of your
competitors.

http://www.isitebuild.com

Navigation Benefits of a Frame Web Site

Frame web sites are generally frowned upon by most web site designers
because they not supported by all browsers, take longer to load and are
not search engine friendly.

Why then would you want to create a frame web site or frame page?
In this article I will discuss what is a frame web site, the pros and
cons of frame pages and give a practical example of how to utilize
and design a frame page. I will also provide you with advanced
resources should you decide to pursue frame web sites a little deeper.

What is a frame web site?
This is when you combine several html pages in one browser window.

Pros and Cons of frame web sites
Pros
1. Easy navigation. The navigation bar remains stationary while the other
framed web pages change. This enables you to always know where you are.

2. Simple to design large web sites - if you create a web site of 300 pages
your navigation bar can remain the same while the other 300 pages change.

3. Keep visitors on your web site - you can design a frame page so that offsite
links appear in the larger frame instead of taking the visitor off site. Here's a
good example: http://www.virginia-real-estate-homes.com/frameset.shtml.
This uses a small navigation frame at the top which remains the same while
the main pages from another site appear in the larger frame.

Cons
1. Difficult for search engines to index frame web sites (although there are
ways around this).

2. Not supported by all browsers. The older browsers especially don't support
frame web sites and newer browsers are more supportive of Cascading Style
Sheets (CSS).

3. Slow loading - because a frame web page consists of several web pages
(frames), it takes longer to load than a single html page.

The main purpose of a frame page is to keep some information permanently
visible (ie navigation bar) while viewing other information (main pages)
that is subject to change. This makes it easy for a visitor to navigate say
300 pages of your site. The navigation menu or advertisement remains in
front of your visitor at all times, instead of creating one on each page.