That’s betterer. In fact, it’s beautiful. Now, be happy for a bit and leave well alone.
— ant metter 
In all honesty, I really liked your original look. As in, what’s still showing in your individual entries.
— Jasmeet
Clean, easy to read. What’s not to like? I keep wanting to click on those images at the top though, expecting them to go somewhere.
I like it a lot — much more simple, cleaner etc — and I get to see your latest post straight from http://blo.gs! I agree with Robert, though — I also keep trying to click on the pictures! Might be an interesting thing to make them link to random (or possibly related via category?) blog posts or whatever…
— Meri
I like it a lot! It’s clean, simple, just great.
— Manuzhai
It might be my problem, but I only see a blank page as your front page.
Anyway, I like the new design more than yesterday’s, only I would suggest to reduce the height of the squares, so visitors with smaller screens (800×600) don’t have to scroll to read the first entry.
— Jeroen
Well, I didn’t say anything about the last one because it clearly sucked. This one is better in a “less interfering way” and those peekaboo blocks can obviously be used as a faceroll later which is cute.
In general, I think bloggers should resist ‘full makeovers’ temptations and make only continual ‘partial renovations’ so readers don’t feel like a Stranger in a Strangeland.
— Don Park
A Stranger in a Strange Land ( http://www.amazon.com/exec/obidos/tg/detail/-/0441790348?v=glance )?
Or a stranger in Strangeland ( http://www.screenit.com/movies/1998/strangeland.html )?
Googling for “a stranger in a strange land” brings up “Sponsored Links – Free Vibrator – dildos & adult sex toys. Free UK delivery & discreet packaging. aff.” as a text ad. Heinlein would be so proud.
I like it.
I’m also with Jeroen: I came to the page the first time with no problem, but after following the permalink and then wanting to go back for a second look, all I got was a blank page. I’m using Firebird 0.7 on Windows XP. Only happened that once, though, so it’s probably something funky on my end.
The table and pics are all over the text when using Netscape 7.01 on Windows XP. Nice design though.
— Jake
I like this design too, it’s clean and elegant.
Nice. But why not make some of the images in the squares links?
If pictures are your thing, then it’s nifty. Bookending the site links with pictures does make them stand out, but I would give them some hover state.
Also, there is now no link to the main page at all! Being that this *is* a main page, that’s not a problem, but you’d need to add one to apply this design site-wide.
Oh, and viewing your new header without styles applied just looks silly. It obliterates the title.
I like it a lot.
— alessio
It breaks in older versions of Mozilla. Using Mozilla 1.2.1 on a default redhat 9 installation, all the text is covered by pictures, as seen in this screenshot : http://zeus.jesus.cam.ac.uk/~jg307/mozilla/screenshot-mark.png.
— jgraham
FYI Graham, that link is dead.
Mark:
I like it much better than either previous version. Clean, simple, yet expressive. The pictures provide a personal and human touch to the page and lend your words something more than a standard weblog/journal/personal site.
No, Mark’s autolinking system is just rubbish. Let’s try again without the . :
http://zeus.jesus.cam.ac.uk/~jg307/mozilla/screenshot-mark.png
— jgraham
Sweet! It’s much better than the last one, and a lot less impersonal than the one before that.
I really like it quite a bit; as clean as your other designs have been, but the pictures are a great addition.
It did take me a moment to find your primary navigation; I don’t know if that’s because of its position, or the subdued type. That’s the only feedback I could possibly offer — really looks great.
— Ethan
Turning off CSS produces an interesting effect:
d i v e i n t o _about_blog_code_pics_ m a r k
… with pictures interspersed between the the words.
Given the way the span’ed items are positioned in CSS, there doesn’t seem to be any need for this information to be placed in the same linear order in your source.
— Sam Ruby
I like this one infinitely better than the previous.
I did not express my opinion on the previous design, so I will put it in a nutshell: Idea, nice. Execution, bad.
Good job.
— ACJ
Love it!
Oh, sorry Graham. I should’ve seen it.
I think it degrades nicely with CSS turned off. In fact, it looks nifty and interesting.
I think its better,
but it takes too long to load the “content” (aka blog entries). If you placed the images as background it would load in the “background” and “deliver” the content right away…
PS: I’m using a “20th century” technology – 56k :)
— Sérgio Nunes
Surely you can think of a way to do it without double-nested SPANs and strange source ordering. While it’s certainly better than the last experiment, you can do better. Regarding the photos it would be nice if they were optimized a bit with a program like Photoshop or Gimp. The levels and contrast on a few of them seem off and would look a lot better with a little tweaking.
— Matt
I liked the previous version. With the new one, I was immediately disappointed that I couldn’t click on a picture at the top and link to that page (easily fixed, I am sure). Regardless, I liked the random flow of the previous design. It’s a little like entering a 300-room mansion and wandering from room to room, without any map or previous destination, discovering as you go what’s waiting around the next corner.
— Michael A. Strieb
my reaction is: “fantastic”.
i haven’t convinced myself yet, though, that my reasons for disliking the last one were justified. i think my main issue was the unfamiliarity of it. i hadn’t seen similar things like it before.
— sleeper
My URL detection system is not perfect, but this particular case is not one that can be solved. A period is a valid character in a URL.
— Mark
21: I don’t see that, I see, Dive, Into, about blog code pics and Mark all interspersed with pictures.
Overall, I think it’s alrighty.
I like the idea of using background pics on the divs instead. They should load after the main content, and it would also make it easier to change the pictures per-page (or per-section). And they’d be invisible in Lynx.
I’ll tweak the markup to put the navbar after the “dive into mark”, and make the header letters a real header. That should make it look better in Lynx. It’ll still read like crap in screen readers (one letter at a time, since they’re in separate spans) but you can’t have everything (where would you put it?)
— Mark
In case no one else says it, I’ve always found the previous design to be one of the most readable weblogs around, thanks to both format and type treatment. The new one keeps the format but changes the type; time will tell whether the readability holds through that change or not.
— Dave S.
Ah, I liked the earlier design! Though, granted, it required navigation to get to the actual blog entry, which wasn’t as nice.
Maybe you could bring it back as a white-on-white background text thing… with the massive linkage and popup text that could be really fun.
— Dan
Mark, I’m sitting here slacking and working, intermittently nodding my head yes, shaking my head no, laughing and crying, wishing I could have a cigarette, any kind of cigarette, having just discovered your 100 stories project. Gee. I can’t help but wonder what you’re holding back. The design is fine.
— Marie
I just had to gather some feedback from students about our university homepage. What was the one thing they hated the most? Boxes… It wasn’t what was _in_ the boxes, rather that the info was *in* boxes. It was the very strange. The practically begged for rounded corners or at least feathering the edges.
Me? I don’t mind boxes…but then I like geometry ;-) Just passing along something I didn’t know.
Easier on the eyes than the old blue and white design. Refine it a little more and it will be quite nice!
— Josh
I like it alot, but the b-links are a little distracting. Could they be placed elsewhere, maybe at the bottom spanning horizontally.
— Anonymous
I think the title’s a little too tall – and the buttons underneath it aren’t *nearly* obvious enough – it took me ages to find where they’d been moved to.
I’d cut it down to one, perhaps two, rows of boxes. Other than that – looks good, if still a little unpolished.
— Daniel Walker
It looks a whole lot better.
I have this issue with design: I’m never content for one amount of time. I need to find a design that I’m happy with for a set amount of time. Oh well, I learn more every time I redesign.
And yes to this layout.
— Brendyn
Clean. Simple.
Nice. (As is your existing look.)
But then, Clean + Simple = Nice seems to be true more often then not.
I’d love to see a:focus rules in addition to a:hover rules.
— kami
While on the first sight I like the squares for their _looks_ (I am easily impressed…), I don’t think it’s a good idea for a couple of reasons:
Firstly it wastes the most precious bit of web page space for a banner. Finding a way to re-do that banner vertically, so the text can start right at the top would be much more efficient.
Secondly, as many others said before, that is really a waste as the images don’t serve any purpose – no links no extra information. Having a photo of a person on the page _can_ be helpful, but that’s one photo and not photos of the whole family at all ages. Basically, I – and I suppose most other readers – will not consider them as important as you do. While this may reflect your priorities, it’s probably not in the best interest of your readers. If you want to provide those photos, do so on a separate page and those who care will enjoy them more.
Thirdly, the banner is so busy that it’s hard to spot the only useful bits in there and recognise them as navigation features. My experience is that the seasoned web user tends to simply ignore anything that looks like a banner. I
Finally, and not directly related – what happened to full text feed entries? Not only do they allow people to download everything and then read it when they don’t have network access but it also makes the writing ‘design invariant’ by letting regular readers simply read the texts in their aggregator. (Letting you do to they layout whatever you want without anybody minding.)
Banners are not intrinsically evil. I like this design. The underlying HTML for the banner is elegant (all CSS, eh?) and attractive and usable.
— Sean G.
So when do we get to see it on the rest of the site? The original format was good, but a change every once in a while is nice. The site isn’t serving to Mozilla/1.5/Win though. It’s just giving me <html><body></body></html>
— Lenny
OK, “rubbish” was a bit harsh. A period at the end of a URL seems pretty unlikely (though probably not impossible)- I would expect more errors to occur if you allow that than there would be if you stripped it out.
Conclusion:
URL autolinking is hard, so don’t do it. Make people do it themselves. Allow <a> tags. If that’s considered too hard for your intended audience, put a button in that will allow them to insert a hyperlink automatically by specifying the link text and URL.
— jgraham
Re: Mozilla 1.5, it’s buggy. I get that too sometimes, on various sites. I’m pretty sure there’s nothing I’m doing wrong to trigger it, but if anyone knows anything more or can point to a Bugzilla report about it, I’d be grateful.
— Mark
I like the new banner. It looks great, the pictures dotted around are a nice effect, and the negatives are pretty nit-picky if you ask me.
As for URL autolinking: the only punctuation you’re at all likely to see at the end of a URL is the slash (and very rarely, the semi-colon). If you make auto-linking code ignore all other punctuation at the end of a URL, you end up with something that is technically incorrect, but much less error-prone in practice.
Love it, love it, love it.
Menu items could use mouseover effects (change background images?) to help me find them.
It’s nice. I agree that the four links need a hover, say, inverting the square. The banner takes up too much vertical space – the whitespace on top, especially, could stand to go.
— Jemima
Thanks to Matt for the suggestion of optimizing the thumbnails. I didn’t realize how much further they could be pared down, but ImageMagick made short work of them.
mogrify -colors 256 format:jpg *thumbnail.jpg
(Warning: overwrites originals, make backups)
— Mark
Cool, the images seem to be loading faster for me now (on my 2k/sec 56k connection).
Regarding iteration #3: I get no hover effect on navigation links, except for a title attribute tool-tip thing. Camino 0.7 and Firebird 0.7
I notice the tabs on the archive pages are square again. They work better in Camino than the rounded ones.
— Chris Burkhardt
Re: 3rd iteration.
Much better. :) I’m not a big fan of “faces staring at you” themes, but the look is clean and an improvement over the current one.
I do feel that the main font is out of place though. Perhaps it’s the line-height I’m uncomfortable with, or the font itself. I can’t quite nail it, but feel that your current choice of Trebuchet MS would fit better than Georgia.
— Conan
Two things…
1) The banner is a fixed width, but the text isn’t. If you stretch the browser window out really far the banner just looks alone up at the top. The text should be a fixed width (as in your old design) so that the banner and text look like the belong together.
2) What’s with all the double nested spans in the h1 element? Mark, what were you thinking?
The text was not a fixed width in my old design.
I did do some tests with a fixed width #main (that holds the text). The problem is that there’s not room for the main text and the left sidebar (and possibly the right sidebar with ads on some pages) on an 800 x 600 screen. I experimented with an 8 x 5 banner which was narrow enough to make all fixed width columns work, but a bunch of people aren’t gonna like it because it takes too much space vertically.
http://diveintomark.org/public/2003/11/squares8×5.html
— Mark
I like it. The previous design took me by surprise and was a bit too, uhm, expiremental for my taste.
This is light, clean, aesthetically pleasing. Count me among the people who tried clicking on the pictures. It would be nice if they went somewhere, but I wouldn’t move/delete them. True, you provide an extraordinary amount of technical information, but, unless I’m mistaken, it’s still a personal site and the design should reflect as much. This reader for one appreciates the personal touch and I’m more than willing to scroll down a little to see the content.
As for the b-links. I think the way you have them styled now is nice, less obtrusive than before.
Of course, me talking about clean design is like a first grader trying to discuss Picasso. My site isn’t the cleanest thing in the world. But hey, it’s my site. :)
Nice job, Mark.
— Patricia
What you have now is a lot better than what you had before. The only thing I want to know is will we ever see that list of links again? …I actually went through a few of them and found most of them at least a little interesting.
— Rick
Love it. Nicely designed, easy to read. Great job.
Re: Iteration #4…
Yay! The hover on the nav links work now, and the pictures are checkered and look nice.
— Chris Burkhardt
Very nice :) .
— Neil T.
A (PHP) url detection regex that will solve the trailing punctuation problem:
function urlDisco($text) {
return preg_replace(“/(?:(http:\/\/)|(www\.))(\S+\b\/?)([[:punct:]]*)(\s|$)/i”,
“<a href=\”http://$2$3\”>$1$2$3</a>$4$5″, $text);
}
(Splendid redesign, light and fast, notwithstanding the persistence of Trebuchet.)
Fucking smilies. Worked on preview.
That should be :( of course.
It’d be nice to see one font used for both headings and body text, whatever that font may be. Otherwise, good job.
— Menc
Very nice, it looks good and is perfectly readable.
Mark, you’re probably already aware, but in IE6 the left sidebar is merging with the main content.
UP
Yah, just noticed all versions of IE/Win are seriously borked. Am regressing the home page until I can sort it out.
— Mark
I like #3. Something bothered me about it though, and then I realized its the pictures. You need better quality pictures. For example, the one of your father is way too dark. It’s functional AND artistic, but the art falls on its face because you can’t get the contrasts in peoples faces to jump out at you easily.
Of course, it could be my monitor, as no PC monitor I’ve ever worked with had good color representation, but I do have the contrast turned all the way up.
— Adrian
IE/Win has been worked around. Stupid IE.
http://diveintomark.org/public/2003/11/squares5.html
— Mark
I like it! I did like the experimental page that was up before, except for the use of b-links. Try making the link squares in your new layout use different hover background colours like the last page had.
I prefer this layout to the dark blue, dark green, dark red etc one still evident throughout the site. I’m not sure why. Please make the rest of the site look like the main page now and I will be happy!
Why should headings and body text use the same font?
— xian
Optima. Optima. It may look ‘lickably good’ with quartz anti-aliasing, but its strokes are made of gentle tapers that require quartz to smear like mad at the cost of crispness, and as a such it *reads* like a page submerged beneath a half inch of brackish water.
Full justification, on the other hand: http://textism.com/article/327/
No complaints here. Muuuuuuuuuuuuuuch better than the previous two designs.
— Scrivs
Ah yes, it was late when I posted and now I realize that you did not use fixed width columns in the previous design.
You could always put the b-link sidebar underneath the first entry and to the left with a little padding. I ran into the same problem on my site and this seems to be a fairly good answer to the problem. See my homepage for an example http://leavesrustle.com
Also, you could make the squares (in the banner) a tad larger increasing the width to the maximum of around 720px (for 800 x 600 viewers) and then the sidebar would fit nicely in the center column and to the left or right.
totally Wrox!
Hover over colors (on the top navigation boxes) should be a different color than you-are-here colors, as a usability thing.
— Dave Bug
I agree that the photos definitely need some contrast tweaking. Do you have any plans for picture rotating?
— Lenny
Very fast loading and clean. Excellent work.
— Mahesh
I’m taking lessons from a real graphic designer about the contrast issue. She agrees with others here that the banner-with-interspersed-photos would be better if the interspersed photos were better. Still working on it.
— Mark
How about rotating the images in the boxes from your 100 Stories?
Also, it kind of seems to me like the boxes are detached from the rest of the page. Maybe adding similar boxes around the content would help.
You’re a sex machine. Go wild. I love the way this site’s design changes – it’s a constant challenge and example to sites with old-school design! Thanks for showing me the light and encouraging others to burn brightly! The web does NOT have to be ‘electronic brochures’!!!!!! YEEEEEEEEHHAAAAWWWW!!!!!!
Hey Mark, the hover problems you had with the squares are caused by a bug in Safari 1.1 and 1.0. The hover problem can also be observed on http://www.mezzoblue.com. At any rate, the problem has been fixed since 1.1, and so things should work nicely in the next release.
— Dave Hyatt
BTW, the design is clearly derivative: http://livingjuicy.com/ . Just kidding of course, it just struck me.
— Matt
I guess it’s only fair that I comment on this one, since I ripped into the previous one. I must say I like this about a thousand times better. Very nicely done.
— CDL
Very nice new banner. It’s clean and visually pleasing. One suggestion – some photographs in your banner appear overly dark. I suggest taking them into photoshop and adjusting the levels a wee bit.
Yup, I’m doing just that. Just learned how this weekend. See http://diveintomark.org/public/2003/11/squares6.html
— Mark