“Do NOT mix generating and editing. When youÃ¢re making a piece, donÃ¢t stop and get judgmental half-way through. If itÃ¢s a piece of crap, get that piece of crap out of your system Ã¢ donÃ¢t try to fix it mid-flow. Finish it, move on.”
Along with Movable Type 3.2 came a ton of new stylesheets from the good folks at Six Apart. And they even created a Style Library that lets you preview each of the new styles before downloading them. My favorite is Lilia Ahner’s Purple Crush. The library is AJAXified, so I haven’t found a way to link directly to the preview pages, but you will find Purple under the Bold Palettes category. For those of you using standard templates on your Movable Type blog, be sure to check out these great new templates.
Jason Kottke exposed a delightful idea in a comment on one of his postings today:
Degradable interfaces…the more you use it the more wear it shows. Why does everything have to look like it has never been used? Give me hard edges that become blunt, rounded corners that get shiny, labels that wear off.
I love this idea. A couple of years ago, I was going to launch a design for kottke.org that changed the more you used it. First time users get new graphics but someone who’s visited the site 50 times gets a less “branded” version, the idea being that someone who’s been here 50 times knows where they are and doesn’t need any big logo or anything, just the info they’re after.
I have not seen any examples of this type of behavior on a website, but I would certainly love to see it in action.
I saw a mention of the ‘Global White Space Reset’ technique on someone’s website several weeks back. Ever since then, I have been thinking of the many different ways I could use it. The problem was that I couldn’t remember what it was called or where I had seen it. But tonight, after an hour or so of Googling for it, I finally found it. I am certain that I will use this in my next web design project.
Using images to display text has long been the bane of web designers. For starters, image tend to create an accessibility nightmare. A person with impaired vision will often use a screen reader application to view a website, but to my knowledge, there is no software in this category that can “read” an image. So in the interest of making websites acccessible to all, the web design community began seeking alternatives.
The most popular of these techniques, Fahrner Image Replacement, was created in 1999 and popularized by Doug Bowman in 2003. This technique, however, is not without its faults. It has been proven to fail in many screen readers. And just a year after Bowman’s tutorial on the technique was published, he “officially deprecated” the technique.
When this happened, the community was not extremely surprised. After all, it had been known for some time that FIR wasn’t 100% compatible with screen readers. But many were left wondering, “What next?” We needed an alternative, but that alternative was not readily apparent.
Since those days, however, it seems that a lot of work has been done to find the perfect solution. Dave Shea has a collection of examples for various techniques. Shaun Inman created the Inman Flash Replacement technique. And more recently, Inman collaborated with Mike Davidson and Tomas Jogin to create the sIFR technique.
I have yet to see a technique that is perfect. Some don’t comply with the web standards. Others don’t work with screen readers. I suspect that the perfect technique will be a holy grail of sorts. And until that technique comes along, use the technique that works best for your site.
As I’m sure you have already noticed, things look a bit different around here today. I finally got tired of staring at my half complete redesign and decided to just throw it out there. There are some rough edges still, as it’s certainly a work in progress. But the front page and the articles are organized well enough that you can still view all of the content without any problems.
One thing that has been puzzling me for a while now is this. I want my container box to automatically expand when the right column is longer than the left. As you can see at the link above, this is not happening. Does anybody know how I can fix this?
Other than that one problem and a few browser hacks that need to be added in, the work is almost done. If you notice any bugs, please let me know by replying to this post.
Update: It seems that IE/Win (v6, maybe others) doesn’t want to display random parts of pages. Take this page for example. IE hides the comment form and the post metadata. Any suggestions? This all renders perfectly in Firebird. Hopefully the other non-IE browsers will fare as well. It looks like I’ve got a lot of testing to do.
Update 2: The bugs mentioned above are now gone. IE still doesn’t do everything I want it to do, but the problems are very minor. The horizontal borders around the “Sponsored Ads” text in the sidebar should intersect with the vertical borders on both sides. For some reason, though, I have not been able to convince IE that this is how it should work. Instead, IE randomly affixes the box to either the right or left border, leaving a 2 pixel gap. Very odd.
I just happened upon the blog at 1976design.com. Not only does this site have an excellent design, but it also uses some advanced CSS techniques that I’ve not seen used elsewhere. Check out the article on site updates for more info.