Sales pages, to be effective, must immediately catch the attention of even a casual web surfer. The sales message contained in the sales page needs to be both easy to read and understand. If the content-display styling is well-crafted, the sales message can be absorbed with just a rapid page scan. An interested reader will re-read the page for the details.

Sales copy provides the content which entices the reader to move deeper into the page towards the “Order Now” button.

The job of a Cascading Style Sheet (CSS), is to

facilitate page navigation,

improve readability, and

call attention to important content.

There are lots of articles and ebooks available on the Web about “writing” profitable sales copy. You can easily find them with a quick search. This article focuses on “styling” the sales page and its content with CSS.

There are several advantages to using CSS for display styling. One of the best reasons is that it frees the copywriter from initial concerns about page formatting. Using very basic HTML code, such as that allowed for submissions to ezinearticles, the page content can be written with any basic text editor without concern for special content formatting.

Before any CSS styling has been applied, the sales page would not convert any prospects. At this stage, the HTML document contains all of the “content” that will be used. Text and images will typically be positioned on the page in roughly the order these elements will be used in the final sales page. CSS will make everything “pop” and “sizzle” when it is applied to the page.

After the sales copy is written, important page elements (identified through HTML tags) and content (information between HTML tags) can be identified and linked to the appropriate CSS formatting code, contained in separate CSS text file, for browser display. A previous article of mine, published at ezinearticles, explains how the HTML content gets linked to the CSS file. Briefly, the HTML-CSS link is done through the HTML “link” meta tag and content is identified through class and id tag attributes and through the use of the HTML span tag.

Content-specific styling includes special text formatting, such as highlighting and quotations, and the placement of items such as images and forms within the page.

I like to display the content in roughly the middle half of the monitor display and use a line length of about 60 characters. I also like to use a large enough font size to make blocks of text easy to read.

Because the page layout is so important, I use a fixed table design for the content: the content is placed in the center of the display and is framed in by wide right and left margins and narrow top and bottom margins. If the width of the browser page is narrowed by the reader, the right and left margins will narrow equally but the content area will remain the same width, and thus the content layout remains the way it was designed (i.e., not “liquid”).

Essentially, my basic page layout consists of 4 nested “boxes:”

HTML Box — demarcated by html tags and contains all other boxes.

BODY Box — demarcated by body tags and contains the table and main-content boxes.

Table Box — demarcated by table tags and contains the main-content box.

Main-Content Box — demarcated by div tags and contains the sales-page content.

The HTML box includes the entire HTML document (except for the document-type declaration). The Body box contains everything visible to the reader. The Table box contains the sales page. The Main-Content box, as the name implies, includes all of the visible content of the sales page.

A sales page requires both global and content-specific CSS styling. Global styling includes such considerations as the page background, default font and line attributes, and page margins. Here is the global code I include in my CSS text file for sales pages:

body

{

font-size : 62.5%;

font-family : Verdana, Arial, Helvetica, Geneva, SunSans-Regular, sans-serif;

color : black;

line-height : normal;

background-image : Specify the image URL here;

}

#main_content

{

font-size : 1.6em; /* this sets the default font size for the sales page and will display at 16px */

margin : 5%;

}

h1

{

font-size : 2.25em; /* will display at 36px */

}

h2

{

font-size : 1.5em; /* will display at 24px */

}

h3

{

font-size : 1.25em; /* will display at 20px */

}

h4

{

font-size : 1.125em; /* will display at 18px */

}

table.sales-letter

{

width : 60em;

margin-left : auto;

margin-right : auto;

table-layout : fixed;

background : #ffffff;

}

The body code above sets the default for the document’s font size to 62.5% of 16px or 10px (px = pixels). This is too small for my sales page, and I adjust it in the #main_content section. The CSS body code also sets the font color to black, the line spacing to normal, the font family to sans-serif (with Verdana as the first choice), and specifies a blue background image used for the body background.

I use the #main_content code to set the actual base font size I use for the sales page text. All other font sizes in the sales page are sized relative to this base. Unless otherwise specified, all text in the sales page will be 1.6em or 16px. I use the margin attribute to provide content spacing between the content and borders around content.

The “Hn” tags set the basic header sizes and are calculated based on the font size I specified for the #main_content. As an example, since I will be using a default font size of 16px for the sales-page content, the H1 font size would be 2.25×16px or 36px. The “Hn” tags can later be modified with additional attributes, such as color and centering.

