Slide Show Pro – Director

When it comes to marrying standards-based web design and Flash, there’s only one name that stands out. Todd Dominey is a legend and hero for creating the flash-based headers, the PGA re-designs, and Slide Show Pro.

SSP gave us a great platform to build photo galleries based on XML. Dominey has just released a new product, Slide Show Pro Director, which provides an AJAX-based interface for creating new slide shows.

I’ve just begun using Director and I’m mighty impressed. If you are currently using Slide Show Pro, you should download this helper application. It’s only $20 and will make your life much easier.

Frankly, the previously provided photoshop droplet and xml generator worked fairly well. But it was still a clunky procedure and my slideshows have stagnated. I’m looking forward to re-building all of them with this new director, providing fresh images and more movies.

Support the Godfathers (and Godmothers – Molly and Holly)

If you are new to the standards-based web dev world, consider this your opportunity to support those that made your new career possible. Buy the Slide Show Pro suite, get the latest version of Zeldman’s book when it comes out, grab a set of icons from Simple Bits, and continue to purchase standards-based web design books by Molly, Eric, et al. Donate them to new programmers once you’ve memorized the techniques. Spread the word and the wealth.

@media 2006 first impressions

@media and the WCAG2

I was waiting for the WCAG2 smack down at this week’s @media conference in London. The stage was set for some serious smack talk and WWF style-insults. Heck, Joe Clark was even mentioned at least a half dozen times.

But a surprising thing happened on stage. The presenters, Gez Lemon, Patrick Lauke, Andy Clarke, and Ian Lloyd didn’t explode in indignation. Rather, it was the opposite. The panel pulled out their hoses and began putting out the WCAG2 fires.  The new guidelines are not perfect and nobody was close to agreeing to them. They are overly complicated and confusing. This was agreed upon.

However, they also seemed to agree that the guidelines were not going to bring the four horsemen of the apocalypse to the web developing community either. The guidelines are deliberately vague and technology-agnostic to allow for future growth.  Gez Lemon pointed out a new part of the WCAG web site that allows you to print a condensed set of guidelines for your specific technology, i.e. XHTML, SMIL, CSS, etc.

On the other hand, the number of people in the room that had actually read the guidelines could be counted on two hands. Further, the number of people that had read not only the guidelines, but also the supporting documents could be counted on one hand doing a variety of gestures.

@Media and the state of web design

It was a bit of a surprise to see the less discussion web design  at this year’s conference. The panels also discussed accessibility, web 2.0,  microformats, DOM scripting, hand-held devices, CSS history, and internationalization. Dan Cederholm discussed his bulletproof web designs, Nate Koechly discussed contrasting design considerations for two Yahoo sites, and Andy Clarke discussed alternate inspirations for web design. There was also a great panel with Veerle Pieters, John Hicks, and Cameron Moll about good vs. great design.

getting ready for Andy Clarke presentation

At last year’s event, Joe Clark creating some buzz and inspiration with his impassioned plea for single-column zoom layouts. You could feel the energy as people began mentally designing their zoom layouts.

This year Clarke, as in Andy Clarke, set the stage for a renaissance in design.  Why concentrate on grids when the result is the same old layout with a bit more perfection? Instead, he suggested we take that grid and start playing hops scotch with it. Make a practice grid and begin placing different shaped boxes until something comes together that is exciting and new.

He further showed how you could get layout inspiration from newspapers, photographs, and fliers. A Japanese newspaper’s layout looked the most foreign to my eyes, as well as many others. Vertical and horizontal sections seemed scattered around the page. Clarke super-imposed the grid onto the page and introduced us to a new method of laying out a page.

Chinese newspaper
Header, left column, right column, footer… yawn.  It’s easy, comfortable, and static. Clarke suggests breaking free of these standards and moving your content around the grid. Leave some open spage, add vertical bars and maybe even a framing device.

He further challenged us to abandon the concept of graceful degredation and move on to transcendental CSS design.  Echoing the points of Nate Koechly’s essay on Yahoo’s Graded Browser Support Grid, Clarke suggested we begin coding for the best browsers. We need to use CSS2 and possibly CSS3 elements. IE5 may not look as good as Safari, but his gloss-black pinto with wrong-way flames isn’t going to impress the ladies as much as his Audi S4 convertible either. Do we continue to downgrade the experience for everyone?  Or do we begin looking forward and push past today’s limits?  The introduction of IE7 this year will hopefully solve much of the existing troubles and allow us to make this move guilt-free.

@media and Internet Explorer

Eric Meyer began the conference with a keynote about the history of CSS, HTML, web design, and browsers. He set the stage for Internet Explorer discussions that would span several presentations. Further, he placed faces to the browsers, introducing many people to Tantek Çelik who has been credited with the IE5 Mac goodness and Chris Wilson, who has been credited with the IE Windows goodness and badness.

It’s easy to look at the problems we have with IE6, an outdated browser, and accuse the Internet Explorer team of being a bunch of hacks who couldn’t code their way out of a garbage sack.  Meyer reminded the older developers and taught the newer developers the history of the browser wars and how technically advanced IE6 was for its time.  In its day, it was a great platform for accessibility and contemporary table-based web design.

