Website Layouts & Templates


Myspace Layouts.

When you have a brilliant visual design (HTML), its easy to appreciate. However, a brilliant myspace layout is an entirely different creature. Layout is a servant of the visitor. As with all good servants, the better it is, the more unobtrusive it is.

Brilliant layout is so highly functional, you never focus on it. It helps you accomplish the task, bringing you to the site, without being noticed.

Layout Examples.

There are many ways to organize web page layout. Below are some common ways to do this.

  • Left side navigation

    • Layout 1 - This is a very widely used page layout. The logo is on top. Navigation is in the left column, and the main content is in the middle.

    • Layout 2 - For This layout, the navigation starts higher up. It is next to the logo. This is especially useful when having lots of navigation links, or when the logo is not very wide.

    • Layout 3 - This is a variation of the first layout. However, a right column is added.

      Right columns are great for miscellaneous information, or when links that don't fit elsewhere.

    • Layout 4 - This is a variation of layout 2. However, a right column is added. It is either next to the logo, or lower.

  • Navigation along the top

    • Layout 5 - Here, the navigation is placed directly underneath the site logo. This tends to work better with fewer navigation links.

    • Layout 6 - This is a variation of 5, with either a left and/or right column added.

  • Navigation in the middle.

    An image, possibly containing the logo, sits in the middle of the page. Different parts of the image are used as links to other pages of the site. It is highly recommended, with this layout style, to have additional text on the page. This is used to give a basic introduction to the site.
Another layout option is having the main navigation along the right column, or the bottom. However, this is not done very frequently. It makes it difficult for some to find the navigation. This depends on the monitor and/or browser window size of the site visitor.

Other suggestions.

While having a logo on the top, and navigation to the left, seems boring or unimaginative, there is a reason why it is so common. It is easier for visitors to find their way around your website when the navigation is someplace they expect to see it.

Navigation styles.

There are many ways to layout the main navigation (the links to the other pages on your site) on a website. Any of the navigation types below are useful for the layouts above (with the exception of template 7, which is by definition not a text link).

Text Links.

These are the most basic form of web page navigation. As the name implies, the links are all text. Some find this uncreative. However, it works very well. It helps the web page to load faster. Also, when the site has a large number of pages linked, it is the most efficient way.

Buttons Links.

Buttons are images which link to the subpages of the site. There are simple images and complex ones. Those made with mouseovers sometimes make them look like buttons that really are being pushed down.

Graphics Links.

This is really just a variation of the type above. However, a larger image (or imagemap) is used. Clicking, on different parts of the image, takes you to different parts of the website.

HTML - TABLES vs. DIVS

  • TABLES:

    Before browser support for CSS-P became dependable (somewhat), the <table> tag was the only resort for holding a complex layout together. Ideally, tables are used only to hold "tabular" data. Maybe someday, we'll get there. For now, tables are often used to establish the basic framework for a layout.

    At first, HTML tables appear mystifying. However, put in one afternoon with a test page. Play with the various tags and attributes (have border="1" so you can see what's happening). After this, the basics start to become clear.

  • DIVS:

    HTML Divs are slightly tougher to master, than tables. However, when you do, they're quite intuitive. The big deal is browser bugs still make it hard to position divs and get the results you want across all browsers. But without a doubt, divs are the future.
Myspace Backgrounds -> Mini-sites