text:
mezzoblue v4May 24, 2004
If you've been on this site any time over the last couple of days, you might have noticed a small sign at the top saying that mezzoblue was getting a minor structural upgrade, and things would be back to normal today. That was a lie and a half.
In fact the structural upgrade was major, and things won't be going back to normal. mezzoblue redesign №4, dubbed 'Proton' is here to stay.
Some of you will love it, some of you will hate it. Over time those with strong feelings for the old design (known as 'Radar' from now on) will come to appreciate the new one for what it is. Thanks to the magic of Cascading Style Sheets, Radar isn't going anywhere, so feel free to continue using it as your default view of this site.
What's new in Proton? A ton. The design itself came to be on my metaphorical drawing board in November of 2003. It was meant to launch early in the new year, so take that as indicative of how busy the intervening 5 months were. Of course the scope creep didn't help either, as I decided to peg more and more of the problems I was aware of on the old site. This involved re-thinking the way my post/comments system works, re-doing the 'Recommending' list, re-structuring my heading order (most headers were bumped up two spots, ie. old

s are now [more appropriately]

s), and much more.
For now, rest assured that there are all sorts of new bits waiting for you to discover; things like the obvious menu treatment, the not-so-obvious tab treatment, the liquid layout treatment, and plenty more I'll write up in the coming months.
This is far from the end of the process though. I still have to figure out what to do with those 'Latest Projects' links, which have lived long past their prime. I need to do something about the big link list on the home page (and many interior pages). The comment preview pages are still stuck on Radar until I figure out how to get Movable Type's .cgi-extension files to run PHP. I have a lot more general tinkering to do, but such is the nature of a site like this — it's never really 'done', just 'good enough for now'.
Proton lives. And with that, I welcome feedback and complaints. How do you like the new look?
Reader Comments
Dave, there is a ways of converting the MT's CGI scripts to PHP and it's quite easy. I'll explain the way for converting the search results page, but the same applies to the comments pages. First of all, what you have to do is modify all of MT's search forms to point to a new PHP script instead of the MT CGI script (say /search/index.php). This has to be outside your cgi-bin directory. This new search script page is the page which will produce the search results, so you can format it anyway you want (PHP includes, other PHP scripts, etc.). In the place where you want the search result to appear, you enter this piece of PHP code: virtual(/cgi-bin/MT/mt-search.cgi?search_string). The virtual function is a PHP function for calling other programs. You can check the details over at php.net. The PHP search page will GET/POST the search query string and via the virtual function will pass it to the original MT CGI search script which will send tthe results back to the same page. Since I stopped using MT some time ago, I don't remember if the results are formatted or not, but as far as I can remember the format depends on the search template (/cgi-bin/mt/search/search.tmpl) and not the script itself. So if it produces a full HTML page, you just have to change your MT search template and not the CGI script itself. Also note that in some cases (depending on the server configuration) you might have to use quotes: virtual('/cgi/mt/…') or the absolute path instead of the relative. You can experiment a bit but I'm sure you will find a solution. The advantage of this approach is that you don't have to code anything in Perl (which I hate) and also that you can still keep the control of your page layouts through the MT template pages. I hope you find this helpful. It took me 2 months to figure out how to do it since there is no information available on the internet. Good luck!
Blimey Geezer!
Wot a change… It will take me a while to settle in. Just like trading in an old motor for a shiny new convertable and then spending a week figuring out how to use the stereo.
Nice job and very daring too…
The new design is awesome! I will say that I am a little confused when reading the comments. Nothing I won't get used to. awesome new design…. and old too. I like them both.
Wow! Very nice; great work.
As an Internet Explorer user (I know, I know), I truly appreciate the Internet Explorer-compatible menus, too.
Again, great work.
Dave, it's your site, and if the design makes you happy, keep it.
But personally, I really liked the old design. I constantly looked at your page for ideas.
My first impression of the new design was that it was a rendering mistake. The "About"/"Weblog"/"Contact" links at the top of the page look very mismatched with the header graphic. Additionally, the little text in the header graphic is annoying because it's just on the verge of being readable.
Overall, I just don't see a lot of coherency to the design. The teeny tiny letters and shapes you have in the header don't make any more appearences. The blue/orange/blank/white color scheme doesn't do it for me. Overall, it just looks a little too busy.
I've always loved the way you designed the links on the right side, so I'm glad to see you've stuck with that.
Dave, feel free to stop by my site and offer me some hate email :) I'm sure a million people are going to slam my page now. It's OK. You asked for comments so I thought I'd chime in.
I like it much better than the previous version : ).
First, let me start off by saying that Radar looked less cluttered. This design is a little too distracting with the sudden color changes and the actual number of different colors used. Your yellow box icon next to the article about tables (main page) looks different than the others? The box where "Older and Elsewhere" and "About this Entry" uses a really awkward background that doesn't transition well with the main colors of the site. I do like some of the ideas that were implemented though.
I love the new look; especially since it now fits into my browser window without having to scroll horizontally. Like the nice, bright colors as well.
But, since this is your website, do our opinions really matter that much?
I think I like the nifty little functionality add-ons than I do the layout (e.g. the comment highlighting, the text-box highlighting, the top navigation with pop-up details, etc)
The layout to me: it looks a little too Simplebits-ish, as well as Stopdesign-ish. Not BrightCreative/DaveShea-ish if that makes sense? To clarify: just the typeface choices, and overall layout, as well as the colour choices. Verdana, the baby blue, the yellow…
I don't mind the sizes of the logos and icons–but there isn't enough whitespace around it to isolate the elements for me to be drawn to it. Instead, it gets lost with the giant blue designer-ly block at the top.
Still though, this version is definitely more readable than your last. :-)
I don't understand the Büro Destruct–like (or whatever) display typography, which is indeed very hard to read. Plus the other little blips and dashes look like other words that might change state in mouseover, which in fact they do not.
The word "mezzoblue" in the top left is particularly poorly rendered.
(On preview: Your form borks on non-ASCII characters. Texturize, anyone?)
Dude, I think I just went color blind. But no worries, Radar is still here.
Dave! Congrats on the new site. When it opened my first thought was "I like 'Radar' better." But now that I've been here for a few minutes and looking around, I'm starting to like it more and more. Once I scroll down past the header I can see the relation to SimpleBits that someone mentioned.
One slight problem: your legend on the comments page here doesn't show at all in IE6! Actually there is no column on the side at all, just a big empty white area. I was reading comments where people were talking about "the legend" and I thought I was going crazy because I couldn't find it. Then I opened the page in Firefox and everything became clear.
As always, you're The Man.
Dave! Congrats on the new site. When it opened my first thought was "I like 'Radar' better." But now that I've been here for a few minutes and looking around, I'm starting to like it more and more. Once I scroll down past the header I can see the relation to SimpleBits that someone mentioned.
One slight problem: your legend on the comments page here doesn't show at all in IE6! Actually there is no column on the side at all, just a big empty white area. I was reading comments where people were talking about "the legend" and I thought I was going crazy because I couldn't find it. Then I opened the page in Firefox and everything became clear.
As always, you're The Man.
I don't like the "important voices." It really seems like an elitest thing to me.
On the design, I'm liking it so far except for the header; it seems to small and hardly noticable.
A few things:
I dislike the contact form. Far to cumbersome, unless you're trying to cut down on contacts of course.
Tabbing is cool. (I spent an entire day without a mouse the otherday, and it would have been splendid to see that elsewhere.)
For someone who knows you only through mezzoblue.com this design seems to be out-of-character. I think many feel the same way, we only know what we've seen so far, and this change is always a little hard to accept at first.
Design-wise I don't like the white borders that seperate many of the elements on the page. To my eyes, it makes it feel like things are falling apart, like they they're unrelated, or don't feel comfortable with each other.
On the comments. I like how they work. Though I agree with others that some explanation as to how one is determined to be an "Important Voice" would be helpful. Wouldn't want anyone to have hurt feelings. If XFN is helping the determination, that is just plain cool.
I like the liquid layout and the "About this entry" bit too. Good work. I look forward to seeing more of how you did it.
The good: the colors used in the redesign are very inviting and a change for the better. The liquid layout is great…you've shown that it is possible to have an attractive, standards-hugging site that doesn't hate 640x480 or 800x600 users.
The bad: the contrast in the menu is terrible, apparently on purpose to blend in with the header. If the intention is for the menu to be a hidden entrance to the other pages on the site, then it's highly effective. Menu also doesn't show up in Opera 7.5 (how I first viewed the redesigned site).
I really like the fact that you're redesigning in public and asking for feedback. Overall I think the redesign is great, except for a few usability/accessibility hiccups like a few above. Keep up the great work!
Great site Dave, I love how you didn't hold a lot back for fear of being criticized, and I think overall a the site settles in people will get used to it.
But one thing I was wondering is how did you get the different comments from different people to have different classes?
—( excerpt )——-

40

