Design Attractive Web Pages

Main Page | Lerner Consulting Newsletter | Blog | Contact Me | Disclaimer Privacy Policy | Books, DVDs, Music from Amazon | Event Calendar | Plain Style | Color Swirls Style | Purple Style | Spring Green Style | Cell Green Style | Tan Linen Style | Deep Pink Style | Black and White Style | One Column Style (best for old browsers and/or limited vision).
Avoid Foreclosure | Private Investor? Earn higher steady returns | Real Estate Investing Products | We Buy Houses CA$H | We Can Buy Your House | Get a House No Qualifying | Real Estate Investing Workshops, Resources, Techniques | Real Estate Investing Books | Real Estate Tools | Facing Tough Financial Issues | Mortgage Calculator | Stock Investing Tools and Strategies | Asset Protection: Be Protected Within the Laws from Frivolous Lawsuits, Probate, and High Taxes | Stock and Option Investing Books.
Business Coaching | Business Consulting | Sales Training | Meeting Facilitation | Help Desk Reporting | Transforming Communications | Secrets of the Millionaire Mind — Learn the Mindset of Wealth | Raiser's Edge Consulting: Fund Raising and Donation Processing, Procedures and Training | Data Cleanup and Importing | George Lerner Résumé
Knowledge Publishing and Marketing: We ALL have immensely valuable information. | Generating Free Website Traffic from YouTube and other video sites | Generating Ongoing Income | Email Auto-Responder and Marketing eBooks | Top ways to Build Your List | Have a Million Visitors to your site! | Learn from Top Marketers | Information Publishing Business for Profit Now, even before you write your articles | Ebook Marketing Revealed | Earn $1,000 in 48 hours Starting from Scratch | Search for Articles You Can Sell | Checklist for Selling Information Products | Secrets of the Millionaire Mind | Quotations
Web Site Design: Web Sites I Designed | Designing Attractive Web Pages | Web Design Software | Style Sheet Generator — Auto-Adjusts Contrast | Convert Old Websites | Adjust size of substituted fonts | Hosted on Lunar Pages.

Principles of Attractive Web Site Design

When I design web sites, I start with a few design principles in mind:

Search Engine Optimization

The guideline for search optimization is "be who you say you are"—have everything on a page be consistent with a topic.

Have one topic per page.

Write that one topic well, providing good information. Be as specific as you can, since search engines want to provide the best answers to search queries. Have your page give the best answer to the specific search engine query. For example, if you have a page about "puppy food", don't talk about "dog food" on that page (except in passing, or comparing puppies' nutritional needs with dogs' needs). If you were to have a friend read the page, what would they say it is about?

Page elements

The main elements search engines look at to find out what the page is about are the page title, file name, headings. Make sure these elements all say the same thing as the text. Put the key phrase of the page in the page title, the file name (except of course you can't use spaces in file names), and the headings. Make everything on the page consistent, about one topic, for example a page on "puppy food" should be named puppy_food.html, and have a title such as "Puppy Food: What is the Healthiest Food for Your Puppy". The main heading might be "Your Puppy Needs Different Food than Your Dog", sub headings might include "Don't Feed Your Puppy These Foods", and "Nutritional Needs of Your Puppy". Most search engines know what words "go together", so food, foods, feeding, nutrition, nutritional, etc. are on the same topic. Your page will be graded on integrity by the search engines, they know if you are writing about what you say you are.

(The recommendations to pad your page with multiple key words is outdated, and has been spoiled by people attempting to cheat the search engines; don't do it, you will be penalized for it by the search engines.)

Link Text

Have the text of your links (in your menus, in the body of your pages, in your ads) all contain the key word (or key phrase) for that page. Never use "click here" for the link text; instead have, for this example, "puppy food" as the link text. Your "dog food" page can have a link to "puppy food", that would be useful to your readers, who might not have thought there would be different food for puppies.

Make ads contain a specific key phrase, and go to the page for that one specific phrase. Don't use one ad for multiple key phrases; have a separate ad for each phrase, each linking to a different landing page. Google has a "stupid tax", they will charge you more per click if you don't provide their customers with exactly what their customers are looking for—someone looking for puppy food isn't looking for dog food.

Meta Tags

It is OK to use the keyword META tag in the HTML header of your page, as long as you put just the keywords your page is actually about. Padding with extra or redundant keywords can get you penalized, or even banned from the search engine.

The description META tag is used by many search engines, as the text they display for what your page is about. Again, make it the brief summary saying what the page is about. If someone reads your description, and is interested, you should give them exactly what they are interested in. Keep it short, around 150 characters for most search engines.

CSS Style Sheet Generator

I have written code that runs on my web server to generate all my CSS style sheets. I specify the colors in one place, and the generator applies those colors in all the dozens (or hundreds) of places the colors need to go. It even automatically adjusts the contrast, so text is always easy to read against the background color I pick. I can make an entire new color scheme in under a half hour, and most of that is picking from the many great-looking colors which ones best match my site's mood. This has designing my web site be much easier — I never have to think about text being legible!

To pick which great color combinations I want, I have a web page that displays them all, in the styles of paragraphs and menus I use. See the Lerner Consulting Style Generator and contact me if you are interested in using it. Saves hours of tedious work by applying good color combinations to your whole site!

The style sheet generator works with all the styles used in this web site (normal pages, ad pages, menus, tables), plus I have customized the free Amazon Products Feed script to use it.

Menu Styles for Good Web Design

The Style Sheet Generator has a great 2-level menu, that will work on any browser that uses CSS (while displaying as a normal list in browsers without CSS), looks good no matter what screen size or text size your visitor uses, and is easy for you to maintain (adding, moving, or deleting pages). It permits you to be extremely flexible in how you design the order of your pages, and how many pages you can have in your site. Unlike programs such as FrontPage which use a strict "organization chart" for the menu system, you can have pages in multiple places in your menu — wherever they make sense for your visitors.

It uses a tiny bit of Javascript, and so the code looks a little messy. To modify the items on the menu, just copy a menu item from the source of one of these web pages, and put in your own menu text.

There are also two one-level menus included, one for horizontal layout and one vertical, based on List-U-Like. These are simply HTML lists with a style class applied, and so are very easy to modify. Great for anywhere you want a submenu, to offer your users pages that are closely related to the one they are on.

If you really want to, you can customize your menu look with the List-U-Like CSS Generator , and then modify the results to use the style sheet generator. I have written instructions on using List-U-Like .

CSS Style Sheet Picker

Your visitors might prefer a style sheet you made other than your default one. With a menu item, let your visitors pick which of your style sheets they prefer, and have your website remember it for them (uses a cookie). You put a call to choose-css.pl instead of a link to a style sheet, in the head section of each page. Puts all your other style sheets in the page header as alternate style sheets' for browsers such as FireFox that can access them. (Included with the Style Sheet Generator).