@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.

IE7 background sprite bug – the saga continues

I’ve been able to narrow down my problem with IE7b2 and background sprites. However, I still have not been able to create a stripped down test page that consistently mis-behaves. So my observations, while not scientific, could save you some hours of debugging.

Internet Explorer 7beta2 is not treating transparent png background images correctly. It sees “background-position: 0 0” as “background-position: 0 100%”. Come to think of it, I have only tried a vertical sprite, this may be the same for a horizontal sprite.

What’s the solution?

You could create a series of rules in your IE7 style sheet to measure your new sprites from the bottom up, instead of top down. But this doesn’t solve some of the other odd issues with IE7 and transparent png images. I’ve seen the images load upside down and I’ve seen the images move when you scroll the page and the image hits the bottom of the browser. I thought I was going crazy or that I had some sort of mutated version. But this pseudo-animation works on other computers.

Our IE6 style sheet replaces our pretty alpha transparent png graphics with a simpler index transparent gif version. We replaced our re-measured rules in the IE7 with this set and it has solved our problems. It would be great to take advantage of IE7’s ability to use alpha transparent png images, but this bug is just driving me nuts. I’ve also been in contact with the IE7 team. They are dedicated to building the best browser possible within their constraints and hopefully this will be figured out before the final launch of IE7.

One other note of advice. Creating alpha transparent png images via the save as command in Photoshop on a Mac gave us the worst results. Those images did some very funky things on the page. Fireworks created better images.

c’est fini!

I don’t know if it is official or not, but I can say that the Microsoft engineers are interested in what developers have to say and have worked on this bug. I believe it has been fixed and will be all good to go with the final release of IE7. I can’t confirm or deny this, but I am pleased with their response to my initial post and followup.This bug has officially been officially fixed as of Release Candidate 1 and you can use your transparent png sprites without a worry in the world!

Run IE7 as a standalone browser window

Debugging IE7beta can become tedious when you need to continualy install, reboot, uninstall, reboot, etc to switch between IE6 and IE7b2 for testing. Jon Galloway has created a great method to run IE7 as a self contained browser. This will save you many hours in rebooting to test between the browsers. I’ve been using it for a week and can’t believe how easy this is to use.

A note of warning

You should only use this if you have a backup computer or are comfortable working with the registry. I found this out the hard way as the computer crashed while operating the standalone version of IE7. My laptop now displays very odd behavior with IE6. Another person on our team is experiencing similar behaviors. We’ll need to modify our registry tomorrow to fix this. How odd…? When you type an address in IE6, it opens firefox in a new window. It’s also ignoring conditional comments. Happy, Happy.

IE7.css is at 146 lines and counting…

How good is IE7? I was wondering about that today as I reloaded it to do another batch of bug fixing. The proof may be in your CSS pudding.

We are using conditional comments to import either ie6.css or ie7.css to control our hacks.



So far, the ie6 style sheet is 342 lines long, including lots of whitespace and comments. A good portion of that is for re-assigning gif background images instead of png. The rest is an assortment of invoking hasLayout, box model changes, and the ever-popular z-index bugs.

I copied this style sheet, commented everything out and began re-introducing the rules to build the IE7 style sheet. I ditched the gif and z-index hacks. The most common hacks are for hasLayout and double-margin float. I’m still using a set of hacks to re-configure my background images that are being measured from the bottom up.

So, how big is the IE7 style sheet? Right now, we are looking at 146 lines of code, including white space and comments. That’s still a hefty amount and I’m not done fixing bugs. Yes, IE7 is much better than IE6, but still a far cry from the others.

IE7 passes the sprite test

beegee sprite thumb
I came across an issue with Internet Explorer 7 beta displaying the rating stars incorrectly in Yahoo! Tech. After doing some testing, I realized the browser was measuring the sprite image from the bottom up, rather than the top down. This is a significant issue. I had to create a new set of rules in the IE7 style sheet for the new measurements.

I use sprites extensively. I love the way they save server requests and I think they are much easier to maintain. The thought of fixing all of my sprites was enough to send me downstairs for another coffee. But I noticed the only sprites being affected were the ratings. I needed to find what was special about these. The ratings sprites use a span that is absolutely positioned in either an unordered list or definition list. This gives us flexibility for displaying them across the site.

IE7 Does it Right!

I created a test page for using sprites. I stripped the CSS down to simple list handling, floating, positioning, and sprite. IE7 handled it perfectly. I even replaced the links with spans and that still didn’t trip up IE7. Take a look at the test page , IE7 Sprite Test, to see the results. While I’m still having problems with IE7’s handling of sprites. I believe it is a unique combination of styles that is causing this issue. I don’t think the average person will need to worry about this.

When I do figure out what is going on with Yahoo! Tech’s rating sprites, I’ll update this blog with the solution. For more information on using sprites, visit Dave Shea’s article CSS Sprites: Image Slicing’s Kiss of Death on A List Apart.