First item cross-posted at LiveJournal.

Apparently the design was a big hit as a poster at SXSW.

For those who haven’t seen it, the MDC is a great developer resource for web developers, describing lots of standards along with Mozilla-specific information.

(via Rhian @ SFX, who notes that the image is available for use under the terms of the Creative Commons Attribution-NonCommercial license. These wallpapers are also covered by the Mozilla Trademark Policy.)

• Get rid of the non-working compatibility cruft for Netscape 4 (some of it was actually making things worse in NS4)
• Make navigation easier.

I decided early on that I wanted to move to that old standby, the tab bar across the top of the page. I toyed around with using fixed positioning so it would stay in place like a toolbar, but couldn’t get same-page links to position themselves correctly. I also realized that the tab bar needed something above it, or else it would blend in with the browser’s toolbars. Solution: another old standby, the site logo above the tabs

After trying some more out-there ideas, I ended up with the rest of the page looking about the same as before. Having the logo at the top meant that I didn’t need a giant logo on the main page, freeing up space to add something I’ve meant to do for a long time: Post more obvious links to each of the main Flashes.

Something interesting I noticed: I’m now considering IE6 a second-tier browser. I’m building for IE7, Firefox, Opera and Safari first. I no longer care about minor issues in IE6, just major ones. I realized this when I decided to use an alpha-transparent PNG at the top of every page. Sure, I was able to use PNG Behavior to get it to look right in IE6, but that requires scripting, and it’s not the same as native support. (Now that I have that linked on every page, though, I can use alpha-PNGs anywhere without additional effort.)

I also decided to switch from XHTML, which I’d started using in the 2000 redesign, back to HTML 4.01. The site had never benefited from using XHTML, and HTML still has wider support, so I figured if I was going to be changing code anyway, I might as well take the opportunity.

I posted the new layout last Sunday, and I swear, within 10 minutes someone had sent a comment on it.

Monday was time for fixing bugs. Not surprisingly, the biggest ones were both in IE. They were two related bugs involving floats and italics that had the opposite effect in IE6 and IE7. They were also intermittent, only affecting particular pages and only with certain window sized, which is why I hadn’t caught them before launch.

IE6 encountered the Peek-a-boo Bug. On certain pages, text next to a floated image would not appear. IE7 encountered another disappearing content bug, in which the floated image itself would stop displaying below any line with italics. (What is it with IE7 and weird problems with italics?) It turned out both could be fixed by setting width or height on the article DIV, instead of letting it take the size of the container (which includes the footer), so I just made it 97% (since 100% confused IE6 even more) and had done with it.

Finally, I’ve added some enhancements for certain browsers using experimental CSS3 features. People visiting with Firefox or other Gecko-based browsers will see rounded corners on the tabs (it looks much better than the square-cornered version, but isn’t necessary), along with people using nightly releases of Webkit (with any luck, the feature will be in the next version of Safari). Really neat was box-shadow, so far only in Webkit. I was finally able to add the drop-shadows to the article and sidebar the way I wanted to back in my last redesign in 2002! I’m looking forward to seeing other browsers implement it.

• Bugs or “missing” features in the new browser (whether incomplete support in the new browser, or proprietary features in the familiar browser).
• Broken code on the website being handled differently.
• Different defaults where behavior isn’t well-defined in the specifications.

A big problem is that when you get into the code, a lot of pages aren’t as specific as the authors think they are. When you write code and test it on one browser, you’re not testing that the code is correct, you’re testing that that browser makes the same assumptions you do.

It’s like ordering pizza.

No, really. Let’s say Internet Explorer specializes in Chicago-style pizza, with a thick, chewy crust. And let’s say Firefox specializes in New York-style pizza, with a thin crust. But each can make the other style of pizza on request.

So you call up Internet Explorer and ask for pizza. They deliver you Chicago pizza, and if that’s what you wanted, you figure your order is fine. If you actually wanted New York style, you make sure that next time, you tell them you want that style of pizza.

But let’s say you like Chicago pizza. You get used to calling up IE and just asking for “pizza,” until one day you’re busy, and ask your roommate to order it. He likes to get his pizza from Firefox, so he calls them up, asks for “pizza,” and you get New York style. That’s not what you wanted. Obviously, Firefox pizza is inferior, because they got the order wrong! Well, no, it’s not, and no, they didn’t. They delivered what they were asked for. If you’d told your roommate to ask for Chicago style, Firefox would have been perfectly happy to deliver that style of pizza.

The moral of the story: always be specific with your code. Make sure it’s asking for what you think it’s asking for (validation helps here). And if something doesn’t do what you expect, make sure you didn’t leave that expectation out of your order.

See also: No, Internet Explorer did not handle it properly

(Expanded from a comment I posted at Mozillazine.)

What I like about this is that it manages to get the idea across clearly even though it doesn’t use the actual Windows name or logo. “Win” is enough to get the name across, and the overlapping colored rectangles immediately call to mind the look of Windows 2000, Windows Me, and Office 2000. Sure, it’s one redesign back, but it’s still recognizable.

As for why they made their own logo? Well, it’s all hardware, with no drivers needed, so there really isn’t any point in putting it through the OS compatibility tests. You might as well label a monitor as being “Designed for Windows.” But not everyone knows what is and isn’t OS-dependent. Even those who do are more likely to buy it if they have that reassurance. I’ve looked at devices that I was 90% certain should work with any OS, but bought the one that specifically mentioned Mac or Linux compatibility because it filled in that last 10%.

