[title sub="Written by Chris Graham"]Composr Tutorial: Fixed-width layouts[/title]

[contents]decimal,lower-alpha[/contents]

[surround]
[media width="150" description="A fixed-width Composr site with a solid colour background" float="right"]data_custom/images/docs/tut_fixed_width/fixed_width.png[/media]
Fixed-width is available as a theme option in Composr, and is off by default. This tutorial explains the implementation and pros & cons of it.

Traditionally a topic of regular disagreement in web design is whether 'fixed-width' designs or 'fluid' designs are better. A fixed-width design is one where the horizontal width of the website is fixed, so that it doesn't change when different resolutions are selected.

Proponents of fixed-width argue:
 - that fluid designs (non fixed-width designs) can not function well, because things will always break down when the width significantly exceeds what was tested
 - that fixed-width designs are easier to implement
 - that fixed-width designs are easier to read from
 - that fixed-width designs are more attractive, because it allows more artistic control
[/surround]

[surround]
[media width="150" description="A fluid-width Composr site with a relatively thin browser window. Composr's default theme defines a minimum width of 1024, hence the scrollbar." float="right"]data_custom/images/docs/tut_fixed_width/fluid_thin.png[/media]
[media width="150" description="A fluid-width Composr site with a relatively wide browser window stretching the layout" float="right"]data_custom/images/docs/tut_fixed_width/fluid_wide.png[/media]
Opponents of fixed-width argue:
 - that fixed-width designs make unreasonable assumptions about how websites should be viewed; for example, mobile devices would fail to have enough width for a typical fixed-width design yet are prevented from automatically performing adjustments
 - that people with large resolutions can always make their browser window smaller
 - that using fixed-width is done by those that are applying traditional design skills to the new online medium without adjusting them properly for that medium
[/surround]

Most modern designs are fluid and use responsive design techniques to make it look good on different widths. This is the default within Composr's default theme as of version 11.

[title="2"]Background options for fixed-width[/title]

[surround]
[media width="150" description="A fixed-width Composr site with a pattern background." float="right"]data_custom/images/docs/tut_fixed_width/fixed_width_pattern_background.png[/media]
[media width="150" description="A fixed-width Composr site with a fixed background." float="right"]data_custom/images/docs/tut_fixed_width/fixed_width_fixed_background.png[/media]
There are a few options available for the background when using a fixed-width layout:
 - The solid colour background uses a solid, slightly-seeded colour.
 - The pattern background uses the [tt]backgrounds/outer_background[/tt] theme image; if the image is smaller than the browser window, then it repeats in a pattern.
 - The fixed background uses the [tt]backgrounds/outer_background[/tt] theme image. The image does not scroll even when the page is scrolled.
 - The scrolled background uses the [tt]backgrounds/outer_background[/tt] theme image and will scroll when the visitor scrolls the page.
[/surround]

[title="2"]See Also[/title]

 - [page="_SEARCH:tut_markup"]Guide to web technologies (including HTML, CSS, and JavaScript)[/page]
 - [page="_SEARCH:tut_releasing_themes"]Themeing your site[/page]
 - [page="_SEARCH:tut_mobile"]Mobile design[/page]
 - [page="_SEARCH:tut_design"]Introduction to web design[/page]

{$SET,tutorial_tags,core_themeing,Design & Themeing,novice}{$SET,tutorial_add_date,Aug 2008}{$SET,tutorial_summary,A very practical tutorial showing how to created a fixed-width layout, and how to change the site header.}[block]main_tutorial_rating[/block]
