It’s not often that I point out or write about standards-compliant site designs and launches which get sent to me by email, especially personal sites. But designer Cameron Adams just launched a site that I think is worth your attention. The Man in Blue boasts a simple, attractive design created with lots of background-image goodness. Notice the soft shadows everywhere, the cracks in the corners which move as the window is resized, and the intricate way lots of small borders match up to create a subtle 3D effect. A brief technical overview highlights a few more features.
Switch off the style sheets — as Cameron allows you to do via a link in the header — and note that all of those presentation effects slip away, leaving a structured document. OK, so if you look under the hood, you might notice some extraneous HTML that has no purpose other than to act as a hook for style (ala, the Zen Garden’s markup). Cameron is up front about this, and even laments the lack of full standards support in certain browsers:
“… pages must still be littered with redundant mark-up in order to achieve graphical effects beyond your standard two-column, black-and-white blog.”
23 comments (Comments closed)
Great-looking. He’s right in its statement - sure going CSS / XHTML is the thing that makes sense on these days, but when you pretend to do something beyond the cookie-cutter square blog look that’s where things start getting pretty rough - it still takes lots of time, testing, re-testing, re-coding and even hacking to come up with something that won’t break across supodsedly standards-compliant browsers. It’s quite an exercise in patience and frustration at the same time. This has not marred my enthusiasm for CSS in the least, however sometimes you’d wish some things were a bit easier on you. Aesthetic achievement using standards shouldn’t be that tough.
That’s an amazing site design. However, the source code is full of semantically meaningless tags to generate the awesome visual effect of the cracks. I know that right now, there is no other way to accomplish this affect, but I’m really hoping that the advent of CSS3 will enable designers to push beyond the “black-and-white blog” layout to something like The Man in Blue. Excellent work.
…now if you’ll excuse me, I’ll be updating my bookmarks…
Am I allowed to think the site is kinda ugly, regardless if it uses some nice CSS work? :-\
Me too acj.
Cameron wanted to do some really cool and interesting things on his website. He also wanted to make it standards-compliant using XHTML and CSS. He wanted to make sure it was accessible too, so it even goes past Section 508 guidelines into some A or greater territory.
Now are we seriously going to fault him for needing extra tags to accomplish the design and fluidity he wanted? C’mon guys.
No one is faulting anyone. We note the extra markup, and so did Cameron, and we move on. It’s a fact that these techniques are required if you want a more complex design supported in all modern browsers.
While some of the markup could be trimmed if CSS2 were completely supported across the board (obviously not the case), we still need an extra element in the markup for each background image. It looks like this will continue to be the case, as the CSS3 background module doesn’t include any means of applying more than one background image to an element.
Oh, and Jeremiah, of course you don’t have to think the site is beautiful. I’ll note that it’s kind of a specific type of design, not appealing to everyone, reminiscent of the default blue theme for Windows XP. Some like XP, others hate it. I just like how much Cameron is pushing the use of background images.
Hi everyone, thanks for the kind comments (Jeremiah, you, me — out back :p ).
The design on the site is by no means the best it could be — it will definitely be modified in light of everyone’s comments (especially given the free testing I got people to do on css-discuss.org). But the main point was to get it out there.
Previous incarnations of my site stagnated and never made it because I had to make it too perfect, but now I think that the transient nature of the Web makes it perfect for putting something up that you haven’t seen before, getting people to discuss it and through that process, evolving. Perhaps not on your commercial client’s site, but definitely on your own.
I couldn’t agree more with Cameron regarding using a personal site as a means for experimentation and watching Cameron’s evolution provides valuable information about the process of design that you don’t often get to witness — I’ve already added the site to my favorite links. It’s good to see others enjoying their craft, enjoying the web in this manner; personal work beyond committees and focus groups can be so fulfilling. I pushed out my blog and it still has yet to validate (actually, the framework that it runs on was built before I really got in to web standards), but the experience I’m gaining through trial & error (not to mention watching others) without getting bogged down by perfection is priceless. Thanks for sharing, and keep up the great work!
I too like the over all design. I love the way it lays out in a PDA, but I’ve never been a fan of the flexible CSS. (just my opinion) It does some quirky things if you zoom your font with your browser and then add a m or l font. I think you done a great job laying it out. I would just pick a CSS for the user. It’s your site. Nice job Cameron.
Surely an aesthetically pleasing design is more than a collection of interesting effects?
I’ve seen a lot of praise for this site, but it makes me wonder whether the praise is for the styleswitcher (good to turn off style altogether, I like that), the background effect, or the 3D bordering. All nice effects. But overall I have to agree with Jeremiah, it’s not a good-looking site, it’s downright ugly in fact.
What I see so far is too much effort being expended on clever effects and not enough on standing back and honestly looking at the end result for visual appeal.
but just try opening the blue site using opera…
I have to wonder here whether Joel and I are even looking at the same website. I think it looks absolutely stunning. Blew me away. It’s the first time in a while that I’ve been jealous of someone else’s website design (after my latest redesign, that is).
I’ve got to second Lach’s opinion, Joel. Still, I browsed over to your site (to see if you could walk the walk, let’s say) and I have to say that I really like your site’s design as well. Very well-done.
I like the design, especially the background cracks, the only thing I don’t like are the red round arrow buttons, in some way they don’t match the overall design, but that’s my opinion..
I think Joel’s concerns are valid to a certain degree. How many here have been in meetings where good taste lost out to some weak flash animation?—where the whiz-bang was elevated to point of compromising the overall composition? In that respect, Joel is defiantly on to something that every designer needs to be aware of: mis & overuse of effects. I’m not convinced that the blue site has done that and, in my opinion, calling the blue site “downright ugly” seems overly harsh.
Also, what Doug said earlier bears repeating.
When I called the site “downright ugly” I was of course merely expressing something about the kind of thing I find attractive in website design. Perhaps I have more exacting standards of beauty than others.
But the site, perhaps surprisingly, given the praise, is also not functional, I’ve since noticed the site breaks when you use the medium and large typesize stylesheets, the text in the right column breaking the box and becoming unreadable. So much for that then. And the site is also a mess in Opera, the clever background failing at the base, so even from a functional point of view it leaves much to be desired.
However, I’m only expressing my own view. Clearly plenty of people seem to think it’s a beautiful site. To me this just shows they have little aesthetic taste. But hey, what do I know… I’m not trying to persuade anyone, although I might want to stand in the same kind of gap as did the child who pointed and said the Emperor has no clothes.
To be more exact, I should have said that the stylechanger fails in Mozilla/Firebird, it’s okay in Opera and IE.
It remind me of what I’ve seen of Windows Longhorn so far, but I think it’s very nice site.
It’s not only about the eyecandy, it’s also about the respective structuring of markup, navigation, and content.
Well done, in my opinion.
cameron: opinions are like assholes, blah blah blah
props to you for a studious achievement. i see it similarly (as does the author of stop design) for the accomplishment it is.
you guys keep pushing the envelope - i can’t completely envelope all these techniques to collapse at the pixel-perfect tangents my corporate clients demand and simultaneously support every browser dating back to hammurabi’s WC3, but you guys are giving me great things to steal.
kudos!
Don’t worry, I’m currently optimising my site for cuneiform character display, so Hammurabi should have no problems browsing it ;)
BTW, the site has just been updated and now displays perfect in Mozilla/NS with text resize.
Details here.
Bravo… a man that lives by conformity yet delivers something aesthetically pleasing in spite of this.
Comments no longer open for this entry.