mezzoblue v4
May 24, 2004If 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 <h3>s are now [more appropriately] <h1>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?
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 )——-
<div class=”reply expert” id=”c005129”>
<span class=”replynumber”><a href=”#c005129”>40</a></span>
<p class=”postedBy”><a href=”http://www.designbyfire.com/
———————-
I thinks it’s great that I can skip over the general bane of people congratulating you or telling you how much they like you (or even asking you stupid questions >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).
:D
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.
GOOD DESIGNER! 5++++! WILL VISIT AGAIN! :)
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).
and
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.
Sorry.
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?
Regards,
Al.
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.
Hmmmmmmmm…
Hmmmmmmmm…
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!
Gordon
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 sem