The CSS table attributes I use place the sales page in roughly the middle half of the full-size display page (1024 x 768 pixels). The width of the table, 600px, is just right for the line length I want to use. Since the table-layout attribute is “fixed,” the table layout in the browser will be preserved at all times.

Since all of the font sizes are relative to the font size I set in the #main_content section, all sizes can be made larger or smaller by changing just the one value. For more information about the use of ems for sizing, I would suggest a visit to a blog post by Richard Rutter.

After the global formatting is applied page now has some nice-appearing structure.The content now lies between attractive borders and the content is contained on a “page” with adequate margins and on a background of choice.

Below are 12 additional tips, including the CSS code, you can use to stylize specific elements and text in your sales pages.

(1) I want my headline to be big, bold, red, and centered. Here is the CSS code I use:

h1.headline

{

line-height : 1.5;

color : #cc0000;

text-align : center;

}

(2) I use a smaller, blue, bold, and centered sub-headline.

h2.subheadline

{

line-height : 1.5;

color : #1b356e;

text-align : center;

}

(3) I use a small font size for the spider text and copyright. I position the spider text at the top of the page for the benefit of search engines.

#spidertext, #copyright

{

font-size : 1.2em;

}

(4) I use CSS code to position my photo so that it “floats” to the right and any text to the left flows around the photo.

.photo

{

float : right;

display : inline;

}

(5) If you want to center section headings and color the text red or blue, here is usable code:

h3.red

{

line-height : 1.5;

color : #cc0000;

text-align : center;

}

h4.blue

{

line-height : 1.5;

color : #1b356e;

text-align : center;

}

(6) I change the font type for quotations. Using Courier New sets the quotes apart from normal body text.

.quote

{

font-family : “Courier New”, Courier, monospace;

}

(7) I use an unnumbered list for my benefits list. The list can be customized to use a custom bullet and extra space between list elements. The CSS code to accomplish my custom list formatting is as follows:

li

{

list-style-position: inside;

list-style-image: Specify the image URL here;

list-style-type: none;

margin-bottom: 1em

}

(8) You can highlight important text with a yellow background.

.highlight

{

background-color : yellow;

}

(9) You can emphasize text by making it bold.

.bold

{

font-weight : bold;

}

.boldred

{

font-weight : bold;

color : #cc0000;

}

.boldblue

{

font-weight : bold;

color : #0000ff;

}

(10) I like to make sales-page testimonials special by framing them and using a pastel background for the text.

.testimonial

{

display : block;

margin-left : auto;

margin-right : auto;

background : #fffacc;

padding : 1em;

border : double;

border-width : thick;

border-color : #999999;

}

(11) The purchase form is a very important component of the sales page. I use a red-dashed border for the form.

.purchase-form

{

padding : 1.5em;

border : dashed;

border-width :medium;

border-color : #FF0000 ;

background : #fffac6;

}

(12) If you use an image and associate a link with it, you will want to turn off the border or you will get a distracting blue border around the image.

a img

{

border : 0;

}

After all CSS styling has been applied, the sales page now has some “snap” and “pop”. The colorful headline immediately catches the attention of even a casual web surfer. The sales message contained in the sales page is now easy to read and much easier to understand. The well-crafted content-display makes it possible for the sales message to be absorbed with just a rapid page scan. After a preliminary scan, an interested reader will more than likely re-read the page for the details.

To get a ZIP file of the HTML and CSS files mentioned in this article and that you can use for practice or for your own templates, please visit http://www.elizabethadamsdirect.com A full-color PDF of the article is also available for download.

Sample web pages showing the template sales page without CSS applied, with just global CSS applied, and with all CSS applied can be seen at http://www.elizabethadamsdirect.com/template/exhibits.html

To look at a “real” sales page that used the CSS techniques discussed in this article, you can visit http://www.elizabethadamsdirect.com/greatheadlines

This article published here.

…

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

Read more articles written by Elizabeth Adams

You just finish your website, and you are excited to see it “live”. But first you should test if everything on your website works correctly. Remember that the website is your corporate identity on the Internet. Testing your website gives you a chance to fix errors before they destroy your business reputation.

Now, what you should check first? I would start from the basic.

Spell Check and Grammar Errors

Proof read your site … no matter how careful content creator was, you will always find a few misspelled words or grammar errors. If you don’t, be sure that your customers will.

Check Links

Next thing is to check if all your links on all your pages works. You can do it manually if you want, but on larger sites, it can be a tedious task. For large projects, you can use Xenu’s Link checker. The good news is that it’s free and better than most other link checking software.

Forms – E-Mail