Fortunately, we have moved beyond the table-based days and other browsers have replaced Internet Explorer as the technology leader.  Microsoft is playing catch up and Chris Wilson came forward to pimp IE7. I also think many of the developers in the room will have a harder time kvetching about IE6, the broken browser from the behemoth beast of Redmond, after seeing an actual person on stage saying how proud he was to have worked on it. This geeky looking guy with a history of bad haircuts was also upset about the deadtime between IE6 and IE7 and promised to do his best to continue building better Internet Explorers in the future.

Wilson covered some of the required marketing points that most developers didn’t really care about. Security, blah, parental controls, blah, new controls, blah… better RSS support, blah…  I actually think IE7 does a great job with RSS, but Wilson didn’t discuss this very much.

He did grab our attention with a new feature, OpenSearch.  Developers can add a small metatag in the document head that will allow the user to add their site to the browser’s built in search bar. You can allow the user to search your site from a consistent location within the browser.  I couldn’t tell if your site remained in the list of sites to search from permanently or only while it was being viewed.  I’m going to look into the specs and try this as soon as possible.

Wilson also went over the list of bugs that have been fixed and took questions from people about future plans, backwards compatibility, and more.  He didn’t come across as the super-friendly, super-smart, super-man like Tantek, the ex-Internet Explorer leader. But he did put a human face to what many people considered their enemy and this is a good thing for the future of web design.

To hell with bad accessibility requirements

Sorry Jeffrey Zeldman for twisting your words, but they rang through my mind when I saw the latest missive from Joe Clark, the WCAG Samarai. Zeldman led the troops through the battle over standards guerrilla war against the browsers.

Now Joe is doffing his commanders uniform, I’m hoping it’s a rather smart one with sophisticated typography on the badge and non-leather jackboots. The Samarais will push, prod, and tease the WCAG into making accessibility an attainable goal.

Grab your katana.

CSS Mastery – Advanced Web Standards Solutions – Book Review


Don’t let the title of Andy Budd’s recently released book, CSS Mastery: Advanced Web Standards Solutions, fool you. Yes, it is filled with advanced CSS information; but it isn’t just for the advanced programmers. I bought this book with the hope of learning some of Andy Budd’s positioning, descendent selectors, and cross-browser techniques. I didn’t expect to learn some of the basic elements of CSS.

Easy to read and use

Andy’s writing style is easy on the eyes. He knows when to skip remedial information and when to point out the important tidbits that save an hour or so. For example, Budd describes the behavior of collapsing margins with a clarity that other books have lacked.

…It may seem strange at first, but margins can even collapse on themselves. Say you have an empty element with a margin, but no border or padding. In this situation, the top margin is touching the bottom margin and they collapse together…

This is why a series of empty paragraph elements take up very little space, as all their margins collapse together to form a single small margin.

…Margin collapsing only happens with the vertical margins of block boxes in the normal flow of the document. Margins between inline boxes, floated, or absolutely positioned boxes never collapse.
CSS Mastery – Advanced Web Standards Solutions pgs 32,33

I’ve already placed a few flags in the book and they’ll multiply as I return for more techniques. Was this book worth purchasing? I found a number of techniques from Andy’s personal toolkit that made the book worth 10 double espresso mocha frappathingies. Here’s a tip that was particularly timely for me. Andy discusses the use of links with spans to create disjointed rollovers. I’m having an issue in IE6 right now with the span not being entirely clickable.

…Unfortunately this example doesn’t quite work in IE on Windows. It would seem that IE/Win has problems targeting nested elements inside an anchor link, using the :hover dynamic pseudo-class. However, there is a simple, if somewhat odd, workaround. Adding the following rule on this anchor’s hover state seems to fix the confusion in IE and allow it to honor nested hover state rules:

#pic a:hover {border:none;}

CSS Mastery – Advanced Web Standards Solutions, pg. 107


That is the kind of gem that only comes from experience.

Who should buy this book?

This book falls into the category of CSS/HTML theory from beginning to end. It starts with the basic platform of semantic coding and moves on towards the final use of advanced techniques. It is a nice replacement for Eric Meyers on CSS and More Eric Meyers on CSS, both of which give basic techniques and information but lack the style of Budd’s designer eye. This book reminds me more of The Zen of CSS Design : Visual Enlightenment for the Web by Dave Shea and Molly Holzchlag. CSS Mastery and Zen of CSS are written from the developer/designer’s viewpoint. Both contain tips and techniques. While Zen touches lightly on the coding, Budd takes you full circle, from theory to final production.

Firefox search plugin for www.alistapart.com

Everyone has their bible. For some, it is the Holy Bible, for others, something not quite so reverent. As a child, our family life would come to a screeching halt when our bible arrived in the mail. Being the youngest, I usually got the National Enquirer after it had been scanned, read, and laughed about by the rest of the klan.

I’m all grown up now and my bible and gods are no longer the gossip rag and celebrity stalkers. Instead, I look up to my Rock Gods, such as NoMeansNo, Drive Like Jehu, and Ethel Merman. The omniscient National Enquirer has been replaced with web sites such as AListApart.com.

The AListApart path to enlightenment

Hardly a week goes by without doing a search on alistapart for the path to this or that standards-based method. A couple months ago, I created a search box plug-in for Firefox to make it much easier.

With the blessing of Jeffrey Zeldman, I present to you the www.alistapart.com search plugin for firefox.

The javascript to install the plugin is now working.