Free man designing website layout

Website Development – Guide to Website Design

For the average webmaster, design and development are words that are most often associated with the overall character of a website. How it looks, how it presents itself to the viewer, how it will adapt to future “design” changes.
Of course, if your primary objective is to earn money online, the concept of design and development has a slightly different (and much less flamboyant) meaning. The design factor merely relates to simplicity and function. Basically, you want a viewer to be able to interact with the website in an efficient and effective manner. That could mean…

  • following a pre-planned sales letter “trail” to a specific order button for a specific product
  • easily navigating through valuable content where products are sold or Google ads are displayed (or both)
  • accessing information which is directly linked to searchable keywords that are associated with Google ads

With those three purposes in mind… earning money online means you’ll be involved with one or more of these primary website categories:

  • Sales Letter – using a single sales page to sell a specific product
  • Content Driven – developing a substantial volume of content pages that are based on a particular niche area or subject matter
  • Adsense – building a website with the sole purpose of generating income through your Google Adsense ads

Sales Letter Websites

Free woman working with laptop

Unlike the other two categories, a sales letter website relies solely on text content to get results. But just because the sales copy is the number one focus doesn’t mean that design elements aren’t important.

For example, you still need to present a professional front. Otherwise, the viewer might not bother to stick around for the sales pitch. For the most part, just keep the look clean and simple (much like the look of a quality newspaper).

If you decide to include audio, make certain that the viewer has the ability to turn it on and off at their own discretion. And don’t ever allow audio to come on automatically with the loading of the web page.

For one thing, spoken words shouldn’t be the first thing a viewer experiences. Secondly, it can prolong the time it takes for the sales page to load. Even worse, it could cause the page or browser window to freeze up.

Remember… just because you happen to have the fastest computer and the fastest internet connection, doesn’t mean everyone else does. Always “design” your pages for the worse case scenario. That would constitute a somewhat slow computer capability and dial-up connection.

The other area where sales letter design comes into play is text emphasis. That would basically include things like bold, italic, and highlighting. Arriving at the correct formula is key to getting maximum results.

It’s kind of like the comparison in the story of Goldilocks and the three bears…

Too little emphasis and all the sales copy will just blend together. Too much emphasis and the sales copy becomes way too intensive. A comfortable balance somewhere in the middle is just right.


There are two trains of “design” thought on this one. Some say that you should include a good-looking, quality header graphic at the top. Others insist you don’t need graphics at all because the only thing that matters is the sales message itself.

Here’s the call on that one…

If you’re selling a product that is geared toward professional marketers or people who are already experienced in that area of the business, you’ll be approaching them much different than you would the “average” viewer audience.

In that particular instance, you need only be concerned with the sales copy. In other words, design graphics are purely optional.

Adversely, if your product is geared toward a more general or less professional audience (which in most cases it will be), you need to consider how the “average” viewer will perceive your overall sales page.

If it’s too bare bones, they’ll assume you’re a newbie or amateur. Why? Because they’ve been conditioned to perceive a website – even a one-page sales site – in a certain way.

For the most part, that means they expect to encounter some sort of familiar layout or design. With a sales letter site, that would equate to a “proper” header graphic or logo at the very top, one that represents either the product or the company.

Naturally, a good professional 3D cover image of your product is also a must have. These days, a lot of marketers have decided to forego this particular detail. But that’s not necessarily a good idea.

No matter who your target audience is, “showing” someone what you’re selling is and always will be powerful stuff. So rather than perceive your 3D cover graphic as merely an image, think of it as yet another important ingredient in the overall process of creating
killer sales copy.

The Text

With a sales letter website, you have one purpose and one purpose only… to SELL a product. That being said, it’s extremely important that you don’t get carried away when dealing with the text content.

In most instances, your sales copy will be rather lengthy so whatever standard you set from the beginning, it’s something a reader will be subjected to for quite some time. If you utilize a relatively hard-to-read font, or use color combinations that strain the eyes, you might as well not even have any sales copy.

No matter how boring it might seem, always use black text on a white page background. For emphasis throughout the sales copy, use bold but don’t get carried away. What you want to stand out are all of the key phrases that are most relevant.

Aside from using bold, you can implement a secondary color, one that stands out (bold red is generally the best choice for making text stand out). But don’t use more than that secondary color. At least, not when it comes to text.

The only instance you should consider using a third color would be the background attribute (where you can place a highlight color behind specific text)…

For that, you can use the <span style=”background-color:#FFFF33″> attribute to place text over a colored background. For example, #FFFF33 and #FFFF66 are both subtle yet “outstanding” yellows when placed behind black text.

