Navigation Menu

Designing Attractive Web Pages

Principles of Attractive Web Site Design

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

  • Clearly present information. Have everything on the website, and in the design of the site, support your purpose for the site.
  • Design the site to make the most common things easy: easy to modify pages, easy to add new pages, easy to have the appearance of each page be consistent.
  • Design to web standards. Proper design has simpler HTML and styling, and will work on more browsers (including cell phones), and is easier to learn. It is easier to design for Firefox, Safari, and Opera, and then add compensations for non-standard browsers (primarily Internet Explorer), than the other way around.
  • Your contact information, signup forms, copyright notice, and all the other repeated information you have, should be typed only once. If you change your phone number, you shouldn't have to find your old number in dozens of places throughout your web site, just change one setting.
  • Design to be viewed on any modern browser, and for older browsers the site should at least be legible. Remember, your web site may be viewed by people using their cell phone, old monitor, a screen reader (for people with poor vision), a text-only browser (for old computers or to prevent downloading viruses or adware). Many people have Flash and other scripts turned off; provide a way for those people to see and navigate your site.
  • Design site navigation that is easy to use, flexible, and easy to maintain.
  • Use colors and fonts that are easy to read. Let the person reading the site be able to adjust the size of the fonts to their preference. (For Internet Explorer, use the View, Text Size menu; for FireFox, press Ctrl-NumPlus, Ctrl-NumMinus, and Ctrl-0). I have a web server script adjust colors for good contrast, and provide many color schemes so one will work for almost everyone. I have the script apply these throughout a style sheet, instead of doing that by hand or with expensive software. I also make it easy to adjust the line spacing to make fonts more legible.
  • Easily place ads for your products and services, and for affiliate programs, with ad text you can update. Keep all your web page, blog, and social media ads in a convenient database.

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.

  • Design for marketing your site effectively, including putting good keywords in the right place on each page, so your site will rank well on search engines.
  • 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.

    Gorgeous Colors With Good Contrast, Automatically!

    I have written CSS Style Sheet Generator 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!

    If you might want to use the Lerner Consulting Style Sheet 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 and Infinite Responder to use it.

    Menu Styles for Good Web Design

    The Style Sheet Generator has a great multi-level expanding menu, and a simple 1 or 2-level menu. Either 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.

    There is also a one-level menus included, for horizontal or vertical layout, based on List-U-Like. These are great for anywhere you want a submenu, to offer your users pages that are closely related to the one they are on.

    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 include choose-css.php instead of placing a link to a style sheet, in the head section of each page. (Included with the Style Sheet Generator).

    Lerner Consulting Style Sheet Generator

    • Colors with good visual contrast
    • 2 or 3 column layout
    • Accordion-style menu, text description menu, and basic place-anywhere submenu, all with simple HTML lists
    • Line spacing automatically adjusts, so your text lines up vertically throughout your page, keeping a vertical rhythm.
    • Style sheet chooser, your visitors can pick their favorite color combination, and it is automatically used throughout the site. (But you can override their choice, for example for a holiday sale page.)
    • Testing mode, tied to your IP address, displays horizontal "lined paper", great for making sure you've got everything working the way you want.
    • Sales pages can have the page background displaying short text at an angle, for example the name of the product or the date of the event, without having to make a custom image (let the web server make the image for you!)
    • Very easy to pick colors from a picture, for example the colors on a plate of food your restaurant serves, as the basis for your style sheet.

    If you might want to use the Lerner Consulting Style Sheet Generator contact me. Saves hours of tedious work by applying good color combinations to your whole site! I'll make sure you have the CSS and minimal PHP knowledge to use it well, or perhaps I can do a style sheet for you.

    SiteGround WordPress hosting
    Join my Email List

    I never distribute, share, or sell my mailing list to other people. I will only send emails related to coaching, real estate, strategy, communication, and effectiveness. You can Unsubscribe any time, using the link in each email.