I’m first!
As with previous incarnations, the CSS navbar misbehaves in IE5 on Mac OS 9.
Um… Courier? TheSans Mono, please.
Very “generic-blog” looking. Last version had much more personality.
— Anonymous 
Looks great in Mozilla 1.3, but it feels like there’s something missing and I can’t put my finger on it.
— Devon
reminds me of a previous incarnation… not neccessarily a good thing, not neccessarily a bad thing…
— Jason
I dig it, minus the background image in the logo/navbar. It hurts my eyes.
— Shawn
IE users can blow me. It’s the inline lists. I can either maintain proper markup, or I can make it look right in IE. I don’t know how to do both.
And yes, this is a previous incarnation, slightly revised. The logo background is a Hilbert curve, a deceptively simple repeating pattern that can fill an infinite amount of space. It seemed appropriate.
— Mark
I dig this better than the Zen-circle design. I also like the background image in the navbar…maybe you should have an animated Pacman come through on occasion. ;-)
— Ken
Not the slightest bit “generic-blog” looking. Elegance + simplicity = personality.
Background pattern took a while to load first time round and I thought the plain blue background was kind of “plain.” When I came back from looking at another blog, there was this gorgeous, intricate pattern that added just the right touch of understated elegance.
Not necessarily a good idea to ask for feedback since only a relatively small number of people — such as Joe and myself — will be able to offer well-informed and constructive criticism. Heh.
I love the navy blue background pattern. It reminds me of the rug I had in my bedroom when I was in junior high.
“IE users can blow me”
Wow, that’s a lot of head.
— CIAwallst
Hey. I like it. A little more robust than the minimalist zen edition. The placement of the text is also more comfortable than previous editions.
But site design aside, the information you provide is what keeps bringing us back.
Thank you.
p.s. The Nav bar is working fine for me. IE 6.
— Marty
I like this better than the Zen-inspired design. The only suggestion I have for you is to move the About, Archives, etc. links to the side, and reduce the height of the blue banner across the top of the page.
While it may make your site look more like the typical weblog (nuBlog, Kottke) I like the clean, modern look it affords.
— Yoey
The comments form doesn’t work in camino (although when you click preview it shows the text), my text is all white, i can’t see a thing i’m typing!!!! This is the 0.7 release, not a nightly build.
— noel
>”The comments form doesn’t work in camino”
You know the drill:
“[Browser Name] users can blow me.” - Mark
— MikeyC
–IE users can blow me.
Camino users give better head.
–It’s the inline lists. I can either maintain
–proper markup, or I can make it look right in
–IE. I don’t know how to do both.
Just a question: Yay for proper markup, but is there a particular reason why a navbar *must* be a list in order to be ‘proper?’ I notice your breadcrumb trails are just paragraphs, so I was wondering what makes them different to a navbar.
Also, I’m not sure if this is a once-off Camino quirk or not, but the text on the preview/post buttons is kind of bollocked… the text is far too low on the button and half-cut-off.
I liked the circular design better, but that’s just personal taste.
— Raena
OK, that’s creepy: NOW I can’t see the form contents in Camino. (Safari is ok.)
I couldn’t even click preview.
— Raena
“particular reason why a navbar *must* be a list in order to be ‘proper?’”
Its sort of become “accepted practice” among the “semantic elite” as it seems to be more “semantic” than done any other way (did I use “semantic” enough times?).
Also, there’s the gee whiz factor involved when you toggle CSS on and off…seeing a vertical list of items with bullets suddenly transform into a bulletless, horizontal menu: Its a great example of CSS influencing layout. But as Eric Meyer explained a while back (and its just the way I read it and not necessarily what he meant), practically anything can be put into a list, so the actual semantic value in creating menus in this way is a bit questionable.
— MikeyC
Mark, I like the design but it can use some refining.
Suggestion #1: varying the hue of the background pattern is nice, but make sure they match in value and saturation. Currently the background of the ‘About’ section is the outlier (brighter than the others). Either make the rest as bright, or darken the background on the ‘About’ section to match the others.
#2: The tabs need to be easier to spot, read, and click. So, make their background color solid instead of transparent, and add a bit of vertical padding (try a half em, and see if that helps). This will help them pop off the background a bit. Also, The ‘hover’ color (for the tabs you’re not ‘on’) should probably be a very light grey, not white.
#2a: *Consider* adding a ‘Home’ tab. While the cognitive dissonance of a tab representing what is actually the container directory for the rest of the subdirectories is annoying to some purists, this is only a usability problem when using *nested* tabs below the top level. Navigation tabs are a metaphor borrowed from desktop software, where you can’t *not* be on a tab.
#3: I’d suggest changing the <h1> font to a proportional sans-serif, the same font progression you’re using for the rest of the page would be fine.
#4: As far as typography is concerned, I generally like what you’ve done here especially the generous use of whitespace, with one exception. You’ve gone a bit overboard with the leading (line-height) in the main part of the page. 200% is high enough that it becomes difficult to ‘track’ from one line to the next within a paragraph. Try scaling it down to 150%.
I hope these suggestions help.
–Its sort of become “accepted practice” among the
–”semantic elite” as it seems to be more “semantic” than
–done any other way (did I use “semantic” enough times?).
Yeah, I get that (and fully appreciate gee-whiz, and semantics, etc), but the meaningful difference between the nav bar and the other stuff isn’t clear to me.
— Raena
I much prefer the previous design
— Anonymous
Yay. :)
— Jesper
I like it. It has some sort of old retro amiga feel to it, which is quite refreshing. Although it kind of doesn’t fit into the style of blogs that I have seen in some way.
I like how colours changes depending where you are on the site. That is useful. I am not too sure about white background, period.
A yellowy background like useit.com is preferred.
It makes better use of space, than that Japanese look before. Well, now after previewing this, I am not too sure…
Mark, you have been through a few redesigns lately. There is no pleasing everyone. But then again, the hardest person to please is probably yourself.
Can I just say, I am *so* not a style authority. I have abandoned my own style for the ye old W3C’s ultramarine.
— Kai
I guess I can blow, since I use Opera/W2k…
Anyway, I think there is too much contrast and no real harmony. I don’t know what the fonts are supposed to look like, but I reckon it beats what I see (my name links to a screenshot).
— Matt
Michael Bernstein: since you’re not Jonathan Delacour or Joe Clark, your words have no weight. See comment 8. Join the blogerati before you speak, would you?
Hmm… wait… am I correcting you, or am I correcting Jonathan Delacour for being disconcertingly arrogant?
…hmm. Yeah, I’m thinking the latter.
— Alan
Liked the previous better.
— Thijs
I’ve noticed that a blogroll, or a link list, that is not on the front page, fades into oblivion eventually. It’s not a big loss, I guess, and not one that I would cry for. (And probably it’s a deliberate choice anyway.) But I don’t visit those sites that often anymore.
Now you might say that I should add those sites to my bookmarks or RSS reader list, but that’s not what I want or will do (or, indeed, have done). They have served as a nice distraction when there’s nothing else to read. They’re like at the edge of my interests. Very well written and slightly interesting for me, but not at the center of my world.
It seems to me, and I am walking on thin ice here, that there’s unnecessary emphasis on visual look on the (very minor) expense of usability. A page that has lots of whitespace looks visually appealing (depending on the visual design, of course). But human mind is not distracted by lots of information if the information is well organized. (This is because of the selective attention mechanism, but we all know this.) Therefore, in general, it’s better for the user to have as much information as possible on the screen and let the mind do the selection and ignore the unimportant information (for the processing, that is). So, while more information might look restless, it’s not a problem for the human mind.
Still, all that was really not fair at all, because Mark’s site is among the best regarding design, usability and accessibility. (And it’s a personal website anyway.) It’s just that I’ve had this thought in my mind and just had to let that out. Sorry.
Nevertheless, it would be interesting to see whether there are any statistics supporting my personal observation. Meaning that a front page blogroll generates significantly more traffic to the rolled blogs than a blogroll behind a single click. (Regarding statistics for the selective attention refer to the literature on cognitive psychology. I might have misunderstood it, though. :-)
— Jarno Virtanen
Have you considered fixing the coloured part at the top of the screen onto that page? It would create a subtle “oooooh aaaaaaaaah” factor, but there are doutbless 25 different CSS bugs, usability concerns and accesibility problems.
— Anonymous
I may risk a good kicking by saying this…
It looks terrible. I’m looking at Zeldman’s too, and trying this designing by standards and accessibility thing myself. In my opinion, Zeldman had a pretty, ‘generally usable’ site - as did you - and then by redesigning to a more rigid doctrine you lost that.
It may conform to all the right standards, it may be accessible to the one hundredth percentile of the population - but it sure don’t look good. I think what I’m trying to say is that if you design by standards *completely* you have to kiss goodbye to nice design, and a more flexible approach may be better for the masses?
Maybe I’m wrong. Don’t kick me too hard?
(I wasn’t going to put a link to my blog, but that’s cowardice. I’m not recommending it as an example of what I mean though.)
— Beowulf
Well, I like it. Personally, I like the line heights and whitespace, and the orangey - red links are a good contrasting colour. Courier, however, is the spawn of the devil.
— Menc
I want the old version back. I know it is not about what I want, but you said discuss and thats what I did. The previous design had much more uniqueness, I liked that.
— smi
–Hmm… wait… am I correcting you, or am I
–correcting Jonathan Delacour for being
–disconcertingly arrogant?
Alan: I was wondering if I was the only who noticed that. Considering the lack of response here, though, I’m guessing that either: 1) Jonathan was joking and we’re just being too sensitive, or 2) everyone is just cowed by his brilliance.
I’m hoping for the former, personally. :-)
As for the redesign, it’s easy to look at, which is always a plus. Oh, except for the Courier title. Yup, that kind of hurts to look at.
— CDL
Sorry, but I don’t like it much either. The logo area is too big: it’s distracting from the body content. The Hilbert curve is pretty, but somewhat wasted as unless you squint up close it just looks like a bit of dithering. And ditto to everyone else’s “ugh” on the giant Courier: it’s like 1980’s MacWrite all over again.
I like the styling of the body, though; I always found the static “circle” background of the Zen design rather visually distracting.
Finally — what’s happened to the 100? The page is still there, but there’s no easy way to get to it any more…
— James Kew
Um, no, I won’t be blowing you, Mark, old bean.
The Hilbert pattern is subtle and effective (as well as being a great example of a lovely geometric effect), navigation is clearer and easier than the last design, especially in terms of usability where the last design was more, er, “unique” in this respect.
Really nice to see you not only requesting but listening to feedback and acting on it.
The Courier is out, the logo is smaller, the line-height is smaller, the 100 is back, the tabs are left-aligned, the tab hover is gray, and I added a Home tab.
I don’t really care about using a list as opposed to a paragraph of links. I don’t understand why your copy of Opera 7 on Windows renders standard fonts shittily when my copy of Opera 7 on Windows works fine. I don’t understand why Camino suddenly can’t render the comments section when Mozilla works fine. I can’t find a good color for the about section. I’m not fixing the logo to the top of the screen because it’s not that important. I may or may not move the blogroll back to the front page, or I may put a little linkdump side blog there instead. I don’t really want any of you to blow me; that’s just something our DBA used to say. (Those DBAs; they’re wacky.)
And finally, accessibility and standards compliance have no correlation to visual design; if you don’t like my design-in-progress, don’t blame standards.
— Mark
Was the head in Courier? It’s in Georgia as of this reading.
Nothing at all wrong with Courier (unless in memories of Linotronic postscript errors and failed Type 1 font downloads). I’d say it’d be an appropriate carry-over from previous diveintomark designs. In the old white-blue ALA-ish layout, the large display Courier was perfect: kind of coltish and gawky but still on message as they say.
Agree that the leading is a tad generous; p’raps something in the 140-160% range would suit sir better.
Lucida Grande is doing okay as long as antialiasing is on, but it really falls apart when it isn’t, particularly in bold (check out any y, e or r in the linked commenter names on this page without any smoothing - disastrous), and it really really falls apart when small, like in this textbox I’m typing in. Lucida does well big and proud on OS X, but it’s not hinted well enough to be a flexible enough for the range of sizes required for a webpage.
Proportions on the page are otherwise superb, as ever.
Someone said the nav tabs needed to be more obviously tabs - bunkum. No ambiguity there at all, and any more delineation would be overkill. Words make potent clip art.
Intriguing pattern in the header, though I can’t quite discern why it’s there. Glancing at the breadcrumb trail, I don’t see a navigation aid, but rather one pattern fighting with another underneath. It’s not a glaring conflict, but there’s enough of a pause there while one sorts out what has useful meaning and what doesn’t that I wonder why the impediment is added. Patterns - just as drawings and photographs - can be lovely, but they don’t coexist with text at all well, especially when one must wander through one to get to the other.
There’s a natural hesitancy to look at space occupied only by text with suspicion: it looks too bare, too lonely. It needs bolstering, emphasis, support. While this suspicion comes naturally to those evaluating how something looks (the designer or the one paying the designer, let’s say), it almost never comes to the person busy reading what the text means, or trying to find his or her way around.
I love ornament: the more striking the better. Just keep it at a safe distance from what I’m trying to read.
Also the ordered list item numerals in comments are getting clipped by the main div edge in Safari. They’re fine in Camino.
NUblog looks like a typical Weblog?
I want my money back.
It looks fine generally; I’m in awe of the amount of time you can find to work on this whole endeavor; congratulations.
This is just a quibble: I find the background color on the title/banner area overbalances the content. A less saturated version or something lighter would be more to my taste.
And… fonts are a mystery to me except to say they seem to be a mystery generally. I wish there were a more universal and robust solution.
I think it’s good to go sans in the content for legibility versus serif in the titles and headings; I don’t care for this serif that I’m seeing. However, I’m not sure which one it would be for Mozilla on Win2K with a bunch of Adobe software installed. The only semi-articulate thing I might say is that it’s too blocky with too much x-height.
— ed nixon
Should anyone be interested in all-lists navigation that looks just peachy on IE5 for Macintosh, why, all you have to do is “check,” as the kids say, http://www.westermann.nl/ as designed by everyone’s fave new whiz kids, cinnamon.nl.
I don’t like the heading too much, as it the courier and the tiled background is too much a reminder of Windows 3.11 and the hundreds of crashes I had to live through writing technical reports in MS Word.
For a ‘fun’ bug in Opera 7.0x/Win, try opening for instance http://diveintomark.org/archives/2003/03/21/confessions_of_a_platypus_creator.html and resize the window so that the link to “Cory” is at the beginning of the second line. Then try hovering over the right part of the link to “Glenn” at the line above.
— Arve
–And finally, accessibility and standards
–compliance have no correlation to visual design
I disagree, all design is influenced by the engineering behind it - that’s why Volvo’s look they way they do. My point may be that this is all engineering and little design.
Design-wise it sort of feels a bit like the emperor’s new clothes to me, I mean, Dean Allen is waxing lyrical about the merits of serif fonts on 3 words in your header! Maybe this is the web equivalent of a Tracey Emin, and I’m just to populist to appreciate it.
And I regret saying it was terrible, that wasn’t nice or true.
— Beowulf
Joe, http://www.westermann.nl/ cheats by setting each list item to “display: block” and using absolute positioning (with pixels) to put them all in the right place. Which means it breaks horribly the minute you try to make the text size larger.
— Mark
Re: roots of design. People say I’m a good “designer” (in fact, a few people have paid me to design their sites), but what I really am is a technical designer, not a graphic designer. I hand-code markup and CSS and I’ve memorized dozens of CSS tricks and hacks, and people who know to be impressed are impressed when they look under the hood and see such clean markup… but I have to rely on people like Dean and Jonathon to tell me when I’ve made obvious visual blunders. So what you’re seeing is the result of some technical exploration, nothing more.
I still vehemently disagree that accessible, standards-compliant sites can not be visually appealing, like a Porsche is visually appealing. But it takes a graphic designer to make one, and that’s not me. I make Volvos.
— Mark
I’m willing to bet someone’s already said this, but ditch the busy pattern. It sucks. Verily.
— kami
I haven’t tested it in anything but Camino 0.7 and IE5 for Mac, but if you add this
#nav li:hover {
background-color:#cecbc6;
color: #000044;
}
to your stylesheet, and then adjust the appropriate paddings and margins, you can make the tab highlighting work in both browsers. It’s not perfect (careful rollovers of the mouse will see what I mean) but it mostly achieves the desired effect. IE5 ignores the li:hover, and if you adjust the margins and paddings as follows:
#nav a { padding: 0 0.5em 0 0.5em; }
#nav li { padding: 0 0.5 em 0 0.5em;
margin 0 -0.5em 0 0.5em;}
then the tabs are filled in both cases. Spacings of the tabs are not consistent between browsers, but that’s because one or the other’s box model appears to be inconsistent - to me it looks like IE5 does not recognize that the padding of the a element should be inside the border of the li element.
Don’t know if this helps or not, as I have not tried this in any other browsers. In any case, thanks for writing informative stuff… I’ve learned a lot from your site!
— D.L.
Mark,
The courier seems to be back.
The tabs are definitely improved, but I would still suggest a) adding a half-em padding to the top, and b) making the tab backgrounds non-transparent. The background pattern interferes with their legibility even more now the tab are smaller.
This is just a matter of personal taste, but I liked it better when the tab row was centered like the main text. consider centering both or left-aligning both (to match the <h1>).
Concerning the color for the about section, you already have two other green tabs. Have you tried a rust color like #663300 or #993300?
Finally, I think you under-appreciate your design skills. You meet the foremost requirement: an understanding of the constraints of the medium. Design is, in many ways, a craft, not an art. If you want to gain a better understanding of the rules and best practices for visual communication, that’s easier to remedy than a misunderstanding of the medium you’re trying to use.
The pattern is good. I liked it when it briefly appeared before the Zen design, and was sorry to see it go. Welcome Back Hilbert.
— Anonymous
Still have the yin-yang for your favicon? :x
I like the links much better than the default “blue/purple” scheme.
Great work.
In response to 28 (following standards = giving up on visual design), you’re quite wrong. I’ve never seen a non-standards compliant site that can’t be replicated (and usually bettered) while following standards.
Was it Microsoft who pulled this same argument, only to have someone do an XHTML mock-up by the end of the next day?
— GaryF
Honey, I shrunk the buttons.
Trebuchet paragraph sized and in the middle was best. Trebuchet for the logo too.
— Jesper
This is just and idea, but would spatially help your visitors figure out where they were on your site. At least a tad.
Right now, when you hover over a tab, the background-color is gray. What if you had this background-color correlate with the color of that sections repeating pattern? Might look good, maybe not. Who knows, just and idea.
Also, you are using three body fonts on one page. While I don’t mind what you have going at all. The general rule is stick to two. I would say, throw the Verdana out in place of the Lucida Grande, or vice versa. It would look better, in my opinion, with only the Georgia and Lucida. One of my personal favorite combinations.
I like the design, it’s very you.
— noel
I liked the intermin stripped-down zen blog design much better.
Don’t take out your frustration with IE and your balancing act around purism on the hapless IE user base!
Weird, the Preview, Post buttons below have the copy dropping off the bottoms of the buttons (in Camino). Trippy!
— xian
Nice and crisp!
My user stylesheet includes “body { line-height: 1.5; }” to override the browser default and improve general readability. Unfortunately, it makes your tabs float a few pixels above the white page.
Would you consider explicitly setting line-height: 100% on the body or on #nav?
Well, I guess the Cinnamon kidz can add themselves to the list of people to blow you.
Oh, I just thought of another refinement. Add this:
#nav li:hover{border-bottom: 1px solid #666666;}
This should add a little more dimensionality to the tabs when hovering.
Again?
I also quite like the blue design thing you’ve got going on at the top. I was sad to see it leave a couple months ago when you re-did things.
— Brock
All in all I like it a lot. I think a Garamond-type font would work better for the title, but that’s just me.
Jonathon Delacour: Shut up. Pretty please. Oh, and I think your site design is rather boring. But I guess I’m not well-informed enough to say something like that- I apologize.
— Yaha
You say:
“I still vehemently disagree that accessible, standards-compliant sites can not be visually appealing, like a Porsche is visually appealing. But it takes a graphic designer to make one, and that’s not me.”
That’s why I have the idea for a long time, to work together with a graphic designer to make websites.
I still wasn’t able to do so, but I work on this right now.
My opinion is, that it might be important for many people to be aware of the own capabilities — but its most important to know about the lack of the own capabilities. Then you know /who/ to ask for /what/.
(Possibly I should ask someone to re-read my manner of expression in english ;-)
Besides all that techtalk and the idea of graphic design:
bevor your idea of redesign, my subliminal eye always knew, that I’m reading Mark’s Weblog. Now, it’s just one of many — sorry to say that in such a rude way.
Well, you want to have a redesign, a change. Otherwise you wouldn’t have started this. So: keep on moving.
We all have to let loose visual habbits.
I’ll keep the clean structure and some other things (that I can’t express) in mind and try to adapt it for my own side on my own way.
— clemens
The design is simplistic and nice with more style than the previouse version. My only suggestion is that ‘nav’ is could be made to be ‘position: fixed’
— J. Porter
The tabs at the top are far too small. The absolute minimum I’d consider would be 100%, but I think tabs should be bigger than normal text.
— Anonymous
I take it the background pattern is derived from your intense love of pac-man maps? :-D
— Shawn