How to abstract the data away from the design in web pages?

Question

What are ways of keeping the data separate from the design of a webpage, so that if you redesign the site, or you want to provide the ability for users to customize the layout, it would be really easy to do so.

Answer 1

The most common approach these days is to use the Model-View-Controller pattern.

Answer 2

As David said, use the MVC pattern. But the biggest help is design the system early to avoid issues with bind your data (sources) to your interface. Make your interfaces so that you can change them out quickly etc.

Answer 3

Take a look at CSS Zen Garden and use the View Source feature.

I take this question as "provide the ability for users to customize the layout".
Such is the job of CSS, to provide "style" separate from HTML "markup".

With careful designs (with the stated goal in mind).
You can craft your markup so it'd can be really easy to style and re-style over and over.

It's not hard, I've done it a few times on a few redesigns.
You just need to stick to the semantics as much as possible.

On the backend, though, separating the model from the code is pretty much a nailed down science by now depending on what your backend infrastructure looks like and how far you want to go.

Answer 4

The answers suggesting the use an MVC pattern are 100% right, and I encourage you to embrace it too.
More specifically, the kind of technology usually employed to obtain what you are seeking is the use of a templating system (such as Smarty if you use php, for example).
A web application framework (such as Cakephp, Rails or Django) can help you get started and achieve proper separation, usally with little effort.
The only drawback is that a change in approach and/or mentality may be required :)

Answer 5

I think your question is confusing for most of others here. I see a lot of irrelevant answers coming up with "MVC" while you actually mean "separate content from style" instead of "separate data from design" which could be incorrectly interpreted as "separate model from view". The first part of your question indeed gives the impression that you're looking for MVC, but the second part of your question and the tags used made me realize that you actually didn't mean that.

The answer is simple: just don't use inline CSS (such as style="color:red") but have it in an entirely separate stylesheet which you include in the HTML head. Give the HTML elements sensible ID's and/or classnames. You can let the CSS hook on that. Also use HTML wisely and semantically. Separate the content in positionable block elements. Don't use tables for layout.

Certainly checkout the CSS Zen Garden as someone already mentioned before me. It uses exactly the same content (HTML code) throughout many different styles which you can select from a menu.

For more interesting blogs/links you may find those Google searches useful:

• html semantics
• css naming conventions

The same story also applies on JavaScript by the way. Do not use inline JS code, but just have it in an entirely separate file and make use of unobtrusive Javascript as many as possible. I.e. your website should still be useable without Javascript. The jQuery library is a perfect choice for that. Its selectors are also based on having sensible ID's and/or classnames.