As requested, here are the slides from my talk at WordCamp SF 2008.

(Download in PDF format.)

Here are links to some PHP color libraries:

• csscolor.php
• ColorChip

Once my color finding algorithm is perfected, I’ll be releasing it as an open source PHP class.

Thank you, everyone, for attentively listening to my talk, and for the great feedback.

Sphere: Related Content

It’s good to see I’m not the only one feeling that most CSS frameworks are missing the point. SenCSS really is a nice starting point for getting a site’s CSS going - especially for those starting out with CSS, SenCSS would be a dream.

SenCSS was developed mostly for myself. I noticed that the stuff common to most of my designs and projects wasn’t the layout, and thus all layout CSS frameworks had very little use for me (I’d be writing exceptions all day, no thanks!). However, There was a lot to gain from a smarter CSS Reset, vertical rhythm and a set of often used styles. Basically I wanted something that i could drop it, start working on my layout and fine tune when the layout was finished.

Introducing SenCSS | KilianValkhof.com

Sphere: Related Content

Firefox 3 Release Candidate 1 was just released. I’m still hoping Firebug for Safari will someday be built (though I think that’s just a pipe-dream). The Web Inspector in Safari just isn’t cutting it these days.

Sphere: Related Content

We created Monotone with Automattic, the company behind Wordpress.com. The challenge: create a theme that changed photo-blogging up a bit and brought back some of the nostalgia from the early photo-blogging days.

The end result is Monotone, a simple but dynamic theme for wordpress. It makes each photoblog, and furthermore, each entry, unique by taking the attached image and sampling colors from the layout to create a one of a kind color palette for the page.

We really loved being able to work with such a smart group of individuals and continue to work with Automattic on some other top-secret projects.

We’ve been just enamored by the response this theme has gotten with responses like the following:

I really am enjoying my photos all over again, and looking at the world with fresh bright eyes, thanks to you!

Much obliged,
Carrie Cahill Mulligan

Monotone is great. Thank you. My photos have finally found a theme that does them justice (in my opinion).

- Khürt

Beautiful photo and theme. Great work.

- juiced

Really nice! Makes me want to start a photo-blog. I was searching for new incentives to take my camera for walks, and here it is. World, watch out, the shutter bug is coming back, hehe…

- Simone

Sphere: Related Content

It’s been a long time since I remember someone talking about the cite element. It’s my favorite HTML element…

So, lets revisit:

Valid examples of the element:

<blockquote cite="http://yourreferencesite.com" title="Article, title, author, date">
<p>This is one paragraph</p>
<p>Yet another paragraph</p>
<p>Says: Your Source<a href=”http://yourreference.com”><cite>Your source:</cite>
</blockquote>

Aside: technically shouldn’t forum software use something like:

<dt id="n33"><cite><a href="/profile/">Author Name</a></cite><br /><strong>12.12.12 00-00-00</strong><br /><em>Title</em></dt>
<dd>
<blockquote cite=”#n33″>
<p>comment goes here</p>
</blockquote>
<p><small>Forum signature</small></p>
</dd>

Sphere: Related Content

The Open & Closed Project is a new research project aimed to improve quality, by setting standards for accessible media.

They’re going to create, develop, and test, captioning standards; as well as train pactitioners in the area of standards for captioning, audio description, subtitling, and dubbing.

We helped them create a “microsite.” It made an immediate and long standing impression with the visitors, by using bold design (that engages, and also hints at the correlation between bad captioning and questionable design).

Sphere: Related Content

There IS an ECHELON!

Having trouble getting your CSS rollovers un-glitchy? Pre-load them, easily… If HUGE can learn from me, so can you! ;) (I’m saying this jokingly.)

Yes, this a real email I sent HUGE. They fixed the problem by doing exactly as I said. And they didn’t even say THANK YOU!

I’ve sent this same sort of email to lots of people - including some pretty great designers and developers. All not preloading their rollovers. So, for the sake of helping to spread the gospel of the css preload, I’m just going to email everyone the link to this article from now on…

Some of you asked for a video (okay, one person). I love clusterflock, and they don’t have non-semantic HTML (despite putting H2s before H1s), but they’ve got the same problem with CSS rollovers: clusterflock rollover (144KB) (Did you catch the glitch?)

