Website Layout Methods

WEBSITE LAYOUT METHODS

Website design has progressed leaps and bounds over the years at one time sites used to look like this >> and was considered cutting edge.

Let us view online examples and establish different methods of creating a layout for a web page. You will learn the difference between tables, frames,Flash as well as a basic introduction to the latest method using CSS layouts.

A common thread between web sites—no matter what method is used to build them—is a template. We will discuss what a template is, how it is used to our advantage, as well as determining template items. Cascading Style Sheets (CSS), an in-built feature of site-building applications such as Dreamweaver, will be discussed as a key templating technique.

BOX MODEL

Before looking at layouts we should understand that working on HTML/CSS pages - NOT FLASH – we design within boxes. Everything is in a box; even if the actual content may not look like a rectangle – it is. If you have used PHOTOSHOP you will know that every document is a rectangle – but the content within the file doesn’t have to be. So… if you hear the term ‘BOX MODEL’, it is usually referring to a layout method. As we go through the examples below – look to see if you can recognize content being displayed in a box.

TABLES

All across the web tables are used to design web pages and have been a popular method of page layout among designers. They represent a grid-like structure (similar to spreadsheets) utilizing rows and columns. Tables may contain any valid content that the browser is capable of displaying, including multimedia. Tables have become very popular as they have provided a stable (but limiting) layout method in the web’s unstable environment (different browsers, different monitor sizes, different computers, etc.).

Examples:

FRAMES

Anyone who has had more than one application window open on their graphical desktop at a time can immediately appreciate the benefits of frames. Frames let you divide the browser window into multiple display areas, each containing a different document and each frame acting as it’s own window within the browser.

Each frame may display an independent document, and not necessarily HTML or XHTML ones, either. A frame may contain any valid content that the browser is capable of displaying, including multimedia.

Frames had their heyday when download speeds were slow, however with speeds being fast the need or want for frames is lower. They are not as common and should only be used i special cases. A web gallery would be a good example. Not to mention there are a number of issues surrounding frames from browser support and rendering to file organization. Learn more about issues with frames from our friend JAKOB NEILSON : Why Frames Suck (Most of the Time) at alertbox.com

Examples:

CSS (using DIVS)

Over time tables and frames have become frustrating in the limitations and quirks when it comes to layout and design (while keeping functionality a high priority). CSS is a method of defining where you want things to be placed – it takes a little bit more work and coding but in the long run it provides files that are easier to control, files that transfers well between devices and uses (web + print), as well as layouts that can be easily modified.

We will be covering the CSS BOX MODEL when we start building web pages using CSS but if you want to read ahead you can read this article in lab time: http://www.brainjar.com/css/positioning/

CSS is the latest and preferred method.

FLASH

FLASH is very different from XHTML/CSS as it provides an environment where sound, video, and animation can be implemented easily while presenting information. The FLASH program uses it’s own coding language called Actionscript and saves out a file that requires a PLUG-IN to be viewed online. It is a great way to have a graphic rich presentation however the downside is that if the user does not have the plug-in, they can not view the file. More and more we are seeing sites that use components of FLASH instead of being just FLASH (an example might be an animated web banner).

JAKOB NEILSON also talked about FLASH in 2000 his article : Flash 99% Bad

Examples:

HTML 5

The new kid on the block is HTML 5 – developers and browsers are working on catching up, learning this new technology. Some browsers still do not recognize aspects of HTML 5.

DATABASE (BACK-END)

The previous methods are in the most cases considered the FRONT-END or simply put, what you see in your browser. Some sites will have activity taking place before the page is displayed – basically determining what content to display. We do not witness the process taking place, we only see the result (which will be a layout using one of the previously defined methods). This is often done through the use of a database which is referred to as the BACK-END, or WHAT WE DON’T SEE. MYSQL and ASP are common database systems that are used. Sites that use a back-end database system are often sites that have content regularly updated, searched or reorganized.

FIXED LAYOUTS vs. LIQUID LAYOUTS

Mac or PC? Pepsi or Coca Cola? There are 2 common approaches to building a web page (regardless of the method used). A FIXED layout is a layout that is set in it’s dimensions and the design holds firm regardless of what the browser window size is. A LIQUID layout will resize to what the browser window size is. Each method has it’s pros and cons and usually it ends up being personal choice or the target user base.

LIQUID : www.boagworld.com

FIXED: www.typemotion.de

COMBINATION/HYBRID SITES

Some web sites will combine different techniques and are sometimes referred to as hybrid sites.

Lab Time

Find and tag (in del.icio.us) examples of different layout methods. Try to classify them as good or bad design.
You may want to login and create ‘bundles’ OR tag using terms such as: table_layout:bad_design, table_layout:good_design.

Look for examples of:

READ THE FOLLOWING ARTICLE ONLINE: http://www.sensible.com/chapter.html

Lorem ipsum dolor sit amet, consectetur adipiscing elit pretium urna quis tortor consectetur et pretium elit