Page style:

A Blue Perspective: Lift & separate

Lift & separate
15 April 2004

It's an oft-quoted advantage of CSS that you can totally change the look of a site without laying a hand on the HTML source; something which Dave Shea fully exploited whilst cultivating his Garden. But when it comes down to it, have you ever changed the look of a (commercial) site without touching the HTML? I'm not talking about merely skinning a site so that you've got variations on a theme, but have you ever been asked to do version 2 of and only had to think about margin, padding and background images?

Perhaps the nature of major revisions means that changes must always be made to the underlying structure of a site in order to improve it, or perhaps in these still formative stages of Standards-based design we are constantly re-thinking our ideas on what constitutes best practice for mark-up. Either way, I don't think I've ever left the HTML unscathed when transitioning from one site's season to the next. Aside from code optimisation, there are just some things which are easier to do by going to the source. I'd be interested to hear whether you've made a successful CSS migration ...


1/16. 16 April 2004 @ 00:40, Richard@Home wrote:

s'funny you should mention that... I'm currently developing a website ( ) and documenting the process in my blog.

One of the primary design goals was to have the site skinnable as there is no set 'look' for the Live Action Role Playing hobby (it coveres many genres).

If you look at the underlying code for a page, you'll see the XHTML is as simple as it gets - all the layout/look of the site is handled by the CSS. The idea is that I can simply point to an alternative style sheet and brand it with a sci-fi/gothic/mr blobby scheme chosen by the user.

Whether it really is going to be as simple as that remains to be seen, but I have high hopes ;-)

2/16. 16 April 2004 @ 04:51, Brian Andersen wrote:

Hmmm. That is interesting - I've redesigned sites before, but to be noest I've always started from scrath.

The thing is, you always find new ways to do better html: Think about how unordered list have become all the rage. Any self respecting reader of design blogs will be scurring to redo the entire html.

Personally I find the CSS Zen Garden way of doing it to be pretty cumbersome and time consuming, scrolling up and down pages to find the right styles, etc. When I make a site, I like to style it as I build it, and watch it grow in the process. I think just editing the css would force you to do some weird hacks to make everything fit, and there's bound to be some new stuff you'll need to add in the html anyway.

It's good for small changed, colours, width, paddings, etc. But a real redesign that require fundamental layout changes, isn't very well suited for a pure css approach.

3/16. 21 April 2004 @ 08:02, Hasan wrote:

I apologize in advance, these questions are completely off-topic. I thought I'd post them here instead of emailing you as I thought a few others might be interested.

How's the shoulder healing?

I've noticed using Technicolor that it seems to work better if the input color is lighter rather than darker. Why is that? Is there a way to get it to generate crazier color combos? (Sorry if this sounds ignorant, I'm an end-user, not a programmer.)

Do you plan on posting any more desktops in the near future?

That's all, take care.

4/16. 21 April 2004 @ 11:55, The Man in Blue wrote:

Shoulder's not bad, back to playing soccer (thanks for asking).

Re: Technicolor, it produces better colour combos for lighter colours just because of the algorithms. They add/subtract/multiply RGB values, so when you have darker colours it produces greater contrast, which are usually worse combinations. Not sure on the best algorithms to achieve uniform colour mixes.

I'll probably post some more desktops when I get time, which won't be for a while.

5/16. 21 April 2004 @ 16:53, darren wrote:

Well, the one I just did involved redoing the CSS, the HTML and the dynamically generated bits as well. Most of the content didn't change...

6/16. 21 April 2004 @ 17:04, The Man in Blue wrote:

Quite the opposite of what you actually want to do.

7/16. 22 April 2004 @ 15:50, darren wrote:

Not always. There are occasions when the content is still current but the look needs to change. Such as the one I just did...

8/16. 22 April 2004 @ 16:04, The Man in Blue wrote:

Yeah, that's what I meant -- you only had to change the "look", not the content, but you still had to touch the HTML and other code.

Ideally it would be just the CSS.

9/16. 23 April 2004 @ 02:12, Keith Bell wrote:

So far, I've never been able to rebuild a site without touching the HTML. I say "so far", because I think as I have become more experienced and skilled with CSS, I have become better at thinking towards the future, and chunking content into clearly distinguished DIVs for headers, footers, navigation elements, sidebars and body text. So one fine day, I might be able to update a site design via the CSS without attacking the HTML structure at the same time.

10/16. 23 April 2004 @ 04:58, Jennifer Grucza wrote:

I haven't really done any redesigns where the content has remained the same and the code was all written nicely with seperated HTML and CSS to begin with. I have done a lot of cleanup of bad HTML, though.

I've also made use of a very handy thing for writing Java web applications with JSP - custom tag libraries. Basically writing your own tags that get translated to HTML on the server side. I can then use these for higher level concepts - instead of a div with a class, or a table, or whatever, I can use an even more semantic construct (at least in my code, if not the generated HTML) - a "breadcrumb" or a "footer" or a "tree". Then if I want to change how these are implemented (like move from tables to nicer CSS), I only have to change the tag definition code, and all the pages that use that tag will automatically use the new HTML.

I think these things reduce the amount of changes that have to be done, but of course to get them to work you do often have to go and change the HTML as well. But not nearly as often as you would without the benefit of stylesheets!

11/16. 25 April 2004 @ 13:51, Andrew Krespanis wrote:

This utopian re-design world you speak of is still a fair way off, IMO. The only html that could possibly pass thorugh a re-design without me going to town on the structure would have to be valid xhtml strict, WAI - AA. And most businesses with those sites have only just redesigned....

12/16. 25 April 2004 @ 18:44, Lea de Groot wrote:

No, I can't think of one I've redone only by touching the css.
I think the power of css in practice is controlling the entire site from one (or three, but not 3,765) files.
ie, if you decide that the content font really should be just a touch larger/ smaller/ purpler, you can do it in 30 seconds.
Without css we are stuck updating all 3, 765 pages. and that would be more like days and days of work (nope, I'd use a regexp, but thats not the point...)

13/16. 26 April 2004 @ 19:08, Andy Budd wrote:

Apart from a few early adopters, there probably aren't that many commercial CSS based websites around that are more than a couple of years old. As such, there probably aren't than may clients around with nicely structured (x)html sites that are currently looking for a redesign. It's probably much more common for web developers to do this to their own site at the moment.

14/16. 27 April 2004 @ 06:29, Gabe wrote:

One of the major issues is that there is a presentational flow assumed in all HTML documents. The only way around the assumed presentation is through absolute positioning, which really isn't the most versatile of CSS-based design techniques.

Float-based (and even relative-absolute-based) designs require the elements to be in some order. So at the very least, major redesign work will often require some re-ordering of elements. Not only that, but there is usually some <div> taxonomy that also implies abstract presentational information, which will have to be modified.

I think the key thing is that these changes should be very minimal, because the structuring of the document will be sparse, and the majority of actual content will have sensible markup that doesn't need to be changed.

15/16. 27 April 2004 @ 11:15, The Man in Blue wrote:

Ordering of floated elements always gives me pains. Quite often if you've got some side content that should theoretically be secondary in the code, you have to promote it to the top if you want to float it to one side.

The onyl other way to do it is to use absolute positioning, but many browsers throw tantrums with absolute positioning when you resize windows or text size.

16/16. 22 May 2004 @ 10:18, Christopher wrote:

I realize I'm a day late and a dollar short posting here, but better late than never - right? I agree with Gabe - I've had to re-order HTML elements in order to get a list or a set of links into a semantic order that works better, but that will always be the case. It's all in an effort to make my sites more accessable.

I don't have to do nearly as much as I used to with tag soup and tabular hell though. That's the whole point of CSS. The HTML makes sense and editing it becomes easy. Sure the CSS can get tricky, but once you establish some rules for yourself that keep you out of the major browser bungles then you really can focus on the content and presentation of the site. It pains me to think there are still designers in the world that are churning out the same code they did five years ago. I tactfully try to enlighten when I can - it can be touchy.

Up to now I've never made just CSS changes to a site and called it a redesign. I doubt I ever will. There will always be some tinkering with the HTML, but I'll take tinkering over drowning any day!

Post your own comments

Fields marked with an asterisk* are mandatory. All HTML tags will be escaped. http:// strings in comments will be auto-linked.