10 Tips to What is Good Web Design

1. Use a Plain, Flat-colored Background
Keep the appearance clean and neat. Your message is in your words and foreground images. Busy, patterned backgrounds distract. This is why we usually print on plain paper. White or light colors are best and essential for pages containing critical information that the visitor may wish to print. Think “executive dress for success”.
2. Use Plain or Black Horizontal Rules
Again, don’t distract from your message and keep a clean, professional appearance. Rainbow, 3D, striped and other graphical horizontal rules or bars are not only garish but dated and eat up valuable download time. There are many subtle things that can be done with just the standard HTML horizontal rule tag, <hr>.For Example:



For coding techniques with horzontal rules, check out the article “Horizontal Rules!” in Techniques.

3. Use 6 Colors or Less
More executive dressing. Six colors includes text color (1), background, (2), active link (3), visited link (4), highlighted links (possibly 5), and headers (possibly 6). Acclaimed magazine and interface designer Roger Black uses only black, white, red and occasionally yellow. Note that these are the common colors of road signs.You might want to use compatible shades of these colors (such as grey, a shade of black) or you might want to select others such as blue or green, but a limited palette keeps the pages consistent, easier to navigate, neater and faster to load. It also speeds up development and maintenance by reducing the question of colors. And finally, if you use photographs or other illustrations on your site, it will make them stand out.
4. Use Graphics Sparingly and Consistently
Graphics are accessories to the web wardrobe. Too many accessories looks cheap. Better 1 outstanding graphic than many clashing ones. Or use a series of small, related graphics that tell a story. Use meaningful ones. Make your graphics count. People will look at a single graphic on a page before reading the text. Always caption any photographs or illustrations. People will read photo or illustration captions before reading the text. Ideally, the graphic is related in some fashion to the text or the message. Use the same style of graphics throughout the site. For example, cartoon illustrations versus woodcut illustrations. Eliminate cloying or unnecessary graphical interfaces likes large navigation buttons, especially 3D buttons or splashes. These are very dated while “the littler black dress” is always in style. Todays graphical user interfaces are either simple, flat colors or require a professional graphics designer and serious HTML coding. Try to keep graphics sizes under 45K for the entire page to expedite download.
5. Use a Maximum of 3 Font Families Per Page
You can also safely mix 1 sans-serif (e.g., Arial) for say headlines and 1 serif (e.g., Times New Roman) for text. Or vice versa. When in doubt, use only 1 font family (e.g., Arial OR Times New Roman). If you are uncomfortable mixing font styles, consider buying “The Non-Designers Design Book” by Robin Williams. A jumble of decorative fonts is very dated and difficult to read.

Content Upgrades

