Another new design (or lack thereof)

Although I was relatively happy with the most recent design on this site, I just found it to be too cluttered once all of the detritus of my actual blog posts got thrown into the mix. So I’ve taken the same basic layout (including my ongoing issues with clear: both which I just haven’t had time to resolve) and stripped out most of the visual elements: I’ve replaced the pungent green gradient background with plain white; I’ve removed the light green background on the sidebar; I’ve changed the background of the nav bar to extend across the page and given it a splash of the gradient color removed from the rest of the page; etc.

It’s all a bit plain now, of course, but that’s kind of the point. However, the design will be evolving over the next few weeks as I work out a proper solution for the header area (even including, perhaps, the glorious return of the “34 photos” gimmick I was doing a year or so ago, now that I have a camera in my pocket at all times, and can snap more images of the number “34” around the city).

I know you care!

Update: Guess what. Screwed up in Internet Explorer. Awesome. More hugs ‘n’ kisses for Ballmer. Looks like it might just be a simple z-index thing, though, so I’ll fix it once I finish running the obligatory Windows Update.

Bleeding-edge web design, circa 1994

Microsof’s home page in 1994... don’t cut yourself!A recently-departed (as in left for another company) coworker stopped by my desk on his last day to drop off a backup CD I had burned back in 2001. Today I popped it into the drive to see what curiosities lurked within. I was delighted to discover one of my trademark “Miscellany” folders, with a bunch of random stuff in it. Unquestionably the most interesting artifact was a screenshot of Microsoft’s website, as it appeared in 1994.

I’m simply at a loss to explain this design. Clearly many most all web designs from that early need to be cut a little slack, and I doubt any of them have truly aged well. But even through that lens, this site is inexplicably hideous.

I’m certainly not the first person to look back in time and mock this design, of course. But “usability guru” Jakob Nielsen used it in an article he wrote back at the time, and it’s still lingering on his site with a new introduction written in 1997. (Frighteningly enough, if the conclusion I draw from my brief perusal of the long and boring highly usable article is correct, he’s actually praising this design.) Personally I think Nielsen’s views are overrated, and that if he really knew as much about usability as he is supposed to, his website would look a lot different (and he’d also realize he no longer needs to cater to the bandwidth limitations of those running 28.8 kbps modems — but I digress; besides, these guys rip into him much better than I care to). But it’s still an interesting look back in time.

OK, Microsoft, you’re off the hook…

But not in the way that the Cheat is off the hook.

I fixed the IE6 CSS problem I ranted about yesterday, and it was perhaps one of the more satisfying solutions I’ve encountered where IE is concerned, because all it required was that I remove a few lines of CSS code that turned out to be unnecessary anyway.

My approach to CSS is one of building a solid page structure and then fine-tuning the details until I have exactly what I want. A side effect of this is that sometimes I leave in unnecessary definitions along the way. If they don’t alter the output in the browsers I test (Firefox always, Safari often, IE7 at least once or twice along the way), then it’s good.

But in this case I had an entire definition that was completely unnecessary. It wasn’t hurting anything in Firefox or Safari, but it was doing all sorts of crazy crap in IE6. Naturally, in such a situation, I blame Microsoft.

To be honest it’s not really (entirely) Microsoft’s fault. I have to recognize that I’m building pages to be interpreted by different rendering engines (the latter part of which is where Microsoft’s blame, to the extent it exists, resides). But there are an unlimited number of ways to write standards-compliant code (which I think I do pretty well, most of the time), not all of which lead to the same desirability of output. So if there’s a standards-complaint way to also accommodate IE’s quirks, that’s the way to go. My biggest problem is that my access to IE6 is fairly limited, and IE7, although it has its own quirks, is a lot closer to what Firefox and Safari produce.

So… there you have it. The site should now look good in every major browser currently in use (Firefox, Safari, IE7 and IE6). If not, complain below!

On a side note, Steve Ballmer sticks out his tongue a lot. (Even when you’re not deliberately looking for it.)

Microsoft! You’ve done it again

IE6, to the last I grapple with thee; from hell’s heart I stab at thee; for hate’s sake I spit my last breath at thee.Drat.

As I was assembling the current site redesign, I took extra care to ensure that this time around it would be compatible with IE6, as much as a I detest it. I got rid of all of the 24-bit transparent PNGs, opting instead for minor design alterations that could rely instead upon 8-bit PNGs, non-transparent 24-bit PNGs or JPEGs. I even tested the code for the navbar to ensure that it was properly floated and that the drop-down menus worked.

But then I must have gotten into a fine level of finessing the placement of certain objects or… something. At any rate, I’ve done something in the past few days that, now that I bother to check, apparently breaks the navbar in IE6.

I’ll have to futz some more and try to undo whatever I did (and hope it isn’t something that’s critical to the perfect layout in every other browser out there). In the meantime, my apologies to my one regular IE6 visitor. (You know who you are.) Oh well, at least I have a regular visitor.

