7 Compelling Reasons to Start Using CSS for your W

7 Compelling Reasons to Start Using CSS for your Website

by: Bina Omar

If you haven’t heard of CSS, itกs short for Cascading Style Sheets. Iกm not going to go through what it is. There are many free articles and resources about CSS out there in the wild wild web.

Instead, Iกm going to share with you why I decided to switch to a CSS based design.

Iกve known about CSS for quite awhile now but I used it minimally on my sites. Mainly to control the default font used in my web pages and also to define certain styles that I seem to use over and over again. I never gave much thought about using CSS to itกs greatest potential.

I guess it was because I was already good at making web sites the way I made them, i.e. using tables. I didn’t want to have to learn a totally new way of doing things. So I stuck to tables for as long as I could.

Unfortunately, กas long as I couldก turned out to be until the middle of last month.

It started with my WebSite Workshop members area. I had added a new section and needed to update my navigation. I had a rollover navigation, pretty much like the one I have at MakeYourOwnWebSites.com. The only difference is that when someone clicks on a button, a secondary navigation will appear below.

I used images as my navigation buttons. So, in order to add one more section, I had to create a new image for that section and resize all the other button images so they would all fit nicely in one line. To top it off, I had two sets of images. One for the default button and another that replaces the default button when someone hovers over it. Thus, creating a roll over effect.

After creating the button images, there was also the need to use tables to arrange them nicely in a row. And this whole table had to go into a row in the main table of the page.

After a few solid hours into it, I started thinking, this is crazy. There must be an easier way to do this. All I wanted to do was add ONE more section.

I did a quick search on the net and realized that there was an easier way … using CSS.

I spent some time reading articles on CSS. Not so much about what it is or how to code it but rather what it could do and was I in for a surprise. Apparently, it could do more than I gave it credit for. Here are just some cools things about CSS:

1. Create roll over effects with ease

CSS makes it really easy to create roll over effects. Youกve probably seen this all over the web. If you haven’t, just hop over to MakeYourOwnWebSites.com. Check out the navigation at the top and the navigation on the right and links throughout the site. These were done using CSS only. No images required. Just view the source code and youกll find that the navigation is a simple unordered list.

2. Separate content from design

This oneกs a bit hard to explain. The best way I can think of to explain this is to point you to csszengarden.com. Hop over there now. Youกll see a list of styles you can select. Click on a few and youกll see what I mean. The content remains the same but the design is totally different. This comes in really handy when youกd like to change the look of your site without touching your HTML web pages. Just change one CSS file and your whole web site has a new look.

3. No more tables … almost

You no longer need extensive use of tables. No more nesting tables within tables. No more figuring out which closing table tags belong to which tables. No more deleting a single table cell and having your whole web site resemble chaos. Youกll still, however, need tables to tabulate your data. But thatกs about it.

4. Easy sitewide changes

Need to change the color or size of your H1 tags? All you have to do is change the color and size once in your CSS file and all H1 tags in your web pages will change.

5. More design effects

CSS offers you more design effects than normal HTML. With HTML you can change the color, font and style of your content. With CSS you can change the background color (e.g. set it to yellow to create a highlighter effect), create borders, change letter spacing, word spacing ….

6. Faster loading time

Reduced table use and reduced image use will lead us to faster loading time. Need I say more?

7. Search engine friendly

Now that all your design code is in your CSS file, what is left in your web pages? You got it … content. Thatกs not all, with CSS, you can even put your navigation text and other กnoncontentก content at the bottom of your HTML file but make it กappearก at the top using CSS. This way, search engines will find the more important content first.

Enough said. I think now you can understand why Iกm so excited about switching to a CSS based site design.

Copyright 2005 Bina Omar

About The Author

Bina runs the WebSite Workshop http://websiteworkshop.com, a membership site filled with tips, tools and tutorials for the novice webmaster. Subscribe to her free ezine, WebBriefcase!, and get your free 7 part course on กHow to Build Your Own Web Site in 7 Easy Stepsก mailto:[email protected]

This article was posted on February 28

by Bina Omar

How to Easily Create a SearchEngine Friendly Navi

How to Easily Create a SearchEngine Friendly Navigation Menu For Your Website

by: Fabian Lim

A navigation menu is an important element of a website.

A good navigation menu helps your visitors navigate through your website efficiently in as few mouseclicks as possible.

You can think of a website navigation menu like the ‘table of Contentsก of a book.

And the greater the number of web pages on your website, the more important the role of a website navigation menu.

Another important benefit of a navigation menu is it optimizes the internal linking structure of your website and allows the navigation menu links to rank better in search engines, since all web pages will be pointing to it.

(For example, if your website has 1000 web pages, each navigation menu link will have 1000 web pages pointing to it. This will result in the navigation menu links ranking higher than the other web pages)

Hereกs how you can use this knowledge to improve the searchengine rankings of selected web pages Simply include the selected web pages as links in the navigation menu and youกll automatically have the rest of the web pages pointing to them.

And finally, hereกs one method you can use to easily create a website navigation menu Using Server Side Includes (SSI).

What are Server Side Includes?

Server Side Includes (SSI) are simply instructions (also known as กdirectivesก) that are included in a HTML document to execute a specific command e.g. inserting the content of an HTML file.

The SSI directives are กprocessedก at the Server side, before it reaches the requesting browser (hence the name Server Side Includes).

As a result, the กprocessedก SSI directives merge seamlessly with the HTML file.

Hereกs an example of SSI in action at a website (i.e. the left navigation menu):

http://www.BizSuccessOnline.com.

Notice the left navigation menu is made up of static HTML links.

This is to allow searchengine spiders to crawl through the website to discover other web pages (via the navigation menu links).

An alternative solution to get your web pages spidered by searchengines is to use a sitemap.

A sitemap is simply a webpage that contains links to every webpage on your website and should be linked from your home page.

This will provide the searchengine spiders a path to follow and will ultimately result in your web pages getting fully indexed.

