So what’s a “favicon”, then?

It’s the thing you see in the address window of your browser. Every company that wants to have a credible web presence has one. Google’s favicon looks like a lower-case, blue “g” now; it used to be an upper-case, multicolored “G”. It was a big branding change for them, so they thought long and hard before altering it.

Why should you have one? Here are some pretty good reasons for you to consider:

- They add to your company branding – They make your company look “with-it”, website-wise – You get to choose how your website is shown and don’t just settle for the Internet Explorer or Firefox default favicons – It’s easier to pick out graphical images than text, so they stand out from other sites in your browser’s “Favorites” lists – You can even have favicons that rotate graphic images with text

I can’t recommend them highly enough. This is how you make them.

The Quite Easy Way:

1. Make the graphic image you want to use for your favicon. Got to be small, though! 32×32 or 16×16 pixels.
2. Save the image as a bitmap, for example “favicon.bmp”.
3. Use a graphics editing program to change the bitmap file to an icon file.
4. Don’t have any graphics software? Download a free one — Irfanview, for example. Google the name for the link.
5. Change the file you made. Its name should go from “favicon.bmp” to “favicon.ico”.
6. Upload the new icon file to your website, along with the following HTML code, which you should put in the “Head” section of your page (don’t forget to enclose the code with “” brackets):<link rel="shortcut icon" href="http://-your website's homepage URL here-/favicon.ico">

And hey presto!

The Even Easier Way

1. Go to the “Favicon From Pics” site (Google the name). I’m not affiliated with them in any way, so use the site with confidence.
2. Select the graphic image you want to use for your favicon (don’t worry, it doesn’t have to be an “icon” file, it can be a gif, jpeg, png, whatever. It can even be a picture of you).
3. Type in the text you want, if you’re using scrolling text along with your favicon, and tick the “Animate Favicon” box.
4. Click “Generate FavIcon.ico” and save the file it comes up with.
5. You’ll get a favicon file, along with a file called “animated_favicon1.gif”. Don’t worry; it’s all completely free.
6. Upload the favicon file to your website, along with the HTML code given below (don’t forget to enclose the code with “” brackets):<link rel="shortcut icon" href="http://-your website's homepage URL here-/favicon.ico">

7. If you’re having an animated favicon with scrolling text, upload “animated_favicon1.gif” to your site and put this HTML code directly underneath the code given above (don’t forget to enclose the code with “” brackets):
   <link rel="icon" href="animated_favicon1.gif" type="image/gif">

And that’s it! Check it out. See how it looks. Don’t you feel all warm and fuzzy about your site now?

Daniel O’Connor is a top SEO copywriter based in the UK. See his 100% satisfaction-guaranteed site’s portfolio at http://www.daniboy.com/copywriting_portfolio.htm

He’s worked for some of the biggest companies and organisations in the world — including NTT and Mitsubishi Electric, not to mention the 1998 Olympic Winter Games — as well as some of the smallest.

And he can do a job for you, too.

Fluent in both Japanese and French and with a background in languages, Daniel is supremely qualified at explaining complicated things in a simple way. There’s nothing you can throw at him that he won’t have dealt with before.