This attribute is especially effective when used for either sub-headings or specific areas or blocks of text.


Like all “special” effects, use them exclusively to give key points of your sales copy emphasis. But nothing more. If you over use these types of effects, it will dilute the impact of all your sales copy. What you’ll wind up with is sales copy where nothing stands out.

Keep in mind that no matter how good your headline is, viewers have a tendency to simply scan sales copy from top to bottom. At least initially. Then, if the overall gist of the information they absorb encourages them to want more, they’ll read the entire sales copy, line by line.

So you’re got two major objectives…

First and foremost, you need a compelling headline, one that will sufficiently capture their attention within the first few seconds they arrive at your site. Second, you need to create a series of eye-catching hooks throughout the entire sales copy.

These eye-catching hooks will consist of the following possibilities:

  • bold and/or different color words, phrases, and sentences that either summarize or highlight important points within your sales copy
  • bulleted lists that contain key features, benefits, or information
  • sub-headings that break the sales copy into specific sections

What you’re shooting for here is this…

When a viewer scans through your sales copy from top to bottom, they automatically take note of and absorb each highlighted area of text or sub-heading. Your job is to make sure that they receive the overall message, even though they’re not reading everything on the page.

Basically, you’re constructing a shorthand version of the entire sales copy.

And since the viewer will be scanning from top to bottom, it’s important that you include at least one postscript (P.S.), one that doesn’t stop the following flow…

  • Viewer reads the headline.
  • Viewer scans the sales copy.
  • Viewer reads the entire sales copy.

Since the postscript is going to be the last thing the viewer scans, it’s important that whatever you include there will solidify the process of getting the viewer to go back to the top of the page and actually read the entire sales copy.

Order Link

On a sales page, it’s crucial that the order link is clearly visible. For the most part, viewers expect to find order information at or near the bottom of the page.

In fact, one of the primary reasons a viewer will scan a sales page is because they want to immediately see what the product or service is going to cost them. And they assume the price will be located somewhere near the order link.

Make certain the link can’t be missed when they scan. If they have to hunt for the order button, order information, or price of the product, they’ll most likely lose interest and move on.

And don’t rely on a standard button or link. Either one can be easily missed. Whether you use a graphic image, an order link, or both… make sure they are large and bold. Within reason, of course.

Here are examples of two solid and extremely visible order links…

The point is, you want to make sure that whatever purchase link you use is highly and clearly visible.

Naturally, you can incorporate secondary order links throughout the sales page (“click here to order now“). But the primary order link – the one located near the bottom of the page where the viewer expects to find it – should clearly jump out at them, even when the viewer is in the process of quickly scanning the page.


This is yet another area where sales letter websites differ from the other two categories. Instead of developing the pages, you’ll be developing your marketing and promotion efforts. That includes the usual tasks such as writing ads, running test campaigns, and researching additional markets. And, if your results are less than you hoped for, it might also mean tweaking, refining, and improving the sales letter itself.

Content Driven Website

Free man designing website layout

The primary purpose of any content driven website should be to solicit as much traffic as possible. Granted, your ultimate goal will be to generate income, but the whole point of loading a website with quality content is to draw unlimited viewer visits. And hopefully, on a repeat basis.

With a sales letter website, you create it once and then spend the rest of your time and effort promoting it. A content driven site, on the other hand, requires constant and ongoing development. The more pages and content that you add, the higher the volume of viewer visits you can expect.

And once you’ve achieved substantial traffic, you will automatically generate income. The source of that income will probably be the result of one or more of the following:

  • direct sales of products or services
  • charging for advertising space on your web pages
  • revenue resulting from clicks on Google ads

So the final equation is this… more content equals more traffic which automatically equates to more income.

Overall Design

At some point, your content driven site will contain a vast number of pages. So it stands to reason that you should anticipate the volume of information as well as meet viewers needs right from the start.

What this all leads to is the fact that on a content driven website, both ease of navigation and the ability to locate specific information within your pages needs to be on the very top of your priority list.

That doesn’t mean you should neglect form for the sake of function. Like any other type of website, this one needs to have good design, one that will not only be pleasing to the eye but will comfortably lend itself to both content and advertising.

The most popular layout just happens to be the most effective for this type of website…

It consists of two narrow outside columns with a wider column in the middle. One of the narrow columns is most often used for navigation links and the other to display Google ads. Below each of those areas, space can be reserved for advertising (either products and services that you yourself are promoting or paid advertising space).

The center column, of course, should always be reserved for the actual content (articles, information, etc.).