You can learn more about sitemaps here:

http://SiteMapSoftware.com

Note that most, but not all servers have SSIกs enabled. Please check with your web host to find out whether SSI is enabled in your server.

How to Easily Create a Navigation Menu Using SSI?

Step 1# Create a HTML navigation menu file

This is the navigation menu file that will be inserted into your HTML pages and is also your HTML navigation menu template.

A simple horizontal text HTML navigation menu can look like this:

Home | Products | Pricing | About Us | Contact Us

(Youกll need to hyperlink each of the above text to make these navigation links clickable by using your favorite HTML editor e.g. FrontPage or Dreamweaver)

You need to save this file with a .shtml extension once this file has been created e.g. topnavi.shtml

Step 2# Insert navigation menu file into HTML file

Open up the HTML file (e.g. products.html) and place the cursor on the location where you wish to insert the navigation menu.

Click here to view the SSI directive: http://BizSuccessOnline.com/SSI_CodeSnippet

And copy and paste the above SSI directive at the cursor.

(Be sure to replace กyour_navigation_filename.shtmlก with the name of your navigation menu file)

Note: You CANNOT use absolute path with an SSI directive: e.g. do not use http://yourdomain.com/topnavi.shtml

And finally, save the HTML file with a .shtml extension e.g. products.shtml

Step 3# Upload files onto your server

The last step is to upload the newly created .shtml files onto your web server and check to make sure the pages display properly.

And if you view the HTML source code of your HTML file on a live internet connection, youกll notice that the SSI directive would have been replaced by the actual HTML navigation menu code.

Maintaining your navigation menu is now a simple matter of changing the contents on the navigation file.

Thatกs all there is to it!

Give it a go!

Copyright 2004 Fabian Lim

About The Author

Fabian Lim is a Management/Internet Marketing Consultant. He helps organizations and individuals succeed online. He publishes กBizSuccess Tipsก, a No Hype, No B.S. online marketing newsletter. Visit his website at: http://BizSuccessOnline.com

This article was posted on April 13, 2004

by Fabian Lim

Optimize Site Navigation For Higher Adsense Earnin

Optimize Site Navigation For Higher Adsense Earnings

by: Bas de Baar

A lot of webmasters that use Adsense as a source of income, are going after the so called high paying keywords. There are methods to determine this, you can even buy lists that hand them over to you. However, after they have put up there ขhigh payingข pages there is no sound of the expected cash.

Having those pages is one thing… Driving visitors towards them, is another. The easiest, and most obvious way to funnel people to your high paying keyword pages, is by optimizing your site navigation for this purpose.

When people visit your website, they don’t always view just one page. They also get from their entry page to another page that they might find interesting. They find this page by links that are provided to them on their page of entry. How you help people to get around on your site is what is meant by ขSite Navigationข.

A typical website has a menu on each page; a menu that gets them from one section to another on your site. What decides them to click on a link to another section is the words used to indicate the link. ขFree Resourcesข or ขDownload ebooksข might get their attention.

In respect to your Adsense earnings, you should track your site navigation to drive people to your high paying pages. I have some pages that get a lot of traffic from search engines, but the earnings on these pages are very low. So I use some clever navigation on these pages to lure people to some higher earning pages. By using this technique you can turn some cheap clicks into dollars.

How to start the testing?

First of all, you must have something to track, something to compare. Second, you must select some high earning pages you want to funnel your traffic to.

To get the fastest results, you should select some of your highly visited pages.

Then you have to think about what might convince people on a particular page to move to a high earning page. Try to find some description that would get their attention. Next step is to think about a suited location to place the link on the webpage.

Within the article itself, on the bottom as recommended resources, just above the main menu… Get creative and, especially, look around at other site to see how they do it (e.g. Hot Pages list, or Most read articles are very common).

You don’t have to stick with plain text links. You can also use some graphic to get peoples attention. Look around, and get ideas.

As with the testing of Adsense ads, try different texts on different pages, so you can get a feeling of what works and what not. Mix and match, put links on top, put them on the bottom.

And after that, it’s just testing, tracking, testing and tracking again.

About The Author

Article by Bas de Baar, author of the free ebook กAnalyzing Adsense For Niche Websitesก. To learn how you can increase online profits by testing and analyzing, go to: http://www.AffiliatePotion.com.

This article was posted on April 03

by Bas de Baar

Ten Steps To A Well Optimized Website Step 6: Hu

Ten Steps To A Well Optimized Website Step 6: Human Testing

by: Mary Davies

Welcome to part six in this search engine positioning series. Last week we discussed the importance of internal linking. In part six we will cover the obvious and yet often overlooked importance of its appeal to a reallive human being.

While not directly related to SEO it is so often overlooked in the quest for higher search engine positioning that it has become a fundamental step in our ten step series.

Over this series we will cover the ten key aspects to a solid search engine positioning campaign.

The Ten Steps We Will Go Through Are:

