Mobile version (Display Regular Site)

Skip to: Navigation | Content | Sidebar | Footer


Weblog Entry

Fountain

December 14, 2006

It’s time for a redesign. After 2.5 years of trusty use, Wintermint gets a much-needed rest.

Welcome to “Fountain”, Mezzoblue v6! It’s been long enough since I last did one around these parts, that I completely forgot how much work it is. It was a bit of a sprint to get this one done in amongst all the general craziness of this time of year, but here we are.

Design Notes

Two of the biggest ideas behind Fountain are the photo & colour matching, and the way archiving works. I’ll explain those in a little bit, I just wanted to quickly cover a couple of other points first.

The width is now non-800x600 friendly. Long-time readers might remember that back in 2003, this site sported a similar-width design. While wide screens have gained a lot of ground in the past 3 years, I’m still of the general philosophy that narrower widths are better, due to the fact that almost no one browses full-screen. The fact that this design is now almost a thousand pixels wide is simply where the design took me; I ended up with the design that fit my requirements, and it happened to be large. That’s how it works sometimes.

Never fear! Liquid layout aficionados, I’ve got you covered too. Way down at the bottom of the About page, you’ll find a toggle to kick in an alternate style sheet that will make glorious use of your hugely wide browser, or eat my lovely photos to accommodate your puny wee browser. Either way, you’re set.

And, at the moment, IE6 users are not going to like things very much. You can blame Apple for that. (No, really. My Parallels-enabled Macbook is in its third week of being out for repair.) I’ll come back and patch up the IE6 issues as soon as I can, but I kinda wanted to launch before the new year, so, the PNGs are going to stay ugly for a while. (Have I mentioned that IE7 is out? Cause IE7 is out. You dinosaurs you.)

Okay, now on to the good stuff.

Archiving

The way archiving is done with this new design is a little different from normal. Let me resort to an analogy to describe it: think of how an issue of a magazine works. It’s a series of articles on different topics published during a specific range of time, bound together in a single volume and given a cover image that draws attention while distinguishing that issue from past issues.

So this site works a little like a series of magazine issues. Each post on the site is bound up as part of a collection, along with other posts published around the same date. That collection is then given a photo, and a colour palette derived from that photo. All posts within that collection take on the photo and palette as core design elements, which visually groups them together.

Traditional weblog posts are usually organized by chronology, and perhaps categories. This idea of collections provides a much more visually obvious method of organization. The posts within don’t generally relate to each other by subject matter, so chronology is more important, as each collection covers a specific time frame. This is not actually an unfamiliar way of organizing, again going back to the magazine analogy.

Each collection’s window of time is arbitrary, and dictated more by whim than any set schedule; this is the web after all, technology enables me to play it loose, so why not take advantage of that. Instead of monthly archives, this collections idea lent itself to yearly archives. As soon as I committed to doing it that way, reverse chronological order stopped making sense, and thus my yearly archives are listed in chronological order.

Don’t look for any topical connection between the photo and the collection, there usually isn’t one. The photos are meant for visual interest rather than any sort of commentary.

Is any of this relevant in the age of RSS? I sure think so. People still have to visit the site to comment, or if someone links to it, or coming in off Google. And hey, it may be possible that mental connections develop between the content and the visuals, enabling easier retrieval of older posts. (Okay, so that’s tenuous thinking at best, and probably not at all likely.) Mostly this is just a fun way of keep the visuals fresh over time, and a non-standard way of tying in my Flickr account. That’s all.

Colour Schemes

There is now no set colour scheme for this site; as the photos change over time, so too do the colours. Each collection gets its own photo, and a colour scheme to match. The colours are sampled directly from the photo, and various light/dark combinations are automatically produced. Once I have a base list of colours, I give them a name and plug them into a PHP file, then some simple scripts do the rest of the heavy lifting for me.

Sampling colours from photos is an idea that works well in print design, due to an implicit enabler — once a page is printed, it never changes. On the web, this is a much more elusive practice. Thanks to content management systems and rotating image scripts and daily updates and the like, there are a number of reasons why it’s not practical to consider applying this concept to an entire web site. One great example of this being done well in the past is Nazarin Hamid’s Absenter, a beautifully sparse photoblog.

The obvious question here is, with a continuously-changing colour scheme, how diluted does the brand identity become? There are certainly plenty of other unifying factors that diminish the difference in colour, from typography to layout to logo. Ultimately this is a personal site though, so I’m not so concerned about brand, and willing to take the risk for the sake of trying something new.

Inspiration

I think it’s fairly obvious, but I took a lot of cues from magazine design when putting together this site. The layout, typography, and photo-derived colour schemes owe their existence to flipping through back issues of some of my favourite cooking mags.

The archiving idea was also a magazine-inspired derivation, but I can’t say I would have made the connection if it hadn’t been for recent archival experiments by Shaun Inman, with his Heap, and Khoi Vinh and his interest in illustrating archive pages. While I doubt anyone could make the case that our respective archival methods are closely related, the fact that these two gents set out down the road of extending our basic ideas on what a weblog archive page should look like proved useful to my own thought process, so hats off.