We all want feedback from our website visitors, right? To ensure that you will get some, check if forms on your website work as expected. Make a habit to test forms on your website from time to time.

Web site visitors many times enter wrong input in form fields. If you use Java Script to validate form input, check your scripts in IE and Firefox at least. Not all scripts works in all browsers.

Page Titles – Meta Tags

Web developers use different software to create web pages. If your webmaster forget to add Meta tags on your website, in the title will write: Untitled Document.

How can anyone forget to add Meta tags, I am hearing you asking.

Well, search on Google for: Untitled Document and 35.000.000 results will be returned. For the search term Untitled Document 1, there is much less competition. Google return “only” 1.650.000. I guess that you will agree that your company name is better title than “Untitled Document”.

Meta tags are useful (especially title and description) for both, your website visitors and for search engines. So do the check.

Screen Resolution

You are looking at your website on your monitor, and it looks great, right? How will it look on other monitors and other screen resolutions? You website should look acceptable on 800 x 600 and great on 1024 x 768 and higher.

How your website looks in different browsers?

It is easier than you think, so continue reading. One of the things that you should definitely test is how your website looks in different browsers. The reason is: Each browser can display Web pages slightly differently, and you want to make sure your pages look good in the most popular browsers.

I have only one browser installed, how I can do this, I hear you asking. Search on Google for “view your website in different browsers”, and you will find different websites which allow you to preview your website in almost all known browsers. And yes. It’s free.

Usability – Can your website visitors find what they are looking for?

Ask few people to visit your website. Your friends or relatives, doesn’t matter. Ask them what they think about your website. Let me clarify. It is not important did they like the colors or the layout of the site. Important thing here is: Can visitors find what they are looking for on your website within a few clicks?

And the most important: When they look at your home page can they understand what your company is about? How comfortable they feel with your navigation, did they understand the terms that you use on your website? Can they reach your contact page?

…

Zoran Makrevski is founder and CEO of WebGoto.Gr from Thessaloniki, Greece We have over 10 years experience in Web Development. Our database driven websites will help you succeed in your online business. http://web.goto.gr/company.html

Read more articles written by Zoran Makrevski

The previous two articles focused on some of the technical and tactical aspects of adding image fades to a website – specifically, a keyless entry remote website.  Of course, creativity and versatility are two of the greatest strengths of custom web designers, and there are generally a number of ways to create any given function.  In this article, I will explore some of the other options for the image fade.

The basic image fade that I’ve been talking about basically displays a single keyless remote at a time.  Every few seconds, the remote fades out, using a transparency effect to gradually disappear rather than simply jumping to a new remote.  Once the image is gone, a new keyless remote is loaded in, and the image fades back into view.  This is a simple and aesthetically appealing effect, but there are some other options.

For example, you might set up multiple fades.  Your best move in this case is to keep them running off the same functions and timers, rather than trying to call the functions multiple times.  Otherwise, the functions have to run in order, generally a hundred times a second or so.  The additional processing time can result in lagging, which is particularly annoying for this type of code, since you want to make sure that the image only changes when it has entirely vanished.

So say you are setting up a pair of fades, one for factory remotes and one for aftermarket remotes.  One thing you might want to consider is whether to have them fade in and out at the same time, or in an alternating fashion.  If they alternate, do you want one to be showing when the other is not, or would you rather have one fade fully out and in, then the next, then the first, and so on?  Each system has its advantages; having them fade together lends more synchronicity to the site, for example, but also creates moments where the images are all gone, leading to a lot of blank space with multiple fades.

Another option is to not have the remotes “fade” specifically, but rather, to grow to normal size and then shrink down to nothingness.  This tactic often casts the illusion that the image is getting “closer” rather than “larger”, which can be good for adding more impact to the animation.  A good idea here is to make sure the image is centered in the div, and alter its vertical positioning equal to its modified height.  This will keep the image centered, preserving the approach illusion, rather than making it seem to be expanding from the upper-left corner.

And that’s about it.  Our keyless remote site has several options to choose from for adding a bit of animation with its images.  One final move might be to draw the images directly from the product database, and linking them to the product page.  That way, if a certain image attracts someone’s eye, they can go right to it.  Of course, this strategy works better for sites where the product’s main selling point is its appearance, rather than a keyless entry remote site!

Dustin Schwerman is the head web designer for Truly Unique Website Design. Truly Unique works on websites of all varieties, such as www.cruisingforremotes.com, where you can find keyless entry and keyless remotes.

Article Source: http://bb-articles.com

