Web Site Building · Layout and Design · Margins and Justification

Let's Start With an Example:

These three guys go down to Mexico one night, get drunk and wake up in jail. They find out that they're to be executed for their crimes but none of them can remember what they have done. The first one is strapped in the electric chair and is asked if he has any last words. He says, "I am a priest and I believe in the almighty power of God to intervene on behalf of the innocent." They throw the switch and nothing happens; so they figure God must not want this guy to die, and let him go. The second one is strapped in and gives his last words. "I am an attorney and I believe in the eternal power of Justice to intervene on the part of the innocent." The switch is thrown and again nothing happens. Figuring the law is on this guy's side, they let him go. The last one is strapped in and say's "I'm an electrical engineer, and I'll tell you right now, you'll never electrocute anybody if you don't connect those two wires." God rest his soul.

Making Your Design Viewable

Handcuffing Your Design The manner in which text is presented on a page can make or break its readability. Through our experience with reviewing sites, we've had the opportunity to examine hundreds of sites that do it well, and many more that don't. We'll show you by example what works, and what will leave your visitors cross-eyed. Consider the above paragraph.

OK, aside from the fact that's a terrible joke, what is wrong with that paragraph? For starters it runs the full width of the browser window. You may ask, what's wrong with that? Well, think of a newspaper. It's laid out in narrow columns with margins; much easier to read. In the example above, it is difficult to maintain your place as your eye has to move from side to side to find the beginning of each new line. Sure, we use the full-width text in the header area of all our pages, but you'll notice we try to limit it to just a few sentences.

The higher the screen resolution used by your site visitor, the more pronounced the problem. The text gets smaller, and the screen gets wider, therefore the lines of text get longer and longer. Learn to strategically implement margins on your pages to help prevent eye strain for the viewer. Familiarize yourself with the HTML <blockquote> tag. Its specific purpose is to put margining on a paragraph or other block of text. Don't you agree this is much easier to read?

Another common technique for applying margin is with HTML tables. Select a table width that fits well within your frame of vision, one that prevents the eye from having to move across the page. Your guests will thank you for it. Now let's consider another example:

A motorist was unknowingly caught in an automated speed trap that measured his speed using radar and photographed the car. He later received a ticket for $40.00 in the mail and a photo of his car. Instead of the payment, he sent the police department a photograph of two $20 bills. Several days later, he received a letter from the police department that contained a picture of a set of handcuffs. He paid the ticket...

Paragraph Text Justification

Another common text layout we encounter all too frequently is centered lines. Again, you're introducing the same type of problem to your reader. Unless reading Arabic or Asian languages, the mind is trained to scan from top to bottom, and from left to right. It expects the beginning of a new line to always be in the same place. In the example in the paragraph above, because of centering, the eye has to hunt for the start of each new line on the page, making it difficult to scan.

Aligning text on a page is known as justification. The most common form (and also the HTML default) is left justified. You define justification with the align= attribute on your paragraph tags. Options are left, right, center, and justify. In this example paragraph, we are using the <p align="justify"> option to create alignment on both the left and right sides. It can look nice, but under certain circumstances you may end up with large gaps of space between words, usually when using very narrow columns.

When designing your page layout, take into consideration the readability factor. If your goal is to share information with your visitors, forget the temptation to be "cool or artsy." Instead, allow them to focus on your content and not have to rub their eyes.