Category Archives: Design

Web design, typography, user experience, and visual aesthetics.

New Stopdesign

Doug has redone Stopdesign, and I must say it’s pretty spiffy. But who am I to say anything bad about fixed width designs and subtle lines in the background? His use of large normal weight Georgia is attractive, which is something I tried to use on the WordPress site when it was redesigned a few months ago. I’m a sucker for Georgia though. (Though you can’t tell from this site.) Thoughts: Everything is very clean, but the URIs are still crufty. The different colors on the different sections are great. There is a lot of really interesting attention to detail. It will take some getting used to though, it feels more “bloggy.”

Stopdesign

I was thinking about redesigning, but now it’s trendy. Love the new logo. I also love live redesigns, it really gives you a peek into the designers mind. I learned so much by watching Zeldman iterate his design a year or so ago. When I redesigned photomatt.net it was a live redesign, and it was pretty ugly at some points but I’m happy with how it turned out. Yellow is the new black.

Interface design in WordPress

Matthew Thomas » Interface design in WordPress 1.2. If you think the new options are nice, wait to you see some of the other stuff mpt is bugging me to do. 🙂 We’re very lucky to have this guy around. Don’t believe anyone who tells you UI is easy. Matthew spent a lot of time designing everything and it took me an order of magnitude longer than I expected to implement most of it. (The last 10% will take even longer.)

Plugins From CSS Guru

The infamous Eric Meyer, as you may know, powers his blog with WordPress. In the course of customizing WordPress to meet his needs we chatted quite a bit and he extended the functions he needed to extend using the 1.2 plugin format, and he is now sharing his work with the community. See his Meyerweb WordPress tools and hacks page.

Update: Whoops! I thought I was writing on the WordPress development blog. I’ll leave it here since I already pinged everyone and your aggregators have probably already grabbed it, but if you want to link please link to the entry on wordpress.org. That’s what I get for multitasking while writing a post.

Lockergnome Happy Ending

Chris Pirillo has floated another Lockergnome redesign that embraces web standards and looks good to boot. I couldn’t be happier. Here’s Chris’ post on the matter:

Boo-yah! I’m going to keep nagging Jason until he applies this weekend’s test code site-wide. No legacy tags, beyotch! Oh, and… “This Page Is Valid XHTML 1.0 Transitional!” I’m not sure if I wanna play with a fixed-width or stick with the variable. Doesn’t look great on anything less than 1024×768, but those folks are in the minority. Hey, I got it to look fantastic in all the major browsers on all the major platforms – that’s gotta count for something. Props to glish for the guidance. So, what did I use for my editor? Notepad, baby. Metapad, actually (the best clone around). Thanks to everyone else for the virtual ass-kicking; you accelerated the inevitable.

Most of you will be happy that it looks like a page from this century, but I know some of you are wondering about the markup. It’s decent. Eric Meyer actually covered the Lockergnome debacle and their redesign in his part of the panel on CSS and said it suffers from “classitis” — using too many class declarations. Example:

<ul class="menulist">
<li class="menuitem">
<a href="http://www.emtec.com/mailbell/index.html?lgnm" title="POP3/Hotmail and IMAP Email notification and mail preview">Mailbell - be notified about new email</a>
</li>
<li class="menuitem">
<a href="http://www.vypress.com/" title="Instant messaging and conferencing for LAN">Vypress Chat</a>
</li>
<li class="menuitem">
<a href="http://www.emtec.com/pyrobatchftp/index.html?lgnm" title="Perform automated and unattended ftp file transfers via scripts.">PyroBatchFTP - Scripted FTP v2.08</a>
</li>

Instead of explicitly addressing the menuitem class you could just use the CSS selector .menulist li which would apply to all list items under an element with the class of menulist. I forget the name for this type of selector, but it’s the most useful technique I use daily in CSS.

What’s great is now we are discussing what Lockergnome is doing well and how they could tweak it to make it better rather than wondering how the hell they went wrong. I commend the group at Lockergnome for doing the right thing.

Previous articles on the same subject:

Lockergnome Critique

