Search this site powered by FreeFind
Web Page Resources
Design Articles
 
Layout Techniques
There are a number of ways you can approach creating the layout of your page. Very few web builders build on the page background alone. Most will use either tables, frames, layers or a combination of these. Increasingly the graphical techniques involve 'flash', Java applets or JavaScripts for special effects.
The majority of modern designers use tables, with a number of tables 'nested' on top of each other for flexibility.

Using Tables

Tables are the most common way at present of laying out web pages. Most web designers overlay tables onto each other (nesting ) to achieve maximum flexibility of layout Web editors such as Dreamweaver allow the designer to draw out a table in any position on the page. Gaps are commonly left between tables for white space. It is possible to layout a whole page using one table, with spacer cells for white space. Using multiple tables gives ease of formatting as each table can have its own background/ border colours without bothering with cell borders

See example pages

Using Frames

Frame will be used for pages where there is a static element that needs to be present wherever the user goes on the site. This may be company masthead/logo at the top, contact information at the

bottom or for a menu system to direct to other parts of the site.

Increasingly the main content frame may use overlays by tables for flexibility

See Sample pages

Using Layers

Layers are a relatively recent addition to layout tools. A layer is a positionable element that can be accurately positioned and can overlap other layers. Layers can be stacked on top of each other as well as having other layers nested within themselves.

Layers can be linked to interactivity.

Layers give great control and flexibility, but are treated patchily by browsers. If a user has an old browser the layers may not behave properly as intended

See sample pages

Design Ideas for effective pages

Look at the helpful hints gleaned from a number of article by professional web designers

  • Make your page fit peoples' screens
    Most people use a screen resolution of 800*600 or higher at 1024*768. Few people now view at 640*480. Therefore you need to make your pages fit for these resolutions. Page size should ideally be 760*420 max. (browsers take up some screen). Also make tables look right by centering them so they sit in centre screen for the higher resolutions. This way your screens will never need to scroll laterally. You should also consider using autostretch for layout tables. This will expand to fit higher browser and monitor resolution. It is however a bit complex to use. See ColumnWidth.htm
  • Target your pages for a variety of browsers
    Some browser platforms do not support all feature of web page development. You can check compatibility by using a Browser Compatibility Guide or you can test your page's browser compatibility in Dreamweaver. However if you are not using this editor you can simply maintain a number of browsers on your computer and test each page on each! - tedious but effective. Aim for IE5,6, Netscape 4.5, 6,7 and Opera. This way you will catch most people.
    The less advanced or browser specific technology you use the better. (Active X etc.).
  • Make your site consistent
    Use the same styles on your pages. Use CSS wherever possible to establish the same style and sizes of text, headings etc. Use consistent and compatible colours. Have your navigation and menu bar inputs in the same places on each page or in the same place for each section. Don't use non standard fonts, unless they are saved into something like Flash text files. Not all computer systems have the same fonts available. Use a consistent feel for each section - for example don't switch wildly between colour schemes or layout themes between pages.
  • Make your site visually attractive
    Garish or clashing colours will drive users away. Too small or too large and jagged text will make the site difficult to read. Don't have too many constantly annoying features such as animated gifs flashing away.
  • Other brief ideas from web design articles
    Too much or too big audio or graphical content slows down loading ( one guide suggests keeping each page under 40KB in size)
    Don't go mad with adverts.
    Keep the site updated frequently
    Be careful if using frames that users do not get lost in navigation
    Do use useful additions like clocks, but don't go overboard with things like free jokes.
    Compress graphics wherever possible to help with web space and loading


Read Site Pro News on this site and get a flavour of the articles

 

Subscribe to SiteProNews, the Free, daily Webmaster ezine. Just enter your email address in the box below.
Text HTML

 

Top of page