6. Make Your Site Useful to Your Target Audience
The content must be of some tangible use to your target audience. Give something away that demonstrates your expertise and is useful to your target audience. A novelist may wish to provide short book reviews in the same genre as his or her novel. If targeting vacation travelers, post valuable travel tips, accommodation or restaurant reviews, reviews of the travel booking sites, etc. If your site were a brochure or a magazine, who would pick it up and why? What’s in it for your audience?
7. Keep on Topic
Remove content that is not directed to your target audience. Always ask yourself, “Of what use or interest is this material to my target audience?” Limit the personal and cute. Think of stepping into a corporate office. An executive office may have 1 or 2 family photos on the desk and some trophies or framed artworks on the wall, but they are neat and carefully selected. Limit your personal photos and momentoes to a single biographical page. If the personal is part of the overall style of the site, limit it to a single image or segment per page that ties in and leads to your next message. For example, if you’ve written a series of mysteries with a cat protagonist named “Mrs. Pedegaris”, then you may decide to use Mrs. pedegaris as a theme for the site by having each page entitled something like “Mrs. Pedegaris’ Favorite Summer Reads” and at the bottom include a small photo of the cat with a note “Click here to see what the other critics said about my latest book, Mrs. Pedegaris Goes to the Dogs!” Keep everything on target.
8. Keep a Consistent Tone and Style
Is the web site style corporate, journalistic, humorous, chatty, refined? Whatever the style and tone, keep it consistent throughout. If in doubt, keep it simple and direct. Brief is better than big and bad.
9. Weed the Links
A page of additional resources on the site’s topic can be useful, but only if it remains accurate and current and isn’t just a meaningless list. Better to keep a small list with a brief description of the site and why it’s worth the visit than 50 dead links and 50 dull links. You can’t compete with Yahoo. Clean out resources that are no longer active, are of minimal value to your target audience or you really can’t recommend. Add some information explaining why you consider the link valuable. Better quality than quantity.
10. Get Rid of Counters, Guestbooks and Other Old Programs
Visitor counter programs are old tricks from the early days of the Web to allow programmers to show off or test their programming skill. Low counter numbers tell everyone that your site is new or has a limited target market or just isn’t very successful. High counter numbers are wasted real estate — a successful site is known by its audience. Even McDonald’s has stopped counting those burgers! Another common early program still around is the guest book which either give visitors’ e-mail addresses to spammers or add no meaningful benefit to the site (collecting testimonials can be useful, but should be specified as such). Originally guest books were used for the same reasons as counters and allowed geeks from diverse countries to connect. Most randomizers are meaningless as well unless you have them set to generate something genuinely useful like a new tip of the day directly related to your topic. Also, eliminate SSIs (server-side includes) for inserting current the date and time or information about the user such as their browser type, IP address, referrer page, and so on. Again, these are old and now meaningless geek toys.
Bonus: Relax and Keep It Simple
This isn’t brain surgery and your business doesn’t depend on the perfect web site. Your web site should be a part of your overall marketing plan, albeit an important one these days. Better something simple and clear, even if it’s only 1 page with your business pitch and contact information than something cluttered and confused. Don’t worry about current web fads. Quality is NEVER out of style. Don’t be afraid to ask or hire help. And to make certain you stay in control of the process you might check out a little something I wrote elsewhere, called “Cooking Up A Web Site”.

Vertical Rules!

Vertical rules can be handy to provide a visual structure to disparate information that needs to be presented on the same page, preferrably side-by-side. For example, navigation links, system requirements, or a list of materials, are things that may best be placed in a columnar format beside related information. Usually, the information can also be arranged by using horizontal rules. Horizontal rules should be used if there is any concern about the additional maintenance vertical rules require or it is critical to improve downloading speed.

This is standard table with cellspacing used to achieve a columnar format. It can be highly effective all by itself, however, you’ll also note that cellspacing effects all four sides of the table cell. Vertical rules help reinforce a consistent visual alignment.

With the arrival of HTML 4+, there are a number of ways to achieve the appearance of vertical rules, particularly with style sheets. But as usual, unless you know with absolute certainty what browser and release level your targetted audience is using, you should use a method that is not browser dependent — or at least supports the largest variety of browsers possible. The method described below should work on all browsers released since Netscape 3 except a text-only browsers.

This is what you get when you apply verticle rules with a table. Like sidebars in a magazine, it can be very useful to visually separate information. Of course, it requires a great deal of page structure and makes maintaining the page more difficult because of extra table cells necessary. The more table cells, the more likely a tag will get left out or broken.

The vertical rules are achieved by adding extra columns to a table. There are actually only 2 columns of text in the table above, however, the table itself contains 9 cells per row! It looks like this:

<table border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td width=”1″ bgcolor=”#000000″><img src=”../images/spacer.gif” width=”1″ height=”1″ hspace=”0″ vspace=”0″ border=”0″ align=”left”></td>
<td width=”10″>&nbsp;</td>
<td align=”left” valign=”top”>This is what you get when you apply verticle rules with a table. Like sidebars in a magazine, it can be very useful to visually separate information.</td>
<td width=”10″>&nbsp;</td>
<td width=”1″ bgcolor=”#000000″><img src=”../images/spacer.gif” width=”1″ height=”1″ hspace=”0″ vspace=”0″ border=”0″ align=”left”></td>
<td width=”10″>&nbsp;</td>
<td align=”left” valign=”top”> Of course, it requires a great deal of page structure and makes maintaining the page more difficult.</td>
<td width=”10″> &nbsp;</td>
<td width=”1″ bgcolor=”#000000″><img src=”../images/spacer.gif” width=”1″ height=”1″ hspace=”0″ vspace=”0″ border=”0″ align=”left”></td>
</tr>
</table>