Keyword Selection (http://www.beanstalkinc.com/articles/searchenginepositioning/keywords.htm)

Content Creation (http://www.beanstalkinc.com/articles/searchenginepositioning/content.htm)

Site Structure (http://www.beanstalkinc.com/articles/searchenginepositioning/structure.htm)

Optimization (http://www.beanstalkinc.com/articles/searchenginepositioning/optimization.htm)

Internal Linking (http://www.beanstalkinc.com/articles/searchenginepositioning/internallinking.htm)

Human Testing

Submissions

Link Building

Monitoring

The Extras

Step Six Human Testing

The most important part of your website is to reach the visitor. You have taken all the steps to create a great design and added SEO elements to your site, you have created the perfect online presence. Now to see if all that hard work has attained the main goal, to reach the visitor and steer them in the direction most desirable.

First things first, nowกs the time to check for the careless errors that happen along the way, things like spelling mistakes, paragraph breaks, incorrect wording etc. Once you have given your new beauty a once over pass it around and get others to do the same, preferably people who have never read the content before. The problem with relying on yourself to proof read is that you already expect what you are going to see and do not read it in its entirety the way someone would at first glance.

Once the text is out of the way have some fresh eyes again take a look at the site. Are there images that they find appealing, unappealing, distracting? Is there anything in the layout of the content that is too busy or confusing? Once youกve done a check of the visual appeal of the site you will move onto navigation.

When having someone test your site navigation it is again very important to use fresh eyes, make sure these people have no idea what to expect or where to find anything this way they will be free to follow your beautifully laid out website or fumble and stumble into some dark hole of your site, lost screaming for help. Okay, perhaps I may have given the worstcase scenario however, how many of us can say we have never been in that horrid place? These human testers will be sure to let you know just how your site navigation works for them. They are the average visitor and if they find what they are looking for easily then you can congratulate yourself on having such great intuition and move on to the rest of the tests to come. If there are problems in the navigation I cannot stress enough how very important it is that you address these immediately. You must get the desired information across as easily and quickly as possible.

While on the topic of navigation letกs discuss the different possibilities of the placement of your main navigation. The majority of sites out there either have their main nav on the left or the top of the page. Is there one that is better? Well, they both have their perks, either is good, anything else is bad. The majority of visitors look in these two places to navigate because that is where it always is. There will be other navigation elements throughout your site that will not be listed in your main navigation area, these internal text and image links should be well placed and easily followed IN BOTH DIRECTIONS. Itกs great to give the visitor the option to check out information further into your site but you really want to be sure they can get back to where they came from, especially if you are sending them off to information and away from the product pages. Ways to achieve this are to have the information open in a new window, add a กback to previous pageก link or add breadcrumb navigation. What you choose will depend on the overall structure of your site as well as the size of your site. If the main nav includes all of your pages (as in some small sites) then there is no need to add these nav elements however in larger sites it is easy for a visitor to get lost if the navigation has not been tried and tested and designed specifically for ease of use. All in all, play with the navigation and test and retest it until there are no problems. The site navigation is so very important your visitors MUST be able to browse through your site easily and without frustration.

The placement of your content is equally important. If you are selling something obviously you want it offered as easily as possible, and you don’t just want it to be available you want to sell it. There are many ideas to consider when deciding on the placement of certain content. A great read that really shows the way a visitor looks through your site can be found at http://www.poynterextra.org/eyetrack2004/main.htm. Taking a look through this information can give you lots of tips to work with in deciding on product and special offer placement etc. In the abovementioned article you will be able to see the way an average visitor views a website, the pattern in which their eyes follow the information, the advertising positions that are most effective, etc. This is a great resource for you and your company.

Quite possibly one of the most useful tools available is found at http://www.clicktracks.com/ananlyzer/. This tool will show you all the very specific details of how visitors are navigating your site. This tool is many steps above your typical web stats, it will show you details so specific that you can not only see the search term a visitor used to find you but what search engine they came from and the path they followed through your site right down to which search term is selling the most on your site. This highly detailed information can be an incredibly valuable tool for you. With access to such info you can, over time, adjust your content, navigation, and SEO based on these reports watching the changes happen and see the effects not just make good guesses.

The value of having an average visitor test your site and get real feedback is huge. You have no choice but to be a little biased when viewing your own site and this outsider information can give you tips that you may have only wished you had. Don’t put your site out there and wonder what all the visitors are thinking and doing, just ask! You may even go as far as having a poll included on your website, so long as itกs not popping up every time they click a link. A simple กwe welcome your feedbackก email form on your contact or profile page would be a professional simple way to keep up with what the visitors are liking or disliking on a continuous basis.

Next Week

Now that your site has been designed, had SEO elements added, tested and edited, you are ready to submit it to the search engines and get those visitors coming. Stay tuned for the next article in this 10 part series กSubmissionsก.

About The Author

Article written by Mary Davies of Beanstalk Search Engine Positioning (http://www.beanstalkinc.com/). With years of experience in custom search engine friendly web design and a strong ability to understand what the consumer likes to see and how they want to navigate websites, Mary writes on search engine friendly design, functional designs for humans, and warnings about design practices that hinder both search engines and site visitors.

[email protected]

This article was posted on November 30, 2004

by Mary Davies

What Makes a Site Lucrative?

What Makes a Site Lucrative?

by: Maricon Williams

People ask too many things about websites. They ask about the key points to remember in order for their website to conquer the Web as well as to boost their sales. They ask about the right colors to use, layout, content and the likes. So many queries but it all sums up to one thing – a profitable website.

To boot, in order for your website to be lucrative, it must exude total equilibrium with all its elements. What do I mean with total equilibrium? Well, it’s simple. It involves six crucial rudiments – organization, focus, design, navigation, technology and marketing. Short of one rudiment means your website is incomplete and lacking. One by one lets us discuss their essence.

Organization

A design must be detailoriented. Just like a piece of art, each detail must contribute to the overall projection of the whole. Nevertheless, it must only have what it needs and nothing more. It is with semblance to the maxim in clothing that it is better to be underdressed than overdressed. This is because it can tend to lead the visitors astray. They may not be aware of where to go or where to look at. This is the reason why it is always safe to keep it simple and in order yet not tedious. Follow the basic rules and your readership will surely soar.

Focus

All sites have goals. In order to achieve that goal focus is necessary. Objectives must be met in a way that the target audience can relate and look forward to working hand in hand with you.

Design

Design must be simple with web safe colors. Design is something that will not punish the eyes of the readers, something that will not look shameful but a memorable and professional epitome of both art and function. It is advisable to use toolbars on homepages however, it must not be more than ten. Another thing that you should consider is its size. Ordinary home page has a standard 17ข size without any scrolling involved.

Navigation

Easy navigation means quick routing. That way visitor can transfer from one page to another without any difficulty. Giving burdens to visitor may mean annoyance and will most likely result to poor cooperation and realization of your goal.

Technology

It is noteworthy that a website should use accurate technology in order to meet its objectives and dynamics. It must be recent and up to date so that your target readers may not find it passé and rotten. You can utilize all possible resources so long as it will redound to the benefit and efficacy of your website.

Marketing

Lastly, the domain name must be easy to recall. It can bear the company/business name or something that will easily be connected to your products or services. It must have a onetoone marketing practice – an abode that will make clients comfortable and at ease. It must also be something that will make visitors come back for more!

About The Author

Maricon Williams

I love reading. Give me a book and Iกll finish it in one sitting. Reading is the chance to be transported to a different world and so is writing. Iกm more enthusiastic about writing however, since you can relay your ideas to someone else. I can only imagine that feeling when I hear a complete stranger talking about my ideas which read on an article somewhere. To relay my message to as many people is the same as touching people with music. Only mineกs less harmonic. I try to make up for it with the color I bring with words. And most of the time, it’s more than enough.

For comments, questions and additional information about web development, visit http://www.webdevelopmentpros.com

[email protected]

This article was posted on April 15

by Maricon Williams

Keep Your Navigation Simple!

Keep Your Navigation Simple!

by: Jamie Kiley

Navigation must be simple. Since itกs the backbone of your site, itกs imperative that visitors be able to understand it. Here are two tips on how to make simplicity a reality in your site:

1. Your link titles need to be understandable.

Visitors need to know exactly what link to click on for the info they need. Unfortunately, visitors frequently get confused and don’t understand what a link means. Consequently, they aren’t sure what info theyกll find at the other end of the link.

Often, a link name that makes complete sense to you will mean nothing to the visitor. For example, I once used a link called ‘resourcesก in the navigation bar of a site for a client. This section of the site contained various articles and links to outside sites with helpful information.

However, after a little bit of testing, I discovered that most people had no idea what I meant by ‘resourcesก. They didn’t know what kind of information was in that area. Also, when visitors tried to look for articles, they didn’t think to check the Resources section.

In other words, the link wasn’t doing anyone any good.

The difference between your understanding of a term and a visitorกs understanding of the same term can be rather drastic. This happens because you are so close to your own business and your own site.

Itกs important to remember that visitors don’t know nearly as much about your business as you do. They often have no background knowledge, and they might not know standard terms in your industry. Sometimes, youกll have to work to come up with terms and phrases for your links that are meaningful to the visitor.

Hereกs one general principle: Don’t use clever terms.

Although clever attentiongetters often work well in the offline world, itกs different online. In character with their generally hurried attitude, web users want to know exactly where they are going and what they will find when they click on a link. They don’t like guessing games and are usually not enticed by clever leadins. What lies beyond them is simply not clear.

Cleverness doesn’t belong in navigation unless you’re positive the meaning will be understood by everyone. You should avoid anything that isn’t straightforward and clear. Steer away from any terms that obscure what your links are really about.

Also, you should be very careful about using industryspecific terms. You might be suprised to find out how much of your lingo doesn’t make sense to people who aren’t familiar with your industry. Carefully evaluate each of your links to make sure you’re not using a confusing term.

2. Navigation options need to be kept to a minimum

The second way you can simplify your navigation is to make the amount of options manageable. Visitors tend to get overwhelmed if you give them too many choices. They aren’t able to focus. Rather than seeing each individual option, they only see a mass of links.

An additional reason not to include too many links is that you ordinarily shouldn’t send visitors in a lot of different directions. If youกve established a primary goal for your site (you have, haven’t you?), your site should revolve around accomplishing that goal. So itกs in your best interest to keep the options down. That way, you’re able to steer your visitors in the direction you want them to go.

Keep your navigation menus to 57 options or less. Thatกs the max amount you can have without losing your visitorsก concentration. Any more than that, and they aren’t able to discern an individual choice.

If you find yourself having more than 57 options in each of your navigation menus, try to pare them down. Itกs better to simplify the list and make sure visitors can evaluate everything than to cram everything in when visitors will miss most of it.

If you really need more than 7 links, group the links into a few categories. Although this can still get overwhelming, it helps significantly if you categorize links for visitors. They can latch onto one category and narrow it down from there, rather than having to deal with the whole list at once.

Overall, try to objectively evaluate your navigation from the point of view of a visitor. If you can, get input from people who aren’t familiar with your site or your business. Theyกll be a great resource in helping you determine whether or not your links are confusing or overwhelming.

About The Author

There are 605.6 million people online. Can they find your business? Jamie Kiley creates powerful and engaging websites that make sure YOUR company gets noticed. Visit http://www.kianta.com for a free quote. Get a quick, free web design tip every two weekssign up for Jamieกs newsletter: http://www.kianta.com/newsletter.php

[email protected]

This article was posted on January 29, 2003

by Jamie Kiley

Building your first Web Site

Building your first Web Site

by: AnnaMarie Stewart

The ease with which visitors are able to use a Web Site is very important, especially if you`re trying to market something from the site. Usability is very much about how quickly and easily visitors are able to move around the site and not just about making sure everything on the site works.

The need for your website to be easily navigated is enormous. Messy, disruptive and confusing sites are a huge turn off to potential customers. In other words: if you`re looking to make sales, make sure your website is easy to navigate so as not to chase off visitors at first sight.

Navigation (links for moving around the site) is extremely important if you want your visitors to look at more than just your main page. If navigation choices are unclear, most visitors will just hit the กCloseก button, never to be seen again.

As a rule of thumb, the main navigation is usually placed in the top 1/3 of the web page or on the left hand column, and the secondary navigation tends to be placed within the bottom 2/3 of the page, or on the right hand column. Of course, this is entirely your choice, because, as with all rules, there ARE exceptions ;~)

If you want to build your website on your own from scratch, I highly recommend getting some free webspace to practice on, especially if you`re new to sitebuilding. Try a few different ones and see which one is best for you, but keep in mind that to be taken seriously, you really will need to get your own domain and proper hosting for your site at some point in time.

Some free webspace hosts:

http://www.freeservers.com

http://www.50megs.com

http://www.20m.com

http://www.tripod.lycos.com

Of course, not everybody is an expert in hmtl, perl, php and things like that, so I`ve listed a few resources that you may find helpful in designing your first website.

Free website templates:

http://freesitetemplates.com

http://www.freewebtemplates.com

http://www.templatesbox.com

http://www.freelayouts.com

Free banner templates:

http://www.animationonline.com/S/banner_templates.html

http://www.pysoft.com/GIF_Designer_Banners1.html

http://www.clickfire.com/content/graphics/banners

Free scripts, tools etc:

http://www.freescripts.net

Offers html guide, email checker, chat, and many other things.

http://www.freewebmastertools.com

Has over 1400 Directory resources for web development

http://resources.bravenet.com/scripts_archive/javascript_dhtml

Offers free clocks, colors, images, menus, mouse effects, scrollers and more.

And finally, some free HTML help and tutorials:

Some simple HTML codes to spice up your web site:

http://www.websource.net/html_tips.htm

HTML articles and tutorials:

http://www.iboost.com/build/programming/html

Simple HTML tags:

http://htmlgoodies.earthweb.com/primers/primer_2.html

Just what it says: How to build HTML:

http://www.howtobuildhtml.com

Should you decide you want a ‘realก website from the start, with your own domain name and paid hosting but you still have problems designing one yourself, there`s plenty of places where you can find web designers at affordable prices, or maybe even free. Talk with friends, see if they have any knowledge on the subject, ask if they`d be willing to help you. Do a search on Google or Yahoo for forums, chatrooms and suchlike pertaining to website design., try bartering something in return for web design services. You`ll be amazed at what a little bartering can bring you ;~)

======Resource Box=======

How to easily avoid those contrived Scams, Shams, and Spam. Yes; without spending your Hard won money with every so called Guru. Be far better informed and prepared With This Brand New, Huge money Saving Free EBook! Now You can quickly learn how to run a real home spun business without all the Hype. http://annamarketing.com/pops/splash.html. Subscribe to Not Just Another Ezine http://annamarketing.com

=====================

This article is available for reprint in your optin ezine, web site or ebook. You MUST agree not to make any changes to the article and the RESOURCE BOX MUST be included.

(c) 20022004 AnnaMarketing.com. All Rights Reserved

About The Author

AnnaMarie Stewart has been involved with internet marketing since 1999. She has always tried to help people กmake a go of itก online, by sharing her own experiences with as many people as possible. She now publishes กNot Just Another Ezineก a FREE weekly newsletter at http://annamarketing.com dedicated to helping newbie and semipro internet marketers avoid the pitfalls BEFORE getting burnt.

[email protected]

This article was posted on November 06, 2004

by AnnaMarie Stewart

The Immutable Laws Of Effective Navigation Part

The Immutable Laws Of Effective Navigation Part 1

by: Jamie Kiley

The first immutable law of effective navigation: Itกs gotta be readily available.

Visitors should not have to hunt for your navigation or wonder where to find it. If youกve done your job right, it will be right there when they are ready for it.

The struggle in creating good navigation is to figure out what type of navigation the visitor is going to need, when he is going to need it, and where the most effective placement will be.

Basically, you have to anticipate your visitors needs and have a solution ready.

Here are four key areas where you can squeeze out the most effectiveness:

1. Global navigation.

Global navigation is a set of links to all the main areas of your site that is available on every page of the site in the same place. Global navigation is a musthave, because it gives visitors ready access to the key areas on your site.

If you don’t have this type of navigation, visitors tend to get lost. They lose their ability to easily move around between the main sections.

When you use global navigation, visitors develop a sense of familiarity with your site because the site is consistent. When they need to find something, they know right where to look for it.

Global navigation should be across the top of the page or down the left side, since these two places are where visitors will look first.

Also, itกs crucial that global navigation be in the first fold of the page. This means it needs to be visible in the first window the visitor sees before they scroll down. Since these options represent the most crucial sections of your site, itกs imperative that visitors see them immediately. Never put your main navigation below the fold.

2. Spotlighted navigation.

On many sites, there are a few navigation options that get the spotlight in the center of the main page. The concept is greathook visitors with the key areas right up front.

However, many people completely miss the boat because they focus on the wrong links. Frequently, they link to the company history or the mission statement.

Wrong focus. Visitors don’t care.

You have to concentrate on whatกs important to your reader and what they want to see. What are the most important places visitors are likely to go on your site? Which pages are really crucial? Put those things front and center.

As with global navigation, all spotlighted links should also be above the fold. This point might seem obvious, but Iกve seen quite a few sites recently that almost hide the important links. They are buried too far down in the site.

One site in particular placed the two most important links at the bottom of the page, completely out of site. Big mistake: visitors just won’t see them.

Although navigation usually shouldn’t be the primary focus of your page (that honor belongs to content), it should be given a prime position.

3. Contextual navigation.

Contextual navigation refers to links that give more info about something specific the visitor is trying to do.

On every page of your site, youกll have to anticipate the questions a visitor is going to have. Figure out what kind of additional information they might need. Then provide links to that information at the precise place that they will have the question.

One good rule is that any time you refer to information on another page of your site or on a third partyกs site, link directly to that info. Don’t make them hunt and peck trying to find it for themselves. Make it readily available.

4. Bottomofthepage navigation.

Whenever the visitor gets to the end of a page, they are left hanging. They have finished whatever it is they were working on, and now they need somewhere else to go.

This is a critical moment, because it is terribly easy for a visitor to leave if you don’t give them somewhere to go. It is your responsibility to point them in the right direction.

Never, never, never leave visitors without suggestions at the bottom of a page.

If possible, you should try to decide on 13 places that the visitor is most likely to want to go next. Think about your most important goals for them. Then guide them in that direction.

Always make sure there is at least one link at the bottom of a page.

You must make it easy for visitors to do what you want them to do. Always ask yourself…

Where are my visitors going to need a link and how can I make that link really obvious to them?

About The Author

There are 605.6 million people online. Can they find your business? Jamie Kiley creates powerful and engaging websites that make sure YOUR company gets noticed. Visit www.kianta.com for a free quote.

Get a quick, free web design tip every two weekssign up for Jamieกs newsletter: www.kianta.com/newsletter.php

[email protected]

This article was posted on November 18, 2002

by Jamie Kiley

SSI: Why and How to Use Server Side Includes

SSI: Why and How to Use Server Side Includes

by: David Leonhardt

If you are a webmaster or a website owner and have not yet used server side includes (SSI), I am about to make your life soooo much easier. SSI can save you a lot of time updating your site. Set them up right at the beginning and you will be forever grateful that somebody thought up SSI.
In this article we will look at what SSI is, why it makes life so easy, and exactly how to set up SSI on your website…and then Iกll share two little bonus tricks Iกve discovered.
What is SSI?
SSI actually covers a number of features to improve your website. I am going to speak here of just one critical improvement, referred to as an กincludeก file.
Essentially, an กincludeก file is a separate file that your web page can include as if it was part of the page file. Letกs take a reallife example. My site at http://www.vitaminsupplementsstore.net uses SSI in a number of places.
If you are used to using FrontPage or have recently learned HTML, you probably assume that every web page is a single html file. The example above is actually five files. There is the main HTML file for the page. There is a style sheet (CSS) and there are three SSI กincludeก files one for the left navigation menu and two for the two navigation menus across the bottom. I could have, perhaps even should have, used more กincludeก files, but you can be the judge when youกve finished reading this article.
Why use SSI?
SSI makes it easy to bring changes to your website. There are some changes you will need to make to every page or to every page in a specific section. Your website might start out with just 10 pages, and you might figure that it is no big deal to cutandpaste a change to the navigation menu 10 times.
But each time you add a page, you have to update that menu. And with each new page added, you have to paste one more time. When you reach 50 pages (Never thought your website would grow that big? You’re not alone.) it becomes very tedious to update.
For instance, when I wanted to add the website monitoring logo and the link to the navigation menu at http://www.thehappyguy.com, I had to change just one file, and presto! the change appeared on every page of the site bearing that navigation menu. It was so very much easier than past updates before I began using SSI.
There are two other benefits to SSI กincludeก files. Because a single line of code replaces what might have been several dozen in each HTML file, your files are much smaller, taking less space on your server. And, because the กincludeก file has already been loaded with the first page a visitor sees, the next page is much quicker for visitors to load.
How to set up SSI?
You need three things to set up SSI.

Configure your server for SSI
Set up your กincludeก file
Call up your กincludeก file into your web page HTML file

First, you need your server configured for SSI. Ask your web host if this has already been done. Also ask if it has been set up to parse .html extensions to read SSI.
If your server has been set up for SSI, you are one step closer. If it has also been set up to parse .html extensions to read SSI, you are two steps closer.
Not all hosts support SSI, but most do. If yours does, but it has not been set up for your account, look for the .htaccess file in your root directory (where your index.html or home page file is stored). In my experience, this is not usually viewable using an FTP process; you have to find it through your control panel.
The .htaccess file is a text file. If you do not already have an .htaccess file on your server, you can create one in NotePad or even in Word (just save it with a .txt extension), but whatever you do, make sure not to write over a .htaccess file already on your server. If it is already there, just add the following lines to the file, being careful not to erase anything that is already there:

AddType text/html .shtml

AddHandler serverparsed .shtml

Options Indexes FollowSymLinks Includes

So far, so good. But this will recognize only .shtml files for includes, and you probably don’t want to change the .html extensions to .shtml on all your pages, if for no other reason because it will mess up all your inbound links to those pages.
So add this line. In theory, it should be the second line, but careless me has gotten it to work at the end, too:
AddHandler serverparsed .html
Save the edited .htaccess file to the root directory of your server.
As an aside, there are several ways to configure your server for SSI. This one has worked for me across several hosts.
So much for the techie stuff, now you need the second element: the กincludeก file itself. Suppose your กincludeก file is the navigation menu. You don’t need กheadก and ‘titleก and กbodyก tags. Just type in your text and code just the way it would appear in your webpage. Itกs that simple. Save it as an HTML file, and load it to your route directory or to its own directory.
All you need now, is to call up your navigation menu in each file you want it to appear in. To do this, a simple line suffices where a whole column of code and text once stood.
Here is the line to place in your code:
This assumes that nav1.html is the name of the กincludeก file and that it is in the same directory as the page it is being inserted into. If you place the file into a directory called กnavก, you would have to include code like this in your web page file:
Thatกs all you really need to know. But here are a couple bonus tricks that will make SSI กincludesก work even better for you.
Bonus Tip #1
You don’t need to stuff everything into a single SSI file. What if some elements you want on some pages and others not? Let me offer two examples of situations that call for splitting the SSI กincludeก file in two.
The first is on my vitamin site. Return to http://www.vitaminsupplementsstore.net and look at the links across the bottom. The first row is typical website stuff: contact, privacy, etc., which one wants access to from every page of the site. The second is the links directory, which a webmaster does not typically want linked from every page. For example, see the bottom of my humor article at http://www.vitaminsupplementsstore.net/articles/eggs.html. The row of links directory is not there.
The second example is this article on search engine tips: http://www.thehappyguy.com/SEOtips.html. Notice again that there are two different navigation consoles. The first is generic to the site, the second is specific to that section of the site. So a second SSI กincludeก file, using just one additional line of code, can provide interlinking for the section, without affecting other sections of the website. This is very handy for large sites.
Bonus Tip #2
You can also use an SSI กincludeก file to hide some of your source code. I will show you a ridiculously simple way to do this.
There are at least two legitimate reasons why somebody might want to hide parts of their code. The most obvious would be if you are running a proprietary script. The second is if you are running a script that displays content, but shows up as a script in the source code. This was my challenge.
At the bottom of the navigation menu at http://www.thehappyguy.com/selfactualizationarticles.html, there is a กHappiness Quote of the Dayก. In fact, it is a random quote that reloads when the page reloads. I had included the randomtext script in the SSI กincludeก file, but the search engines were seeing the script in the source code, not the text that human visitors were seeing. So I placed the script in its own กincludeก file, which I inserted like this into the main กincludeก file:
Now the search engines see the same things as humans see. Why would I care? Search engines visit more frequently pages that change more frequently. That does not mean the site will rank higher, unless frequent change is part of the search engineกs ranking algorithm, but it does mean that other changes will be indexed faster.
To sum up, SSI กincludesก can save you time and headaches when changes need to be made to your site, plus they reduce the file size and increase the loading time of your pages. Once youกve set up the server to read SSI, all you need to do is create an กincludeก file and call it up in your web page using one line of code.
I can hardly believe I wasted so much time cutting and pasting before I learned about SSI. You won’t believe it either!

About The Author

David Leonhardt is a freelance writer, and an online and offline publicity specialist. Contact him at: mailto:[email protected]

For a copy of Don’t Get Banned By The Search Engines:

http://www.thehappyguy.com/SEO.html

For a copy of Get In The News:

http://thehappyguy.com/publicityselfpromotionreport.html .

To promote your website with an ezine:

http://www.thehappyguy.com/ezines.html

[email protected]

This article was posted on May 18, 2004

by David Leonhardt

Make Your Navigation Highly Visible

Make Your Navigation Highly Visible

by: Jamie Kiley

Effective navigation stands out. Itกs clear, obvious, and highly visible.

Youกll need to have a clear section of the page designated for navigationone that a visitor will immediately recognize as the navigation area when he arrives at the site. Navigation should not necessarily be the prime focus, but it must be highly visible.

On many sites, the main navigation is overly subdued. It sort of กlurksก on the page, but itกs not the kind of thing that really gets to a visitorกs consciousness. It gets drowned out because there is too much color or excitement in the rest of the page.

Occasionally, this is ok. You may have some navigation options, such as a privacy policy, that need to be available, but don’t need to be emphasized.

However, aside from those few exceptions, youกll want your navigation to be used. So it will need a voice loud enough to be heard above the excitement of the rest of the site.

Here are 4 tips to make sure your navigation stands out:

1. Put it in a prime spot

Itกs all about positioning. Give your main navigation good placement at the top or left of the page.

When visitors arrive at a page, they scan in an orderly pattern from left to right, starting in the top left corner and working down the page. So if your navigation is at the top or on the left, itกs going to be seen fairly quickly. Also, this is where visitors expect to find navigation, so theyกll be primed to notice it there.

2. Use color

Besides size, color is the best way to get something noticed on a page. You can use color very powerfully in drawing out your navigation.

A very common technique is to place navigation options on a colored field, on a horizontal bar or a sidebar. This is effective because it creates a strong contrast with other elements on the page.

Just remember, the brightest, most vivid, most saturated colors will stand out the most. You don’t necessarily need to use a strong color for your navigation, but you do need to look at how your navigation color mixes with the rest of the page.

If you have a very bright site, pale colors in your navigation won’t cut it. But if the site is fairly subdued, even a hint of color to draw out your navigation will be plenty of contrast.

3. Give it space

If your navigation has a lot of clutter around it, it stands a smaller chance of getting noticed. In a busy situation, people do not notice detail. Itกs very hard for them to pick out specific items. Think about the difficulty of trying to find somebody in a crowded room.

Visitors will pick out the elements of your page that have the most breathing room. So be sure to leave plenty of space around your navigation. Don’t let other elementsespecially other textget so close that the navigation is crowded out.

4. Separate it from ads

If want your navigation to be noticed, keep it away from ads.

People on the web are highly suceptible to กbanner blindnessก. Thatกs a real condition in which people ignore anything that is associated with an ad. Since most people are not fond of ads they try to avoid them. So keep ads and navigation physically separated. Don’t let them get mixed together.

Two key pointers: never put navigation above the logo. Since banners are frequently located in the center of the top of the page, thatกs a prime spot to be ignored.

Also, if you have a blank, empty white space between your logo and something on the right side of the page, be very careful about filling it with navigation. It will be confused with banners simply because of guilt by association.

In addition to physically separating ads and navigation, you should make sure that your navigation doesn’t LOOK like an ad. Square or rectangular buttons and images at the top and sides of the page are especially problematic.

For example, take a look at http://www.sendfree.com. Notice that the member login button is not very obvious as navigation. It has an adlike appearance and itกs in an area of the page where visitors would expect to see an ad.

Critically evaluate all of your buttons and images to make sure they won’t be mixed up with ads. Don’t leave any confusion in a visitorกs mind about where ads stop and navigation begins.

Position, color, space, and separation from ads. There you have itfour tips for making your navigation stand out.

About The Author

There are 605.6 million people online. Can they find your business? Jamie Kiley creates powerful and engaging websites that make sure YOUR company gets noticed. Visit http://www.kianta.com for a free quote. Get a quick, free web design tip every two weekssign up for Jamieกs newsletter: http://www.kianta.com/newsletter.php

[email protected]

This article was posted on January 29, 2003

by Jamie Kiley

Basic Web Design Principles

Basic Web Design Principles

by: Zoran Makrevski

Home Page

Home page should clearly indicate what the site is about. Provide top level navigation on the first page, your logo, and tell to the visitor what he can found on your web site. Your home page should be informative, and should call your visitor on action. Home page is the place where the visitor decides what he will do, click on some of your links, or leave the site. If you have a discount, or if you offer some free service in attempt to make a contact with potential customers, make sure to provide link to that service on your home page.

If you decide to implement flash intro on your first page, make sure to give the user possibility to skip the flash intro. The link ขskip introข should be outside of the flash, because you will force the visitor to wait until the Flash movie is loaded.

Navigation structure

Place the navigation on the place where the people are used too look for it. Don’t experiment with the navigation! I can’t stress enough this. Keep the navigation system same on ALL pages. Visitors are not ready to learn your site navigation system. Consistency is the most important thing here. You should focus your effort on building consistent rhythm across all pages of your site.

Font size

Your font size should be enough big so your text can be read without effort. There are many people who will not bother to read very small letters. Don’t loose your visitors because of font size. Optimal size seems to be 1213 points. Visitors should be able to read your text easy, without any effort. Broke big chunks of texts in paragraphs and make them easy to follow.

Line Length

The length of a line of type should be comfortable to read. The optimal line length for printed materials seems to be about 10 to 12 words, or 60 to 70 characters. Somewhat shorter lines of about 40 to 50 characters may be more appropriate for larger displays. If the line is too long the reader must search for the beginning of it; if it is too short it will break up words or phrases awkwardly.

Creating emphasis

Creating emphasis is an important and integral part of designing and typesetting. Handled with taste and good judgment it can help direct and inform the reader. When these qualities are lacking, or someone feels that every word is important and must be emphasized in some way then your web page starts to look like a battlefield and becomes difficult to read!

Graphics

It’s well known that one picture worth more than million words. This rule applies on Internet too. Do your best to show clear, attractive photo of your product. If you offer a service, find a photo which will best describe him. However, be careful about file size. Don’t compress your photo to that level to not be clear, but also don’t leave the photo on full quality. That will make file size too big, and will increase download time.

Gif vs. JPEG

Less experienced web designers many times use wrong format to store their picture. Here are few guidelines which will help mistakes to be avoided. If your photo has small number of colors (less then 64) GIF will be better choice. Make sure however to reduce the palette size too. That is, if your image have1015 colors only, reduce your palette on 16 or 32 colors.

Also, if your image contains text, GIF format should be your choice. JPEG use loosy compression method and will cause text and edges to become blurry.

If you are saving a photograph – save it as JPEG

JPEG images can contain over 32 million different colours. That is much more than the human eye can see.

If you want to incorporate large text into a photographic image, JPEG may be a good format to use. While the edges may still get blurred, danger of it becoming unreadable is slim. If you think your image is more important than the text, go ahead and use the JPEG format.

Speed

Do your best to reduce the download time. We live in a busy world and people are not will to wait long time. Try to reduce size of your graphics as much as possible without to destroy the image. Image must look good, but size (in KB) should be as small as possible.

Test before publishing

Do your homework, and do it well. Your visitors will not bother to send you an EMail that some of your links does not work or that some of your images does not appear. Even if someone do so, it is quite embarrassing. Perform spell and grammar checking. Remember that in many cases visitor will build his opinion about you or your company on base on your web site. When published, site should not contain any ขunder constructionข or ขcoming soonข messages.

About The Author

Zoran Makrevski is founder and CEO of SEO.Goto.gr.

Since 1998 has focused on ECommerce and attempts to bring more traffic to the customer sites bring him in the SEO industry, and he is running his own company today.

Search Engine Positioning Firm

SEO.Goto.gr

This article was posted on October 26, 2004

by Zoran Makrevski

Keep Your Navigation Consistent!

Keep Your Navigation Consistent!

by: Jamie Kiley

One of the single most important aspects of effective navigation is consistency. Why? Thereกs a simple reason.

Visitors want familiarity.

They are more comfortable and more trusting if they know things are going to remain the same from page to page. They have a certain sense of confidence from knowing what to expect.

If a visitor can quickly become familiar with your navigation, itกs much simpler to actually navigate. And of course, thatกs the whole purpose of navigation, right?

Besides familiarity, thereกs a second reason to be consistent. It helps your credibility.

Consistency in your navigation helps you present a unified, cohesive image to your visitors. In other words, you look polished, wellthoughtout, and on top of things. Your visitors get the impression that you กhave it togetherก.

On the other hand, if your navigation is inconsistent, it reflects badly on you and your company. Youกll look disorganized and unprofessional.

Here are 3 ways to maintain consistency in your navigation:

1. Use global navigation (which is a set of your main links that appears on every page of your site in the same place).

Global navigation is an absolute necessity. It ensures that visitors can always get to the main sections of your website quickly and easily.

Global navigation options must be the same on every page. Many sites resoundingly fail in this area. Often, the order of the links varies from page to page, or some links are missing on certain pages. This confuses even experienced web users.

2. Keep the appearance and placement of buttons and secondary links the same throughout the site.

I recently ran across a site that used three completely different styles of buttons in as many pages. This variation blew any unified appearance they hoped to have. It also made it hard to recognize which graphics were links and which were not, since there was no consistentlyused symbol for กclickabilityก.

On another site, secondary navigation options were on the left on some pages and on the right on other pages. Thatกs a nono. Visitors will never be sure where to look for additional options, particularly since this site was visually busy. Don’t move links around from page to page.

Link colors, button styles, fonts, and placement should be the same throughout the site. The goal should be for visitors to instantly recognize a link when they see it.

3. Stick with conventional design standards.

In addition to being consistent within your site, you also need to be consistent with other sites. Don’t get too far out on the fringe in trying new things.

If you use a navigation scheme thatกs completely different from what you see on most other sites, visitors will likely be confused. Make your navigation look and function like something visitors will be familiar with from other sites.

About The Author

There are 605.6 million people online. Can they find your business? Jamie Kiley creates powerful and engaging websites that make sure YOUR company gets noticed. Visit http://www.kianta.com for a free quote. Get a quick, free web design tip every two weekssign up for Jamieกs newsletter: http://www.kianta.com/newsletter.php

[email protected]

This article was posted on January 29, 2003

by Jamie Kiley