Elastic vs. Static Design

30 April

Elastic vs. Static Design

The debate continues as to whether or not to design/construct CSS based sites in a static or elastic width/height. To clarify I'll first explain the two.

Elastic sites allow for varying column widths, graphic sizes, text length. Some if not all of the before mentioned items elastically adjusting according to the users browser size or screen size. The advantage of this is to appear custom to the users browser and fill all corners and spaces with as much content as possible. No "dead space" or white space on either side of the layout as the content fills in the gaps as the browser window expand.

Static sites as a contrast have a solid width that does not adjust as the browser size is changed. The design remains as it was intended, line widths are static and the designer maintains control of the layout and overall design.

As I'm sure you're the idea now where I'm going with this. The downfalls of the elastic design are many but the benefits are as well. Downfalls include the sometimes unpredictable CSS elements that shift, move and disappear depending on the users browser size. Designing for this type of layout requires some skill and often some faith that the user won't over-do the browser size. Another downfall is that some of the content becomes long in length and sometimes hard to read.

The static as a contrast is much easier to design and control. Size, shape, line length. Design remains intact but if the user is using a narrow browser there may be a horizontal scroll bar. If the user is using a wide browser your design may seem tall and narrow. The trick is finding the average width and starting from there.

In the end there's no correct answer to this battle. Writers, corporations and bloggers often like the elastic as their content is put first and foremost yet the design is unpredictable and sometimes appears cramped or crowded. Most designers prefer the predictability and control they get when using static layouts. I know I do. Layouts don't fall apart and design remains intact. Sometimes it's best to apply a bit of both elastic and static to achieve an even handed layout expanding background elements while controlling column/text width, menu location and overall design concept.

TAGS: Web Design