In the previous article, I discussed the basics of an image fade and how it could be used to display a series of images while conserving space, using the examples of a keyless entry remotes site, as the fade can display images for highly aesthetic products or those that are more technically functional.  In this article, we move into some of the technical aspects of adding an image fade to a website.  This article will not focus on the code itself, but rather some of the options you have and issues to look out for.

The basic code is simple enough.  You have a timer running at a rapid rate (generally about 10 miliseconds), that reduces the opacity of the target image or div while it is positive.  Once it hits zero, it changes the image source (for a basic, all-Javascript fade) or alters the inner HTML of the div (for an AJAX-based fade).  It then raises the opacity back up to 100%, and delays the timer for a few seconds until the process repeats.  So a viewer will see a keyless remote (for example) on screen for a few seconds, which grows rapidly more transparent until it vanishes entirely, and then a new remote will fade in, display for a few seconds, and fade out, and so on.

What’s the difference between the straight Javascript and the AJAX versions?  Well, with Javascript, you need to collect all the information from your database before-hand.  Using AJAX lets you gather the information with each image that you swap out, and generally gives more control if you want to do more complex things with the images.  On the flip side, you will generally need the image to stay faded out for somewhat longer with AJAX, to account for  processing time.

One thing you don’t want is for your old keyless entry remote to start fading back in, and then suddenly switch to the new one.  To prevent this, your best move is to preload your images, and make sure your AJAX completing is what triggers the fade in.

Another thing to remember is that opacity is one of those things that the various browsers just don’t feel like agreeing on.  Make sure you set the opacity changing appropriately for all the browsers, or you’ll get remotes just switching out with no fade.  While this still accomplishes the general goal, it lacks all the aesthetic appeal of the fade.

Now that we have a baseline for the fade, we can move on to some advanced options.  In the next article, I will discuss a few variations on the image fade, including how to run multiple fades at once and an “expanding” fade that relies on changing the image size rather than its opacity.

Dustin Schwerman is the head web designer for Truly Unique Website Design. Truly Unique works on websites of all varieties, such as www.cruisingforremotes.com, where you can find keyless entry and keyless remotes.

Article Source: http://bb-articles.com

When you want to be able to display a large number of images in a small amount of space, one of your best tactics is some Javascript code that lets you keep some of the images off-screen, and cycle through them. Even when aesthetics isn’t the main draw for the site’s product – as with keyless entry remotes, for example – pictures can help break up text walls and make the site itself more appealing. Having various keyless remotes or other items moving in and out adds color and animation, catching visitors’ attention and giving them a hint of a website’s variety. There are several ways to code moving images; in this series of articles, we’ll be discussing the image fade.

So what is an image fade, and how does it compare to, say, an image crawl or scroll? An image fade brings up a selection of pictures, displaying them one at a time, each for a few seconds, and then fades out, switches images, and fades back in to display a new picture. So you might have a keyless entry remote display, then fade out and have a remote for a different make or model fade in, and a few seconds later replace it with a third, and so on.

Two of the biggest advantages of image fades over crawls and scrolls (where you have a train of images that either moves automatically across the screen in a loop or is moved back and forth by the user) is that you don’t need to have all of the images on the page at once. Rather than waiting for all the images to load for the page to be fully loaded (delaying any onload scripts you might be using, and possibly delaying the loading of other content), you can have only a single keyless remote loaded up, and use an onload preloader to start loading the rest once the page has fully loaded. Additionally, you don’t need a lot of vertical or horizontal space for the entire train, giving you more flexibility in positioning and allowing you to use larger images. This can also mean extra room for additional information; you might list the name, price, and maybe a short description beneath each keyless entry remote, for example. A crawl or scroll with that capability would take up quite a lot of space, making it unfeasible unless the crawl is meant as the focal point of the page.

A fade involves the display of only one image at a time, which is something of a disadvantage, as visitors can’t, for example, scroll through a large selection at once. As such, image fades are much less useful than crawls and scrolls as a navigational tool. It’s also worth noting that image fades are somewhat more complex than crawls and scrolls, as they work best with the additional of AJAX coding (although you can create a functional one using only standard Javascript).

So, with the key points of image fades noted, the next article will focus on some of the things you will need to consider when integrating the fade into a website. The final article in this set will go over some of the options you have for expanding your image fades.

Dustin Schwerman is the head web designer for Truly Unique Website Design. Truly Unique works on websites of all varieties, such as www.cruisingforremotes.com, where you can find keyless entry and keyless remotes.

Article Source: http://bb-articles.com