sorry…<), but how did you work it? It isn't typekey - do you just have a database that you query, do you write it into people's cookies? You have me very interested.
I'm just impatient and don't want to wait for you to put up your comments legend page [http://www.mezzoblue.com/comments/legend/].
The design is high contrast while the text (body content aside) is low contrast. I think this is the crux of the problem people are having with mezzoblue v4. I love the bold color contrast but it is hard to see the blue-on-blue and gray-on-gray links in the header, and the orange-on-orange H1 is similarly lost.
Right now you have three colors that all contrast strongly, blue, orange and black. My suggestions would be to use only two dominant colors and/or increase the contrast of the text.
It's looking great Dave, I'm very impressed. I'm not sure if I like it more or less then the last design, but the code is good. (Of course).
These colors remind me of that darned Mozilla site. ;-)
But seriously, the new design is looking good, Dave. When I first opened up the page for this article, I was shocked. I wondered where the lovely mezzoblue interface had gone. The page seemed bare. I still don't like the light blue header image. The old one was better in my opinion. But everything below the header is looking very nice.
Hmmm…. its not bad, on first impressions I thought it was rather unfinished but now I sit down and look at it and its not bad.
The navigation was impossible to find - maybe I just didn't look properly but its very hard to spot on a first quick glance (Nielsen would turn in his grave, which by the way, why is he not in it yet?! :P)
I think it'll take a while to grow on me but way to push the boat out a bit (About a foot and a half tops) and I can't wait to find the number of blogs which in the next 2 weeks will have a resemblance to this site.
Good, good redesign. I'm not saying I love it as much as Radar – you have a unique style which I love more than pixelly things – but it's still very good.
I just love comments highlighting. I have thought of it on several occasions, but I never did manage to jot it down or remember it when actually doing any of my sites.
I wish I had half the design skills you have. I've been visiting your site several times a day over the last couple of months while I've been diving headfirst into CSS (I've had a basic knowledge for a while now). You, More Eric Meyer, and A List Apart have been invaluable tools for me. Yet, as my CSS skills have grown nothing can really help my lack of creativity or general design ineptitude. I've mainly been using it to make minor usage and style improvements to my site (latest one is CSS drop-down menus).
My comments on 'Proton':
1. I'm currently using a widescreen notebook (1280 x 800 resolution) and there is a TON of whitespace. There's currently at least 2.5 inches of space on each site of the comments.
2. The site title (Mezzoblue) seems a little small up at the top. In 'Radar' it stood out, you definitely knew where you were.
Overall, I like the redesign but still prefer 'Radar'. I'm gonna go ahead and use 'Proton' though because I bet it'll grow on me.
Dave, I really like what you have done. The focus of the page is now much more comfortable. If you're reading, then you're reading and if you're enjoying the design, you're doing just that. "Radar" was a little too cluttered for my liking.
For some reason the new design reminds me of those UK BBC BiteSize ( http://www.bbc.co.uk/schools/gcsebitesize/ ) television adverts.
Just as a side note, what's with the rash of yellow centric designs? (you know who you are!)
You *did* mention that you'll be able to change the CSS stylesheet back to Radar, didn't you?
Wow, did a little research and come to find out, of all the "big names," only you and Doug Bowman of StopDesign fit in a 640x480 window without a horizontal scrollbar. Well done!
Good and bad.
I can't help but to largely echo some of the general character emerging form some of the comments.
Several of my fellow commenters (you may care to impose upon us a hierarchy; although I share Neil's distaste (he's your 71st commenter here), you are of course perfectly entitled to express your views towards your readers in this way - your site, after all; but we're all commenters nonetheless) have mentioned there initial impression that the site looks unfinished.
Trying to put a finger on why this is, I can at least point to the header area. You have a great eye for blues, you pick some fantastic hues, but this block seems a tad pointless, compounded by the tiny, meaningless type and faux buttons there - some kind of ruse?
The colours are nice colours. I'm sure they could work, combined. But combined in these great square slabs, they just don't, imho.
The navigation is a step back from Radar. Radar's navigation never struck me as particularly 'inviting'. This seems just as diffident. For users with slower connections, the delay in loading the background PNGs of the navigation elements on :hover is somewhat off-putting.
As many have already remarked, the Mezzoblue logo just doesn't have the appropriate size/ weight.
I too immediately thought "Simplebits!" at the sight of the yellow and black slabs of colour juxtaposed up there.
Again, I think that, combined well, the colours could really make for something knock-out. For example, I'd like to see these large blocks somehow broken up into something less harsh (as Andreas, comment 30, describes things; via the use of gradients, perhaps (Eric, comment 58)). In their current use however, I am honestly long-of-face in feeling that the colours help the site to look somewhat ad-hoc and graceless (particularly compared to the use of colour in Radar).
However, the content area of, erm, Proton, certainly feels less cluttered, the text more legible. Congratulations on your constraints upon the length of your text lines. Users of 800 x 600 screens will thank you for the liquid layout, too, where previously they possibly arched an eyebrow of consternation at having to scroll a bit to see in full your right-hand column-o'-links.
Hopefully this is a work in progress, and not a finished design.
After all those comments, it's hard to say whether this one will be read… I'll give it a go anyway.
My first, honest reaction…. "omgwtf!!!1"
Then I sized down my browser window to normal (I had it unusually large at the time), which is 800x600. A little bit better. Then I scrolled down such that the header was out of view. Fantastic.
Honestly, I think the header might need a little work. I'm not going to explain what I would do, because it wouldn't be appropriate, and it probably wouldn't fit your aims in the design anyway. I'll simply agree with some of the others that it seems odd. Also, the background for the box above the sidebar seems a little out of place. Meh.
The navigation widget is extremely cool. Big thumbs up on that one. I'm not to hot for the top-level font, but that's just taste I suppose. Also, the RSS description seems broken; the graphic thing on the bottom is located a few pixels off from the other descriptions, and the text "shadow" is brighter than the others.
The comments box looks awesome.
All of that said, the structural changes were well-executed, though I don't see the merit in having the comments on a different page. It might help the page load time for those who aren't interested in reading or leaving comments, but your readers who give feedback (your more valuable readers, perhaps) have to jump through a hoop to read what they're responding to as they respond to it.
Finally, as Andrei said, there are some obvious implications in the new comment highlighting mechanism. I'm sure this will be part of your followup.
Overall, I like some things about Photon, and dislike other things. I fear change, so I might stay with Radar for now ;).
Very nice site.
I especially like the content font-size/-color, very readable.
One suggestion: You might want to consider making it more obvious that it is mezzoblue.com (under Photon). I found myself looking for a site identifier.
Comments page stalls lags and reloads. "Reply Legend" is somewhat crap too.
It hurts my eyes. I like the "Reply Legend" though. Nice idea.
Like Dustan said above, I thought the page failed to load properly & the image became distorted somehow. I've got to say I share some of the already-articulated troubles: low contrast, small logo, &c. The design seems like it's being coy about the navigation, I'd say that's not such a good thing.
That said, you're the pro, and if it looks good to you, that's all that matters.
Also I've thought about the comment highlighting and personally I think regular vs semi-anonymous=good, but regular vs 'important voice'=elitist and rather off-putting. I mean, it's going to be hard to NOT scan the comments for What The Important Person Said, and that's a shame.
I'm sure I'll be repeating what others have said, but I guess that's a good way to see what has priority, no? ;-) Of course, I want to note that these are just my opinions, this is your personal blog and you can do whatever you want with it, yada yada…
1) The header image. It doesn't have any identity – it's just sort of this blueish thingie that looks like 95% of the desktops coming out of Devianart (abstract, super-fine detailing, but doesn't look like anything in particular). I like the Radar logo – once you saw that blobby ring thing, you KNEW you were on Mezzoblue.
2) The look is very reminiscent of Simplebits, and not just because of the colors (which are nice anyway) – But also because of the non-antialiased fonts in the header (the one that says Mezzoblue in the top left-hand corner is particularly jaggedy).
3) As Andrei mentioned, the HUGE array of text variations is really, really disconcerting. Honestly, I was totally lost the first time I looked at the site. If you pared it down to 2 styles for links and maybe 3 styles for body text, I think that would help tremendously.
I really like all of the neat, cheeky touches – Things like the drop-down menus and the comments coloring. The overall design though seems rather disjointed. I suppose I'd get used to it, but I might stick to radar for a while.
If anything, I believe this redesign and its subsequent critisizing (for the good or bad) illustrates at least one thing: Designs for web sites can be hit or miss, and redesigns even much more so. A day or so ago another website I frequent (ocremix.org) had a redesign, and it has had mixed reactions as well. The webmaster told of how he had gone through 6 complete designs before he got to one he was going to stick with. I myself have been doing the same thing with my site design, so I know that to get something you like is tough. And then you have to think about your audience as well!
I like it, personally. I think that perhaps some of the critisizims are justified, but fortunately you have the old style sheets to fall back on (unlike ocremix's webmaster).
As one could/would/should expect, you did yet another good job on designing a website. My thirst thought was "I'm gonna have to get used to this," but that lasted no longer than a few minutes. To me, that means it's both something new and as something that works… and I think that's a nice goal to be aiming for.
A little structural detail: when you click the "Continue Reading…" link on the home page, you're directed to the archived entry of which the URL ends with (in this case) '#000591' where it should actually be pointing to '#p000591'. By the way, since the rest of the URL is already unique, wouldn't a more generic term like 'more' be more preferable? Just a thought.
Again, good job. Keep it up. :)
not to question you're skills, but im so glad that i can swap sdtylsheets to the old version. :p
i did however like the use of the navagation- very bright-creative
When I first saw the new design, my reaction was also one of "whoa!" When you get so used to expecting to see a site in a certain way, suddenly seeing something completely different really surprises you. And it is a completely different design. Almost the opposite of your old one (the colors, the layout, etc).
Now, if you're counting opinions, count me in the camp of "like/don't like". I really like the new body layout (and the little icons and stuff in the right column, and the other new features), but I preferred the old masthead (as was said above because the brand was more prominent). But that's just my opinion. Either way, I like sites with multiple skins.
My question is specifically with regards to the "Reply Legend".
Dave: how do you work out who is an "important voice", and who is a regular poster? Obviously I'm not referring to the technical side of it. How are these decisions made?
I raise this question because of what I regard as a peculiar anomaly in your system: Joe Clark is not regarded as an important voice. Even if you didn't recommend his book on your site, I think we could still safely say he's fairly important to accessibility on the web.
Note that my question is actually intended to be less aggressive (if at all) than the words by which I put it to you. It's just a simple poser, nothing more.
By the way I think I like your design: it certainly brings something new to the increasingly "samey" world of web logs.
There is a basic design problem with Proton. In design class, I was taught to give the greatest visual impact to the most important part of a design. In this version of Proton, the greatest visual impact is given to the dark background texture behind "About this Entry" and "Older and Elsewhere". I think it should be given to the Mezzoblue title, which is squished into the top left corner almost like an afterthought.
Even though, the tabs are wicked nifty.
Just because 118 comments aren't enough, I thought I'd add one more :o] (and also to see whether I'm an "Important Voice", which I highly doubt)
Short and sweet: I like the content, not the header. Specifically, not the miniscule text elements in the background of the header.
You've gone for a nice, clean, blocky look for the rest of the site, but the header graphics detract from this minimalism and look a bit messy – a design clash.
I'm just posting to see what color I am … :)
I tell you what Dave, no matter what people in the previous 119 (and counting) comments are saying, if you can get 119 (and counting) people to say 119 (ok, enough already) things about something you are doing in your _spare time_ (wish you allowed xHTML :) then you're doing it right.
I can't add or subtract from all the things that have already been said design wise, so I won't try. The most encouraging thing I take away from all your hard work is that it is _really freaking hard_ to redesign on the fly.
'Proton' seems very far from being complete: readability is poor, clash between colors and images is prevalent, and in general, the design just doesn't seem as professional as 'Radar'.
That aside, I like the premise of the structural upgrades. Except for "Important Voice" (if that's its name?), which is elitist and horrible….until I am one.
In my comment above(#106), I mentioned that I thought "Simplebits!" upon seeing the "yellow and black slabs" up top.
Indeed, not black. Possibly this makes obvious the fact that I'm looking at this site using a PC. The monitor is calibrated (for what that's apparently worth). I do have to stare somewhat hard to see the leather-like texture.
Perhaps just me. On the other hand, as Andrei speculates, perhaps some of us are seeing something other than what you intended.
Anticipating the "not an important voice" markings…when the "other" David S. mentioned you redesigned, I came immediately…and had 3 immediate opinions (some mentioned before):
1. The mezzoblue logo is way too small, proportionally speaking; it would be a fine size if the blue header underneath it didn't take up that much real estate. (I understand why that blue header takes up that real estate though, nice job with the contact form).
2. The blue header is way too large (related to number one).
3. Did you assume that I was blind? The initial entries (index page) were *so* large (text-wise), I initially thought you'd redesigned for the visually impared. What was worse is that I went to resize the text, and no love! It wouldn't resize at all!
(on a design of a personal site (http://fm.dept-z.com) I'd gotten an awful lot of comments to that effect, and it kind of stuck with me…I redesigned it almost immediately, went the minimalist route)
When I went to the full post, the larger sized text made sense. But it seems like it should be different on the index page.
The other thing I noticed was that the float for the right column is borken when someone (cough Shaun cough) posts a comment with an unbreakable line in it…
As far as color schemes go, I've seen better and I've seen much, much worse. Still, it's nice to see redesigns happen :)
Keep it coming, I'm always interested!
I actually like the tiny logo … it's very … I dunno … elegant some how. Like you're not beating people over the head. I can see if someone has never been to this site before, they might spend .5 seconds longer looking for the logo than on the old site.
I could get all metaphysical and be like "the content is the most important thing and it should have the focus, not the brand name that's in the header …" but that's a bunch of hooey. It's small because it looks cool, and that's all there is to it. :)
I actually like the tiny logo … it's very … I dunno … elegant some how. Like you're not beating people over the head. I can see if someone has never been to this site before, they might spend .5 seconds longer looking for the logo than on the old site.
I could get all metaphysical and be like "the content is the most important thing and it should have the focus, not the brand name that's in the header …" but that's a bunch of hooey. It's small because it looks cool, and that's all there is to it. :)
When seeing a comment on how much whitespace there is betweeen the comments and other elements, I thought I would say something like… While running at 1400x1050 on a 15" notebook it looks just dandy.
I picked up on the comments and the legend after commenting #82 which is actually awesome. I've never really seen a system like this and found it very creative. One last thing… when trying to find just your homepage (being the currents) I got a little lost. I didn't even know the logo was up in the top left linking me to it for awhile.
Other than that, I'm a big fan of the new design as I mentioned before.
Spotted another bug (tounge is implied to be firmly in cheek here).
The comment numbers overlap the comment text. But I bet you weren't expecting to reach triple digits.
I'd love to have said I loved it, because I consider a lot of the work you do extremely good, but I can't on this occassion. This is all personal, ignore me freely, but as a fellow designer I really don't think the colours gel correctly, their doesn't seem to be much coherence.
Also the header doesn't seem related to the content, it seems aloof, and while we're on the header some elements move in IE6 and slightly on the mac with safari (that may be my eyesight!) when you roll over the moving tabs.
As many have said in places the text is too small, and the logo, your brand; is lost entirely in the new design. So for now I'll be switching back to Radar, maybe it's familiarity, but I think there's more to it than simply not being used to the design, I just don't think it's very good.
126 comments obviously is not enough, so here's another.
My first impression upon loading the page was 'whoah'. It didn't feel very comfortable, but at the same time I never found your old design comfortable either.
I don't really like the blue hearder block. It appears out of place, especially with the rest of the site looking somewhat minimalist, and this having the background.
The colours are nice – it might look like simpleBits, but then I've never gone there that I recall, so all I can do is tell you to stick with it because it's good.
The article excerpts on the front page look absolutely wrong in bold. It's a great introduction to the articles themselves, but on that page with everything in bold – yuck.
The more I've been scrolling down and reading the page, the more I like it. At 1152 x 864 it *feels* as if the webpage's horizontal proportions were designed just for me. The text is big enough to be easily read without strain and the line-lenghts are perfect for that as well. Much easier to read than the last design.
Apart from that: I think differeing the comments is nice, though the light grey ones look a little out of place. The comment box looks really nice, except the textarea doesn't fit in with the :focussing of the input elements.
Also, the contact form up the top doesn't seem to work very well. It's a bit 'flicky', and with the labels being hard to make out against the background, and not focussing on the input fields when clicked, the forms a little hard to use. Out of interest, why do you try to supply a form there?
126 comments obviously is not enough, so here's another.
My first impression upon loading the page was 'whoah'. It didn't feel very comfortable, but at the same time I never found your old design comfortable either.
I don't really like the blue hearder block. It appears out of place, especially with the rest of the site looking somewhat minimalist, and this having the background.
The colours are nice – it might look like simpleBits, but then I've never gone there that I recall, so all I can do is tell you to stick with it because it's good.
The article excerpts on the front page look absolutely wrong in bold. It's a great introduction to the articles themselves, but on that page with everything in bold – yuck.
The more I've been scrolling down and reading the page, the more I like it. At 1152 x 864 it *feels* as if the webpage's horizontal proportions were designed just for me. The text is big enough to be easily read without strain and the line-lenghts are perfect for that as well. Much easier to read than the last design.
Apart from that: I think differeing the comments is nice, though the light grey ones look a little out of place. The comment box looks really nice, except the textarea doesn't fit in with the :focussing of the input elements.
Also, the contact form up the top doesn't seem to work very well. It's a bit 'flicky', and with the labels being hard to make out against the background, and not focussing on the input fields when clicked, the forms a little hard to use. Out of interest, why do you try to supply a form there?
Adding something on a purely technical basis, the page is *extremely* slow to render on internet explorer 6, P4-1500Mhz, 512mb RAM 64mb Graphics Card on 512k ADSL. The header loads fine although it's sometimes a little slow to load the rollovers.
But the sidebar takes an age to render, internet explorer get's that "shocked white" toolbar that's normally a sign it's either about to fall over or it's doing some serious number crunching.
It's less slow on the Mac, G4 1.5, 512mb Ram on the same broadband connection, but I think that's simply down to Safari being much better at rendering style sheets than internet explorer.
Sorry for the double-post – when I hit the post button I was taken to a page saying
"Thanks for commenting. Make sure to hit �post� � you�re still only on the preview page."
So I tried to hit post again. I only just now noticed my comments there.
I don't know about this new look, Dave. Your best recent work looks to be the Blogger stuff. I would have run this new design by some users before launching it on the world.
Like it or not, mezzoblue is no longer a personal site; it's a professional one. If you think like a client, or like a customer, does the new design still hold up? Honestly, I feel less likely to "buy" your design advice based on the new design. This is the point in your professional development when you may find that all the awful, safe, cliched stuff that clients ask you for ("we want it clean, but not too corporate, you know, make it cool….but still looking reliable like a bank!") turns out to be your new requirements too…
Dave, you do great work and I read your site regularly. I still remember the first time I saw Mezzoblue's Radar design: incredible, and it has aged very well. The new design is cool, too. Except the non-anti-aliased text in the header is driving me nuts, as much as such things can drive anyone nuts.
Fixes for Opera 7.50 (I have no idea what affect these might have for other browsers as I can't test in them as easily as I can in Opera):
#siteInfo li {width:119px;}
#sec2 li { width:72px; }
#pageHeader h2 { position:absolute; top:0;}
It would be nice to finally have mezzoblue fully 'Opera-friendly'!
Firstly, shocked the hell out of me when I first loaded the site. I honestly thought I'd picked up some sort of spyware that had redirected me to somewhere else initially!
On the site itself, I definately don't like that your logo is so small and tucked away up there. I like the zengarden/blue spark/modernalus images, they look nice.
I don't like your middle header image at all. It isn't part of anything in my opinion and is really just taking up space. It also comes across as very busy, with all the little lines and dashes in it.
I like your about/weblog/contact tabs up the top, however I feel you need to draw more attention to them as a navigational aid; as initially I didn't see them until I went looking for them. As others have said, your contact tab doesn't work very well in Mozilla 1.7b, sometimes it says, others it just vanishes. Also, the text colour in your weblog->rss section is hard to read compared to the other sections, not enough contrast against the background (why is it different by the way?).
I'm also not liking the desing when my window is maximised either. At 1280, you get two large white columns down either side of the text. It does look nice/normal when I use an unmaximised window though. Have you thought about making replies liquid as well to take up the width of the content area (bar some padding/margin) ?
Other than those few little things though, and most of them really are just picky little things (after all, we are being critical of the site to make it as flash as your last!), I quite like it.
What do they say, a change is as good as a holiday?
I loved 'Radar'. I positively hate 'Proton'. Sorry :-(
(BTW, why does the comment preview page still show the old design? Stale cache on my side?)
honestly, I liked the old one, radar, better. It seemed a lot more clean, and "finished". The current one (proton) seems highly unfinished and unpolished - but it also looks like you are still working on it.
However, I'm glad that you will be skinning your blog. Skinning is fun, although some would consider it superfluous.
Your css selector (proton/radar) works nicely. Why, though, not to let style-switcher-enabled-browser users to use the browser built-in style switcher?
Congrats on getting the new design out, I know it can be a brute of a thing to accomplish. From a cursory glance, this is a strong, well-considered design; I look forward to discover its depth over time. (The preview page for the comments, though is still under the Radar design.)
Well, I'm not gonna lie to you… It's gonna take a while to get used to it.
I do like the how you set up the main post pages. The new "summary" at the top of the post is a nice touch.
My only real concern is the tab dropdowns. They're a bit confusing and the link descriptions are really hard to read at 1600x1200 :)
Looking forward to see where the site goes from here.
It's surely hard top the previous design but change is good. Congrats on the new design. The contact form is a bit funky in Safari. It doesn't stay sometimes.
I find the logo "mezzoblue" kind of "lost" alone there in the top. I like the deisgn but the header is confusing - too smal and without contrast.
Nevertheless the CSS techniques used are really nice.
I think you just made it look more like Doug's Stopdesign site for an easier April Fool's joke next year…
1) I personally prefer the old Radar look, just because Proton seems a very much under-construction style to me, and I'm not too fond of that kind.
2) The Contact quick-form doesn't stay in my Mozilla 1.7b, the moment I hover to the form fields (any) the hover disappears.
3) I like what you did with the input type="text" fields, and the focus stuff and all that, but a field is either unstyled or styled in `white on black` (which is my Windows color scheme) and it feels really out of place, in that.
4) in Proton Large Fonts, the menu hovers don't work at all. no pop-ups whatsoever :/
5) Good job on the major structural rewrite / job thing. The new unstyled version has a lot of spunk. Pity I don't personally like the new styled Proton version, but hey, I love that little "Radar - small fonts" button. :)
Not too shabby, Dave. It does feel a little looser still than the previous version but I find it much easier to read. Not that the legibility of Radar is in question but the white background feels less oppressive than the blue and red(-ish orange? Never can tell, monitor-to-monitor).
As for running PHP in CGI, I don't think it's possible. This might help though: http://www.shauninman.com/mentary/past/mt_search_and_php_includes.php
The approach I outline just turns that idea on it's head and includes the rendered CGI output into a PHP file.
Congratulations on the new design, Dave.
Personally, I'm not too sure about the super-big text for your lead paragraph. Since this is all that people see on the homepage, the big, bold text is a bit over the top. Also, I'm not to sure I like the comments being on a different page than the entry, but that's probably just me.
I'm sure you're going to get a mixed reaction on this one, though no one should complain to much - after all, they can still use the old design, if they like that better. As for me, I'll be using this one. As ray said, we'll get used to it.
I like the new design, the radar design is nice because one became used to it. But proton is more 'spacey'. I really like the menu effect for the top right navigation, very nice done.
I did notice a bug with the comment form. I'm using Firfefox on Apple and the dropdown list for the input fields autofill apears on top of the page instead of right beneat the input field.
Wow, I really like the new design. It's a lot of fun to see the sites I frequent change, because all of a sudden you've got another way of looking at things.
Someone mentioned, in Safari if you slowly drag the cursor from the contact hover thing down to the actual contact field it will frustratingly disappear, the only way to get it to work is to move the cursor really fast.
Heh, neat CMYK horizontal bar.
In all honesty, I really dig the new look. It seems like you "took a chance" and I feel that current web design is missing some of that at times. There is much here to be digested. Very thought-provoking.
This does need some getting used too. I see some nice touches, but I agree the mezzoblue is a bit lost there at the top. I'd be interested in your reasoning behind this design…
My first reaction to the new design? Where's the blue!? Doesn't seem to be enough to justify the domain name, or maybe I've just been looking at 'Radar' for too long, and gotten so used to it.
I really like the new rollovers for 'zen garden', 'spark' etc, and the drop downs are cool, though the headings for 'about, 'weblog', 'contact' do appear quite difficult to see, being so light and all. I think this might be an issue for a few lesser sighted folk. I do like the little pics you have inside those toggled divs.
I think my main point of dissent is in the combination of those off-yellow/cream colors ( or whatever they are) - they just don't seem too happily married ( on a PC anyways, maybe they look nicer on a Mac).
As with all redesigns, it takes time to grow, and I'm sure it's still a work in progress. In any case, it's your playground.
I knew it wasn't just a structural tidyup ;)
Liking it. Especially the dropdown menus. Not too sure about the header image though - doesn't seem to have on thing that the eye is drawn towards.
Apart from that, good job - it's definitely an improvement.
I agree with the majority of those posting comments. This design is nice, but not nearly as "clean" as Radar. However, I do like the bold statement the page makes especially with the move away from a small default font size.
I like the new designs, but I much prefer the previous one. Congratulation on the new design.. look forward to see more from this site.
Looks good Dave. I think most will just have to get used to the new look.
One thing I have noticed on Firefox/Win2K is that the menu in the top right (about, weblog, contact) has a 1px dark blue line that extends to the left edge of the window (and i assume past the edge).
Looks like the text-indent method you are using on the nav items is causing it. It doesn't show up in IE6/Win.
If what I'm seeing now is an example of "proton", then I love it!
Haha, my eyes will need some time to adjust to Proton's header. The comment box does look swell. (^_^)
Nice. I like Proton. I feel like I have more breathing room. That contact form in the nav is sick! (In a good way). No problems with it in Safari.
I love the new look.
To be honest, I never really liked "Radar." It seemed much too cluttered for my tastes, and I found that I actually preferred reading your posts in my RSS reader. "Proton," on the other hand, is nice and airy…plenty of room to breathe. I'm not wild about a few of the new color choices, but there's a certain balance about it that I really like. Everything just seems to be better-proportioned.
Definitely gets my thumbs-up.
I like the new color scheme, and I find the content and comments areas more readable than before.
However, I find the header/top navigation area almost unusable. I keep straining my eyes trying to "read" the little symbols that are scattered through the header, and I spend a long time searching for the actual links, which don't stand out from the decorative/background images.
Minor note: How about adding a "textarea:focus" rule to proton.css? Changing the font color would probably be distracting, but I think it would be good to use the same border highlight as the "input:focus" rule.
I like the colors. The only issue I have noticed is the navigation for the zen garden etc. fonts can be a little small for some monitors.
I think it's the colors. Did you choose them from a photo? :)
I'm just not sure about the desaturated creamy thing against the blue. Or the pinkish links. And the white main content area seems a bit empty to me at a high screen resolution. But, I shouldn't talk, since I haven't gone to a liquid layout for anything yet. It's tough to do, and overall that aspect of the site works very well.
I like the new features that I've seen so far. I think it's just an overall color impression thing that isn't working for me. (though it starts to improve if I get down really low and look up at my laptop screen). I like the small logo, though it being the only non-anti-aliased thing on the entire page (with mac font rendering) it looks a little strange.
I don't mean to seem negative - the blue strip portion at the top is gorgeous (and the menus are awesome) - but I think the design as a whole is a little less than complete-looking and the colors and contrasts of the main page area could be improved.
Wow, 20 minutes ago there were no comments and I was sorely tempted to get in a "First Post!" but I resisted that urge and came back when I had something to say and find that others have said it for me. So here's my me-too post.
I agree that it looks like a work in progress, but then again, it *is* a work in progress. I'm sure things will continue to be tweaked and modified and we'll all grow to recognize and appreciate Proton as much as the soothing and familiar Radar.
I'm having similar hover issues on the contact tab in Mozilla (1.6/Win32), but it seems to come and go.
I also agree about the title. The little mezzoblue is kinda lost up there, and there's this large empty space under it that just looks like a logo should go there. Dave, I hope you plan on a case-study article explaining the design process and how you made some of your decisions.
And one more thing: will there be some sort of key explaining the way comments are displayed? Some are black, some are gray and go black on hover, and Shaun's comment is in an orange box… I don't get it.
Very nice upgrade i think. The fresh light look, together with the cool menu, and not the old Trebuchet MS anymore :O)
Oh I see, folks with websites are black, those without are gray. Still not sure why Shaun is orange…
I have to say that I find the new design quite irritating.
The header bar especially because the fine dots and lines in it seem to be tiny pieces of text and I found myself trying to decipher it.
The nav in the top right corner is kind of lost (I only noticed it later) as is the logo in the top left corner.
In Opera 7.5 the top right nav is partly outside the screen to the left.
And the colours… well, not my color combination, I'm afraid.
I do like the innovative use of popups and the summary at the top of the sidebar.
All in all, it's new and unseen-before but to me radar felt "round and cool (in the temperature sense)" whereas proton feels quite harsh and lifeless.
Based on the CSS, it looks like the highlighted replies like Shaun's are from recognized "experts," and the gray replies are "anonymous" (no e-mail address or URL).
Well now I have a goal to strive for. I want to be a recognized expert and get an orange box on mezzoblue. This will be the yardstick by which future gurus are measured. I can see it being added to resumes and bios: "received orange comment box on mezzoblue/proton."
Wow, that's quite a departure. I can't say I like it better, but it's interesting for sure and seems to have quite a bit going on in the background. Maybe too much?? It seems a bit busy up top…
Anyway, it might take some getting used to, but it's nice to see something different in any case.
I do think I like the "content" portion a bit more, it's seems a bit easier to read, but aside from that…I'm not sure. But it's only been a few minutes. I guess any change can be a bit rough on a user. It'll take a bit.
Even if I can't quite grow to like it more, I can always stick with "Radar"….
One question. What is the reasoning behind seperating the content from the comments?
I'm not sure if I'm a typical user by any means, but I really like to refer back to the actual post a bit when I comment. Now I've got open a new tab.
Well, at least I can have one with "portion" and the other with "radar" for comparison.
Congrats on getting it up!
Dave, if you ever do figure out how to get the cgi files to run PHP, please let me know. I have been wondering this myself. I use PHP includes for my navigation system, and on the comment preview pages, I have to simply copy the module over in the source every time I update, annoying at the least.
It is so funny that you mentioned that as I was just dealing with that issue.
Also, I got in touch with your at BC. I eagerly await your reply. I can tell you are mass busy.
About the design, I think it looks pretty good. I am not sure which one I prefer yet as I have not had time to discover this one yet.
Thank you!
Sorry to post again. I also just have one question.
Can you provide us some information on how some of the comments are grayed out with a black hover, some are just plain black and then some are highlighted in yellow?
Well, I must say this version is much better, however, the header part is somehow confusing - I feel like something is missing up there. But overall - great changes! It's much easier to read on the white background.
Comment highlighting is now explained in the 'Reply Legend' on the right-hand side. I meant to launch with that, I just forgot to style it in Radar. It's wonderful what display: none; will get you.
Thanks for the feedback all, keep it coming. Suffice it to say I've considered most (not all, bonus points to those who are finding the contact form unwieldy) of these points already in one form or another. Expect a follow-up to explain my thinking.
Congrats on the new design! I definitely prefer this one over the old one. I always found Radar a bit cramped and I was never much of a fan of all the blue and orange. So Protons spaciousness and colour scheme sits really well with me.
The only thing I'm a bit hesitant about is the header image. But on the whole: Proton > Radar.
Minor quibble tough: the top navigation appears quite broken in Opera 7.5 as andreas has already pointed out. But I'm sure it'll get fixed soon enough.
Great job!
I like it cos it has yellow. : )
But really, the text is much easier to read now, and I like that a ton. I also like the texture use in the "about this entry" box. Nice touch.
I'm with Keith on the separating content from comments. This is a tad bit unconventional. Reasons?
And, at 1920x1200 (not that I run Safari that large), the pixel graphics tend to be _very_ small when the liquid layout expands. That's minor though when compared with the major improvements.
Overall, the design is big step forward. Well done.
Well, my first reaction is, "Not sure I like this." Just to be honest.
To be constructive, I think it has to do with two very distinct things, and a third somewhat related thing. Here goes:
1) Not wild about the colors. There's an abruptness to them that doesn't feel right. Now, they could grow on me, but when I first look at them, my reaction is that there's too much, and it's all too bright. (It's also very hard to get that shade of blue and that shade of cream color correct on monitors that are not calibrated, or calibrated differently than your own. so we are probably seeing something different than what you might be intending here.)
2) Not wild about the type. I count about ten plus variations on type choices (counted as combos of color, weight, face, and size.) That is just seems to be too much, imho. It creates a cluttered effect, making it hard to read, again in imho.
Now, maybe you decided to move away from the soft, rounded, center column feel that is so prominent in most web design blogs these days. Being someone whose site is also a bit on the high-contrast, attempt to be old-school type oriented, buck the current design trend look as well, I can relate if that is indeed the case.
But this design seems to lose readability, while potentially going a bit far on the color schematic.
3) The side issue is the liquid layout. Because of the myriad of colors and type used, on my screen, the liquid effect pulls everything so far apart that the cumulative effect is too high contrast (lots of bright white with patches of bright blue and a wash of bright cream colors) mixed with hard to scan type. This layout only seems to work well when I make my window narrower, bring things closer together. But I rarely resize my windows, so…
Things I do like are the nested divs/tab navigation stuff. Very well done. (Although as mentioned, they are kind of hidden at the top) I also like the icon treatment for the Zen Garden, et al. As for your logo, I would think you would want to keep the brand more prominent, not less so. Seems like a strange choice to me.
Just my humble opinion. Take it or leave it. It's an interesting approach, and maybe you can log the iterative changes so we can all see your thinking as you make changes and tweak the design iteratively. (Something I wish I had done on DxF as I got to the stage it is at today.)
I like the new design more than the old becouse of the fluid design and the readable font sizes :) But sorry I don't like the header.
Interesting way you've redesigned it. I must say legibility of body text is a lot better (mainly a font-size issue though), but I must say that at first glance the menu at the top is hard to read. But is also true that for radar – and of course I'm not talking for the whole world, but for me only.
Navigation schemes I still find the most difficult thing to integrate into designs while keeping them as clear as possible, so I can appreciate the nested block trick you have pulled off. I'm not sure it is the best solution to handle navigation, but if no one experiments we would not progress.
Colourwise I have to admit I like the blue scheme better, but than again I like blue as a colour most and I've always been a bit envious of the beautiful shades you use on radar.
I bet he's using XFN to determine who are the important voices. At least the ones I have noticed are also on his blogroll…
Hi Dave
I like the new design. It's different and fresh…we all need this sometimes. My only comments might be that the MezzoBlue mark in the top left corner is small and not noticeable. This is a brand worth promoting. Also, I found the menu text colors hard to read against the colored background. Otherwise I like it.
The Zen Garden should be promoted more…you are known worldwide for this and I can't say enough about it. Its very inspiring and worth promoting more.
The blue / orange complementary colors are a nice blend.
Again, change is good and giving people the choice of Proton over Radar is nice and addresses the needs of the viewer.
Take care and nice to see your sites dynamic nature…no one can say you don't react to time and space!
I actually did not see the menu there *at all* until I read one of the comments that mentioned it. It is pretty hidden - not enough contrast in my estimation…
I also prefer the comments on the same page as the entry.
Overall, Proton feels good and clean, but it doesn't have quite the same, "Compared to this guy, I don't even know the definition of 'design'…" type of feel. Then again, maybe I'm so disconnected from design that it does have that type of feel and I just don't know it.
Anyway, I like it. It just doesn't blow my socks of. There is room for improvement, I guess. =) As always, keep up the good work.
On posting, I was sent back to the blog post rather than the comments page. Didn't make sense to me and I was initially confused.
As for the new design - I kind of like it, although it gives the vibe of an online magazine (like Digital Web, or Boxes and Arrows) rather than a personal site/blog. It will be interesting to see how it evolves…
Wow. Very gutsy, very fun. There are a lot of elements that I like. I think it will take awhile to grow on me though. Right now it just feels a little out of control. Radar felt like a tight, cohesive design. This feels all over the place.
I like the various treatments to the replies. The semi-anonymous one annoys me because when you rollover the text it changes its shade of grey.
So I like that you're going all crazy-like, but my word, it just feels like it needs some consistency. But hey, if that's the idea, then cool.
Hmm, well - the first thing that struck me is that it looks - unfinished. Particularly the header. The gray area with the site style selection tools is the thing that really throws me. It seems as though it's "showing through" and not intended. The gray doesn't seem to fit - particularly with the textured box in the upper right.
I also had a hard time with the design elements in the blue part of the header - I keep trying to read them but I don't think they are meant to be read. It looks like mistaken text of some sort. And the menu up in the right is hard to use.
In fact, your site in now difficult to navigate and use, where before it was quite easy and intuitive.
I honestly thought when I stumbled in and first started reading you weren't finished yet. Then when I read the full post I realized you were!
It sounds like the changes underneath the hood will be nice. But I for one agree the old one is far far better. But I understand completely the need to redesign and try new things. Just consider my worthless opinion one of many ;)
It would be interesting to track which design people ultimately prefer by tracking how many switch back to the old one. I like the look of the old design better but this one seems to have some interesting features I'd like to see in action. Obviously you've put a lot of thought into this. I'll stick to Proton for now and see how it pans out.
Have to agree with others re. the top section and the logo, looks very unfinished in Safari – I actually reloaded the page twice becaue I thought it hadn't loaded properly. But there we are…
One bit I think is perfectly wonderful is the highlighting of comments, giving different people more emphasis. I'm very annoyed I didn't think of that since it'd fit in realy well with something I have planned.
I think the redesign is worth it for that feature alone.
Not that my opinion matters or anything, but I have to say I don't like it. Sorry. :x
I don't like the liquid layout. It feels too spaced out on my 1280x1024 display.
I don't like the top graphic. The "mezzoblue" is so small, it's very easy to overlook. The graphic itself just looks busy with lots of small lines and dots going on.
I feel like it uses too many different colors, but I do like the texture that looks like leather.
And I second Keith. I don't like not being able to see the article I'm commenting on while I'm commenting.
To make this a little less negative, I do like the colored comments. :)
Also… Using the XFN (if you arE) in this manner is very interesting… I just caught why some people are orange, some normal and some gray.
This approach to commenting has pretty big implications, some of which I'm comfortable with and some I'm not so sure of yet. Is this your idea, or did you see it elsewhere? I haven't seen it done elsewhere yet.
I think a blog entry on the implications of this commenting appraoch are warranted, so as not to distract the goal of the feedback you get form this entry.
The thing I like best is the slight drop shadow on the right yellow column. I dislike the header the most for the same reasons as everyone else has mentioned.
I like the design of the comments, but… Maybe theres a semantics problem with the "important voice" idea… Granted, while your blogroll contains all important designers, the colors seem to alienate everyone else. I'm going to be tempted to only read the yellow and blue boxes… I would suggest giving us a grey box at least, maybe??
Comment highlighting… I guess this means I don't have to prefix my name with "The other" anymore.
The new design…. I don't know… I guess it is interesting. Not a huge fan of variable-width content areas (unless they vary by em's).
Who's going to be the first to register mezzoyellow.com?
Hmmmmmmm, still getting used to it. I think its because I am so used to the blue color.
My one gripe has to do with the links on the right. For some reason, they just seem closer together, so its harder to decipher each individual link.
I really like this ADD COMMENT box I am in right now. Pretty nifty.
Why Do some comments have a special orange box around them?
Also, the new dropdowns in the upper right is a pretty cool effect, but was kinda slow on the loading for me. However, in defense of your design, new things have to be tried. you have to take a risk and you did. I thought the comment box WITHIN the dropdown was also pretty cool.
Overall, good job. I will be bouncing between them for now on :)
Who's going to be the first to register mezzoyellow.com?
At the risk of sounding like a troll, the color scheme reminds me a bit too much of SimpleBits once I'm off the header.
That said, I do like the reorganization, and unstyled it seems very solid (good use of skip links… I've never really seen such a variety of options before). The nav is excellent, although I'm entirely unclear on what, exactly, the 'new tab treatement' is.
On my iBook LCD, I don't really have a problem with the header itself, but the chunk below it is awkward. The leathery texture above the sidebar really feels out of place. I know for a fact I'm being a hypocrite by saying this, but some gradients would help alleviate the slightly flat and textureless feel.
I don't think Comment Highlighting is a good idea.
1) Dave - OK, I think this one is a good idea.
2) Important Voice - I get what you are saying here, these people are particularly important to you. But what does your average reader care? It might be nice if his or her importance was "entry-specific" (e.g. if Albert Einstein commented on a post about physics he would be considered "important."). However, if Andrei posts on an entry about some vacation of yours - why is his comment any more important than mine? I might live in the area you vacationed, so my comment might be much more relevant.
3) Regular Comment (read: Un-important voice) - I think you are alienating some of your readers here.
4) Semi-anonymous - I'm not sure if this means no email provided, or no url provided. If it means no url, I don't like it. Just because I don't have a site I'm semi-anonymous? Doesn't make sense too me.
I think the technique you use to get these results is forward thinking and smart, but I don't think this is the best implementation for it. I can see something like a little "friend" icon next to your buddy's comments, but I think the distinctions as they stand are way too strong (strong orange vs. super-light grey).
Nice. I would rather see a Zeldman/ALA style switcher, though.
I like it a lot. I like radar too but I think this is easier on the eye and I like the way you pick out special comments. My only quibble would be that I think the "mezzoblue" title right at the top is a little small. I wouldn't have it too much bigger but I think I would nearly fill the depth of the white top bar. It is the site title after all.
Dave, your website looks beautiful. But then again, I wasn't surprised.
I love the new design. It puts the content exactly where it belongs, right in someone's face so they can see exactly the point you're trying to get across.
Hey Dave,
Congrats on the new design! Not sure I like the layout itself, but looks like you've put a lot of thought into the backend - very nice. Can't wait to view source.
(The commenting colors thing is VERY cool!)
As a suggestion, why not widen up the input boxes for the comment box here? (name, e-mail etc.) An easy usability bonus, as you do have the space. My (too-long) url gets lost in that little box!
Wowy. I feel like having some ice cream! The color pallette isn't bad at all, but I miss a larger logo. It took me a while to even see your logo bar. Its the same size as my tab bar in Firefox and its just completed camouflaged. I am all about experimentation though and applaud your efforts!
I like it. When I first saw the site, I was kind of upset, but even as I settle down and start reading content, I'm finding the text more readable, and the design is every bit as sophisticated (in fact, more sophisticated), and rich, but without any sense of excessive detail or polish.
So, good job. I'm looking forward to hearing more about your process and any special features.
Congratulations on the launch of this new design of mezzoblue. I really like the new colors, though personally I would have used less different ones. Of course, one of the characteristic elements of "Radar" was that the color scheme was simple and clean by sticking to red and blue. That said it seems to fit and work nicely.
The decision to go with a liquid design is interesting and I think you succeeded in avoiding the line lenght issue. Speaking of readability, the content area is definitively an improvement (although I can not really say I didn't like the previous version, but this version seems easier to read.) I'll have to agree with some others in this thread about having the comments on a seperate page (not very intuitive, in my opinion.)
Honestly I think it's great you've launched this design. It's different and I think it's worth praise to throw it to the audience like that. Even better — people can load an alternative stylesheet if they prefer the looks of the old version. But I'm not going back. Oh, and this commenting system is interesting. I feel it's going to be the talk of the town.
I think it looks great Dave. Sure it's still under refinement, but Proton looks a little simpler (a good thing, imo) while at the same time you've added elegance (without the stinky precious).
I have to agree that the mezzoblue logo is a bit hidden up there, I actually didn't even notice it until I read that comment
[ http://www.mezzoblue.com/archives/2004/05/24/mezzoblue_v4/comments/#c005096 ]
What's up with some of the comment entries having the hover over effect (light gray text to black text on hover) and other entries being plain (no hover effects), and yet other entries get the full fancy decoration (without hover effects)… as others have also questioned?
Scratch that, I'll leave up there for posterity but I finally noticed the reply legend in the sidebar. Maybe the reply legend should be duplicated down here in form area?
All-in-all, great work. Then again, I'd expect nothing less from the great Zen master :)
Hey Dave, nice redesign. Though, like others, I found it pretty jarring at first… quite a departure. I think the first thing I noticed was the large bold font on the home page, I am not sure if that is how you intended it to be (may be a cross-platform issue).
Other than that. Keith makes some good points about the header being a bit busy. Kind of takes me back to the old super tiny type with transformer-esk design of the late '90s. Maybe that is what you wanted.
I think my biggest concern is the whole "who is an important comment poster" thing. While I can see the value in being able to scan the comments for "web celebrities" I really feel this is kind of disrespectful to your "average" readers. I know you didn't mean for it to be that way, but it almost comes across like your saying "your comments are not important, but this guy's comments are" … just something to think about.
I am curious as to the more technical details about the redesign. For example, things like how you came up with the color scheme (I assume there is more of a story here?), why you decided to have the three links in the top left of the page going to other sites (I assume there was some reasoning behind that placement). I would love to see a detailed technical article on the process you went through for the redesign… assuming you have time.. right?
I have to second what some have said about the small logo but other than that I think it's a nice design. Like anything else it will take some getting used to.
As foar as the comment highlighting goes, I like it, it's innovative. I can see where some would have a problem with the implications of it but there's no harm in trying.
Nice work!
Proton feels less cramped than Radar, but I'm unsure about the colour combinations.
I don't really get the leathery 'About this entry.' part either.
I guess it may grow on me, I was fond of Radar however and I thought it had odd colours when I first saw it.
I do find the elitist comment colour coding rather distasteful. Not a good idea at all I feel.
I like it.
Colours - yes, nothing more to be said there ;).
The different styling of replies is a nice touch (I agree with the comment seth makes, though), as is the use of :hover for the (very busy looking) header information, although the contact form looks a bit flaky at the time of writing.
The links on the right of the site's front page still look very cramped to me (with my 14px minimum font-size preference set, using the Proton Small Fonts, stylesheet, at least), arranged as they are, stacked on top of eachother and lowercase.
- Nice.
- Yellow & black associated is a rough couple, I'm not sure I like it so much.
- Header graphic is overwhelming, logo too small, hard to find.
I like the new design. I liked it right away. Just a matter of personal taste: I never really cared for the blue-on-blue-on-blue before. Too low contrast for my taste. Like some of the other commenters here, I do think the header treatment is a little weak. The tiny logo is overwhelmed by the blue band with little lines, and that band doesn't have any inherent meaning. There's an opportunity to invest the design with meaning by changing what looks like super-tiny type into legible words. But maybe you're trying to avoid that. Your site, your prerogative.
looks a bit unfinished to me…it has some nice touches here and there, but nothing that seems to hold the whole thing together. nice change, nonetheless…
Wow–quite a change! I do like this one, although I'm not sure if I like it better, but I'm sure you'll be doing minor tweaks here and there. I like the "modern" edge but I'm not fond of all the small marks here and there of the header. I also think the texture behind "About this Entry" looks odd.
But other than that, congrats, I'm sure this took quite a bit of work!
Congrats, Dave!
Like many others, I think this design will take some getting used to, but I do absolutely love the "content" portion. The site is so much more readable and I love the styling and information architecture of the entries and comments.
Way to go!
Dave, congratulations. I quite like the new design, and I'll be interested to see how you settle into it in coming weeks.
Just like a lot of others I think the header elements are wacked. I really don't wanna be negative because I have looked to your work for inspiration often, but this seems ad-hoc at best.
Design is very subjective tho (that has always been my excuse at least).
Sheesh - this is why I never leave comments anymore! Reading through 141 comments is so intimidating! So I'm just going to have to leave my 2-penneth without checking everyone else's first.
My first reaction - didn't like it. Looked too gappy, and lacked focus at the top. Looked a little unfinished.
Second reaction - Way cool drop downs, if a little hard to read the text.
Third reaction - hey, this is easier to read! Less claustrophobic. Its growing on me.
Its hard to release your baby onto the world and then have people tell what they really think about it. Your a brave man to leave comments open on this entry, but more power to you for doing it.
I also think that at the end of the day you've got to say to yourself "Stuff 'em, its my site, I'll do what I like!"
I can see what you're doing with the design but it would be interesting to follow how it progresses from here. I imagine you'll be making a load of changes before you're completely satisfied with the result. I remember Zeldman's old design (the one he had for a few years constantly) he then changed to something radically different and has been changing designs frequently ever-since. I can see this happening here.
Obviously the design is only a part of what you've been doing and im sure under the hood there's some pretty amazing stuff going on.
I agree with what others have said regarding the logo looking lost and the main body text looking much better on white. I'm not so convinced about the nav as it seems a little hidden and lost. But I do really admire you striking out with a really postmodern and seemingly-reckless design. The fact that you haven't gone with fixed width and drop shadows (new blogger, simplebits redesign etc) makes for something fresh and interesting that actually really appeals to me.
This clearly looks like a Dan Cenderholm site.
Not like the one of Dave Shea.
Oh, I love the dropdowns, and the layout and colour schemes are just lovely.
Not a fan of the tiny logo; it's almost like an afterthought. I actually sat there looking at that big blue masthead for awhile waiting for a logo or something to load.
I gots me an opinion about the colourcoding too, but that's best left on the appropriate entry.
Whilst I like in principle some of the CSS enhancements, I think overall you've made a mistake there. The header area is far from complete - you seem to have thrown away all of your 'branding' for the sake of what? Some nifty menus? That seems to smack of a poor usability decision to me.
Also, on my system, Internet Explorer goes unresponsive for about 10 seconds just as the page loads. Are you doing any DOM processing on load or something? This really sucks most of all.
I'm just glad that 'radar' is still there and the change is sticky across sessions, or you might well have just been taken of the Christmas list, which would be a real shame. Of course there's always RSS.
This is weird - as nobody else has even mentioned it, it can't just be me, can it?
I'm seeing the 'About This Entry' yellow sidebar pushed down below all the comments (i.e. a width issue) - IE6/Win.
Hi Folks,
my first thought was, that my browser crasht the new design so I changed to IE 6.0.
For me the "about" "weblog" and "contact" has to less kontrast. Its hard to see.
I think your design is important but your (brilliant) content is the reason, why users come.
So we get used to it, or switch to the old one.
I like the new textdesign (the white box). It gives the text more space. :-)
Just my 2 Cents
I've added the CSS mentioned before to my user.css, and now things look fine in Opera 7.5. And it doesn't break 7.23, which does put the buttons in the expected place, but doesn't show the dropdown effects.
With Firefox the dropdowns, especially the 'comment' form, was a bit flaky.
Two risky decisions I admire: putting entry metadata on the sidebar, and placing an excerpt (summary) in larger type at the top of each entry. Bravo. Those are innovations worth propogating, and things I don't remember seeing elsewhere.
Wow, that's what I call a redesign.
sorry, but the previous design was far superior to this one. although the color scheme is quite refreshing, the layout and graphics looks like something that tries desperately but fails to be minimalistic. the white border all around the design seem like a margin error. furthermore, i was never a fan of pop-out navigations, even ones that utilize the principles of 'MOSe.' this design will take some getting used to.
Just a small note, but if I load this comments page of Mezzoblue in my IE6 now, it crashes IE6. Can't find a way to get it to load without crashing…
Something to do with the massive size of the comments listing, perhaps? Anyone else an idea on why this crashes?
Mezzoblue.com itself loads, albeit with unusual speed hiccups.
As a 1280x1024 desktop user (occasionally switching into 1600x1200 for development), I prefer the more spacious feel of Proton. It's all psychological of course, seeing as Radar spaced things out in pretty much the same way, but Proton's new colour scheme seems more finely tuned to the aesthetics of the layout.
If I have just one reservation, it's that the headers at the top of the page look a bit "unfinished". I was waiting for my browser to render something in that big expanse of blue, but nothing materialised. As it stands, the white/blue/grey/yellow strips take up one third of my browser window. On screens of a resolution of 1024x768 and lower, they take up an awful lot of screen real estate and give a cramped feel.
Proton is definitely a step in the right direction though.
This is Funny. Don't know if its an accident or intentional but stopdesign is looking a bit different itself. Great minds think alike, I guess.
I loved this redesign, much of a improvement imo. Essencialy I found this much more readable than the other site, and loved the visual design. Original style.
As much as I am late, I couldn't resist the urge of not posting a comment here.
This is my first comment at mezzoblue.com, although I'm a regular reader and a fan of Dave's work, especially mezzoblue.com
I'll stop praising this site now, this is supposed to be a comment about it's design.
- First of all, and to me that's most important, moving from a fixed-width to a liquid design is a very important step, it gave mezzoblue a lot of space, it's much easier to read, and the browser can now enlarge the font size without messing up the design.
- I disagree with those that think that mezzoblue isn't blue anymore. Maybe blue isn't as dominant as it was before, but Proton makes mezzoblue really stand for it's name (as compared to "forteblue" with Radar). The name is still relevant, and the yellow sidebar and title space don't really disturb the color scheme, on the contrary, they complement it.
- Comment highlighting is a great feature, and I'm not saying this because I like mezzoblue, I'm saying this because as a reader, I can know what interests Dave mostly, and I count that as part of the original entry, it also shows that Dave actually *reads* the comments. Yes, discriminating your friends against more "unknown" people like me isn't very nice, but still, that's nothing to blame Dave for, although I would think that even Dave's friends or "bigger" names might not always have something important to say.
- Also a note about comments, I would haveve loved to see an option that makes me choose whether I want to see the comments at the bottom of the entry or in a separate page. I know it's unlikely that a post by Dave would generated less than 5 or 6 comments, but still, it doesn't make much sense to have a whole new page for comments if there are only few of them.
- Structurally speaking, the site is *very* clean, making it much easier to develop further, or even worse switch the whole design again. But I'm not going to get a lot into that, I think Dave knows what he's doing. Only one note on this, the comment number on the left comes very close to the comment text when the number is more than two digits, you should note that.
- Another note on the header menu. The contact form disappears whenever you move the mouse out. I know that this is the default behavior, but it shouldn't happen, at least when any of the form elements is focused. Good thing is that it doesn't clear out the text when the form disappears, although that's what's expected by users.
- From a usability point of view, the site is pretty simple to navigate, it only takes a little while to get used to the menu, since it isn't a traditional one. I think there should be a "Home" link, you'll be amazed how many people don't know that a logo is usually a "Home" link, I've seen it happen.
- "About This Entry" is a nice gesture, and it's the perfect for placing miscellaneous information. I think that adding a "Related entries" there would be good, makes it easier for readers who are researching certain subjects to browse.
All in all, I liked Proton much better than Radar, it's clean, well structured, a few nice touches here and there are really a joy to the eye. So keep up the good work :)
Just a little question to Dave, if he sees this comment. Does this site redesign has anything to do with Douglas Bowman's (from Stopdesign) wanting to ditch all the previous work and start over again? (http://www.stopdesign.com/log/2004/05/25/starting_over.html)
_Something_ is causing this page to load very slow on my IE6/WinXP. There seems to be increasing dead-time on the load as the comment count increases, leading me to believe the script you use to determine "voice"-type is not as swift as it should be.
…Loads fine on Firefox though…
Hi Dave, just a quick note to warn you that, from an accessibility standpoint, your comments "reply legend" doesn't work - there is no visual difference between the comments when not using the CSS stylesheet… May I suggest pre-pending each non-regular comment with it's type, i.e. "[Important comment]", etc.
– James
The css user stylesheet fix posted further up works only for "Small Fonts" Proton in Opera 7.5. With the "Large Fonts" selected, the menu travels off the page and the popups don't work. Just an FYI to induce more nightmares!
About the redesign: The comments system is fine. The header looks sparse, and the popups are a bit flaky… overall i'd say you've done a very good job using a total of 3 hues and some knowhow.
Some nifty menu features but Radar was better. My 2 cents.
I don't particulrly want to pass judgement on the site until I have given it a few days to "grow" on me. A couple of the things that I really have to say that are great aspects of the redesign are:
1. the comment highlighting, this just makes sense.
2. the menus in the upper right corner, esepecially the contact form! all I can say is wow! that is really clean and useful feature.
wether I like it or not really doesn't matter, it is innovative and unique while maintaining useability. I come here for the content and discussions.
I really do like this new layout. When it first popped up, I thought to myself "Am I at the wrong site?" It took me awhile to figure out that it was a redesign.
I like the header and the colors, but the body text on white hurts my eyes when I read it for an extended period of time, and is hard to scan over. The color variation is excellent though. I would like to see a larger mezzoblue logo up top though. Just to let people know where they are.
Overall, kudos on the redesign.
Hmm okay I'm undecided Dave. I'd like to see how this develops further. Anyway here are my comments, just the big ones (probably stuff you've already heard):
I like the overall color scheme. The content area is much easier to read than "radar" though I didn't think it was that tough. However, the Yellow bar at the top of the entries is too hot on my Mac making it difficult to read the title. Also the black leather block for the side bar really jumps out. It's the first thing my eye move to.
I think the logo is too small. It feels like it has the same weight as the section titles.
Very nice rollover effect. Contact's send is misaligned on my PC (FireFox).
Footer text seem a little big.
Okay that's enough. Again I can't wait to see where this goes.
Love the form hilighting.
Well, I suppose this'll mostly fall under the section of "me too" at this point, but for what it's worth…
Design: My design ability is pretty much… well… non-existent, so the best I can say is to agree with the thought that the design feels a little unfinished and less "clean". Also, while the new color scheme seems fine to me, the lover of blue in me can't help but bemoan having less of it. ;)
Comments: I like the idea of de-emphasizing trolls and off-topics, and emphasizing "mega-useful" posts. But I don't like the de-emphasis of no-URL posts. I can think of a number of reasons why someone wouldn't give a URL in their posts, and IMHO it doesn't inherently affect the potential usefulness of their posts, even on a design-oriented blog. (I was half-tempted not to give mine, since the current layout is kind of crappy and I'm in the middle of redoing it, but, eh.) All it does is make reading potentially interesting posts more difficult. Is there any way to change the "anon" label to being based on whether or not the person gave an e-mail address instead, perhaps?
Computer Insectoids: The design is pretty nasty buggy in Win IE5, not to mention slow as heck to load even over a DSL connection. Yeah, I know what you're thinking, but I'm allowed to surf the web during lunch break at work, and that's what I'm stuck with. ;) More of an FYI than a complaint, though.
And I never really understood why the drop-down menus here never worked in Opera 7.23, when the vast majority of pure-css and css-and-js menus on other sites work fine. The menus are even worse now, for what it's worth. Truth be told, I hardly ever used them anyway, so I'm not horribly worried about it.
I love the dropdown menu in the upper left. It's great to see how you've incorporated the multiple dropdown content areas. Will you be writing a summary of what you did to create this? I'd be interested in hearing about the design process.
Radar! :)
As many have mentioned, your header isn't logic at all - you simply just have to (after my opinion) remake that part.
It's also worth mention, that some of your contrasts isn't that clever as they are used to be. Especially the 'highlightening' orange box in the top, under the header is taking to much of the first viewing pleasure. In the old design, the first thing i got my eyes on was the header (or the 'mezzoblue') - now it's the orange box, which i personally don't like that much - maybe a blue object could do it as good, and maybe better (both to the eyes and the concept).
You need to desatuate the unharmonic orange box, and get the menu (which is pretty damn cool anyway) and especially the title/heading more 'viewable' (Just like in the old design)
Elseway you have done a very very nice work, and i am really looking up to you in the best means, and i am getting lots of inspiration from your designing technologies, aswell as from your code.
You are my personal weblog messiah.
Very good job
You truly know when you've made it in the web design world when you change the design of your site and you get almost 140 (and counting) comments about it.
Great work!
I like the design but the hovers on the navbar dont work at all in Firefox 0.8 win32. Also using the resize text option in the browser has no affect over the navbar which is hard to read at 1600x1200.
At large text sizes, the post numbering extends into the post text when the post numbers go over 100.
The readability has been increased by black on white but the small logo and small links to the zen garden etc. make the design at the top of the page feel a bit like one of those tight pixel pushed table layouts of the late 90's whilst the rest of the page has a open airy feel. They dont seem to gel right.
I personally liked the 'Radar' look more. Maybe I've got to get used to 'Proton' first. I also have to spend some time looking for new (CSS) tricks on your new layout (like the tabbed menu), which is always fun and inspiring. Anyways, good job!
I love the way the Pop-Down Menu works, and i like the style of the header, but the rest of the content layout just doe's not feel justified. In fact first thing i thought when i looked at it was 'SimpleBits' but still im sure you know where your going with this one.
And it matters not what we like, your the guru! we fallow in your footsteps.
I have to say that I honestly liked "radar" better. "Proton" would be just as great if you changed the header (it seems like it isn't anti-aliased, is too small, and the font looks like a messed up version of Comic Sans).
I have to say that I honestly liked "radar" better. "Proton" would be just as great if you changed the header (it seems like it isn't anti-aliased, is too small, and the font looks like a messed up version of Comic Sans).
Congrats, very nice. It fits my window, finally! If that isn't an improvement… ;)
Although I haven't played with the various options much yet, the color scheme and layout have much appeal to me; only thing I would've made a little more prominent is the title graph. Hey, you're Dave S., this is Mezzoblue, let it be known!
Well, I'm speachless. And not in positive manner. Great potential, sure, but it's not finished, yet ; ). Some very nice details, slopy composed into overall picture.
Expected more from you. Hope see it maturing.
Hi Dave,
Several people have commented that the contact form doesn't remain open if the cursor is moved to slowly. I looked into this, and it's because you've made an 'off by one' error with your pixel measurements.
As you know, the height of the menu bar is 24px, however you've set the 'top' value for the contact form to be 25px in this style rule:
.li3:hover #sec3 {… top: 25px; … }
Since 'top' is the offset, it means that the actual form is painted on the screen, beginning at the 26th pixel (ie. 25px above). You need to set it to 24px instead. I discovered this when I had a similar problem with a menu bar that I'm working on for my (under construction) website.
Looking at it with Mozilla's DOM inspector, the computed 'top' values for the other menus is 24px. So there is a 1px gap between the menu and the form; which. if hovered over, the form disappears. This explains why the cursor needs to be moved rapidly, in order to keep it open.
I read most of the comments… Everybody seems to have a strong point of view on the design. As always people don't handle change very well. I personally think that this design is a good improvement over the previous design. That started to get a little cluttered, this is much better. Nice little UI touches, some of these will end up getting copied I'm sure. Style wise I find it a bit quirky, but that's a good thing. Typograhical balans may need a bit of tunig here and there, but nothing life threatening. :)
Excelente job.
Wow. Some pretty harsh comments going on. I for one think this design is a step in the right direction, though that's somewhat biased in that I never thought 'Radar' was that great. In general I like the overall tone of 'Proton'. It's somewhat reminiscent of the Mozilla redesign, and I don't think that's by accident. ;-)
I'm sure as everyone adjusts to the change, and you finish polishing the design, people will get on board with it. But if they don't obviously, there are alternate skins for different peoples tastes.
I like the new design, but liked older more.
Hm, preview is still in old design???
This is a reason why I go mezzo not so blue now……
CONTENT is what keeps me here Dave …. another one jewel …. I will use both …..
This is a reason why I go mezzo not so blue now……
CONTENT is what keeps me here Dave …. another one jewel …. I will use both …..
If I am honest, i thought the page was not loaded yet when I saw the new layout. I liked visiting mezzoblue because of the layout, it was easy to read, and extremely beautiful. So when I first saw 'Proton' I was devastated (We'll maybe thats a bit too much.. but still) I like the sidebar, and the content box, but the navigation looks a bit.. well, how do I say this? i think it is ugly. Anyway, I am extremely grateful that you have made the option to use the old layout.
I think it's nice, and I said as much on my own site. Somehow, my comments didn't make it to the board; I still would like to see a combo of Proton and Radar: Radar's color scheme with Proton's layout and text formatting and new goodies. I think the site branding was stronger in Radar by a longshot. But change is the way of the web…
I think radar is better, it is simply beautiful.
I'm staying with Radar. Proton just doesn't scream mezzoBLUE to me, and it just isn't as distinctive.
Really dig this design. Quite a contrast to the old one. Gotta say that Radar was pretty much my favorite design on any site I have ever seen, but this is a worthy successor. Details are great. It's bright and exciting and very readable. Congratulations.
Initial impression - Am I on the correct website?
I'm going back to Radar based purely on aesthetics - his new design just doesn't have the same impact and looks too plain.
This is some kind of TrackBack:
I'm shocked about the redesign. I loved the old design (the blue one).. I linked to you cos it was absolute design merit. Please change back. You know it makes sense!