Photo Credits

Yep, the photos are all my own. Each links to its respective Flickr page for further description and metadata as warranted.

Comment Avatars

Once upon a time there was a centralized avatar service for weblog comments called Gravatar. The people loved it. It was great. When it worked. But it stopped working.

Maybe it will come back one day; I decided not to wait for one day. I’ve kludged together something else in the meantime. When you comment, if your URL matches that you’ve listed in your Flickr profile, you might just be recognized on this site with your Flickr avatar.

For now it’s entirely manual; I grabbed avatars of people who have listed me as a contact over on Flickr, who are actually somewhat likely to comment on this site. Please, please don’t do things like ask me to add your avatar here, this is only temporary, until I can get a more automated method working in the meantime. (I might manually update the list periodically, but only from those who count me as a contact on Flickr, that I actually recognize as commenters on this site.)

Wrap it Up

Okay, I’ll finish the summary here, but obviously there’s a lot more to talk about. You have questions/comments, maybe?


1
December 14, 00h

Congratulations on the redesign, as usual it’s inspiring, clean, functional and downright cool :0)

Great Job!

2
December 14, 00h

It’s beautiful and featureful. I’d be inclined to say it’s perfect!

3
December 14, 00h

Very nice. Great to see more experimentation with the weblog form.

The Jeremy Keith button doesn’t seem to have any effect, at least for me at the moment. Then again, I am (I think) on a nightly build of Camino 1.1 (Version 2006120822 (1.1a1+)), OS X 10.4.8.

4
Dave S. says:
December 14, 00h

Paul, there were a few differences between my test server and this one, but it should be fixed now. Give ‘er another shot.

5
Tom says:
December 14, 01h

Great redesign, I love the way you’ve organized the archives!

On IE6 the site is quite unreadeable, but you are right… it’s time to move on.

6
Dave S. says:
December 14, 01h

“On IE6 the site is quite unreadeable”

Hmm. It ought to be mostly functional, only with uglier images. I am using conditional comments to achieve this though, so if you’re running IE6 and IE7 on the same machine, you won’t see it properly in your copy of IE6.

7
Victoria Pavlova says:
December 14, 01h

Very nice redesign, especially love soft colors and touches of red here and there.

8
December 14, 01h

Very, very smart. Love the collections colour scheme concept (and choice of photos), as well as the “Recent Entries” being so prominent.

I’d consider moving the “Remember Me” thing to under the name in the comments section, by the way - you have to tab past submit to get to it with a keyboard, and it’s rather out of the way of the mouse (the mouse being, usually, over the “Name” textbox when you start writing a comment).

9
Malarkey says:
December 14, 01h

I think it’s wonderful, well done mate.

10
December 14, 01h

Excellent work, love the detailing (the keyline round the page, the ‘view on Flickr’ mouseover on the photo, the colour scheme on the archive listings).

11
Andrew K. says:
December 14, 01h

For the moment I prefer wintermint, but I’m sure this one will grow on me. Congratulations on getting it live.

Here’s a simple way for you to automate your Flickr-tars collecting - http://dmitry.baranovskiy.com/topic/avatar-from-flickr

Also, the ‘Jeremy Keith button’ (HA!) doesn’t work for me – FF2.0 on OS X.

12
Dave S. says:
December 14, 01h

“Here’s a simple way for you to automate your Flickr-tars collecting”

That would be the automated way referenced in the post. Haven’t got it working on my server yet, but will certainly try a little harder now that this is up.

“Also, the ‘Jeremy Keith button’ (HA!) doesn’t work for me – FF2.0 on OS X.”

Does for me. Shouldn’t be a browser thing, it’s PHP-driven. Are you accepting cookies? Did you wait for the page refresh?

13
Andrew K. says:
December 14, 01h

Hmm, second time lucky! Definite PEBKAC, my apologies Dave.

…and the new deisgn is already growing on me :)

14
December 14, 02h

looks great Dave, well done.

site seems entirely readable to me in IE6/WinXP. The only issues seem to be the pngs and presumably some float issues: the comment numbers/avatars, ‘the zen of css design’ link hides behind the book image, and the previous post link is hiding somewhere too (those last two points just on this page strangely)

15
December 14, 02h

oooh I like it. I was in the middle of implementing the archives in a similar way but you beat me to it. Really beautiful, although I was a big fan of of v5 and v4 too.

16
December 14, 03h

Wow. The new design looks fantastic Dave. I’m very impressed. Nice work.

17
December 14, 03h

This is a really beautiful redesign! It would be a nice refinement if it skipped down to the Reader Comments section when you click on the comment link.

18
December 14, 03h

thank you, particularly for the design notes part. this new layout is very pleasant to the eye, and functionally wonderful as well.

congratulations! :)

19
Joshua says:
December 14, 03h

