Tips And Tricks Of Website Design

Consistency Is Good

Consistency doesn't make you look boring, it makes you look competent. It also helps you create webpages faster by allowing you to create:

• page templates,
• general-purpose stylesheets,
• and general-purpose script files.

Furthermore, it makes your webpage easier to figure out.

Contrast Is Important

There are few design mistakes worse than contrast, which is how much your text stands out against the background. A good rule of thumb is if you must highlight text to read it, you need to adjust your contrast. Beware of colorful pictures; too many conflicting colors will make your text hard to read as well.

Clean Code Isn't Everything

In the examples, I have a page called A Terrible Webpage (there is also a text-only version of it). It has no errors in JavaScript, CSS, or HTML—but the page itself is horrid. The problems, paragraph by paragraph:

• Paragraph 1 has constantly changing text color and an animated background.
• Paragraph 2 has an animated background image and the text moves around within the element.
• Paragraph 3 has its text is set against the body's background (also animated).
• Paragraph 4 has a background that is constantly changing from one bright color to the next.
• Paragraph 5 has yellow text set against a white background.
• Paragraph 6 has white text set against a brightly-colored animated background.
• Paragraphs 7 and 8 have a background image for which a color that stands out does not exist.
• Paragraph 9 causes an alert box to appear every time you move your mouse cursor over it.

Lastly, the h2 elements have moving borders and text, making them distracting even without their garish colors, while the hr elements have animated backgrounds of their own.

In short, there's loads of features that a) take up quite a bit of bandwidth, b) make the page difficult to read, c) bog down your computer (you may notice that the moving content constantly changes speed), and d) generally make the page suck.

Properly coding your structure, styling, and behavior is important, but that alone does not make a good webpage—nor does shoddy coding prevent a webpage from looking good. The trick is to start with an idea for a good design, then use good coding to bring it into being.

This Book Does Not Teach Everything

Below are a bunch of websites you should visit:

A List Apart

URI: http://www.alistapart.com

This webpage contains a lot of advanced website coding tricks.

CSS Zen Garden

URI: http://www.csszengarden.com

This webpage shows what kind of sites can be made with CSS.

Webdeveloper Forum

URI: http://www.webdeveloper.com/forum/

This is where I learned most of my coding habits. It's also where the seed of this book was planted.

Webpages That Suck

URI: http://www.webpagesthatsuck.com/

This webpage shows what to avoid by exposing websites that have particularly bad design.

W3Schools

URI: http://www.w3schools.com

This is where I got most of my JavaScript information.

World Wide Web Consortium

URI: http://www.w3.org

This is where I got most of my (X)HTML and CSS information, and there's a lot more you can use there too.

One common practice is to have the navigation menu on one side of the page or the other, creating a two- or three-colum page. It makes for a fairly simple, elegant, and easy-to-use page layout.

One common way to to do so is to use absolute positioning for the menu.

In the case we're going to use, we:

1. get rid of the list style, margins, and padding;
2. set the width to 100 pixels;
3. center all text;
4. set the absolute position (10 pixels from the left and top);
5. give the #Menu element a border;
6. and give the list items some space.

Fairly straightforward. But it also means that the content of the page that is not positioned absolutely will overlap the menu. This is solved by one simple rule:

120 pixels of padding on the left hand side pushes the rest of the content over, while leaving any absolutely-positioned elements where they are.

The results are nice and neat, and the CSS is very simple and straightforward.

If you wanted #Menu on the right side, you'd just change the absolute position of #Menu and adjust the padding. You could even have padding on both sides if you wanted a menu on either side.

In the meantime, you should see the coding trickery I used in creating the Horrors page. Your eyes do not deceive you; the crappy page takes far more coding than the simple page, and some of the worst features (changing colors and moving text) were created with JavaScript trickery.