Of course, even if you don’t recognize the specs, you can identify them easily by the column headers:

• Opera is red
• Browser 1 is blue
• Browser 2 is orange

Hmmm….

Interestingly, I’ve got a project I’ve been working on off-and-on for a couple of weeks, and I’ve already put together a design using just color to represent different browsers.

It looks like I may have been on to something.

Update August 8, 2005: Apparently there are countries in which it is illegal to mention a competitor by name in ads, which might explain the tactic. Also, Opera has taken down the page, replacing it with a note that “This page is under development.”

And of course, Firefox’s cookie preferences were labeled “Cookies are delicious delicacies” for so long during the beta period that by the time they wrote a real description for 1.0, someone wrote an extension to put it back in!

Well, sometimes dummy text makes it through “rehearsals,” so to speak. Jim Heid found live sites with various kinds of filler text. Not just the ubiquitous “Untitled document” (millions of pages), but samples of “lorem ipsum” filler and even ~250 hits for “this is placeholder text” (whoops, I’m gonna skew those results a bit.)

(via Scobleizer, who recommends using “xxxxx” exclusively for placeholders.)

We’ve all visited websites that made us wince. You know what I mean: full of distracting animation, flashing text, and enough other clutter that it reminds you of a Victorian home filled to bursting with knick knacks. Are you guilty of filling your website with useless junk? Christian Heilmann takes you down his checklist of website clutter. You just might find yourself considering a redesign.

Yeah, that sounds like a description of Dev Articles to me. I count no fewer than 8 ads on the first page, 6 of them animated. The text is buried in a morass of advertisements and navigation that make it extremely difficult to actually read the article.

It reminds me of a book called Fumblerules, which collected (or possibly originated) guidelines like “Always proofread carefully to make sure you don’t any words out,” or “Plan ahead” with the last few letters scrunched together to fit on the page. These were designed to make their points by deliberately breaking the rules to make them more memorable.

Well, there’s always the Daily Sucker.

Update: I checked out the author’s website, which demonstrates he has the sense of taste and aesthetics one would expect from his articles. It really is too bad DevArticles isn’t willing to take his advice.

My Linux box at work — a 300 MHz Pentium II — runs WindowMaker. It’s familiar, it stays out of the way, and it doesn’t tie up the memory or CPU that a modern version of KDE or Gnome (or Windows, for that matter) would. But you need to add applets like a clock or a desktop pager. You can find them easily enough — I ended up using the aptly-named wmclock and wmpager – but there’s a significant problem with both. WindowMaker lets you change the size of the dock icons, but when I shrank the dock to get more space I discovered that both applets have a hard-coded size of 64×64 pixels.

As you can see, a 64×64 applet just doesn’t work in a 48×48 space. It surprised me, though, since these dockapps are designed specifically for WindowMaker, and it’s WindowMaker itself that lets you change the size. You open up Preferences, change the size, and restart WM. Just menus and buttons. No config files, no registry, no third-party add-on. This isn’t an esoteric hack that takes serious effort to find, it’s a basic feature. You might as well design a Mac program that assumes the Dock is on the bottom of the screen. For most people it will be, but it’s not rocket science to move it.

In my ICS classes, they always discouraged us from using “magic numbers” — just throwing a number in the code without identifying or abstracting it. There are two very good reasons for this. The first is that you might forget what this 64 is doing. The second is that you might decide to change it later on, and it’s much easier to change one SIZE=64 definition than to track down every 64 and hope you’ve neither missed any you need to change nor changed any you need to leave alone.

Those dock applets are stuck at 64×64 pixels because the programmers were thinking in terms of the pixel grid, not in terms of actual display size. They weren’t designed to appear 1″ x 1″ but were designed pixel by pixel, assuming no one would change the default size. But that size is configurable, and 64 pixels wasn’t selected for any intrinsic value, but because it worked well on displays of the time.

Screens are getting bigger, and every year video cards can display higher and higher resolutions. The classic 32×32 icon is starting to look small, and the last few years have seen a trend toward scalability in desktop design. Windows icons are designed at several sizes. Mac icons are designed large and scaled down as needed. KDE is moving to vector-based graphics. These are different approaches, but they deal with the same problem: accommodating both the casual user with the 800×600 screen and the power gamer with the 2048×1536 mega-display.

It’s not just icons and GUIs. For several years it’s bugged me that web images are not just pixel-based, but pixel-sized. You can scale fonts and CSS elements by actual display size (to a point), but images are still tied to the density of the screen. All you have to do is print a web page and you can see the difference in resolution. Wait a few years, and that 400×300 photo is going to look like a thumbnail. Graphical menus won’t be readable anymore. Those antipixel buttons you see to the right, with one pixel-thick letters? They’ll be completely illegible (though CSS buttons ought to do okay). And while active websites will adapt with each redesign, what of the millions of live, but unmaintained sites? You know, the sites that still have useful information, but haven’t been updated since 1997?

All those width and height attributes, all those gifs, pngs and jpegs, they’re all done with magic numbers. And they’ll all need to change to something real eventually.