Mezzoblue
14th Dec 2006, 12:11 pm
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 (http://www.websitearchitecture.co.uk/about/mezzoblue/), 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 (http://www.microsoft.com/windows/ie/)? Cause IE7 is out (http://www.microsoft.com/windows/ie/). You dinosaurs (http://www.microsoft.com/office/evolve/) 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 (http://www.websitearchitecture.co.uk/archives/2006/05/16/raw/) on the site is bound up as part of a collection (http://www.websitearchitecture.co.uk/archives/2006/#bee), along with other posts (http://www.websitearchitecture.co.uk/archives/2006/06/26/xyle_scope/) published around the same date. That collection is then given a photo (http://flickr.com/photos/mezzoblue/245584674/), 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 (http://mezzoblue.com/subscribe/)? 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 (http://absenter.org/), 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 (http://www.shauninman.com/post/about/the_heap/), and Khoi Vinh and his interest in illustrating archive pages (http://www.subtraction.com/archives/2006/0515_the_illustra.php). 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 (http://www.websitearchitecture.co.uk/about/dave/) own. Each links to its respective Flickr (http://flickr.com/photos/mezzoblue/) 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 (http://www.gravatar.com/). 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 (http://flickr.com/photos/mezzoblue/) 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?
More... (http://mezzoblue.com/archives/2006/12/14/fountain/)
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 (http://www.websitearchitecture.co.uk/about/mezzoblue/), 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 (http://www.microsoft.com/windows/ie/)? Cause IE7 is out (http://www.microsoft.com/windows/ie/). You dinosaurs (http://www.microsoft.com/office/evolve/) 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 (http://www.websitearchitecture.co.uk/archives/2006/05/16/raw/) on the site is bound up as part of a collection (http://www.websitearchitecture.co.uk/archives/2006/#bee), along with other posts (http://www.websitearchitecture.co.uk/archives/2006/06/26/xyle_scope/) published around the same date. That collection is then given a photo (http://flickr.com/photos/mezzoblue/245584674/), 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 (http://mezzoblue.com/subscribe/)? 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 (http://absenter.org/), 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 (http://www.shauninman.com/post/about/the_heap/), and Khoi Vinh and his interest in illustrating archive pages (http://www.subtraction.com/archives/2006/0515_the_illustra.php). 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 (http://www.websitearchitecture.co.uk/about/dave/) own. Each links to its respective Flickr (http://flickr.com/photos/mezzoblue/) 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 (http://www.gravatar.com/). 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 (http://flickr.com/photos/mezzoblue/) 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?
More... (http://mezzoblue.com/archives/2006/12/14/fountain/)