Because it’s all about one thing: the words. The right words for you and your business. Blog articles. SEO for websites. Direct marketing. White papers. Flyer advertising. You want words? Daniel O`Connor has words.

Want to try out his writing before getting in touch? Check out his free ezine at http://www.daniboy.com/ezine

Article Source: http://EzineArticles.com/?expert=Daniel_F_O’Connor

The more we rely upon CSS, the larger and more complex stylesheet files become. Planning and organising your stylesheet is essential to creating a lean, manageable website. There are many ways of organising CSS code but the following are best practice…

Comment your stylesheet

Commenting your stylesheet makes it much easier to find the information or the commands you’re looking for.

Meaningful comments include:

• Last updated – This information can quickly let developers know about recent changes made to the file:
  /* WEBCREDIBLE
Updated: Thu 1 Jan 2008
Author: John Doe
Updates: Add new section 'Forum'
––––––––––––––––––––––––––––––––––––––––––––––––*/
• References – Comments can also be used as a quick reference for the main style guides applied throughout the site:
  /* COLORS
Body Background: #FFFFFF;
Main Text: #000000;
Link: #F0F0F0;
etc ...
*/
• Organisation – Use comments to identify the different sections of the stylesheet:
  /* =HEADER
––––––––––––––––––––––––––––––––––––––––––––––––*/

  /* =FOOTER
––––––––––––––––––––––––––––––––––––––––––––––––*/

• Reminders and notes – Leaving reminders and notes for yourself and other developers can help avoid confusion later:
  /* The width is overwritten for IE 6 in: cssIE.css */
div {width: 150px;}

Define general rules and main classes at the top of the stylesheet

Set the styles of generic HTML elements, for example:
body
{
background: #FFF;
font: Arial, sans-serif 75%;
}
h1 {
font-size: 1.2em;
color: #000;
}
h2 {
font-size: 1em;
color: #F0F0F0;
}
img {border: 0;}

Then, list the classes that will be most commonly used across the site, for example:
.hide
{
position: absolute;
left: -9000px;
}
.required {
background: url(#) no-repeat 100% 0;
}
.fl
{
float: left;
}
.fr
{
float: right;
}

Order the CSS in the same order as the HTML

The order of the HTML should be used to determine the order of the CSS sections. CSS files can sometimes be large and commands difficult to find. Having some correlation between the HTML and CSS file makes it easier to locate how an element is being styled.

Know when to use elements, ids and classes

Using the correct selector type means your CSS file can be significantly reduced in size:

1. Elements – Elements such as body, (<body>), paragraphs, (<p>) and headings, (<h1>,<h2> etc.) should be used to define general rules
2. IDs – These are unique identifiers and should only be used once within a document. IDs should be used to style major structural sections of a web page such as the header or the footer.
3. Classes – These can be used on any type of HTML element.

Too many ids or classes can overload the HTML and the CSS files unnecessarily. Try and define as many rules as possible by referencing elements and/or ids by nesting the selectors.

Imagine the following HTML code:
<ul id="nav">
<li><a href="#">Item 1</a></li>
</ul>

Because each of the list items has a common parent, descendant selectors can simplify the CSS markup as follow:

#nav { properties listed here }
#nav li { properties listed here }
#nav li a { properties listed here }

Name classes and ids logically

Don’t name classes and ids based on their color or position as these may change in time. Try and give them a name that’s likely to remain relevant over time. Also, use hyphens ahead of underscores as certain old browsers have a hard time understanding the latter.

Use a common naming system for your classes and ids. It will save a lot of time and confusion when developing, debugging and updating documents.

Nest CSS selectors

By nesting CSS selectors (i.e. using more than one CSS selector in one command) we can apply styles by navigating the HTML document tree. For example, to apply a colour of red to all paragraphs within a div, we can use the following rule:
div p {color: red;}

Take advantage of inheritance

Some CSS commands inherit from their parents whereas others don’t. The use of nesting means you don’t have to declare the same properties over and over again.

Generally speaking, text-related CSS commands (e.g. font-size, color) are inherited by descendant elements, whereas layout-related commands (e.g. float, width) aren’t inherited .

Group selectors with common CSS declarations

You can avoid specifying the same set of properties several times by grouping the selectors that share the same CSS declarations together. For example:
h1, h2, h3
{
color: black;
padding: .2em;
}

This article was written by Brigitte Simard. Brigitte’s crazy about accessibility and CSS – so crazy that she works for Webcredible, an industry leading user experience consultancy, helping to make the Internet a better place for everyone. She spends much of her time working on the world’s most accessible CMS and is very good at CSS training.

Reading a website is not similar to reading a book or a newspaper, therefore before you start spilling money on campaigns be sure your site is built in accordance with internet writing standards. Lets talk about few simple rules you don’t want to break when building a website:

Don’t waste your visitors time

Time is money. Most people decide whether they are interested in what the website has to offer in just to seconds. Therefore make sure your landing page provides the most crucial and appealing information about your business.

Number one time waster is a heavy loading pages with lot’s of Flash animations and pictures. Make sure your web pages are not too heavy otherwise you might loose your visitors before they entered your website.

Most of the visitors need to find what they are looking for fast, otherwise they look for it elsewhere. As a webmaster you must make sure your data is well categorizes and divided to relevant pages, categories, headlines and sub-titles. A visitor must be able to navigate your website easily and successfully.

Avoid too much “Special affects”

By this I mean don’t include too much Flash movies and avoid using music if you don’t have to. As we mentioned earlier, Flash has a large loading time which damages viewer experience, besides too much Flash may be annoying and search engines can’t read it.

Music is a great thing, but somehow music and websites do not fit too well. If you want to put some background tune anyway, make sure a user can silence it quickly and easily. Or in contrary, let the user click “Play” and begin the music when he decides.

Pop-ups and new pages

If you have links in your site, I strongly advise you not to use the pop-up option and not to open these links in new window. Seemingly pop-ups and new windows are a very good idea if we don’t want the visitor to navigate from our website but many years of experience shows that users prefer to click “Back” buttons. As to pop-ups, most of browsers tend to block them, and you don’t want to waste your viewer time on enabling pop-ups.

Text

Use standard fonts which are supported by all browsers, like Arial and Times New Roman. You don’t want your viewers to get gibberish and go away from your website. Don’t use very small or very large fonts. You don’t want your pages to smear for miles and you don’t want to scare away people with poor vision.

Gally Reznor is a web developer and marketing manager at http://Site123.com. She has a large experience in planning and creating e-commerce and other business websites.

Website design has become an integral part of businesses. Thus, the website design should be able to catch the eyes of customers and to do so it is crucial that it should be user friendly. It should be properly designed to have a professional look. First impressions are the best impressions and hence the first impression of the site can be got from its graphic and layout designing. The Professional Website Design should be simple and lucid. All the pages need to be consistent in background, color usage, text format and screen layout. A detailed understanding can be seen below.

Background and Text Colors

The color schemes express the characters of the website and make it unique and attractive. The selection of the set of colors for background and text has to be done very carefully. It is recommended to use the dark color versus light color combination, In other words, light text against a dark background or dark text against a light background is suggested. It would be a blunder if a background pattern that has both dark and light colors is used, as this would make it difficult to choose a text color that is readable against such a background. Background image or texture chosen should contrast well with the text color, so that it is easy to read on screen.

Selection of Fonts

One of the most important parts of a web page is text. It can make the page look very professional or very unprofessional. Consistency in fonts is required; In other words, using varied fonts throughout the pages should be avoided. The standard fonts used on the Internet are Arial and Verdana as they are most readable on computer screen and as for headlines Georgia is used most extensively, as it has a slightly larger display.

Formatting Pages

Layout of the page should be with tables, and the width should be in percentage terms (100% to window size) instead of a fixed number of pixels. If done so, the content of the page will be flexible even with changes in browser window size, without the need to scroll horizontally. Tables enable displaying the contents in sections like a newspaper. Links should be well organized, properly interlinked and easy to detect by using appropriate colors. Links should be underlined and a different color can be used for visited links, a link to the homepage should be displayed on all the internal pages. It should be ensured that there are no broken links simple text navigation links at the bottom of long pages should be provided, so that users don’t need to scroll up. Optimize pages to be viewed at 800×600 (the most popular resolution).

Content of the Pages

The content of professional website should be in bulleted or numbered list with direct to the point in short paragraphs, as long blocks of text passages can be boring for the reader. The intention of the web pages should be made clear. Top of the individual pages are to be loaded with most important and essential content with a brief header. This will quickly let the user know, your web page is the page what he is looking for, helping the user easily identify his/her requirement. A simple logo with captivating tag line on the top of the page acts as an identity of the website. Common names for menu options: Home, About Us, Contact Us, Help, and Products, a copyright statement at the bottom of the each web page are to be used.

Limit File Size

Web page size is defined by the total size of text, images and supporting files (including JavaScript, Flash, etc.) within the page to be downloaded from the server. So, the size of a web page should be kept small to open up fast. If the page has too many items to load and is slow to display, it should be broke into smaller pages and linked to a new web page, with link back from the second page. Limit the size of an image inserted in a web page. Large image takes longer time to display hence, the size of image is to be limited. Adobe Photoshop can be used to slice the image and call it in a table. Bulky contents such as video, audio, Flash animations etc, which slow down the display of the page should be avoided.

The article is written by ConEdify Technologies providing reliable Web Hosting Service in India and offshore http://www.conedify.com

“Content is King! If you want a website to generate back-links and have quality content the search engines love, be sure to make it readable by both people and search engines. Search engines are working to give people quality results. Thus, they are looking for sites with quality content. So – by building site content for people, not only are you getting back to basics (information dissemination to people via the Internet), you are creating a site search engines will love. So, build sites for people – and the search engines will come.

When creating a new website or redesigning an existing site, there are four critical rules which should be followed to make the site effective, functional, loved by search engines – and successful.

1. Easy to Read

When building a website, the first thing you need to be sure of is that your website is easy to read. When you write content, remember that most web site visitors don’t read every word of a page – in fact, they only scan pages to find what they want.

Break up Your Content

Break up your pages and use headers between major ideas so people scanning your site can find what they want quickly. Use meaningful headers between each paragraph or major idea – this helps with SEO. Headers should be created with the H1 through H4 tags for SEO. Always use good writing structure. Additionally, avoid long paragraphs that run on. You should break up any long paragraphs.

Color and Fonts

To help readability, use high contrast colors between font and background. Black text against a white background may seem stark, but it is very readable. To make a website easy on the eyes, try an off-white background and a dark gray (almost black) text color.

Things to avoid with content color:

• Avoid vibrant background colors like purple or yellow. Such back colors make text difficult to read.
• Avoid using an image behind your text.
• Avoid using bright text colors on bright backgrounds.

Fonts Matter

One simple statement covers the font issue:
Simple fonts are the best; the more fancy the font, the harder it is to read.
Since many browsers only have the standard font set, use standard fonts. In reality, there is no “standard”, but there are certain fonts that are installed on most browsers. These include Arial, Verdana, Tahoma and Times New Roman. Your readers will see something different than you see if you use other fonts.

Standard Compliant Browser for Development

When developing and testing your site, use a Standards compliant browser like FireFox. If you develop your site to be standards compliant, it will work in most browsers, including MS Internet Explorer (IE). It is recommended that you test your site using the latest and last browser versions of IE (IE6 and IE7). To run multiple versions of IE on the same machine, TredoSoft.com has a free installer that will install multiple versions of IE. It works great!

Keywords in Content

Of course, when writing content, not only should it be formatted to be readable, but it must also be consumable by not only people, but by search engines. One way to make the subject of the content known to search engines is to use the keywords that people use to search for your site in your content. Be sure to use keywords in your header tags, your first paragraph and throughout your text. The keyword density should be between 4% and 7% – but any more than that could 1) be hard to read and still make sense and 2) be considered spam by search engines and banned. Keywords should also be used in your TITLE tags and your Meta description.

2. Simplify Navigation

The menus and links make up the navigation that the visitor uses to get from page to page in a site. Always plan a site around how people will get from page to page. A visitor to your site should be able to get to what they want within three clicks of their mouse.

Multiple navigation points makes it easy to find things. Repeat the top menu and at the bottom. Also create a left or right menu.

Using links within your text to other areas on your site. You can create links so that they are good for search engine optimization (SEO). There are generally two ways to create links within your text:

1. The wrong way: “For search engine optimization techniques, click here.”
2. The right way: “Good techniques for search engine optimization are important to use.”

Using link text (anchor text) that describes what the link is about is the best way. Search engine web crawlers (programs that automatically index the contents of websites) visit your site, they “read” links. Spiders can index descriptive links into a subject or keyword category. Spiders have nothing to work with when reading a “click here” until it reaches the linked page.

This is Cross Linking – use it as much as possible when it makes sense to do so when writing your content.

3. Consistent Design

At most, one or two layouts should be used in your site design. As a reader browses your site, they should be able to get used to looking in the same place for your navigation, for your sub-navigation and for your content. That’s all there is to say about that.

4. Lower Page Weight is Better

Page weight is the total size of a page on your site in bytes – code, text and images. Your site’s page weight makes a big difference to your viewers. Lighter page weight is better for your readers because the page will download faster. The faster a page downloads, the faster they will get to the content.

What is Means to be Light:

1. No large images.
2. Fewer images are better.
3. Optimize images for the web at no more than 72 dpi.
4. Use as small an image dimension as possible for the given design.
5. Use a table td bgcolor attribute or a background-color style attribute for solid color backgrounds.
6. Make gradients horizontal or vertical (not diagonal) so that you can use a small image “strip” and repeat it.

How “Heavy” Should a Web Page be?
Certain studies show that 64K is a good maximum webpage size. 64K is a maximum, however it is still, in my opinion, really big! The smaller the page, the better. 25K is good, 15K is even better. There is a balance between design and function. It is a good idea to focus more on function.

Try putting pages on your web host server as you build your site so you can test it as you go. For pages online, you can test the page weight at www.quasarcr.com/pageweight/ to be sure you are on track.

Ways to make pages lighter:

• Use linked style sheets.
• Use DIVs instead of TABLEs where possible.
• Use simple repeating backgrounds for effect.

Summary

Visitors to your website should be able to find what they are looking for within about three clicks. Search engines should be able to navigate easily through your site. Making a site easy to read with consistent page design, and easy to navigate will make it easy to find information. When people can find information, they are more likely to refer your site or link to it – which is exactly what you want to encourage. You will be on the way to building a readable and hopefully successful website that is loved by search engines if you follow these principals.

Nicholas LaPolla has been a web applications developer for 11 years. He created AcmeWebResources.com to help others build or improve, market, and monitize their websites with a focus on web design, website seo / internet marketing, and working to make money online.
Article Source: http://www.ArticleGeek.com – Free Website Content

Writing your quality articles using Cascading Style Sheets (CSS) will insure that your articles will be both easy to read and aesthetically pleasing to the viewer.

A CSS style sheet allows the HTML code for your articles to be cleaner, table-less, easily customizable, and “liquid.”

Removing the display attributes of your articles from the HTML code allows you to concentrate on using the HTML for organizing your document’s content.

When you use CSS, a new approach is possible to writing your articles for the Web:

• First, you write your article in a very basic HTML document, using simple HTML code. At this stage, use only the most common HTML tags. Focus on organizing your article’s content first.
• Next, you identify parts of your document for special display formatting.
• Finally, you define the formatting in the CSS file.

Once you work through this process, you can reuse both the HTML document and the CSS file as templates for your future, quality articles.

This article will provide the tips, tricks, and sample code to give you a head start in creating your own quality articles and templates using CSS. If this all seems complex and intimidating at first, don’t despair – read on. I will explain the basic HTML and CSS terminology throughout the article.

THE BASIC HTML DOCUMENT

The basic HTML document is devided into several sections: html, head, and body.

Tags are used to demarcate document sections, or “elements.” Content lies between the tags. For example, the article you are now reading lies between the body tags of an html document.

Tags usually exist in pairs, a start tag and and end tag. The start tag is surrounded by less-than and greater-than angle brackets. An end tag is bracketed with the same symbols but the first character of the tag is a forward slash (/). For example, HTML code for a paragraph element would include the start and end “p” tags with the content sandwiched between the two.

The basic tag pairs found in web pages are:

• html – These tags tell a browser that this is an HTML document and define the start and end of the document.
• head – The head element can contain information about the document. Although the browser does not present the information to a viewer, the information can be “seen” and used by search engines.
• title – The title tags define the title element that will be used by a browser for the document’s title.
• body – The document’s content is placed between the body tags.

In HTML 4.01, not all tags exist in pairs. The “!DOCTYPE” and “meta” tags do not use an end tag, for instance.

The first line of code in the basic document is the Document Type Definition (DTD). The !DOCTYPE tag tells the browser which HTML or XHTML specification the document uses. HTML 4.01 specifies three document types: Strict, Transitional, and Frameset.

The first meta tag in the basic HTML document provides information about how the page-content characters are encoded so that a browser can interpret them correctly.

If you want your articles to be widely seen on the Internet, you need to be particularly interested in the meta tags for keywords and description. These can be seen and used by search engines.

Use the “keyword name” and its related “content” in a meta tag to list your keywords or keyword phrases.

Keywords ought to be appropriate for the article content. They should also reflect what internet surfers actually type into a search engine’s query box when hunting for the information you are offering.

Keyword research is a study in itself. Freeware is available on the Internet that can help you determine the best keywords to use in your article and keyword list. Keywords or keyword phrases within the meta tag need to be separated from each other with a comma.

Although not all search engines will utilize the description meta tag for their search results, you still need to include a good description for those that do.

If you had just a few characters to describe your article, or to entice a surfer to select yours from the results of a search, what would you write? What you would write is what should go into the description.

USING CASCADING STYLE SHEETS (CSS)

I have already suggested several reasons why today’s preferred method of creating web pages is to separate a page’s content from it’s display properties. It’s time for a demonstration of how this can be accomplished.

In the past, HTML tags included attributes to define how the content was to be displayed by a browser.

Today, CSS is used to concentrate these attributes in a single, separate file. Simple HTML code specifies “what” content is to be displayed; the CSS code defines “how” the content is to be displayed.

Before CSS can be used to format an HTML document, the name and location of the CSS file must be known to the browser. The browser gets this information through the HTML “link” tag that is coded between the head tags.

Once the CSS file is linked, the browser will check the CSS file for display attributes. For example, if the browser encounters an “h1″ tag in the HTML code, it will check the CSS file for “h1″ formatting. Here is the “h1″ formatting information I included in the article.css file I use for my article titles:

h1
{
  color: maroon;
  text-align: center;
}

When a browser encounters an “h1″ tag in the HTML code, it would display the title centered and maroon.

SELECTING CONTENT FOR FORMATTING

Content formatting can be applied to an HTML document only after the content to be formatted has been identified to the browser. An easy way to do this is to place a “class” or “id” attribute within a start tag. The same class name can be used many times on a web page; each id name should be used just once per page.

Once content is identified, the class or id name can be referred to in the CSS file and the browser will apply any formatting attributes found there.

Selections Using Class Names

As an example of using the class name, I used the following CSS for in an article about writing ad headlines. In the HTML code, I used divisions tags with a class name of “headline” to demarcate the headline text. I added the following code to the CSS file:

.headline
{
  font-size: 24px;
  color: red;
  font-weight: bold;
  text-align: center;
}

In the CSS file, I specified the font-size, color, font-weight, and text-align attributes. The class name was added to the CSS file by preceeding the name with a period. I used a semicolon to separate attributes in the list. The HTML and CSS code combine to produce a bold, 24px, red headline centered in the HTML page.

It should be noted that there are some basic HTML tags that are their own class names and do not require a preceding period in the CSS file. These include p, h, body, li, and others. That being said, these tags can be modified by appending an additional class name to them. For example, if I wanted to make the next paragraph blue, I could add a “blue” class attribute to the opening HTML “p” tag and then add this code to the CSS file:

p.blue
{
  color: #0000FF;
}

This would be a blue paragraph if this HTML were displayed in color.

Selections Using ID Names

The CSS syntax for an ID is a little different from that used for a class. In the CSS file, ID names are proceeded with a pound sign (#). The example below “floats” my 288px by 59px logo image to the left of the following paragraph: the text flows around the image. I added an ID attribute with a name of “logo” to the HTML “div” start tag I used to demarcate the image information. Here is the CSS code I used:

#logo
{
  float: left;
}

The HTML and CSS code would combine to produce the following results:

~~~LOGO WOULD FLOAT HERE~~ Text here would flow around the logo.

Selections Using Span Tags

If you want to format just a bit of content, you can use span tags

In the article.css file, I defined a background-color attribute for a “highlight” class that will put a yellow background behind selected text. For the next paragraph, I used span tags to bracket the text, “separate attributes.” Here is the CSS code:

.highlight
{
  background-color: yellow;
}

As a result, and if this were in color, the phrase “separate attributes” would be highlighted with a yellow background.

LOOKS AND LAYOUT

A careful selection of the “global” characteristics used for the body element of your web page will insure that your articles will be both easy to read and aesthetically pleasing to the viewer. These characteristics include font, font color, page background color, and page margins.

I use the “body” code in the CSS file to define the default body display attributes. Here is the CSS body code from the article.css file:

body
{
  background: #fffef2;
  color: black;
  line-height: normal;
  margin: 3% 25% 3% 25%;
}

Fonts

In the CSS body code, I specify the font family I want to use. The first font listed, Verdana, will be used by a browser if it exists on a viewer’s PC. If Verdana is not available, the other fonts will be checked, in order. If none of the specific fonts are available, the browser will default to any available sans-serif font.

If you use a commonly available font/font-family for your articles, the chances are good that a reader will see the article as expected. Otherwise, your article might not look the way it should.

Verdana was designed for easy readability on computer monitors and, for this reason, is my font of choice. Since Verdana is commonly available on PCs, using this as the default font will also increase the likelihood that my article text will be displayed as I intended.

Page Background

I set the background color to a light color, the font color to black, and the line height, or spacing between lines, to normal. The background color I like to use (#fffef2) shows colored text and graphics to good advantage.

Margins

I like to adjust the article on my page to show content in roughly the middle half of the page. I think it is easier for the eye to process than content that goes edge to edge. I use the CSS margin attribute to adjust this. The margin attribute defines the top, right, bottom, and left margins respectively (margin: top right bottom left).

In the CSS body code above, I set the left and right margins to 25% of the available display width. Using 25% places about 60 characters per line of text on my 1024×768 pixel full-screen display. I also set a small 3% margin above and below the content.

Lists

If you use a list in your article, you can use the CSS file to customize the way your list looks. Two important considerations of list design are the list bullet and the spacing between list elements. The example below shows how to change the bullet graphic and element spacing of an unordered list:

li
{
  list-style-position: inside;
  list-style-image: url (http://www.elizabethadamsdirect.com/articles/images/small_blob.gif);
  list-style-type: none;
  margin-bottom: 1em;
}

I added two list attributes to customize the list:

1. list-style-image – used to specify the URL to a bullet image (not shown below), and
2. margin-bottom – used to provide some extra space between list items.

For a complete description of possible list attributes – as well as great tutorials on using HTML and CSS – you can visit http://www.w3schools.com

Entity Names

Some characters have special meaning in HTML documents. When you want to use these characters in your text, you can use their “entity names” to prevent browsers from misinterpreting them for HTML code. I used entity names extensively for my web version of this article to display many symbols, particularly in the code samples.

Most commonly, I use entity names in my HTML code for quote marks. By doing this, I get the look and feel I want in my text when I use quotes. For example, when I want to use distinctly different left and right quote-marks in my web-based titles and headlines, I use specific entity names to do so.

Careful attention to the entity names you use can add “that extra touch of class” to your articles.

For HTML 4.01, there are entity names for both ASCII and extended characters and symbols. I use an entity name to insert a copyright symbol at the bottom of all of my web pages. You can find a complete list of entity names at w3schools.

I use Dreamweaver 8 for my HTML and CSS editing. With Dreamweaver, I can validate my code as I write it. I have optioned the validator to warn me when entity name substitution might be appropriate.

Validating Your HTML and CSS Code

I like to write valid HTML code for the “!DOCTYPE” version I use. If you click on the w3 validation icon at the bottom of my full-color, web-site version of this article, you will see that the HTML code for the article is valid and error free. You can use the validator accessible through w3schools to check your code, too.

CONCLUSIONS

When you separate your article’s content from the code browsers use to display your article, you can focus on using simple, basic HTML code to organize your content. A Cascading Style Sheets(CSS) can accomplish the separation.

A CSS style sheet allows the HTML code for your articles to be cleaner, table-less, easily customizable, and “liquid.”

You can look at one of my recently published articles to see the results of using the techniques outlined in this article. The article is “Profitable Ads: How to Write Ads that Pull.”

Elizabeth Adams has been writing direct sales copy since the early 1990’s, when she employed several people to handle mailings and product fulfillment for her postcard marketing business. Elizabeth learned in direct mail how to tweak her sales copy on the run and improve her sales conversion by as much as 400% in only one mailing. She learned how to write a great headline and effective sales copy. Get “Great Headlines — Instantly” today to learn how to do for yourself what Elizabeth learned in the trenches: http://www.elizabethadamsdirect.com/greatheadlines/

Would you buy meat from a grocery store that left the bad meat in with the good meat or wasn’t clean? Would you buy a car from a sales lot that had totaled automobiles on the front lot? I wouldn’t and neither would you. Your website is your grocery store; your car lot. You must have an atmosphere that is pleasing to buyers. One that tells that buyer that you are not an amateur, but instead a trained, seasoned professional. Your site is a direct reflection of your product and that is why that having a well designed website can make or break your sales.

The first thing to keep in mind when designing your website, is “surfability”. Take a few minutes a look around at several web pages. What makes them appealing? Were there some that you closed out of immediately? Why? Take notes and do your research. Keep in mind that when a person visits your site they have a goal in mind. They are either seeking information or shopping for a product. Give the person what they want without having to search for it. Be sure that all the information on your site is relevant to your product. Make the buyer think that they need your product to solve their problem.

Your main page serves a very specific purpose. It should be an avenue by which the customer can shop your site. It should be easy to view and load very quickly. This is your first impression and we all know that first impressions can either close the deal or loose the deal. Make it simple. It is best to have links that are easily viewable by the reader that will navigate them to where they want to be. Tables are often a great choice when deciding on a way to design the main page of your site. Your main page should load very quickly, chances are if it takes the page more than ten seconds to load even on a 56k modem, the customer will click away to save time, hoping to find the information or product elsewhere. To increase the loading speed of your main page you should avoid large graphics or excessive graphics. Too many banners or special effects can cause a page to load slowly as well.

To make your web site more appealing to the eyes, you should stick to mild colors. If your site is a content site where the user will be doing a lot of reading, it is best to stick to black and white. Color can be added when using tables, as a way to brighten up the page, but remember to keep the overall look of the page professional and appealing to the audience that will be visiting most often. Since screen resolutions vary among monitors, it is a good idea to set the pixels to a standard 800×600. You may also choose to set the tables in your web page to span a percentage of the page rather than a set number of inches. This will be sure to accommodate all screen sizes. You should remember that a lot of Internet users will not use the same browser as you, and therefore you should be sure that your site looks as good on other browsers as it does your own. You can do this by downloading several browsers through which to look at your page.

Be aware of the fact that the overall look of your website is a way to make money. The appearance of the site, if designed properly, can be an excellent marketing strategy for your product or service.

Glenn McDonald can help YOU start your own profitable business on the Internet within the next 24 hours… To learn more, visit: www.AutoProfitCash.com/pips.html
Article Source: http://www.ArticleGeek.com – Free Website Content