Traditionally, weblogs are redesigned as a surprise. The person who maintains the site generally toils for a short time and then abruptly unveils the new design, hoping for maximum shock value as the new design hopefully impresses and awes readers. I am going to take a different approach: I’m going to ask what people would like to see.
I have been tinkering with a couple of ideas, but haven’t quite settled on anything good yet. One of them was yellow and black and red – sort of a throwback to an old mikel.org design. One of them is almost identical to this one, but a little cleaner. I’ve also been looking at some of the very white-looking low-contrast text-oriented designs.
So I throw the ball to you: what do you think the next mikel.org should look like? Are there any design elements here that you think should be untouchable – maybe the pencil? From a strict usability standpoint, what do you think it is important to fix? The orange I use, for instance – I know it’s a little bright and hard to read on some Win machines. How about the one lowly table in an otherwise all-CSS design? OK, or ditch it? What do you think?
Bill says
Shock value? And here I just never advertise my redesigns-in-progress because I’m too lazy to be sure they’ll see the light of day.
And in terms of anyone else’s redesign, I’m always happiest seeing what comes out of other people’s brains – I already know what’s in mine. Half the fun of seeing a new design is all the stuff I would never have thought to do.
Michael says
Fair enough. But the practical question remains: is the orange I use currently readable enough on your machine? I have always been dissatisfied with it on Win machines, though it’s brilliant on Macs, on flat panel displays and with CRT monitors.
Boris Anthony says
IMHO…
– I think the color scheme is perfect, so stick with it.
– Ditch the fluid layout and lock it down to a, say, 700pixel centered pillar.
– Yeah the orange of the links is a taaad too light… bit of tweaking in the brightness…
That would be a good start for tightening it up. I’m swamped at the moment, otherwise I’d give the CSS a whack for ya quick… Hrmm.. maybe later today… ;)
As for shock value… I just redid mine, and I make no mention of it because it is ephemeral… I redesign when I get sick of the image I am projecting, or get ideas how to refine “my brand”… ;)
Michael says
Ha! You’re basically suggesting most of the subtle changes I’ve been looking at in the “almost identical” design to this one. I spent a lot of time making this design fluid, and that’s why I needed to retain one simple table in the first place, but as screens are getting wider I note that total fluidity is a no-no.
aj says
Having just come through the redesign process, i sympathize. It’s never easy: sometimes there are elements you succeed in fixing and others that are more subtle and harder to understand without trying several different options. Page layout and graphics are never hard for me, it’s getting the paragraph text nice and even-coloured that is hardest.
Ok, here’s my weird right brained take on it, for what it’s worth.
-What Boris said. :)
-The literal pencil must go. For some reason, whenever I see it, I always imagine that it is going to poke me in the eye. I imagine an icon-styled replacement, like the little one in the comment footer perhaps? I imagine something in the header like the icons at Dealmac.com, dealram and their sister sites.
-Use a unified visual metaphor. if you have a 3d drop shadow on one object (like said pencil) then carry it through on like objects (inline images, etc.)
-The top banner just floats there. I’d anchor it right to the top of the window, esp. if you’re going with a centered layout.
-Put the search box top right, next to the header.
-Are you left-handed? If not, then maybe make the menu elements right-aligned. I’d also make each one a bit bigger target-wise.
-The date header could use some left-hand margin breathing room. I find text-in-a-box looks best when there is an even amount of margin all around, at least equivalent to the x-height of the given font, or about 0.5em-1em.
-I’m an advocate for compact lists, so what about wrapping your links list in an HTML form select, to make a tidy pop-up? Or use a rollover-style reveal as on YULBlog.org.
-To optimize legibility of paragraphs, increase the font size (this is always hard to balance cross-platform) and/or the line-height. A line length of about 9-10 words is optimal. I find serif fonts nicer for long-running text, but YMMV.
-Instead of plain white as the background, a page-white background also increases legibility. Since your main color is pencil yellow, a very very light (2%) yellow tint might work.
Michael says
OK I have some minor tweaking to do but I think what I was working on the other morning will come pretty close here. I have done the follwing:
-Kept the pencil but lost the shadow
-anchored the gray box across the whole top of the thing, popped the pencil down below.
-I will make that whole thing much smaller
-debating whether to pop the date in without the background color making a bar across.
-losing the top menu and folding it into the side bar on the right
-search goes to the top and is uncoupled from the unrelated copyright advisory etc.
-keep the feeds links down at the bottom and on the right
-extensive work on font choices and sizes. At one point it really was best to use Verdana everywhere – that day has passed.
aj says
Definitely, there are wider font choices now. Even sticking to the MS Web Standard fonts (Georgia, Verdana, etc. etc.) isn’t bad, but thanks to CSS we can also specify nicer standard fonts…remind me, I should test out Hoefler Text on my site :)
Michael says
I have fallen in love with Lucida Grande for one, but a serif font might work better with the overall idea. Have to check that out.
It’s funny how people either LOVE or HATE the pencil.
But anyhow it’s going to scroll with the page next time around.
Bill says
I am amused by your decision to lose the shadow, as I remember the whole backwards shadow debacle in the early days of this design.
Okay, not a “debacle”. But when does one ever get a legitimate excuse to use that word?
blork says
For my two cents, the orange is a bit light, but it’a acceptable because it’s only on links, not body text. But if you’re tweaking, then yeah, maybe darken it a bit.
As for putting your links in a HTML form select, I say NO! You don’t have that much stuff on your sidebar, so it’s not a problem. More importantly, form selects reduce usabily to a single action: “leave this page and go to the selected one.” I hate that. Probably 50% of the time (or more) when I’m following a link from someone’s “blog roll” I do it by opening in a new tab. If fact, on my own blog roll, I go down it and click open 15 or so tabs at a time, and they all load in the background as I read through them.
I know it’s weird, but I hate using “Back.” It seems retrograde to me.
blork says
Oh, as for the comments, I would redesign so that the attribution is more clearly connected to its comment. Right now, if you look at this group of comments, it’s not always clear who has done which comment. You have to look at the top or bottom comment to see if the “posted by” attribution goes before or after the comment.
This is a common problem that I see in many blogs, BTW…
Michael says
thanks for all the comments gang! Very helpful.
This is what I’m looking at now (draft):
https://www.mikel.org/test2/index.html