The vertical rules are the table cells that are only 1 pixel wide (width=”1″) and have a background color of black (bgcolor=”#000000″). I place a transparent spacer image 1 pixel wide by 1 pixel tall in the column to force the various browsers to actually display the column. (For more information on the spacer image, check out the article “I Need My Space”.) Then to provide some margin space between the vertical rule and the text, I placed a new table cell 10 pixels wide (width=”10″) and used a non-breaking space entity (&nbsp;) to ensure the 10 pixel column appeared.

Why didn’t I use the non-breaking space entity in the 1 pixel table cell? I wanted a very thin black rule and an entity is read as being a minimum of 5 pixels wide in some browsers (notably Netscape). This produces a thicker rule than I wanted, but it can be used.

Why didn’t I use the spacer image in the 10 pixel table cell? It would require additional image settings and I didn’t want to discuss that here.

This is an example of a table with interior rules. The rules are used only to divide the column in the middle of the page. A smart, crisp appearance can be achieved with this technique. But again, there is more effort in maintenance and the issue of downloading the entire table discussed below.

The advantage of the table cell method of creating a vertical rule is that the rule will automatically be as long as the entire table row in which it is used. The disadvantages are the increased complexity in building your tables — or precisely, in adjusting & modifying your tables and the download delay. Table information may not be displayed in the browser until the entiretable has been downloaded and built. If you’ve ever had the experience of a page that seems to take a very long time to download and then “pops up” all at once, you are looking at a page built inside a table. the more complex the table, especially if there are tables containing images within the table, the greater the delay.

Use vertical rules as a design template only if you are comfortable with HTML coding and have a genuine need. A standard table, using cellspacing or cellpadding to provide your margins, usually works without the complexity. Or the information can be arranged to take advantage of the horizontal rule. But sometimes you really need or want that extra visual delineation and when you do remember, vertical rules!

Horizontal Rules

Horizontal rules are the horizontal lines or bars that are used to separate items on a web page. Used correctly, they can help organize disparate information on a page (for example, the horizontal rule at the bottom of this page that separates the article from the copyright information). Used incorrectly, particularly the graphical rule (or bar), they are the second quickest visual signal of an amateurish web site. (Inappropriate page backgrounds are the quickest visual cue but we’ll discuss that next week.)

Use the horizontal rule tag, <hr>, instead of graphical rules or bars. Rainbow, 3D, striped, translucent and other graphical horizontal rules or bars are not only garish but dated, and eat up valuable download time for no good purpose. Use plain or black horizontal rules. A “plain” horizontal rule will appear 3-dimensional. To create a black rule, add “noshade” to your <hr> tag. If you are developing exclusively for the Internet Explorer 4+ browser, you may choose specify a color for the horizontal rule tag, however, I wouldn’t recommend it unless it’s grey. Color should be reserved to convey importance.

This doesn’t mean that your horizontal rules have to be dull. There are many subtle things that can be done with just the standard HTML horizontal rule tag, <hr>.

For Example:

<hr size=”10″ width=”10″ align=”center”>


Above is <hr width=”100″ align=”center”>
Below is <hr width=”100″ noshade align=”center”>


The “size” attribute specifies how thick the rule will appear. For example:

<hr size=”1″ noshade >


<hr size=”25″ noshade>


The “width” attribute specifies how long the rule will be. Width can be specified as a specific number of pixels (i.e., width=”25″) or as a percentage (i.e., width=”25%”). Using the percentage will give varying results depending upon where it’s used and the size of the browser window. The percentage used inside a table represents the percentage in relation to the width of the table cell. The percentage used outside of a table is in relation to the width of the browser window. If you’re in doubt, use a specific pixel number. For example:

<hr width=”100″ noshade >


<hr width=”100%”>


Notice that the default alignment for the horizontal rule tag is centered. If you want to change the alignment, you use the “align” attribute. For example:

<hr size=”1″ width=”100″ align=”left”>


<hr size=”1″ width=”100″ align=”right”>


With the HTML 4 standards, many of the horizontal rule attributes are deprecated in favor of using style sheet box elements to achieve the same effects. Unfortunately, there are still a large number of browsers in use that don’t support the new standards and style sheets.