Looks fantastic Dave! Although I loved wintermint it’s cool to see a refresh and I love that you challenged the normal way of doing archives. Good work as always!

20
Matthew says:
December 14, 03h

Dave, I’m in awe. The colours and photos all work together so well, and the photos themselves are all fantastic!

One problem though: http://mezzoblue.com/archives/2003/09/01/jaws_petitio/ appears (to me at least) to not load the style correctly. (Kudos on the error message and backup style though.)

21
December 14, 04h

Some really nice ideas here. Personally, I’m particularly interested in the way you are linking into Flickr (I love the way that site opens up so many ways to exploit the data - I’ve had my own stab on a slightly different tack).

I also appreciate the aesthetics of drawing the color scheme from the header picture; very sympathetic.

Good stuff.

22
Christian says:
December 14, 04h

Looks very nice!! A bit wide for my taste though—I’m working on a 12” PowerBook and I don’t like large/fullscreen (browser) windows and I find websites that try to force me to a certain window size always a bit annoying …

23
Jeff L says:
December 14, 04h

Looks very nice - I like the Flickr integration.

24
December 14, 04h

I can barely finish designing something before I’m sick of looking at it. The ability to continually refresh your design with a new image and complementary colour scheme sounds like designer utopia to me. Long live Fountain!

25
Burns says:
December 14, 04h

“due to the fact that almost no one browses full-screen”

What makes you think this? Most Windows users I know browse full screen. I’m not contesting you, just curious as to why you think most people don’t browse full screen.

26
December 14, 04h

Looks very nice, nice “pastel like” colors. It actually breathes a very calming atmospohere.

You mention something about the screen sizes, and that people do not browse with full screens. Really? I myself always have a full screen, what is the point in not seeing all there is to see?

27
December 14, 04h

Funny, I was just wondering whether you would do a redesign soon. :)
I loved Wintermint, but the new colors are wonderful and the details are delicious as ever. Thank you.

28
trovster says:
December 14, 05h

Nice one Dave..

One thing, can you add overflow: hidden; for your Phark image replacement on h1 a:link, h1 a:visite. This’ll stop the focus:halo from going off screen. Cheers.

29
Cindy Li says:
December 14, 05h

Looks great! I love it that you incorporated your own photography! Now you can get more lenses right? :)

30
December 14, 05h

Congrats Dave! Your new design looks great. It’s better then previous version. I love the color/photo themes. Nice job! :)

31
dpiercy says:
December 14, 05h

Very nice!

32
Jon says:
December 14, 05h

I really love the redesign, Dave, and the archive idea is really inspiring. Congratulations on a job very well done.

33
December 14, 05h

This is a very interesting redesign Dave. I like your various flickr implimentations, and can’t wait to see the avatar script working full swing.

I love the _idea_ of pulling your colour scheme from the header images, but in practice i’m not very fond of it. Perhaps this is due to the fact that i have only been a visitor to your site for about two years, and wintermint is the design i have come to know and love. I’m sure it will grow on me.

34
December 14, 05h

Well done. I like the new colors and the user-friendly placement of navagation elements.

Thank you for sharing this story with me !

35
Ryan says:
December 14, 05h

Nice, I like it a lot. It’s a nice upgrade.

36
Nate K says:
December 14, 06h

This is refreshing. Great job on the re-design. The fact that you have a Jeremy Keith button makes it that much better.

37
December 14, 06h

It’s nice. I’ve found a couple of missing images in this article while browsing the archives however:

http://mezzoblue.com/archives/2002/12/03/the_power_of/

38
December 14, 06h

“due to the fact that almost no one browses full-screen”

I agree with Burns, I don’t think this is the case.

I have a 24” widescreen at work and yes, I don’t run browsers maximised. At home I have 2 19” TFTs and I tend to have my browsers maximised for general use.

39
December 14, 06h

Lovely layout. Very fresh.

40
Stacy says:
December 14, 06h

Hi, I love the new layout!! But I thought I should let you know that when I clicked the Ladybug image to go to the Flickr page, I got Pumpkins instead!

41
December 14, 06h

Wow. I followed the RSS feed to the topic not knowing what it was about and saw the theme change. Looks great :-)

Mike

42
December 14, 06h

Looks awesome– I love the incorporation of your images into the design rather than a flickr badge.

43
December 14, 06h

Awesome redesign. I love the simplicity of the design and the ease of reading. I remember when you briefly redesigned your site a while back and then switched back to Wintermint. I think you should avoid that this time no matter what the critics might say. People fear change, but this new layout is more useful and most people will probably see it that way.

Good job.

44
Cathy says:
December 14, 07h

I like it, but… is there a reason it looks like this: http://www.bentbacktulips.co.uk/images/mezzoblue.png in Opera 9?

45
December 14, 07h

I like it! I really enjoy how you’ve incorporated your Flickr photos in the site, it adds a level of richness to it.

Well done!

46
December 14, 07h

