Basics of Web Layouts

Web Layouts Should be Simple and Clear

Most designers tent to overlook the design layout when creating web designs.  They will work on how to do a layout (CSS, tables, frames, etc.), but often ignore the basics of Web layout completely. 

Space and Whitespace

Use the entire space, but don’t be specific in your use i.e. use relatively sized layout sections, so they can expand and contract to fit browser windows. Keep screen resolution must be kept in mind.  A majority of computer users have moved away from 640 x 480 resolution, which must be born in mind when designing.  Customers leaving because all they can see is a logo on their monitor, does not amount to good customer service. Make use of colour to define spaces.  If, you need a page of a specific width, centre it on the browser screen and give a different colour to the background page.  This helps the page resize for different browsers.  Large browsers show more background colour, while smaller browsers show less or no colour. 

Images and Graphics

Make sure all your images are perfectly aligned. Don’t make the common mistake of slapping images willy-nilly on to a web page, without thinking out its layout.  Using an image tag and then writing text to follow it, results in a image with one line of text to the right of it.  Use the align attribute to help make your images part of the layout. Balance graphics and text on a page.  Don’t get carried away and use lots of images and animations, as they will only serve to make the page hard to read.  While, planning out your layout, remember images are a major part of the design, not just afterthoughts. 

Text Width

Give adequate thought to text width, which often referred to as scan length, refers to how many words are displayed on one line.  Seven to eleven words on a line can be read comfortably by most people.  Longer than that, and the text gets hard to read, shorter than that and it looks disjointed and distracts.  When designing web layouts, ensure the major text area displays the text in a readable width. The first layout technique a new designer learns is the centre tag, which means they centre everything on their pages.  But, centring text is inadvisable, as it is difficult to do and often hard to read.

XHTML – Part III

We take up from where we left off in XHTML – II.  In this section we will look at XHTML relating to text, covering:

• Headings with <h1> through to <h6>,
• Subscripts and Superscripts with <sub> and <sup>,
• Line breaks with <br>,
• Non-breaking space with
• Soft Hyphens with ­ and
• Pre-formatted text with <pre>.

 It is important to remember that all elements should be used for their meaning and not their visual effect.  This will make your site much more accessible to disabled users and those who are using alternative browsers, such as, Personal Digital Assistants and in-car browsers.

Headings with <h1> through to <h6>

Long documents need to be split up into sections to be usable.  To mark headings in your XHTML there are six elements, each relating to deeper levels of sub-headings as the number goes up.  The six elements are:

•  <h1>,
• <h2>,
• <h3>,
• <h4>,
• <h5> and
• <h6>. 

Always start with <h1>, followed by <h2> for sub-headings, <h3> for sub-sub-headings, and so on.  If, you start with <h1> don’t go straight to <h3>, or start with <h2>.

Earlier, web designers did start with <h2> or <h3> to get a visual effect of smaller text which <h1> did not offer but, as already mentioned this can be achieved with style sheets.  So, it is not a valid reason for starting your headings with anything other than <h1>.

Headings are block level elements with space above and below them.  Using heading elements to mark headings ensures users understand your document structure.  Including helping get higher search engine rankings, as search engines understand better what the document is about by examining the headings.

Take a look below at a sample three level document.  From it, you an work out what a document with deeper levels would look like.

<h1><b>XHTML Web Design for Beginners: Introduction</b></h1>

<h2>Introduction</h2>

<p>This article is for readers who have either no prior experience...</p>

<h3>Colour</h3>

<p>I have used colour in the example...</p>

<h3>No Programs</h3>

<p>I will not be showing you how...</p> 

Generally, most XHTML documents should have only a single <h1> element.  Don’t use more than one unless you are sure they are two separate topics and there is good reason to have them on the same page.  If, two topics are on the same page, it means they are connected.  You should have a single <h1> describing both topics and then <h2> for each sub-topic.

Subscripts and Superscripts with <sub> and <sup>

Subscripts are letters or digits which appear smaller and at the bottom of the line e.g. 2 in H₂O.  Superscripts are again smaller and appear at the top e.g. th in 15^th February. To mark subscripts and superscripts in XHTML, <sub> and <sup> elements are used.  For example:

<p>The symbol for water is H_20.</p><p>

This example was written on the 13^th of February.</p> 

Line Breaks with <br>

When writing documents, if you wish to indicate that a new line should be started without closing a paragraph, use the <br> element.  <br> is an empty element so the empty element syntax must be used by writing it as <br />.  For example:

<p>The Road goes ever on and on<br />            

 Down from the door where it began.<br /> 

Now far ahead the Road has gone,<br /></p> 

This is an element that has no effect outside visual browsers.

Non-breaking space with &nbsp;

Web browsers sometimes split a set of words onto two lines, which you may not want.  Using the entity reference  , which stands for non-breaking space can solve the problem.

If you insert a   between your words instead of a space, with no spaces on either side, that text will be treated as a single line without being broken up.  Here’s an example:

<p>This is a solid line.</p>

Soft Hyphens with &shy;

­Soft Hyphens indicate a point in a word where you would like it to be split on to two lines.  It makes for a nicer appearance when space is limited, as text in a thin column. To use it, simply insert it in the word at the point where you would like the potential split to be.  For example:

<p>I have no idea what antidisestablishment­arianism means.</p>

Pre-formatted text with <pre>

Remember when we covered white space in the last section and I told you that it is always collapsed into a single space? Well there’s one exception, the <pre> element allows you to layout your text in the same way you want it to appear in a visual user agent. <pre> is a block level element which to remind you means that it has space above it and below it.Using <pre> is simple, let’s redo the example we did with <br> above using <pre> instead:

<pre>The Road goes ever on and onDown from the door where it began.<pre>

 Summary

That’s it for text elements.  What is left is three different types of lists i.e. ordered lists, unordered lists and definition lists.  As well, adding graphics to your pages and how you link your documents together and to other documents/sites remains to be looked at.