CSS Love Child
24 April 2006
I'm usually all about creating conflict. So, I thought it's high time that I add some love to the Internet.
On Late Night with Conan O'Brien he loves playing a game where they take two celebrities and "calculate" what their offspring would look like. Well, what if you could do the same with a Web page? You'd end up with a CSS Love Child.
My little bit of Perl scripting lets you take the HTML from one page, add the styles of another, and end up with a hideously mutated beast that can sometimes be amusing, sometimes be revealing, but most of the time looks like a fourth generation hillbilly.
Some observations on the more interesting combinations:
- Clean and modern Bowman meets old and tatty JSM
- Andy Budd is extremely-compatible with John Maeda
- Veerle's new design makes anyone look good
- Associating with Joe Clark turns anyone into a curmudgeon
- Everyone loves a bit of DOM scripting
- OMG, 37Signals just bought Google!
- ... then they got Cameron Moll to re-design it
Obviously, as a design gets more complex, the HTML becomes more tailored to producing visual effects and the CSS doesn't apply as well to other sites. So, Joe Clark's uber-simple design translates well across most sites and still remains distinctive – mainly through its unique use of typography – while Khoi Vinh's intricate grid-based design on Subtraction hardly translates to anything else.
It's apparent that layout requires the most individualistic HTML – background images, colours and fonts manage to shine through – while most of the CSS/HTML mashups are reduced to one column, unless there's a happy conincidence in container naming. I don't think everybody's been following Andy's suggestions.
Does this experiment highlight the need for a more semantic Web, or maybe even make a case for further investigation into Web Patterns? I don't know what the hell it does, but it ate up a few seconds of my life :D
If you do manage to find some Internet offspring that would look OK on the cover of Vanity Fair, tell me about it in the comments.
Follow me on Twitter
To hear smaller but more regular stuff from me, follow @themaninblue.
- Resolution dependent layout update
- footerStickAlt: A more robust method of positioning a footer
- widgEditor: A simple, standards-compliant WYSIWYG HTML editor
- Accessible, stylish form layout