Fountain
December 14, 2006It’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?
Congratulations on the redesign, as usual it’s inspiring, clean, functional and downright cool :0)
Great Job!
It’s beautiful and featureful. I’d be inclined to say it’s perfect!
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.
Paul, there were a few differences between my test server and this one, but it should be fixed now. Give ‘er another shot.
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.
“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.
Very nice redesign, especially love soft colors and touches of red here and there.
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).
I think it’s wonderful, well done mate.
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).
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.
“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?
Hmm, second time lucky! Definite PEBKAC, my apologies Dave.
…and the new deisgn is already growing on me :)
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)
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.
Wow. The new design looks fantastic Dave. I’m very impressed. Nice work.
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.
thank you, particularly for the design notes part. this new layout is very pleasant to the eye, and functionally wonderful as well.
congratulations! :)
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!
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.)
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.
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 …
Looks very nice - I like the Flickr integration.
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!
“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.
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?
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.
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.
Looks great! I love it that you incorporated your own photography! Now you can get more lenses right? :)
Congrats Dave! Your new design looks great. It’s better then previous version. I love the color/photo themes. Nice job! :)
Very nice!
I really love the redesign, Dave, and the archive idea is really inspiring. Congratulations on a job very well done.
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.
Well done. I like the new colors and the user-friendly placement of navagation elements.
Thank you for sharing this story with me !
Nice, I like it a lot. It’s a nice upgrade.
This is refreshing. Great job on the re-design. The fact that you have a Jeremy Keith button makes it that much better.
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/
“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.
Lovely layout. Very fresh.
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!
Wow. I followed the RSS feed to the topic not knowing what it was about and saw the theme change. Looks great :-)
Mike
Looks awesome– I love the incorporation of your images into the design rather than a flickr badge.
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.
I like it, but… is there a reason it looks like this: http://www.bentbacktulips.co.uk/images/mezzoblue.png in Opera 9?
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!
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.
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!
I love the new color, the mezzoblue label in the left and the navigation. Great work.
Just marvelous, Dave. Great work.
Minor thing: for the current set of posts, the header image Flickr link goes to pumpkins instead of the ladybug.
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.
Wow. In one little word. I think I like your new design quite a lot.. :-) and colours changing is marvelous.
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.
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.
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.
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.
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.
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.
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.
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.
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!
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.
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.
All I have to say is WOW. This is beautiful. And I love the seasonal color/photo themes.
“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.
-“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.
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 :)
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…
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!
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!
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.
It’s refreshing seeing this old classic with a sleek new design. Love the Absenter style colour themes too. Nice work!
Really good Dave. It’s both soothing and enjoyable.
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
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.
Nice work, Dave; I like it!
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.
FYI: new design has some problems in Konqueror (latest version, Linux)
http://zirafka.cz/tmp/mezzoblue.jpg
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.
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.
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.
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.
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.
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.
Hi Dave!
Did you have a look at http://pavatar.com/ regarding the avatars?
Solarchild
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?
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.
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
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!
Nicely done, Dave. I especially like changing image / color scheme.
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.
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” …
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.
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.
Dave, I really love it. 10/10.
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?
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.
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 :)
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.
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.
I like it, I like it, I like it a lot…
Esp. like the photos changing with each collection / issue. More photos, please.
;o)
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.
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 :)
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.
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
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…
Where is the link to http://mezzoblue.com/projects/ gone, btw?
It’s pretty sharp. I like it. Nice one (must get round to a bit of a re-design myself, actually).
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!
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.
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.
“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.
I like the new look - very easy on the eyes, extremely clean, no clutter or mess in the way.. Good job.
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…
NICE!
I like how you worked flickr into your header image :)
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!
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.
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
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.
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.
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!
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!
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/
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/
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)…
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.
You’re rocks… Nice redesign… inspiration for every designer… Thanks…
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!
It was really nice template but this one is cool to;)