Lift & separate

15 April 2004


A Blue Perspective: Lift & separate

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. 1/16

    Richard@Home commented on 16 April 2004 @ 00:40

    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. 2/16

    Brian Andersen commented on 16 April 2004 @ 04:51

    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. 3/16

    Hasan commented on 21 April 2004 @ 08:02

    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. 4/16

    The Man in Blue commented on 21 April 2004 @ 11:55

    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. 5/16

    darren commented on 21 April 2004 @ 16:53

    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. 6/16

    The Man in Blue commented on 21 April 2004 @ 17:04

    Quite the opposite of what you actually want to do.

  7. 7/16

    darren commented on 22 April 2004 @ 15:50

    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. 8/16

    The Man in Blue commented on 22 April 2004 @ 16:04

    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. 9/16

    Keith Bell commented on 23 April 2004 @ 02:12

    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. 10/16

    Jennifer Grucza commented on 23 April 2004 @ 04:58

    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. 11/16

    Andrew Krespanis commented on 25 April 2004 @ 13:51

    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. 12/16

    Lea de Groot commented on 25 April 2004 @ 18:44

    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. 13/16

    Andy Budd commented on 26 April 2004 @ 19:08

    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. 14/16

    Gabe commented on 27 April 2004 @ 06:29

    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. 15/16

    The Man in Blue commented on 27 April 2004 @ 11:15

    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/16

    Christopher commented on 22 May 2004 @ 10:18

    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!

  17. Leave your own comment

    Comments have been turned off on this entry to foil the demons from the lower pits of Spamzalot.

    If you've got some vitriol that just has to be spat, then contact me.

Follow me on Twitter

To hear smaller but more regular stuff from me, follow @themaninblue.

Monthly Archives

Popular Entries

My Book: Simply JavaScript

Simply JavaScript

Simply JavaScript is an enjoyable and easy-to-follow guide for beginners as they begin their journey into JavaScript. Separated into 9 logical chapters, it will take you all the way from the basics of the JavaScript language through to DOM manipulation and Ajax.

Step-by-step examples, rich illustrations and humourous commentary will teach you the right way to code JavaScript in both an unobtrusive and an accessible manner.

RSS feed