Tips for Scalable CSS Layouts

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.

Hi, Welcome to Sitepoint :slight_smile:

Your question is too broad a concept to answer in a few short lines and depends on many variables so answers will be pretty generic.:slight_smile:

As far as tips go then here’s a few off the top of my head:

  • preferably design elastic sites that scale well within a min and max width (use media queries if mobile support is required)
  • expect that every line may wrap to the next and accommodate it correctly
  • don’t squeeze text into a tight space and don’t set heights on any fluid text content containers.
  • Use ems for fonts and measurements where appropriate and don’t size then too small
  • Allow elements to breathe and don’t account for every pixel across the width of the container.
  • Don’t expect lines of text to be the same length cross browser so allow the to be longer or shorter without causing problem.
  • Avoid heights on elements that hold text or fluid content - (I already said that but it needs saying twice)

Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You? - Smashing Magazine

Thanks, Paul. This is exactly the kind of information I was looking for. I intentionally kept the question broad because I wanted a very general run down of ways to keep a design scalable.