Paul Scrivens has written one of his famous critiques of the Lockergnome redesign. He covers the redesign point by point with far more detail than I have, taking a multidisciplinary approach. He loses his cool at one point, but try to understand this is incredibly frustrating.

What’s strange is there hasn’t been a peep out of Lockergnome regarding any of this. Aren’t they plugged in to customer feedback?I think a simple statement or clarification would do a lot to clear things up. Though in the comments some people have used names of people at Lockergnome, it isn’t at all about that. This is simply a matter of supporting companies and organizations you can respect and routing around ones you can’t.

Code is Food

Even if you normally skip my “geek” entries, please read this.

Scoble sees I’m unsubscribing from Lockergnome and says:

I’m more pragmatic. Can I look at the page in my browser? Can I subscribe to the RSS feeds? If so, why does it matter whether the code underneath was done with tables or CSS? Call me a fool, but I judge web sites by whether or not they have content and experiences that enrich my life, not whether the code underneath them fits my expectations.

Robert isn’t a fool, we obviously have a breakdown in communications though. I can’t understand why anyone wouldn’t be shocked at the code snippet I posted and Robert doesn’t understand why anyone would care. In fact there is probably a large segment of my audience here who doesn’t have a clue why I get so worked up over this stuff. All morning I’ve struggled trying to think of an analogy that captures the essence of what is going on here.

It became more obvious to me that HTML and CSS code and the health of the web has many parallels to the food you eat and the health of your body. HTML is the ingredients and CSS is the world-class chef that takes the ingredients and arranges them in an attractive, delicious way.

So lets take your token bad markup—multiple nested tables for layout, badly nested tags, font tags all over the place—this is McDonald’s. If I’m on a road trip and need a quick bite, I’ll drive through because it’s convenient and ubiquitous. Though it’s obviously bad for you, it’s not going to kill you if you have a Big Mac. However if you try eating it every day, your body revolts and starts to deteriorate rapidly (original article).

Within a few days of beginning his drive-through diet, Spurlock, 33, was vomiting out the window of his car, and doctors who examined him were shocked at how rapidly Spurlock’s entire body deteriorated.

“It was really crazy – my body basically fell apart over the course of 30 days,” Spurlock told The Post.

His liver became toxic, his cholesterol shot up from a low 165 to 230, his libido flagged and he suffered headaches and depression.

I think the Big Mac is a pretty good example of bad ingredients crappily presented. Bad markup and no CSS.

Now lets move away from McDonald’s to a fictional restaurant like McDonald’s but without the nice clown and all the charities. This company has the same sort of mediocre food but also mistreats its workers, has lax sanitation standards, puts farmers out of business, has slow service, and uses slave labor overseas. Now in additional to the health reasons for not eating at this restaurant, you have a number of ethical reasons. Why should you support any restaurant that is so contrary to principles that you believe in?

That is the web. Think of your poor browser, which has to work incredibly hard to try and interpret what is essentially markup gibberish and shape it into something it can present to you. The worse the markup is, the slower the page is going to load and the more likely it won’t be presented as the author intended. RSS and syndication doesn’t do a thing to solve the problem, it just tries to shield you from it. (Let me mess with my RSS 2 feed until its at the markup level of their page, and see if your aggregator even still reads it.) Robert of all people should know that the quality of code on most websites wouldn’t be accepted for a second inside of any of Microsoft’s products. Longhorn is not being built on crappy code held together in an ad-hoc fashion, it’s being built on standards. Why shouldn’t the web expect that same level of robustness?

Sure some people don’t care about whatever markup is behind the web pages they visit. Out of site and out of mind, right? (Very apathetic American.) But I care, and it’s because of people who care that the web has moved beyond the near-unusable mess it was 5-7 years ago. On one level I care about the health of the web, the long-term viability of the sites and pages and documents that are shaping our culture and society. On a deeper level I hold a number of principles that the web should be efficient, standards-based, and accessible. No site is perfect, but some try and some don’t.

Lockergnome regressing from the standards-based is more than just a bad business decision, it is essentially giving the middle finger to the community around the world that cares about these things. Their lack of communication on this issue beyond a few flippant remarks in a newsletter is insulting. They either don’t care or are ignorant, neither of which I’m inclined to tolerate. I’m not even going to address the point, as other have, that they are supposed to have a web development newsletter.

