: What are some good resources for web page composition? I'm looking for resources on the composition of web pages. I'd like to learn about pros and cons of different page layouts and techniques

@Holmes874

If you want a good system for laying out web designs then have a look at the 960 grid system. It is what I use for most of my layouts. I think there is also a good selection of templates for using in different packages, such as Photoshop and InDesign as well as some printable ones for all your website doodling needs.

Also a good example of differing layouts can be seen here: designshack.co.uk/articles/layouts/10-rock-solid-website-layout-examples

Vote Up Vote Down

@Alves566

The question can have a quite wide answer that needs days and days of studying, but I'll give a try on something short.

You have to design your layout following an invisible grid, like in paper so on the web that will help you on keep everything on the right alignment and tidyness.
The difficulties are that on the web, sizes and proportions are changeable, and content is dynamic on many aspects (setting preferences, monitor calibration, illumination, monitor size, browser, operative system, etc...).

For this reason let's not consider proportion between things, but let's concentrate on a classic setup. A classic layout is header on top, footer on the bottom, and 3 columns on the centre (with the left and right smaller than a centre).
That could be website on two columns or more columns, it all depends on how much information you have, and how much you want to display or how much "air" (aka: white space) you wants to put between the informations that you have.

Note: Be aware that there are some technical CSS limitations like aligning columns (that are on the same horizontal row) on the same height when they have different content that fill the column. People are trying to fix with creative solution until browser will update their CSS rendering on the newest standard

There are 4 possible layouts:

1) Fixed layout: You define every div in px that fit inside a specific size that will be visible inside a browser (for example inside: 800x600)

pro: the design is stable
con: you could have to much white space depending on user screen

Of this solution you can decide to left (knowing that a big gap will be on your right and you could play with a graphic background), or align center (dividing the white space on left and right, reducing its amount than left alignment).

2) Fluid layout: The page will adapt to the size of the screen, moving and adapting content around

pro: it always will fill the page not leaving uncontrolled white space
con: you will loose control on the proportions and the grid where you position your content (example: one paragraph on more lines that become one long single line sentence on higher screen resolutions)

Technique Example or another one more complex

3) Original layout: They are based on breaking the rules of layouts and grids. They don't use the a classic column layout and are based mostly on graphic design effects, like displaying information all over the website, and they are using more absolute positioning than any other solution. Good for artistic fun on the web or crazy portfolio and nothing more (I am not against it, but they require knowledge of the rules of web design communication, technical and good creative effort).

I don't find an example at the moment, sorry.

pro: great aesthetic and original
con: you cannot use this for commercial websites, or for blogs or for anything with a big amount of info.

4) Dynamic fixed layout: It is what I use nowdays for my personal websites, and for client websites that have time to spend in make a website flexible but under control.
It is nothing more than a fixed layout, but with a javascript that is constantly checking your screen size (in case of resizing or to determine which size is it) and pass the appropriate css for that size. So no matter what is the size of your screen, you will always have a good control. For example if I have a 3 column layout, if I resize down the browser I can decide that the third column will disappear and go on the bottom of the content, before the footer.

pro: Complete control + flexibility
con: A lot of effort in designing and debugging time to spend to check that everything it is ok, thinking even ahead because you will add new content later in the future and everything has to work fine.

Article where I did take inspiration
(Nowadays jquery does a great job with resize(), 3 years ago I had a long long script for that :) )

A last note
There is nowadays a new trend on graphic web designers (people that are more graphic designer than programmers), that using fixed layout they are designing each single page og their blog as magazine do with their articles. Creative, and designing every article with his own style.

An exponent is Jason Santa Maria

Other articles:


In search of the holy grail
Css positioning
Conflicting absolute positioning
Fluid Grids


There are more articles out there. Look for "css layouts". Or follow places where talks about usability and design like Signal Vs Noise

All that there is to know on composition is experience and study, or usability testing (trial and error). Put someone on front your website and see how they react on your designing. Or an Eye tracking device :)

I am self-taught so I cannot suggest about books on composition, but a good book about grid layout can help you a lot.

Vote Up Vote Down