Dave, the redesign looks great! I really like how you’ve incorporated your photography into the design as I think it showcases your photographic skills. Your Flickr stream has always been nice, but now even more people will get to see your photos.

47
Ryan Imel says:
December 14, 07h

Looks great. I knew something like this was up when I saw that header photo on Flickr with that sneaky description….

Great ideas, great execution - I’m looking forward to browsing the site just to see what you’ve done!

48
Serge says:
December 14, 07h

I love the new color, the mezzoblue label in the left and the navigation. Great work.

49
December 14, 07h

Just marvelous, Dave. Great work.

50
December 14, 07h

Minor thing: for the current set of posts, the header image Flickr link goes to pumpkins instead of the ladybug.

51
December 14, 08h

Very nice! I’m with you on cribbing from magazine design, especially the way good magazines generally feel more like they’re designed to hold up to rebrowsing over time. I still think we can bring a lot more of that to the web.

I like the idea of mnemonic collections of articles a lot. It actually feels less arbitrary than monthly groupings (which might have 20 posts or might have none) and makes it easier to remember if you’re coming back looking for an older article.

52
Filosof says:
December 14, 08h

Wow. In one little word. I think I like your new design quite a lot.. :-) and colours changing is marvelous.

53
Shane says:
December 14, 08h

Dave, I’ve long been an admirer of your work from afar, but I couldn’t avoid commenting on the wonderful redesign. It looks great.

54
December 14, 08h

Love the magazine feel to this design, as a publisher I feel right at home. Sure I’ll miss the blue, but this layout just ‘feels’ right.

Kudos for adding psudo leaders to the recent entries, nice touch.

55
Dave S. says:
December 14, 08h

Re: various points about browsing full screen.

Okay, I exaggerated, SOME people do it. But I suspect it’s probably a dying practice with ever-larger screens. Either way, with only 3 or 4 out of 50 so far saying this, evidence is good that I’m not far off.


“I love the _idea_ of pulling your colour scheme from the header images, but in practice i’m not very fond of it.”

Yeah, we’ll see how that goes. There are certainly concerns about the long-term disconnect that shifting colours will cause, but I think there’s ample precedent in other mediums. Just not on the web. (Could you imagine if all the dancing shadow iPod ads were the same colour?)


“Is there a reason it looks like this: [..] in Opera 9?”

No; Opera 9 on OS X renders it just about flawlessly, I didn’t think the Windows version would be so different. Something else to test when the MacBook comes back, I suppose.


Thanks all for the great response so far! I felt pretty confident with this one, but it’s always nice to hear confirmation.

56
delarge says:
December 14, 08h

I have also been thinking about going for the 1024 crowd for a couple of things… bold move but the extra space is great.

Fantastic design Dave, that overlayed border effect is a smooth touch.

57
Tom Q says:
December 14, 08h

Great design - clean and crisp with some fantastic photos. I normally read via RSS, but this gives me a reason to come to the site. And I prefer it to wintergreen. The colour matching with the photos is very nice.

58
Apple says:
December 14, 09h

Your site looks very nice and ordered. Well done! The Flickr integration is a good idea.

I agree with Burns and Jake. I think there are many people browsing in full screen mode so they should not be forgotten.

59
December 14, 09h

Everything looks great! I like the layout and flow of the new site. Only one question: What was the reason for using images for the nav? I imagine it’s so the layout doesn’t break… just wondering.

60
Sander says:
December 14, 09h

Another datapoint on full-screen or not: at 1680x1050, all my applications (browser, email, chat, IDE, photoshop, main text editor) are fullscreen, while all my utilities (explorer, notepads for short-lived notes, command lines) are windowed. That removes the feeling of clutter, while still giving the benefit - where needed - of seeing below the current window.

I’m sticking with your fixed-width design, though, as the lines get _too_ long in the liquid design. (I’d recommend setting a max-width in ems for your main text with the liquid design.)

Also, I don’t know why, but I find the 5px padding in this text area subtly disconcerting. I keep trying to remove the spaces that I accidentally included. I’m not a frequent commenter here, but I’ll probably write a @-moz-document rule to get rid off them.

61
Sander says:
December 14, 09h

Err, and then I’m so busy noting little nitpicky things that I completely forget to say what I wanted to comment on in the first place: I love the new design! *g*
I’m not a designer myself, and usually I don’t care too much about how a site looks, but this look just really grabs me. Nicely done!

62
Patrick says:
December 14, 09h

Beautifully done. Great idea of tying a colour scheme with the photography. Why not? It’s not like this is printed on paper or anything. I like it. Break that dead tree paradigm a little bit more.

63
Ryan says:
December 14, 09h

Glad to see you re-imagining what your site can be. There doesn’t seem to be too much constructive criticism so I guess I’ll be the first.

-Navigation-
Feels a bit lonely and inefficient with all that space around it, especially when the main content starts halfway down the visible page as a result the the large header block (screen res 1440x900). The small triangle representing the selected page seem a bit aimless as all they are doing is pointing to the picture. Your brand block feels as though it was cut and pasted from another design. Doesn’t make use of all that empty space.