I’m not just unsubscribing, I’m boycotting. There comes a point when you see blatant disrespect for things you care about and you can either sit back and pretend it doesn’t bother you or you can speak out. It’s two different types of people, and if you’re one of the former then you should examine the effects of your apathy.

To recap, Lockergnome just isn’t just serving bad ingredients with bad presentation, they’re the restaurant you visit every day for its great service and food that one day changes into a dive with spoiled food and flies in the kitchen, and then tells you that keeping the place clean is too “fancy-schmancy” and that they don’t need to keep using fresh food because no one will notice anyway and it’s too much trouble. The next day you see them on the news for rat droppings, food at the wrong temperature, and slime in the ice machine.

Of course at some point the analogy breaks down because I don’t know of any food that is incredibly cheap, tastes great, is very healthy, and stays fresh forever without refrigeration. That’s well-formed XHTML and CSS.

So that’s why I care. I don’t expect everyone to care that much, but at least understand why I do.

It’s Worse Than You Can Imagine

At first I was optimistic that the Lockergnome redesign wouldn’t be that terrible, I mean they have smart people there. Then the evidence mounted that there wasn’t going to be any good hybrid approach. Why go backwards? Is it a joke? Is ruining their website some twisted form of RSS evangelism?

Earlier today a comment from Simon said:

Well, the redesign appears to be out now and it�s much worse than I expected – blockquotes for indentation, paragraphs with non-breaking spaces in them for added vertical spacing – tag soup if ever I�ve seen it. Yuck.

He expanded his thoughts illustrated by the code snippet:

<p>&nbsp;</p>
<p>&nbsp;</p>
<table border="0" cellspacing="0" cellpadding="0" width="778"
bgcolor="#FFFFFF">
<tr><td align="left">
<div id="footer">
<blockquote>&copy; 1996-2004, Lockergnome LLC. ISSN: 1095-3965. All
Rights Reserved. Please read our <a href="/about/privacy-policy.phtml">
Privacy Policy</a> and <a href="/about/terms-of-service.phtml">
Terms of Service</a>. Web site hosted by
<a href="http://www.webair.com/cgi-bin/in?51">Webair</a>.
Email newsletters powered by <a href="http://www.whatcounts.com/">WhatCounts</a>.
Domain registered at <a href="https://www.gnomedomains.com/">GnomeDOMAINS</a>.
</blockquote>
</div>
</td></tr></table>

One can only assume that the newsletters will be following suit, and no one wants that kind of filth in their inbox.

All joking aside, I am going to be unsubscribing from all Lockergnome newsletters. I am not under the illusion that my action will be anything more than a number blip to the people there, but principle of the matter is I don’t have a lot of respect for them anymore. How can I take web development news seriously from an organization that is in the wrong decade code-wise? Even worse, they had something great and threw it away. If enough people were to do the same and unusbscribe they might take notice, but I don’t think that’s going to happen.

I might even be forgiving if their markup (which is invisible to the user when it works) devolved but the site was much easier to use or aesthetically pleasing, but the site has degraded in every conceivable way. I decided I could tolerate the design long enough to unsubscribe, but couldn’t even find that on the site. Google brought up a cached page that no longer exists which pointed to the correct URI, which incidentally still has the old design. So if you also disagree with the recent direction things have taken, unsubscribe from Lockergnome.

Looking for something to fill the void? It didn’t come to mind the other day, but I highly recommend the SitePoint newsletters for web development topics. Blogs are also great, but sometimes it’s nice to get something in yoru inbox. I’m open to suggestions for other newsletters.

Update: I’ve written a new entry that explains why I care.

More on the Gnome Regression

Another newsletter, another reason to worry. Here’s the quote:

We’ve spent a lot of time and effort on our cutting edge CSS layouts and, while they are definitely fancy-schmancy, they detract quite a bit from our core efforts which are great content and easy access to it. So, as Chris put it in yesterday’s Windows Fanatics, we’re taking a mulligan and calling a do over. Lockergnome is changing looks one more time and moving to a more traditional layout and coding structure. This, my friends, successfully filled the rest of the time between when we last graced your in-box and now. I’ve been locked in my office, nose to the grindstone, hacking out automated content updaters, link rotators, and convoluted include structures hand over fist. Now here’s the part that’s going to get resident Web-Gnome, Foofy Mathews, on a plane to throttle me in my sleep… All the layout is based on tried and true HTML tables.

