Marathon Winter 2008 Marathon Home

Articles by Category


Say What?

Design and Layout

Say What?

OK, Iíll admit it up front: Iím a jargon user. Can you really blame me though, in an industry that has a new term to understand every fifteen minutes? However, Iíve resolved to make amends for my crimes against the common vernacular and start a new series on terms used in the web and IT industries. I initially thought of creating a glossary of terms that could be used as a reference on the website. But I decided that I needed to expand my thinking a little, so what Iíll be doing is not only defining the term, but letting you in on a bit of inside information that will help you understand each term a little better.

This first group of definitions are terms that have to do with the design and layout of web sites, and issues that surround that.

Concept Design

A concept design, by definition, is the design of something that is not for immediate realization. The concept design is the first step in the design process, which will continue with a number of drafts and culminate in a complete design. I generally describe the concept stage as a catalyst for discussion, as it gives the designer and the client a common ground to explore what works and what doesnít.

The designerís job at this stage is to explore the different ways of communicating the clientís message and itís unusual for a concept design to be perfect straight up, so donít stress if what comes through to you is not exactly what you expected. Part of being a designer is taking criticism on board and using it to refine or refocus a design, so as a client, the best thing you can do is to be open to consider a range of ideas and to offer as much feedback as possible.

Screen Resolution

Screen Resolution refers to the pixel dimensions of the userís screen. Common screen resolutions are 800x600px (quickly becoming less common), 1024x768px and 1260x1024px. Itís important to note that Screen Resolution has nothing to do with the physical size of the screen, i.e. 17Ē, 23Ē, etc. Various screen resolutions are available on most systems, and there is no standard.

Resolution is a huge consideration in designing for the web, and marks a key difference from designing for print or just anything else for that matter. See Fixed Layout and Liquid Layouts below for more information.

Liquid Layouts (dynamic layout)

Liquid layouts are a type of web page layout that stretches and moves to fit different screen resolutions. In a liquid layout, some of the screen elements are given a percentage width instead of a pixel width, which means they will grow or shrink as the screen resolution or the browser window is resized. Some elements on the page often remain fixed, such as images and menus, so the challenge then becomes designing a layout that looks good when parts of it could be any size.

A common problem seen on many liquid layouts is long paragraph lengths, which are harder to read, as itís not as easy to track which line to read next when the end of one line is so far from the beginning of the next. Another issue relates to images, as an image on a website is saved at a particular pixel size, and trying to resize it to fit the available space results in poor image quality. Not resizing the image on the other hand can lead to unbalanced layouts on large screen resolutions.

Fixed Layouts

A fixed layout, as opposed to a liquid layout, is designed to exact pixel dimensions, and is generally chosen to give the designer more control over the layout of the page. You will be able to recognize fixed layouts when you see bands of colour or texture down either side of the website body that increase as the userís window size or resolution increases.

The obvious problem with fixed layouts is that people with very large screen resolutions end up with only a small portion of the available space taken up by the actual website body, and they have to scroll just as much as the person with a small resolution.

Rollover States

Rollover states (or, simply, rollovers) refer to the change an element on a web page, such as a link, undergoes when the mouse cursor is hovered over it. This is a useful feature in a lot of cases, because it can help identify links and other page elements that perform actions when they are clicked.

NOTE: Click noises are also sometimes used to identify a clickable item, which are fine, but they should never replace a visual indication. Remember, the web is a visual medium, and should always be treated as such.

Cascading Style Sheets (CSS)

CSS is the language used by website developers to affect the design of the website. It can be applied to a webpage in a number of different ways, but by far the best way is to keep all the defined styles in a separate file from the information structure, so that the same file can be referred to from any web page, and any changes are reflected through the entire site.

The challenge for web developers with CSS, as with all aspects of web design, is that different browsers interpret the language differently, resulting in web pages that can look quite different in Internet Explorer when compared to Firefox or Opera, or Safari on Macs. Finding the right trick or hack that makes things work properly across all browsers can be quite challenging and frustrating at times.

Jason Harper
Scroll Up
Scroll Bar
Scroll Down

Jason Harper

Jason Harper

Run Web Design is a Geelong based company committed to providing businesses with a complete, professional web site development service.

With services covering all aspects of web site development, including website design and construction, search engine optimisation, domain registration and web hosting, and online advertising advice, Run Web Design is able to provide clients with a web site that works for their business.

Run Web History.
Read more about our Services.
What our clients say about us.

Marathon Runner


Marathon is Run Web Design's webzine containing information and articles on Website, Internet and Business related topics. Also included are some websites from around the world that are making some noise.

Go to Marathon

AMG Architects

AMG Architects

Ardara House

Ardara House

Big Fish

Big Fish

David Weston Photography

DW Photography

Eyeball Productions


Fullmoon Screenprints




Ray Long Tackle

Ray Long Tackle

Waurn Ponds Community Church


Graphic Design Portfolio

Graphic Design

Run Web Design

Run Web Design

Run Web Design

PO Box 5352, North Geelong VIC 3215

p 03 5277 3065
f 03 5278 6855

Office Location Map

Location Map

Office Location Image

Office Location

site map site information resources