Sales Pages With Style - Create Quality Sales Pages With CSS
Elizabeth Adams
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.25x16px 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.elizabethadamsdirec
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.elizabethadamsdirec
To look at a "real" sales page that used the CSS techniques
discussed in this article, you can visit
http://www.elizabethadamsdirec