Giving Microsoft a ribbin’ over the ribbon

OK, that was an incredibly lame title; I guess I’ve just read too many headline puns in Entertainment Weekly over the years.

Anyway, I’d like to take a moment out of my ongoing obsession with translucent menu bars and open source operating systems (OSOSes?) and turn to the “dark side,” if you will. (That’d be Microsoft.)

A few weeks ago I took a training course for work. The course was not actually on Office 2007, but the computers in the training room were equipped with it, and it did come into play a few times. This was my first exposure to this version of Office, and needless to say I was stunned (and not necessarily in a good way) by the radically altered user interface.

I wouldn’t say I have any kind of unhealthy attachment to the lowly menu bar, but it is, after all, one of the cornerstones of a graphical user interface. I suppose being a Mac user has an effect on my sense of its importance, since it is ever-present at the top of the screen. I do think the Windows approach, where the menus are integrated into the application window, makes more sense and is — perhaps (gasp!) — more intuitive for novice users. But regardless of where it is, in most applications it just needs to be there, and without it I’m as lost as I’d be if I were looking not at a computer screen but at the inscrutable LCD display of a photocopier or a fax machine. (Have I ever mentioned how much I hate photocopiers and fax machines?)

If you’ve not yet seen Office 2007, you may not understand where I’m going with this, but, yes… it’s true… the menu bar is gone — GONE!!! — in all Office 2007 applications. Instead, you have… this:

Microsoft Word 2007 ribbon

Credit where credit is due (so Microsoft will not sue, since this image is surely copyrighted), I swiped this screenshot from here.

Maybe it’s just the effect of Steve Ballmer‘s voice ringing incessantly in the ears of their developers, but Microsoft actually has the audacity to suggest that this “ribbon” reduces clutter. Never mind the fact that you likely will have no idea where your formerly familiar menu options have gotten off to in this sea of buttons. And do not for a moment ask yourself why, if the tabbed ribbons have replaced the menus, they couldn’t have at least given them familiar names and organization (“File, Edit, View,” etc.).

Maybe I’m too “old school.” Maybe I’m a “dinosaur” or a “curmudgeon.” Some have made the valid argument that this interface may in fact be more intuitive to a new user who’s not familiar with the older versions of Word, Excel and the rest (yes, PowerPoint and Outlook are the Professor and Mary Ann of Office). But I have to ask this: how many people who are going to be using this really have never used Word (or for that matter, a computer with a GUI) before? And even if they haven’t, is an interface that assaults the new user with no less than sixty-one (according to my count in the above screenshot) buttons, tabs, or other clickable thingamabobbers, really going to instill in them a sense of ease, comfort and self-confidence at the keyboard?

But the ironic beauty (for us Apple fanboys) of this new interface is more than skin deep. For me, the most, erm, (I’ll use the word again) stunning thing about the interface is the magical, shiny, multi-colored and oh-so-enticing (yet strangely off-putting) Office button in the upper left corner, which not only beckons to you like a mercury-flavored Spree in this screenshot, but in fact pulses (yeah, that effect was cool in 2001) to the point of literally begging you to click it.

Go ahead. Click it.

But only click it once. For if you click it once, it spreads before you the most wondrous, the most essential (and for that matter, just about the only) menu in the entire application, containing options for opening, saving, printing and whatnot.

Click it twice, though, and guess what. No really, come on. Take a wild guess. That’s right, it closes the program. Brilliant! That’s really taking the novice into consideration. If there’s one thing I know about novice computer users, it’s that they don’t understand the difference between a single click and a double click. In fact, it seems the human brain must be hardwired to intuitively grasp that any quick poking motion with a finger should be done twice in rapid succession, and it’s only through years of experience with a computer that the tech savvy among us have trained ourselves out of this habit. Why else would so many websites (the first realm in computing that so boldly ventured into the netherworld of the single mouse click) have to plaster their pages with warnings not to click “Submit” buttons twice, lest Amazon.com should send you a duplicate copy of The Birds in My Life. (For the record, I found that particular item by going to Amazon and typing “stuff old clueless people like” into the search box.)

Now where was I? Oh yeah… my desktop. Because that’s what I’m looking at now that I accidentally double-clicked the mercury Spree. I assume that button is intended to be the Office counterpart to the new Start menu icon in Windows Vista. I have yet to use Windows Vista, or even to encounter a computer that has it installed. Nor have I yet talked to anyone who’s actually purchased it or a computer that came with it, but I’d guess that’s mainly because I don’t know anyone like this guy:

A typical Windows Vista user

Yes, that guy was in a picture on this page. I went to Microsoft’s website, looking for information about Windows Vista, and the first human face I encountered was that of Andy Samberg‘s stoner (or would it be “stoner-er”?) little brother.

OK, well… I don’t really know how to wrap this up. It’s almost 2 AM and I’m spent. I might go weeks minutes before I can find anything more to criticize about Microsoft. But don’t worry, when I do, you’ll be the first to know.