Dave and Paul have already added great thoughts to the discussion, so I’m not going to address the “tried and true” web techniques of the mid-nineties again. My previous optimism is waning, and I hope someone at Lockergnome is listening and will come out of the echo chamber and let us know what’s going on.

Update: I’ve written an update that explains why I care.

Invalid Gnome

I get Chris Pirillo’s Windows newsletter (currently called “Windows Fanatics”) in my inbox this morning and was shocked that he seemed to assert that Lockergnome was going back to its old style, or lack thereof. Maybe it’s just Chris’ flourishes, but several things gave me cause for concern.

Remember what the Web was like when the BLINK tag roamed the earth?

Off to a bad start. We all know there’s only one good use for <blink>.

There were only a handful of browsers, and it didn’t take much to make a page “look good” on all platforms.

Maybe I missed these times. I remember pages “Made for Netscape” or that “Require Internet Explorer.” I remember having to essentially code two sites to work with two radically different browsers. I remember single-pixel GIFs and tables nested ten deep and bad typography. I try to forget, but I can’t.

It doesn’t take much to push the envelope, but sometimes (as we discovered) the envelope pushes back. You might recall the somewhat-simplistic design of our site before we dove head-first into Cascading Style Sheets. Despite its shortcomings and lack of finesse, the sucker worked – and we had few complaints.

I find that surprising. Here’s one: it was one of the ugliest sites I’d ever visited, and the bizarre look turned me off from subscribing to the newsletters even when I had heard several recommendations, because I assumed they must be unprofessional. I’m not trying to be mean, just honest.

Lockergnome.com is about to become less confusing as it goes back to more a basic code structure. We’re going to unbury the menus and options and chalk up the past few months to experience. I’m not saying that we won’t employ fancy scripts now and again, but we’re refocusing our new(er) layout on the thing that most likely brought you to us: the content. Right now, Jason’s putting the finishing touches on the overall structure and functionality…

The attraction of Lockergnome is the content, and the site could use better information architecture, but I hope this does not come at the expense of clean, fast-loading, semantic code and the distinctive aesthetic the site currently has. Though I’m not crazy about parts of it, their current design is pretty good in my opinion. It has some very nice elements that are impressive to me both as a web developer and a consumer. It’s not perfect, but a darn sight better than what was there before.

Is this going to be a step backward? In a way, yes. I’ll certainly miss certain aspects of our ultra-hip CSS implementation. However, until 99% of the installed browser / e-mail client base supports the same standards, we’re gonna leave the fancy-schmancy stuff to other online resources.

Mind pointing out these fancy-schmancy online resources so I can read them instead?

For what we do, and how we need to do it, advanced “hacks” just don’t work well.

What about web standards? Graceful degradation? From a purely business and marketing point of view, is the couple of percent of users on browsers so limited and hardware so old that they can’t appreciate modern web pages (and not just yours, also ESPN, Wired, PGA…) a demographic you want to cater to at the expense of the other 95%?

Furthermore, the old Lockergnome got eaten by spam filter several times because its markup was similar to the spam I got. Since the redesign, nada. Maybe it’s just my Bayes scores or installation of SpamAssassin, but I can’t imagine my setup being different from many others. If a newsletter falls in the spam box and no one sees its ads, does it make a penny?

I doubt it.

I could just be worried over nothing, their redesign could be impeccable markup combined with simpler CSS that works better than their current across browsers and platforms. The only reason I put my thoughts to words is that I’m on the cusp of several decisions. I’m examining my subscriptions; they recently cancelled the Linux channel (which was quite good) and the Web Developer channel is in a state of flux (it was pretty bad for a while). Also the affordable Gnomedex is coming, though my decision on that will probably be more influenced by its speakers. On one hand I have a lot of faith in the Lockergnome team to do the right thing, but the standards-lover in me is just terrified of the prospect of a site going backward. Not to mention the masses who subscribe to the newsletters that will draw the conclusion that “CSS isn’t ready for big sites yet,” in 2004. I can think of nothing further from the truth or more subversive.

