WordPress “Art Direction” Plugin Version 0.2
December 19th, 2008
• • •
WordPress “Art Direction” Plugin
December 16th, 2008
Update: Version 0.2 is now available. This fixes a small bug that may result in duplicate styles.
Short story:
I wrote a plugin (it’s in beta) available over here: WordPress › Art Direction. The tagline is “Per-post styles for new age art direction.”
Long story:
Automation is the king of convenience. It’s also a killer of creativity and quality. Examples: MP3 vs. Vinyl, Transistors/Diodes vs. Tubes, Xerox vs. Letterpress, Digital vs. Film. The newer technologies allow a quicker route to (perceived) gratification, but the older technologies always deliver a superior end result.
Web sites have gone from home-grown concoctions of HTML thrown together with bits of glue and tape, to vast content management systems automating the entire process. It’s lowered the barrier of entry for publishing on the Web, but it’s also sucked away the creativity.
I’ve been in love with blogging and feel that CMS’s are the way of the future. But, I’ve also been feeling an ever increasing homogenization on the web – in part because of the low barrier of entry for publishing, and the finite amount of designs available to most individuals – and the static nature of these designs.
Earlier this year two things happened on the web that opened my eyes. I designed a theme for WordPress.com, Monotone. It took colors from an image and used them to surround the image and create a somewhat dynamic and unique experience for each entry. A nice blend of dynamic and static qualities.
Elsewhere, a little after the launch of Monotone, Jason Santa Maria redesigned his site using EE – the horror! ;) – to give him more control over each entry’s design. It was a brilliant use of technology!
But, I don’t want to pay for my content management system when there is already a superior, Open Source, and extensible system available. (I’m talking about WordPress.)
So, I wrote a plugin to provide me with the ability to add styles/javascript/whatever I wanted to each entry, I call it Art Direction. It’s in beta right now. So, help me make it better, so we can all enjoy a little more flexibility and creativity.
Caveat: it may invalidate your code, depending on how you use the plugin (due to inline styles). This is a temporary problem.
Sphere: Related Content• • •
A Sensible Standards CSS Framework
June 19th, 2008
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.
Sphere: Related ContentSenCSS 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.
• • •
The rollover mishap, and how to avoid it.
March 28th, 2008
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
• • •