-Recent Comments and Image Block-
The height and dark color value acts like a visual magnet that competes with the most important content. I like the magazine idea but I feel that your interpretation leaves out the order of importance factor that mags use to arrange content on a page. The “Recent Entries” section should have a less important position than the main content. I love the idea of the color scheme tied to the picture, no criticism there. The page title tab below the recent entries section feels a little to tall and wide for the text contained within giving it a baggy feeling.

-Sidebar-
Looks a little content-less. You’ve allocated a lot of real-estate to a mostly empty column. On a single post page the text looks generic and doesn’t do a very good job of focusing one’s eye from section to section. I realize it’s a good place to leave open for notifications (your book and conferences) but maybe wrapping the post content around the unused space would make more sense.

-Main Column-
Feels very clean with an efficient use of space and design to hi-light your excellent content. The only thing I would add is a more of a visual break between the comments and article.

-Archives-
Design is fresh and visually appealing. I like the pics creating a hierarchy for each section. The links are a bit confusing as twice I was taken to Flickr when I thought I was going to a full article listing of that section. The idea behind the grouping is a good one but (as you stated) is totally arbitrary to the posts within. I feel this makes it more difficult to navigate through the archives. I liked the old version with the excerpts.

-Search-
Didn’t realize I was going to Google’s site for your results. I realize that the results are site specific but it is still a jolt. Would much rather see the results embedded into your site. Google is a little overkill.

All in all, I feel that Fountain lacks the personal quality of Wintermint, and instead feels more like a standard template that you tried to fit your content into (really big house and not enough furniture). I hope this will be taken in a positive way rather than as an insult (which is not my intention). I have nothing but respect for you.

64
Alyson says:
December 14, 10h

All I have to say is WOW. This is beautiful. And I love the seasonal color/photo themes.

65
Dave S. says:
December 14, 10h

“There doesn’t seem to be too much constructive criticism so I guess I’ll be the first.”

All fair, and one or two of them are bugging me too. It’s never really done, I have a laundry list of things that will continue to change. So, I guess just keep watching.

66
Ryan says:
December 14, 10h

-“It’s never really done, I have a laundry list of things that will continue to change.”

I’m the same way.

-“So, I guess just keep watching.”

Of course.

67
Ranjani says:
December 14, 10h

The layout’s colors are gorgeous, and it shocked me because I’m so accustomed to the blue and red scheme. It works really well, and I think a fresh Mezzoblue every so often will be a lovely change.

PS: I especially like the little dotted line that runs along the sides. At first, I thought it was an error, but I noticed it came from the top of the page. Nice touch :)

68
Mike D. says:
December 14, 10h

Looks awesome. I love it. My only piece of constructive criticism is that your avatar should be looking diagonally down at your comment, instead of diagonally up.

Yo, I ran into Molly last night… heard you were driving down to Seatown today. I’ll buzz you in a bit…

69
Steve S. says:
December 14, 10h

Great work, beautifully done. I had actually gotten into the habit of viewing your posts in my feedreader rather than on your web page because I didn’t like the old layout. Just too overwhelming with blue. I love the new layout, though. One of the best I’ve seen in a while. Great ideas, great work and good luck wrt/ the inevitable unforseen issues!

70
PZ says:
December 14, 11h

Good design is certainly not dead in the age of RSS. Although I do read a lot of posts through RSS, when it’s (a) a really interesting post or (b) I know the site is well designed, I’ll open it up in a new tab just to experience it that way. (Needless to say, your posts usually fall in the first category, and always fall in the second.)

To second a lot of other people’s comments: I really like the changing colour schemes and tying them into rotating pictures. The whole magazine theme is very cool.

Beautiful work as always Dave. Keep it up!

71
Johan says:
December 14, 12h

Hi D.

I think it looks neat! Well done!
It looks more in tune with the Bright Creative Website, even reminiscent of the latter!

J.

72
Tim Lucas says:
December 14, 12h

It’s refreshing seeing this old classic with a sleek new design. Love the Absenter style colour themes too. Nice work!

73
Johan says:
December 14, 12h

Really good Dave. It’s both soothing and enjoyable.

74
December 14, 14h

Great redesign Dave. I’m very interested in photography too, so I love the collection based archiving method.

Ah! And the Jeremy Keith button… LOL

75
December 14, 16h

Very nice, love the issues idea - taps into the fact that humans don’t actually change with the calendar. The things we write and post change with the phases of our daily lives and not the calendar.

76
Stv, says:
December 14, 17h

Nice work, Dave; I like it!

77
Jody Daub says:
December 14, 17h

Very inspiring idea with the archives - very fresh. I was so used to Wintermint I actually did a double-take at the monitor when I saw the re-design. And that Jeremy Keith button is friggin’ hilarious.

78
zirafka says:
December 14, 17h