Whatever you do with regard to design and layout, be consistent. That is, make certain things like navigation and main content areas are in the same location on every page of your website.

Since a content site can get pretty heavy with regard to navigation, you might also consider including one or more rows of links at the top that stretch across the width of the columns. Or, to conserve space, you could simply incorporate drop-down menus.

Either way, you need to establish a solid navigation method right from the start. If you don’t, you could find yourself revamping thousands of pages just to accommodate the increased level of navigational needs.

Good solid navigation is also necessary to ensure that search engine crawlers (spiders) can easily and efficiently reach every page of your entire website. If they can’t, you won’t be able to get your content pages listed in the search engines.

That, of course, means you won’t be receiving the highest possible volume of automatic daily traffic, traffic that you want and need in order to generate the largest amount of overall revenue.

First and foremost, create a solid and good-working navigation system throughout. Second, take advantage of Google sitemaps. This will ensure that all of your pages will get spidered and subsequently listed in Google’s search results.

When it comes to creating and maintaining your sitemap, the best program to use is Sitemap Equalizer ( ).

Since a sitemap is also a valuable asset for your viewers, make certain you create an HTML version (Sitemap Equalizer can accomplish that task as well).

A link to that version of your sitemap should be made accessible on each page of your website. If possible, include it right within your primary navigation menu.

Internal Search Engine

Whether your content website starts out with hundreds of pages or gets there gradually, it’s important to include an internal search engine. That way, your viewers can quickly and easily search for and locate specific information within your pages.

Giving them that ability will help ensure that they remain on your website for longer periods of time. And the more time they spend there, the more likely they are to either purchase something or click on Google ads.

For convenience, a search input field should be located on every page of your content driven website. Highly visible and somewhere at or near the top of the page is preferable.

That gives the viewer easy and convenient access, just like using the search field on the Google toolbar. It’s always right there, available for use whenever it‘s needed.

When it comes to selecting an internal search engine, there are two choices:

  • Install a search engine script on your server.
  • Use an independent remotely-hosted search engine service.

The first choice is superior for several reasons…

  • You can fully customize your search results page.
  • There will be no ads or outside links attached to the search results.
  • You can re-index your site as often as you want or need.

To locate a good search engine script, just go to any one of the major script websites…

Hot Scripts
Dynamic Drive
CGI Resource

The best thing about the second choice – using an independent search engine service – is the fact that you don’t have to worry about the inner workings associated with the search functions. And it’s definitely easier to set up.

The problem is, an independent service will have control over the search results page. That means your viewer could be subjected to outside ads and outside search results, ones that have nothing to do with your website.

If you don’t think that’s serious enough to worry about, you have two basic options in choosing an independent service…

You can use a private service like Atomz ( ) (which happens to be one of the few services that doesn’t place their advertising banners on your search results page).

A second option is to use the service offered by major search engines such as Google and AltaVista.

If you want to use the search feature from Google, all you have to do is log in to your Adsense account ( ) and set up your search capabilities there.

(If you don’t yet have a Google Adsense account, get one immediately because you’re missing out on some great revenue potential.)

Of course, the same problem of control exists because Google also retains control over the results page. Yes, you can customize it to some degree (like choosing a background color and including your own logo). But the part that really counts is not within your

When a viewer conducts a search using Google’s internal search feature, it takes them to a page where Google has placed several of their own search results first. That means your viewers could easily “escape” your website by clicking on any one of those results.

There’s no question as to the navigation value an internal search engine brings to a content driven website. But compromising that value by using someone else’s search results page isn’t a fair or equitable tradeoff.

Do yourself a favor and opt for search engine software. If the owner doesn’t offer free installation, pay the fee. Or hire a third party to do the installation for you. Either way, the cost will be well worth the benefit of retaining total control over search results.

The only exception to this would be allowing viewers to conduct external searches. For that feature, Google’s service would be a good choice simply because you can earn revenue when a viewer conducts an outside search.

Adsense Websites

Laptop on the table

The beauty of Adsense websites is the fact that they don’t have a specific definition. At least, other than the fact that they are created and published with the sole purpose of generating revenue each time a viewer clicks on one of the Google ads.

With regard to the usual design features such as layout and colors, however, there’s nothing concrete. Place Google ads on a three-page mini site or include them on thousands of pages devoted to a specific topic or subject matter.

Again, the sole purpose is to generate income from clicks. And since that’s the sole purpose, you need to concentrate on where and how to place Google ads in order to achieve the best financial results.


In addition to the traditional ad units (which include text and image ads), Google also offers link units. These display several topics that are relevant to the page content and have been proven to be extremely effective.

Here are two examples of link units:

When any of these links are clicked on, the viewer is taken to an independent page that lists various results for that particular topic or subject matter.

The first example – where the links are stacked one on top of the other – makes them ideal for inserting in any number of “filler” locations throughout your web page.

Depending on your page layout, you can pretty much incorporate this type of unit anywhere there happens to be a small block of available space.

If you already have similar navigation links (in a left or right hand column), adding one of these link units just below them is a good solid location.

The second example – where the links are displayed horizontally from left to right – gives the general appearance of just another set of standard navigational links. In other words, they can be made to seem as though they’re part of your website’s navigation rather than separate Google ads.

The best and most effective location for this type of link unit is just below your header graphic (or the header area of your web page). The second best location is either just above your header or at the bottom of the page.

That leaves the traditional Google ad units…

Regardless of how you’ve designed your page, there will be one particular area assigned to delivering content. Specifically, the content that’s based on keyword search criteria.

What you want to do is include an ad unit just above that content. What that accomplishes is this…

Having searched for something in particular, a viewer reaches one of your web pages. They’re expecting to find information related to that search. Since one of the first things they’ll see is the ad unit, they’ll assume those are links directly associated to that information.

Of course, they’re right. They are associated with the search topic. The only difference is, the links are part of Google’s paid advertising rather than additional content on your website.

The point is, this ad unit appears to deliver the kind of information the viewer is interested in. It’s simple… they click, you earn. The more things you can do to encourage them to click, the more Google Adsense revenue you generate.


In order to improve the odds of a viewer clicking on links that are placed just above the relevant content they‘re searching for, the ad unit needs to look like the typical results listing.

The rectangle blocks of Google text ads do just that…

The best choices here are the large and medium rectangles (336 X 280 and 300 X 250).

Overall, Google ads should match the rest of your website. No borders, no flashy colors… nothing that makes they stand out. Instead, make them blend in so they appear to be natural content inclusions rather than blatant advertising.

Since Google allows you to place three ad units on your pages, good combinations would be as follows:

  • link unit below the header, rectangle ad unit above content, link unit at bottom of page
  • link unit below the header, rectangle ad unit above content, vertical ad unit in right or left hand column

Naturally, you don’t have to include three units on every page. And considering all the ad format options Google provides, you can mix and locate them however you like.

Just be aware that the two that have been proven to be the most effective – on average – are the horizontal link unit below the header and the ad unit just above the content.

If those don’t suit your page layout or you want to test other variations, by all means do so. Every website is different. What works best in one particular situation (or area of subject matter) might not work somewhere else.

Just make certain that whatever variations you experiment with, you keep track of your results. That way, you’ll know precisely which units and what page locations are giving you the best return.


Sales Letter Website

  • Always include a quality professional header graphic or logo.
  • Think of your 3D cover image as yet another important ingredient in creating effective sales copy.
  • For visual impact and comfort, always use black text on a white page background.
  • Only use bold and accent color to highlight the most important “key” phrases and text areas.
  • Use bulleted lists and sub-headings to break up content and promote the viewer’s ability to initially scan the page for relevant information.
  • Make certain your primary order link is large, bold, and highly visible.
  • If your results are less than you hoped for, go back and tweak, refine, and improve your sales copy.

Content Driven Website

  • The primary purpose is to generate as much traffic as possible.
  • The top of your priority list should include proper navigation and the ability to locate specific information within your website pages.
  • Make certain standard page elements such as navigation and main content areas appear in the same place throughout your website.
  • Use Google sitemaps to ensure that all your pages are spidered and subsequently indexed.
  • Provide an internal search engine so viewers can quickly and easily locate specific information.

Adsense Websites

  • The sole purpose is to generate revenue from having viewers click on Google Adsense ads.
  • Link units display lists of topics that are relevant to and associated with the page content.
  • When used just below the header area, horizontal link units give the impression that they’re actually part of the website’s navigation and not separate and independent Google ads.
  • Vertical link units are ideal for inserting anywhere there happens to be smaller available blocks of space within a web page.
  • The best location for traditional Google ad units is just above your primary content.
  • The best sizes for traditional ad units placed above primary content are the large and medium rectangles (336 X 280 and 300 X 250).
  • Ad units should blend in naturally with the rest of your website. Avoid borders and highlight or background colors.
  • For best results, ad links should be traditional blue (or match the link color used on the rest of the web page).
  • Test variations of ad/link units and page locations and keep track of the results you achieve so you know precisely which combinations work best.


Sitemap Equalizer
Web Style Guide
Hot Scripts
Dynamic Drive
CGI Resource

Scroll to Top