From: noel@eight6.com
Subject: Attention, you have a website bug…
Date: February 20, 2008 12:27:29 AM GMT-05:00
To: nameremoved@hugeinc.com
Hi HUGE!

You’ve got a problem with your website. Albeit a small one, but one a pro should not make.

Your hover state on your div element with the #logo id isn’t preloading the hovered image. Thus, you get a flicker on the hover state when the image has not been cached. On a slow connection this can be from a half second to 2 or more seconds. Bad implementation.

First things first, you are using incredibly non-semantic markup for your header. I specialize in standards compliant markup and have been doing so for 10 years.

Your code SHOULD look something like:
<h1 id="logo"><a href="/">HUGE</a></h1>

NOT LIKE THIS: <div id="logo"><a href="/"></a></div> BAD!!! BAD!!!

I know you don’t need better search results, as you get plenty of clients already. But, by being the best, you should really have the best code… you don’t.

Again, to fix the bug, that I’ve also put onto video here:
http://eight6.com/assets/huge_hover_problem.mov

To fix it, preload the hover image by implementing the following CSS, that loads the default image behind the link in a container div.

#logo {
/* This is the line that prevents the flicker when hovering */
background:url(/imgs/logoBlack.gif) no-repeat;
}

#logo a,
#logo a:link,
#logo a:visited {
background:url(/imgs/logo.gif) no-repeat;
display:block;
width:144px;
height:57px;
}

#logo a:hover,
#logo a:active {
background:url(/imgs/logoBlack.gif) no-repeat;
}

BTW, I am in NYC this week for client work if you would like to meet me and I can show you the problem. Or feel free to call me at 734-642-9187

I think you guys do amazing work. Keep it up… and if you need a hand keeping that code tight and more semantic, please let me know.

Best,
Noel Jackson

-
noel jackson
founder eight6 | http://eight6.com
noel@eight6.com
+1.734.642.9187

Sphere: Related Content

I just updated to the WP trunk. Which is just fantastic.

I need a new design to go along with the upgrade, so until then, I’m sticking with Kubrick.

Garrett Dimon recently wrote about ambient indicators. (His blog is great, by the way.) More specifically, he talks about how OS X deals with notifying the user of document changes on the close button (ambiently). But he also touches on how this applies to Web Design/Interaction Design:

Changing the color, typographic characteristics, or similar visual options does not reliably convey that information to all users.

This sentence lit up like a lightbulb; all these years I’d been spouting the words myself, yet somehow I managed to overlook how I apply this principle to my own work.

I recently used something like this in a menu <a class="selected" href="/">home</a>, when in reality I should have been using something like the following: <a href="/"><strong>home</strong></a>

The menu was showing changes with the selected class, but not in lynx, or on a screen reader. Using <strong> is just as easy to style, yet conveys ambient information, whereas a class does not, without a stylesheet.

This brings up a good thought. Why don’t screenreaders take in to account simple typographical information conveyed in CSS stylesheets? Do they? I don’t know; but they could and perhaps should. Especially when applied to the instance I’ve stated here. Just because I used a class instead of a <strong> element doesn’t mean I or the user should be struck on the wrist.

It just goes to show, that even the littlest nugget of information you’ve heard over and over again, can pass you by, or allude you.

Sphere: Related Content

If you are a web designer, or anyone that works on websites, the most important article you can read this year (and maybe even next) is “Avoid Edge Cases by Designing Up Front” by Ben Henick

Sphere: Related Content

logadm -w apache2 '/home/noel/domains/*/logs/{access,error}_log' -C 30 -a '/opt/csw/apache2/sbin/apachectl graceful' -p 1w -t '$dirname/$basename-%d.%m.%Y.log'

If you get cannot connect to Courier authdaemond in /var/log/syslog just do the following:

sudo chmod +x /opt/csw/var/spool/authdaemon

Ryan is a wunderkind, now a regular shooter for Vogue and Vanity fair, at the ripe old age of 25.

Designing a simple site that made it easy for him to update was the challenge. It was a very inspiring and interesting process working with Ryan. Learning how he views his photo shoots helped influence the way we designed the site; albums like story books, with horizontal navigation.

We ended up customizing PhotoStack to work just the way he needed it to. And now, Ryan and his assistants can update the site in just a few clicks, instead of a few days. This saved Ryan lots of time, not to mention hundreds of dollars in fees he was paying his former webmaster to update the site.

Sphere: Related Content