FYI: new design has some problems in Konqueror (latest version, Linux)
http://zirafka.cz/tmp/mezzoblue.jpg

79
Alistair says:
December 14, 18h

I got quite a shock this morning Dave, wasn’t expecting a redesign since the old one has been in existence for so long; great job.

Al.

80
Lach says:
December 14, 18h

Love the new design, Dave! It feels very clean and crisp. It’s really a joy to read.

Don’t count out full screen viewers, though. I always browse full screen. For two years I’ve been a web development / design tutor and in all that time, I never saw a student not using the complete window for browsing, except when prompted to test at different resolutions. That’s a bit over 100 people.

81
Jessica says:
December 14, 19h

I agree with PZ (c#70), this is one particular site that I prefer to come to in order to read posts, signing up to the RSS feed serves as more of a notification that I need to come check something out. Plenty of interest makes me want to visit again and again while keeping text and the surrounding area incredibly readable.

I’m a huge fan of using photography as a base for design, so I love what you’ve done here, beautiful work.

82
Michelle says:
December 14, 19h

Unrelated to the new (v. nice) design..
The relative URIs become relative to the wrong domain in the RSS feed in Bloglines. I’ve used the AbsoluteRSS plugin for WordPress.

83
Zach says:
December 14, 20h

Absolutely amazing in every respect. Not that we expected any different.

Suggestion: I would put a navigation bar on the bottom of the archives pages in addition to the one on the top. It would make browsing a lot easier.

84
December 14, 21h

Wonderful work, Dave. As it’s been said plenty above me here – the idea of grouping posts to a photo’s color palette: awesomeness. It doesn’t hurt that the photos are excellent launching points. Nicely done.

85
Solarchild says:
December 15, 00h

Hi Dave!

Did you have a look at http://pavatar.com/ regarding the avatars?

Solarchild

86
Johan says:
December 15, 02h

Shaun Inman also uses colorpalettes linked to on-the-fly created stylesheets with a php script, they are calculated on hue or opacity or something. Maybe you can use his script or a modification of that one?? With php you can create images like png etc. so maybe Shaun knows a way to automate the process? Like eg set a range of hues and translate them to a CSS hex format?

87
Haarball says:
December 15, 04h

I thought wintergreen was one of the most brilliant blog designs I’d seen, so this underwhelms me in comparison. I love originality on the web, and I truly wanna credit you with the boldness of these new implementations, but from a usability perspective it feels more like a step down. On the other hand, managing to incorporate something like this and at the same maintaining as logically structured archives as previously would make you nothing short of a genius.

The color scheme thing is excellent in every way, especially as it’s a way of doing something slightly different that won’t impact usability and the way we browse your site to the same extent as the revamped archives.

Visually I preferred wintergreen, but that doesn’t make this anything but an awesome and original piece of work.

88
December 15, 04h

Too bad the layout doesn’t respect the default browser font settings… It’s pretty small on my 130dpi (1680x1050 15”) screen. Turning on the ‘liquid layout’ and enlarging my font size one step helps a lot, it’s much better readable that way (and looks prettier too :)), but the browser doesn’t remember that accross sessions.

So it would be great if the stylesheet would take that into account. High-res screens are getting more and more common nowadays.

~Grauw

89
Estrup says:
December 15, 05h

Guess we already knew it from reading The Zen of CSS Design, but you are indeed a great writer. Thanks for taking the time to go through your (awesome) new design. One can learn a good deal stopping by Mezzoblue.

Greetings from Denmark!

90
December 15, 09h

Nicely done, Dave. I especially like changing image / color scheme.

91
Andrew M says:
December 15, 09h

Obviously Google Reader does not give this article justice and luckily I still click through and visit sites although I’m late to the party.

I love the look but more so the simplified content and navigation. It seems that the blog community is going in a simplified direction as can also be seen with the simplebits.com redesign.

Thanks for sharing and consistently producing great content and design.

92
Dannyb says:
December 15, 12h

Where’s my blue? This is ^@#$% gorgeous … sorry no other way to say it …

The color scheme is nice, and what i think is the most brilliant idea is to change photo / color scheme by date … and they all look great …

Lucida seems to be the next “in thing” …

93
December 15, 15h

Wow, I must admit I’m quite impressed. And that in itself is impressive, seeing that I’m not the kind of guy that is this impressed very often. I love the layout, typography, and especially the changing color scheme. The “Ice” color scheme is my favorite thus far.

94
Steve S. says:
December 15, 22h

Re: Comment #81

I too usually come to sites rather than read them in the feed reader, I just wasn’t too fond of the old one’s design. I’ll keep reading the posts on the page now though. The new layout is absolutely gorgeous.

95
Paul says:
December 15, 23h

Dave, I really love it. 10/10.

96
December 16, 05h

Love the new design Dave. Stunning photo too! I would use my own photos on my site if I could take shots like that! Are you going to change the favicon colour to match the new design?

97
December 16, 10h

