CSS Models

CSS layout sample : Dozens of models to help you create without tables
CSS menus galleries : All sort of menus for inspiration (simples, graphics, expanding,...)

Most visited

Create a site for all resoltuions

The question of ideal dimensions for a site is often asked.

Screen resolutions are generally between 800x600 pixels and 1280x960 pixels, not to forget 1024X768 pixels.
What is the most used resolution? What are the ideal dimensions for a website?

Statistics:

37% of users are in 800x600
47% of users are in 1024x768
10% of users are in larger resolution

(source: http://www.w3schools.com/browsers/browsers_stats.asp )

First constatation: to get to a maximum of viewers, your website must be compatible with a minimal resolution of 800x600 pixels.

Trends of the moment:

There are three design techniques that adapt themselves to all present screen resolutions:

icy: fixed width (generally 760 pixels) and justified to the right or the left (example: www.lemonde.fr )
liquid: fixed width but page always appears in the center of browser (example: www.free.fr )
fluid: site has a width proportional to the browser on which it is viewed (example: www.eyrolles.com )

Fluid design:

The most handy technique to master is the "Fluid" technique, where the website will adapt to the user's screen resolution by itself.

To achieve this, place all the content of the website within a container for which the width will be defined as "100%" instead of rigid pixels.

The container can be of tow kinds: :

A table with a width of 100%.
A layer (div) with a width of 100% (example: www.eyrolles.com )

Then you must realize that a fluid type website will adapt to the screen resolution by stretching or squeezing itself. You need to think the design and layout according to this property. If you work on a rigid design on Photoshop and have your whole website based on graphics, this solution may not be for you.

Conceive a website is first of all knowing that all elements need to be "fluid", able to change their dimensions and the dimensions of the type of font you'll use as well. A site that is very graphic with fixed dimensions will not react well when fonts will change dimensions for example.

You need to know in advance how each block will react, how each structure will change when the website adapts to different screen resolutions.

Generally, it is preferable to use background colors, or background that can be repeated (for example an image that is one pixel wide and that will repeat itself indefinitely) and to place fixe images here and there. But your design won't be able to be acreated with fixed images.

A fluid website is based on blocks that will be placed within a container. These blocks are in general a menu, a header, a content zone and a footer.

For inspiration, here is an example of a website giving several suggstions..

Print article