I’m looking for tips on creating scalable, extensible CSS layouts. What techniques or concepts would you apply to a layout where future growth is a concern?
Most of the business websites I’ve worked on have lacked flexibility in their layout. Often I find that the design of the navigation doesn’t allow you to add a new menu item or the layout doesn’t automatically extend vertically. These are just two examples of how a layout can be difficult to extend.
To narrow the focus and help you better understand the question, I’m thinking about business websites that are larger than the typical “5 page brochure” website and could continue to grow as the business moves not just into new products, but into new domains. My question could easily apply to other websites as well but there are certain types of websites where my question does not apply, such as art/photography websites or blogs, where scalability is not a concern or where the aesthetics of the site trumps scalability.
In your answer, please don’t lose site of usability. For example, a side navigation bar is much more scalable than top navigation but side bars are often used for filtering, context menus, related content, etc. I’m also under the impression (perhaps falsely) that top navigation is considered a best practice when it comes to usability.
Also, I know that a fully fluid layout is probably one of the most scalable and extensible layouts there is. I’m not really interested in using a fully fluid layout although I’m open to reconsider if it can be made to look fairly decent.