Great new design. Seems 960 pixels-ish is the new 760 pixels-ish. I’m a big fan of using the extra space as space, rather than cramming in a third or even fourth column. Humans can’t take in too much info at once. A main column for your primary info and a secondary column for ‘other info and sub navigation or some such’ is my personal preference. Of course there are always exceptions. I’ll have to make the jump to 960 width I think. It’s nice and open, has a real comfortable visual feel to it.

98
Riddle says:
December 16, 11h

There’s a little problem with comments’ content overflow. Example:

http://mezzoblue.com/archives/2004/09/10/a_response/#c021432

Very nice and clever design, though :)

99
Ash Haque says:
December 16, 12h

Design looks great, very clean, very functional. Not a fan of the liquid layout though, at a resolution of 1650x1050 it looks a little awkward, especially the header.

100
René E says:
December 16, 19h

Just a quick note, so this doesn’t slip you by: Did you want to make your .ico file also match up the new colour scheme for the logo? Currently it is using the blue scheme from the previous style.

Other than that, very nice work. The whole making new colour schemes as you change the images may or may not work out in the long run, but only time will tell.

All the best.

101
Ms. Jen says:
December 16, 20h

I like it, I like it, I like it a lot…

Esp. like the photos changing with each collection / issue. More photos, please.

;o)

102
Hev says:
December 16, 20h

Love the new design. I agree it was time for a change. I like the way it is easy to read, yet it looks very professional.

103
Ben says:
December 17, 02h

Oh wow Dave, this is absolutely incredible. Wintermint was for a long time probably my favourite web layout I’ve seen, but this… this is sheer sex.

And as always, the typography is enough to give Herman Zapf a hardon. That’s a nice change from a lot of websites, I’ll tell you that much.

Nice work mate :)

104
mick says:
December 17, 03h

Why dont change the name to Mezzogrey on this site. I dont see so much blue round here. But why have they change to a new design? I like the old design better.

105
Paul says:
December 17, 03h

Dave, I hope this will encourage you to write more! Why don’t you share some of the cool CSS techniques you used here? :D

106
Stephen says:
December 17, 10h

Like others, I was a big fan of the previous design, but this one looks beautiful too!

re browsing full screen, working, as I do, in an office still populated by Windows laptops running at max 1024 x 768 resolution, one doesn’t have much choice to do much else. However, I suspect your target audience has better options at hand, on the whole…

107
Solarchild says:
December 18, 01h

Where is the link to http://mezzoblue.com/projects/ gone, btw?

108
devolute says:
December 18, 07h

It’s pretty sharp. I like it. Nice one (must get round to a bit of a re-design myself, actually).

109
December 18, 08h

Truth be told I was never a big fan of the orange and blue colour scheme of Wintermint.
I really like this new design because it’s so different from the previous one.
Especially the large Flickr link is a nice idea,
Kudos!

110
December 18, 09h

Nicely done, Dave! I actually like the fact that you’ve made a bit more work for yourself (having to manually group posts, select a photo to represent them, and pull a color scheme out of the photo). If the web’s future includes more site-specific art directors to take us at least a step or two away from templated homogeny, it’ll be a bright future.

111
December 18, 11h

Dave, I quickly scanned the comments but couldn’t find anybody asking about what platform you’re using.

Are you still with Movable Type and this is just a visual refresh?

I’ve found that larger sites on MT often face significant slowdowns over time. I ask because your site seems pretty speedy.

112
Dave S. says:
December 18, 13h

“Are you still with Movable Type and this is just a visual refresh?”

It’s a bit of a hybrid, but MT does most of the heavy lifting for me. I moved a lot of the archive functionality outside of MT itself and into some PHP scripts I built.

I’m only about 1 step removed from directly querying the MT MySQL database, that would be the next logical move if what I’m doing starts running too slow, but so far it seems to be alright. I think I could speed up the yearly archive pages a lot with some relatively basic SQL queries, but I’m putting that off unless I have to.

113
Jason says:
December 18, 15h

I like the new look - very easy on the eyes, extremely clean, no clutter or mess in the way.. Good job.

114
December 18, 15h

Where is the Zen in it…

I understand that sometimes you want to move on but at least give the past a place on your site…

I could be wrong but i can’t find it.

Ok it looks nice and clean and has a more open touch than the wintermint design.

But the site seams to mis something.
i can’t really point a phinger.

But still i believe that your last design was better. (i mean worked better)

Maybe i’m wrong.

I’m wrong most of the time and maybe that’s the case…… wright now…

115
thrstn says:
December 18, 16h

NICE!

I like how you worked flickr into your header image :)

116
Dave Lowe says:
December 19, 11h

Very clever design for the header area! I also love the typography… very clean and, well, readable for lack of a better word. You’re still the master!

117
mb says:
December 19, 12h

Nice one Mr S. I struggle no end to settle upon a colour scheme when I have to commit to a design, and your generated method puts my efforts to shame.

