SERVICES : WEB DESIGN : Page Layout & Design

It's important to get the layout of a page correct not only to create an eye-catching design, but to ensure that the majority of visitors will be able to view it in the way you intend. Many factors can affect this such as their screen resolution & choice of web browser.
All Groovy Lizard sites are tested for compatibility with the main browsers: Internet Explorer, Netscape (v4 & v6), & now Opera v5, and all pages conform to the most common screen resolution of 800x600 but will look fine at other sizes too.

This page describes & shows examples of several types of page layout & ways to display content to add interest, plus a few fun ideas to liven things up!

(Note: Some of the links will open in separate windows so you can close them quickly if you decide that the example in question is not what you're looking for.)

  BASIC PAGE LAYOUTS

Frames
Frames allow you to divide a web page into multiple regions, each section (or frame) behaving independently of each other and displaying its own content. Each of these frames is actually a separate page, and the HTML document which brings all of them together and displays their combined layout is called a frameset.
They can be useful when their is certain information you wish to have on view all the time, such as a navigation system or site details.

Example 1
The Participation suite uses horizontal frames to keep the navigation & site details on view in the top & bottom frames.

Example 2
The Allstars suite's layout uses vertical frames with the navigation system in the left frame & content to the right.

Tables
Tables are used to keep content areas separate & ensure accurate positioning on a web page. Nested tables are tables placed within other tables, again to ensure correct positioning. All but the most basic layouts use tables somewhere in their design.

Example
The layout for the Draw the Line suite uses multiple tables to ensure each element is positioned accurately, and would have been impossible without them.

Borders
Borders are used to frame pages or content, and usually used in conjunction with tables. Most common are top or left bordered backgrounds, but pages with full decorative borders can look stunning.

Example
The Ooh La La set's internal pages use a decorative border to surround the main content area.

Interface Design
An Interface is a design which fills the whole page and usually consists of or includes an image map (an image which is divided into sections to enable individual behaviours such as links to be attached to each of them.)
They are often used on splash (entrance) pages and include links to other areas of the site.

Example
The Chat Lines suite uses an interface design on the splash page plus a frameset layout for the internal pages.

  ADD SOME INTEREST

Scrollable Areas
An impressive way to add a 'page within a page' effect.

Inline Frames
'Stretch' you page to accommodate more content than it would normally be able to display in a small space.

Text Scrollers
An animated text effect can be a good way to make important content noticeable.

  ADD SOME FUN

Floating Images
Watch as images float over your page.

Example 1     Example 2

Page Transition Effects
Special effects seen when your visitors leave or enter a page.

Example 1      Example 2

Cursor / Mouse Trails
Text or images which attach themselves to your cursor & follow it around.
These can be annoying after a while, so use with care!

Example 1 - Text     Example 2 - Images     Example 3 - Images

Back