Thanks to everyone who gave constructive feedback on my last design idea. (To everyone who gave non-constructive feedback, Bah.
) It sucked, but it was very interesting to hear why it sucked. Going crazy every now and then is good for the sake of comparison.
So anyway, I was poking around in all the usual places for inspiration, and came across this entry in the CSS Zen Garden (a project which keeps getting better and better every time I check it, mad props to Dave Shea for kicking it off). Which got me thinking about my 100 stories project, which led off into a long quiet digression of nostalgia and reminiscence, as it was meant to do. And then this design idea popped out.
Love it? Hate it? Let’s do all that again, that thing where we sit around and talk about me and my self-created problems. That was fun.
Update: iteration #2. Should fix the overlapping main text in older browsers, rearranges the markup for the squares to look better in Lynx, and adds back the search box.
Update: iteration #3. Tightened vertical space above and below squares, added hover effects on navigation. The hover effects fail spectacularly in Safari 1.1 (and possibly earlier versions) — the hover color applies, but then doesn’t consistently go away when you move the cursor away. It’s the world’s simplest CSS, so I think it’s just a Safari bug, but I’d be happy to be proven wrong.
Update: iteration #4. On Noel’s suggestion, I made both the squares and main text the same fixed width. A few other tweaks. Still having hover problems in Safari. Out of ideas. Going to bed.
Update: as several people have kindly pointed out, the entire design is now completely borked in all versions of IE/Win. Am regressing the home page until I can sort it out.
Update: iteration #5. Fixes IE/Win craziness.
That’s betterer. In fact, it’s beautiful. Now, be happy for a bit and leave well alone.
Comment by ant metter — Thursday, November 6, 2003 @ 4:44 am
In all honesty, I really liked your original look. As in, what’s still showing in your individual entries.
Comment by Jasmeet — Thursday, November 6, 2003 @ 4:54 am
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.
Comment by Robert Brook — Thursday, November 6, 2003 @ 4:56 am
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…
Comment by Meri — Thursday, November 6, 2003 @ 5:08 am
I like it a lot! It’s clean, simple, just great.
Comment by Manuzhai — Thursday, November 6, 2003 @ 5:34 am
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.
Comment by Jeroen — Thursday, November 6, 2003 @ 5:38 am
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.
Comment by Don Park — Thursday, November 6, 2003 @ 5:41 am
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.
Comment by Aaron Brady — Thursday, November 6, 2003 @ 6:01 am
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.
Comment by Bryan L. Fordham — Thursday, November 6, 2003 @ 7:01 am
The table and pics are all over the text when using Netscape 7.01 on Windows XP. Nice design though.
Comment by Jake — Thursday, November 6, 2003 @ 7:15 am
I like this design too, it’s clean and elegant.
Comment by Håvard Skjæveland — Thursday, November 6, 2003 @ 7:37 am
Nice. But why not make some of the images in the squares links?
Comment by Thomas Weholt — Thursday, November 6, 2003 @ 7:41 am
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.
Comment by Mike Mariano — Thursday, November 6, 2003 @ 8:01 am
I like it a lot.
Comment by alessio — Thursday, November 6, 2003 @ 8:13 am
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.
Comment by jgraham — Thursday, November 6, 2003 @ 8:17 am
FYI Graham, that link is dead.
Comment by Håvard Skjæveland — Thursday, November 6, 2003 @ 8:33 am
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.
Comment by Steve Kirks — Thursday, November 6, 2003 @ 8:36 am
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
Comment by jgraham — Thursday, November 6, 2003 @ 8:39 am
Sweet! It’s much better than the last one, and a lot less impersonal than the one before that.
Comment by Keith Gaughan — Thursday, November 6, 2003 @ 8:52 am
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.
Comment by Ethan — Thursday, November 6, 2003 @ 9:03 am
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.
Comment by Sam Ruby — Thursday, November 6, 2003 @ 9:21 am
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.
Comment by ACJ — Thursday, November 6, 2003 @ 10:02 am
Love it!
Comment by Dave Seidel — Thursday, November 6, 2003 @ 10:07 am
Oh, sorry Graham. I should’ve seen it.
I think it degrades nicely with CSS turned off. In fact, it looks nifty and interesting.
Comment by Håvard Skjæveland — Thursday, November 6, 2003 @ 10:22 am
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 :)
Comment by Sérgio Nunes — Thursday, November 6, 2003 @ 10:30 am
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.
Comment by Matt — Thursday, November 6, 2003 @ 10:31 am
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.
Comment by Michael A. Strieb — Thursday, November 6, 2003 @ 10:52 am
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.
Comment by sleeper — Thursday, November 6, 2003 @ 11:25 am
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.
Comment by Mark — Thursday, November 6, 2003 @ 11:31 am
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.
Comment by Sparticus — Thursday, November 6, 2003 @ 11:32 am
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?)
Comment by Mark — Thursday, November 6, 2003 @ 11:34 am
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.
Comment by Dave S. — Thursday, November 6, 2003 @ 11:48 am
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.
Comment by Dan — Thursday, November 6, 2003 @ 11:52 am
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.
Comment by Marie — Thursday, November 6, 2003 @ 12:00 pm
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.
Comment by Patrick Berry — Thursday, November 6, 2003 @ 12:32 pm
Easier on the eyes than the old blue and white design. Refine it a little more and it will be quite nice!
Comment by Josh — Thursday, November 6, 2003 @ 12:33 pm
I like it alot, but the b-links are a little distracting. Could they be placed elsewhere, maybe at the bottom spanning horizontally.
Comment by Anonymous — Thursday, November 6, 2003 @ 12:53 pm
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.
Comment by Daniel Walker — Thursday, November 6, 2003 @ 1:28 pm
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.
Comment by Brendyn — Thursday, November 6, 2003 @ 1:40 pm
Clean. Simple.
Nice. (As is your existing look.)
But then, Clean + Simple = Nice seems to be true more often then not.
Comment by Jason Clark — Thursday, November 6, 2003 @ 1:44 pm
I’d love to see a:focus rules in addition to a:hover rules.
Comment by kami — Thursday, November 6, 2003 @ 2:04 pm
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.)
Comment by Sven-S. Porst — Thursday, November 6, 2003 @ 2:55 pm
Banners are not intrinsically evil. I like this design. The underlying HTML for the banner is elegant (all CSS, eh?) and attractive and usable.
Comment by Sean G. — Thursday, November 6, 2003 @ 4:43 pm
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>
Comment by Lenny — Thursday, November 6, 2003 @ 4:50 pm
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.
Comment by jgraham — Thursday, November 6, 2003 @ 5:02 pm
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.
Comment by Mark — Thursday, November 6, 2003 @ 5:32 pm
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.
Comment by Charles Miller — Thursday, November 6, 2003 @ 5:34 pm
Love it, love it, love it.
Menu items could use mouseover effects (change background images?) to help me find them.
Comment by Ken Walker — Thursday, November 6, 2003 @ 6:30 pm
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.
Comment by Jemima — Thursday, November 6, 2003 @ 6:32 pm
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)
Comment by Mark — Thursday, November 6, 2003 @ 7:42 pm
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.
Comment by Chris Burkhardt — Thursday, November 6, 2003 @ 8:37 pm
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.
Comment by Conan — Thursday, November 6, 2003 @ 8:41 pm
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?
Comment by Noel D. Jackson — Thursday, November 6, 2003 @ 9:19 pm
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
Comment by Mark — Thursday, November 6, 2003 @ 9:25 pm
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.
Comment by Patricia — Thursday, November 6, 2003 @ 9:49 pm
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.
Comment by Rick — Thursday, November 6, 2003 @ 10:01 pm
Love it. Nicely designed, easy to read. Great job.
Comment by James LaBove — Thursday, November 6, 2003 @ 11:39 pm
Re: Iteration #4…
Yay! The hover on the nav links work now, and the pictures are checkered and look nice.
Comment by Chris Burkhardt — Friday, November 7, 2003 @ 12:17 am
Very nice :) .
Comment by Neil T. — Friday, November 7, 2003 @ 3:19 am
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.)
Comment by Dean Allen — Friday, November 7, 2003 @ 3:41 am
Fucking smilies. Worked on preview.
That should be :( of course.
Comment by Dean Allen — Friday, November 7, 2003 @ 3:43 am
It’d be nice to see one font used for both headings and body text, whatever that font may be. Otherwise, good job.
Comment by Menc — Friday, November 7, 2003 @ 4:18 am
Very nice, it looks good and is perfectly readable.
Comment by Simon Gill — Friday, November 7, 2003 @ 5:01 am
Mark, you’re probably already aware, but in IE6 the left sidebar is merging with the main content.
Comment by Håvard Skjæveland — Friday, November 7, 2003 @ 5:20 am
UP
Comment by Håvard Skjæveland — Friday, November 7, 2003 @ 5:25 am
Yah, just noticed all versions of IE/Win are seriously borked. Am regressing the home page until I can sort it out.
Comment by Mark — Friday, November 7, 2003 @ 6:45 am
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.
Comment by Adrian — Friday, November 7, 2003 @ 10:51 am
IE/Win has been worked around. Stupid IE.
http://diveintomark.org/public/2003/11/squares5.html
Comment by Mark — Friday, November 7, 2003 @ 10:58 am
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!
Comment by Chris Hester — Friday, November 7, 2003 @ 11:55 am
Why should headings and body text use the same font?
Comment by xian — Friday, November 7, 2003 @ 12:24 pm
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/
Comment by Dean Allen — Friday, November 7, 2003 @ 12:52 pm
No complaints here. Muuuuuuuuuuuuuuch better than the previous two designs.
Comment by Scrivs — Friday, November 7, 2003 @ 12:55 pm
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.
Comment by Noel D. Jackson — Friday, November 7, 2003 @ 2:37 pm
totally Wrox!
Comment by Robert Sayre — Friday, November 7, 2003 @ 3:17 pm
Hover over colors (on the top navigation boxes) should be a different color than you-are-here colors, as a usability thing.
Comment by Dave Bug — Friday, November 7, 2003 @ 3:28 pm
I agree that the photos definitely need some contrast tweaking. Do you have any plans for picture rotating?
Comment by Lenny — Friday, November 7, 2003 @ 5:07 pm
Very fast loading and clean. Excellent work.
Comment by Mahesh — Saturday, November 8, 2003 @ 10:42 am
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.
Comment by Mark — Saturday, November 8, 2003 @ 11:59 am
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.
Comment by Minh Nguyễn — Saturday, November 8, 2003 @ 1:18 pm
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!!!!!!
Comment by M. Douglas Wray — Saturday, November 8, 2003 @ 9:47 pm
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.
Comment by Dave Hyatt — Sunday, November 9, 2003 @ 3:50 am
BTW, the design is clearly derivative: http://livingjuicy.com/ . Just kidding of course, it just struck me.
Comment by Matt — Sunday, November 9, 2003 @ 7:38 pm
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.
Comment by CDL — Monday, November 10, 2003 @ 3:37 am
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.
Comment by PrairieGal — Monday, November 10, 2003 @ 12:39 pm
Yup, I’m doing just that. Just learned how this weekend. See http://diveintomark.org/public/2003/11/squares6.html
Comment by Mark — Monday, November 10, 2003 @ 2:03 pm