As requested, here are the slides from my talk at WordCamp SF 2008.
Here are links to some PHP color libraries:
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.
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.
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.
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
[...] platform, designed by Noel Jackson is perfect for showcasing images, as it automatically resizes each page to fit the picture AND [...]
[...] using Wordpress to do that blog and using this beta theme Monotone created by Noel Jackson together with Automattic, the guys behind [...]
[...] Friday, I discovered that Monotone had been released for WordPress server installations. I decided to give it a new try by installing it on my server. The result is what you can find at [...]
[...] Automattic: Monotone ‹ Work ‹ eight6A nice and free wordpress theme for photoblogs [...]
[...] Noel Jackson used the Rule of Thirds, PHP, and JavaScript to get colors from photos in a blog to create a monochromatic theme, Monotone. [...]
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>
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).
Glad you’re blogging again. Always interesting.
If I wasn’t blogging, how would you know big brother is listening to your every word? I do it for the people.
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
Does your back get sore from hauling your GIANT BALLS around! :)
HAHA! Thanks Dean. Ego: in-check. ;)
Thanks, Noel. My code sucked until you fixed it. You are teh awesome!
Actually, I think the method I’ve been using for years…
http://www.wellstyled.com/css-nopreload-rollovers.html
…is a better choice, overall.
I also strongly disagree that is superior to Company or for a logo. should be reserved for the primary subject of the web page. Take this default WP template – is the page primarily about “Leaves Rustle” or is the page about “The rollover mishap, and how to avoid it.”?
I think the answer is clear where the should be. Semantically speaking, that is. ;)
Arg! It stripped my markup!
@pat Your method is a lot like CSS sprites (http://www.alistapart.com/articles/sprites)
I’ve used the CSS sprites method before, but it’s just not time-friendly to put together one image for rollovers sometimes. Nor is it really worth the effort, especially if you can preload easily.
It depends if you view the H1 as an element for emphasis or for hierarchy. I view it as the latter. I think the title of the blog “owns” the rest of the content, therefore I like it as an H1.
Thanks for your thoughts… it is something to think about.
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.
You’re quite right, screen-readers take this information into account. Emboldened words are spoken slightly more slowly and separated from other content slightly, and italicised words are spoken with more emphasis.
Just like we do in real life (or are supposed to do so, anyway).
Rich
(Oh, but screen-readers ignore emboldened or italicised information set in the stylesheet, as technically, the only reason these would be set in the stylesheet is for that: style. For informational purposes, if something needs to be emboldened or italicised for the purposes of reading, then these should be set in the (X)HTML document.)
Oh yeah – and third comment in a row (sorry about this) but things are really starting to fall into place here design wise, I’m liking the direction you’re heading (especially the headers for the date bit and the comments section on each article, with the Roman typeface)!
Have fun,
Rich
Thanks Richard… I’m slowly, but surely getting there with the design. It’s just a spare time issue… I don’t have much!
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
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'
Thanks for the post, I had been looking for an example very similar to this! I did have two questions regarding some behaviours if you may know.
1) $dirname, does this imply in this case /home/noel/domains/*/logs/, is this where the files will be rotated?
2) if I added -z 0 at the end of this command, would that be the proper syntax to have the logs gzipped?
Thanks in advance!
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.
Tim are discussing. 
pat, 
Chris is discussing.
Wayne State Web Communications Blog » Blog Archive » [Friday Links] The Slow News Week Edition 1:12 pm on 22 Aug 2008 Permalink
[...] Slides for “Color Theory and the Making of Monotone” [...]
WordCamp San Francisco 2008 Highlights | sewmyheadon.com 2:31 pm on 22 Aug 2008 Permalink
[...] Jackson’s “Color Theory and the Making of Monotone“ explained the color theory and slick PHP coding he used to create the Monotone and upcoming [...]
WordCamp San Francisco 2008 ?? PPT ?? 12:19 pm on 23 Aug 2008 Permalink
[...] ???????????????? ?? ????????? :-? Noel Jackson speaking on Color Theory and the Making of Monotone — ????? Monotone ?????? Color Theory and the Making of Monotone View [...]
WordCamp SF 2008 | DrumGit, Curtis Cunningham's blog. 6:52 pm on 23 Aug 2008 Permalink
[...] this design focused talk. I made it part way through so missed a lot of context.. must review his talk slides to get up to [...]
Ian Stewart 5:41 pm on 15 Sep 2008 Permalink
Thanks for putting these slides together, Noel. Is there a video of the presentation kicking around?
(N.B. The last three links in the “Sources” slide are all pointing at the same URL. )