It’s an insipred concept that works perfectly and is so well executed that I suggest you should deliver us style-deficient grunts a palette generator _grin_ (well only half a grin, I’d love such a tool and use one if you did). More than that your move to introduce visual cues to categorising of archived posts has to be commended, but at the same time I wonder if an alternative sort order - yes, by date :-O - may still have merit ?

Anyway, as you say in your introductory post this is your personal site, and judging by the feedback I’m not alone in thinking that you are by turns informing us, inspiring us and taking design risks. It won’t always work, otherwise there’d be no risk involved and we’d never innovate. But I think that this is a superb implementation of a great idea. Dave’s Dynamic Themes++ :) Kudos.

Small technical point re IE7 on WinXP. I run my screen resolution at 1280x1024 on a 17” monitor under XP-Pro SP2 - fully patched at time of posting. When I resize said browser, no I don’t run it full-screen either, with a browser size of 1024x768 I get a horizontal scroll-bar. Interstingly, or maybe not :) this does not happen when I run the OS at 1024x768 resolution. I’d not be suprised if this is a “bug/feature” in IE6/7 as I’ve seen it elsewhere; or perhaps it’s the MS IE Developer Toolbar that I use to do it. If you care to investigate it further then I will gladly run some tests and document the results.

Please keep up the very good work, this is the sort of stuff that reminds me why I go to work. Thank you.

118
Brian Z says:
December 19, 12h

Dave -

Once again your genius shines through! This new look is awesome! Thank you so much for always sharing your talent and knowledge with us. Have a great Christmas holiday!

Thanks again!
BZ

119
December 19, 14h

Hey Dave - I was wondering about the color sampling: Are you doing this on-the-fly, or do you have some code that you run to sample a pic, create a palette and then dump it in a db (or something similar)?

Regardless - how do you do the color sampling? Care to share a code snippet?

Cheers.

D.

120
December 19, 21h

I liked the concept of archiving you presented. It was very visually appealing. Still, I am not sure it’s the most usable thing, though. Nothing beats a search box (which you have) to get to old content.

121
December 20, 00h

uauhhhhhh!!! It’s a very good work or re-designs! congratulations! ;) The past design was grate, but 2.5 years are a lot ;)

Thanks you show all the talent!

122
Rocketeer says:
December 20, 04h

I grew so used to the previous design that I thought I mis-typed the url, until I looked at the address bar :p Good stuff, I’m itching to see what the colour scheme will look like with another photo!

123
mb says:
December 20, 12h

Hi Duncan / All,

I’ve no idea what Dave is doing to derive the colour scheme, but perhaps like you, the method and concept that he outlines excited me enough to have a dig around the web in search of some aides and tools

I have no affiliation with any of the sites that these links refer to; and if it’s bad practice to post them then I apologise in advance. They are so good that they may be well known to many, but they were new to me today and I was thrilled to find them; so I wanted to share

Colour scheme from image, returns 10 hex values split into “dull” and “vibrant” hues
http://www.degraeve.com/color-palette/index.php

Colour scheme from a selected hue, returns 12 hex values, six “sympathetic” and six “contrasting”
http://www.steeldolphin.com/color_scheme.html

Palette generator, provides visual sample and writes CSS rules based upon a given colour. Outputs 12 values
http://www.themaninblue.com/experiment/Technicolor/

124
mb says:
December 20, 12h

Hi Rocketeer,

If you check out the archives then select any of the items in that collection then the CSS will change to reflect that archive image’s colour scheme. I’m liking the 2002 style a lot which I think is muted but not flat
http://mezzoblue.com/archives/2006/

125
December 26, 18h

I really like the new design - although I’ll miss the old layout a bit, I think this is a step in the right direction (also the idea of “issues” is a lot like ALA)…

126
January 05, 01h

Oooh am I late commenting…

Just a quick comment about your hypothesis that people may end up remembering more easily if they’re on the right track to finding an older article. (quote) And hey, it may be possible that mental connections develop between the content and the visuals, enabling easier retrieval of older posts. (Okay, so that’s tenuous thinking at best, and probably not at all likely.) (unquote)

Actually I’ve found it quite true on Karl’s own La Grange http://www.la-grange.net/ - his code is mostly hand-made (although slightly automated), thus older pages stick to the presentation they had when first published. No fancy CMS there. And when I’m browsing his older posts, I kind of remember the way some of them looked, so I know more easily if I’m in the right period.

Although his approach is far more differentiated than yours, so I’m not sure yours will work. Time (heh) will tell.

127
January 05, 22h

You’re rocks… Nice redesign… inspiration for every designer… Thanks…

128
January 07, 18h

Hey Dave, great concept and execution.

I love the color scheme and all the subtle details.

I’m borrowing some ideas, like different styling for each collection (which in my case would be terms of my taxonomy, I run Drupal) for my 2007 redesign.

Keep the great work!

129
krotzyk says:
April 06, 07h

It was really nice template but this one is cool to;)