Well Designed Weblogs?

Or not.

Lars Holst, who has a beautiful WordPress-powered blog, has been doing a bit he calls Well-Designed Weblogs. I have been pretty disappointed with the second round (and to some extent the first round) of “Well-Designed Weblogs.” It is subjective, but quite frankly there are some sites I don’t see anything in. To me some look plain, unimaginative, squished — overall badly designed.

For the list to be a useful Lars should put a blurb about why a site was chosen so if there is some nugget of inspiration there that I’m missing, I can be enlightened. It would also shed some light on the subjective process he’s going through, which would be interesting. Round 2 has 37 entries — some great, some mediocre, some bad. If it could be distilled to the five or six very best, in Lars’ opinion, it would be a lot more meaningful than the catalog it is now.

But if it’s just a list with screenshots, there are better places to go.

CSS Style Competition

There is still time to get your entries in for the WordPress CSS style competition, with the top prize currently at $70. Not bad for making a single CSS file. What’s great is no matter who gets the prize, the community wins as each entry is licensed under the GPL.

Update: It finished up with 38 entries, many of them quite good. Yes that’s 38 different designs you can use on your new WordPress blog after just updating one line. We might even automate that step too. 🙂

Nick Denton: Blog Maven / Thief

Every once in a while someone you hear a story that makes your blood boil. Sometimes it happens to someone you know. Joe Clark has the complete details, but here’s a rundown of the events as I understand them:

  1. Noel Jackson redesigns Fleshbot using CSS and XHTML, all in perfectly compliant code. I talked with him for a bit of this, sent some screenshots. He worked really hard on it and the result was, if I may say so, gorgeous despite the questionable content.
  2. Joe contacts Nick Denton on behalf of Noel saying what a neat thing Noel had done and recommending they hire him. Joe can be a nice guy like that.
  3. Denton responds that they can’t really afford anything like that right now.
  4. Noel’s design shows up on Fleshbot, a few days later they remembered to credit him for it.
  5. Later Noel’s exact code, right down to an empty div he had to add to get the layout to work just right, shows up on Gawker and Gizmodo. Some colors are changed, and likely due to incompetence of the implementor the other new designs have numerous mistakes added.
  6. Noel steams quietly for a few days, then talks to Nick Denton. Denton doesn’t see what the big deal was using Noel’s copyrighted work on several other sites. It reminds me of people who rip off other’s designs and then don’t understand why you’re mad about it. The copies are not as high quality as the original, as well.

Smells rotten to me. Personally I was quite fond of Gizmodo, as it really is a high quality blog, but I’m not going to visit it anymore and I’ve delinked it because I don’t want to support a company with such low ethical standards. I encourage you to consider the situation and come to your own conclusions. All I can do at this point to support Noel at this point is let more people know about what’s happened to him, in the hope that possibly this could end on a more positive note.

Update: Denton has emailed me and is telling everyone that he has posted chat transcripts that clear everything up. I applaud him for putting more information out there, but it doesn’t seem to help his case much. I suppose anyone can claim ignorance as the reason for a mistake. Some will believe that, some won’t. What makes the difference is actions from here on out, now that everything is “clear.”

Distributed Social Networking Software

One of the greatest things about South by Southwest interactive last year, which I just barely made it to, was the incredible creative energy born of like-minded people interacting with each other closely. Out of a conversation with Tantek Çelik regarding linking, social interaction, and leveraging HTML rather fabricating new formats I became involved in what now is known as XFN, or the XHTML Friends Network.

XFN is a standardized method for leveraging the HTML rel attribute to describe relationships between people. More simply, it’s about enhancing how you link to somebody. Together with Tantek and Eric Meyer (and wonderful feedback) we’ve put together some great information and guidelines for using XFN. Check it out and share the link.

As an example of an early XFN application, people who I’ve met in person now automatically have a star beside their name when I link to them. See the “timely dozen” to your right or my portal page.