Getting drunk on the possibilities and waking up to sober reality

It could be argued that 2006 was the year of AJAX and DHTML. They matured this year and solid libraries were released. The Yahoo User Interface Library makes a JavaScript mangler like me seem downright competent. Not only that, it’s got some good accessibility and security built in. Gez Lemon and others have been tearing apart AJAX for a possible accessibility hook that makes all of us happy. JSON gave us new ways to transfer information.

Yes, we got giddy with the possibilities. I helped build Yahoo! Tech. It’s a great site, if I do say so myself. We launched with every flash, web 2.0, animation, AJAX driven widget imaginable. Someone even called it “an explosion of a web 2.0 factory.” The site was accessible, harnessed the powers of a web-service architecture, and was the first completely new site for Yahoo! Media in a long time. But the web 2.0-ification was the star in many people’s eyes.

A funny thing happened over the months after launching. We got rid of the flash on the home page. We removed the dynamic width widget. We removed some animations. We began removing these Web 2.0 stars because the users didn’t use them AND they made the site performance horrible. Yahoo Tech, like many other sites, learned an age-old lesson. Just because you can, doesn’t mean you should.

Prediction #1 – In 2007, AJAX and DHTML will be used reasonably.

I predict new sets of AJAX/DHTML libraries will be released with great features and accessibility. People will go gaga over a few sparkly ideas and ultimately settle with good sites that use the libraries reasonably. I predict AJAX will be used less often as commercial sites realize they need page refreshes for advertising revenue. AJAX will continue to be used for features that significantly help the user’s experience (Yahoo Finance Streaming Quotes) and not so much for page level mechanisms (Yahoo! Tech Search).

No More Rounded Corners

I hate rounded corners. They were fashionable for a year and everyone had to have them. You could build them with 15 nested divs, with javascript, with extra paragraphs, extra this, that and the other. Die rounded corners die!

Seriously, rounded corners add a bit of visual white space but they’ve gone overboard. They’ve hit the designer’s toolkit like a bad font and are being used because people feel like that have to use them. It’s time to be creative again and kill rounded corners. Please!

Prediction #2: Rounded Corners Replaced With Dancing Hamsters

Let’s look at alternate container variations. Put rounded corners on the shelf next to drop shadows and let’s explore line quality, tonality, texture, and contrast instead.

Accessibility is a big deal and then it isn’t

Accessibility for web sites will become a big deal in 2007 as the Target lawsuit comes back and someone figures out a way to make AJAX accessible and easy to implement. I’m putting my money on Gez Lemon finding a solution and the Yahoo! User Interface Library making it available.

Firefox, Apple, Yahoo!, Google, IBM, Sun, and who knows what other companies will come together and agree that there is a particular way that these things should be done and will create some resolutions. After these things happen, you will see more and more sites become accessible without even trying. Platforms such as WordPress have already made huge impacts in setting up sites to be accessible from the beginning. Look for more advances from Microsoft, Adobe, and more.

Apple will release their new OS with extended assistive technologies built-in. Existing screen reader companies will have to deal with a big new competitor. Watch for Jaws, et al to scurry around fixing outstanding issues to hold onto their audience.

Prediction #3 – Accessibility for All

Even if JaneDoe43 is simply dragging images into her MyLinkedInSpace page, it will have the hooks necessary to be accessible. Platforms and libraries will make it easier for people to worry more about content and less about rules. The web will be a better place for novice and advanced programmers. It will certainly be better for those that need assistive technologies.

IE7 opens the possibilities

Internet Explorer 7 has been released and will soon see adoption rates increase significantly. Vista is ready to also increase the graphic processing potential for millions of users. As web developers, we have new tools in our kit to work with. Start studying your attribute selectors, pseudo selectors, and playing with alpha transparencies. 2007 will see the death of Internet Explorer 6. It will still sit on a small percentage of machines, but IE7 will take over and with it comes hope.

Prediction #4: CSS2 and CSS3 Get Used

Start looking at progressive enhancements with your CSS. Give Firefox, Opera, Safari, and IE7 the best possible experience. You may have to dumb down some of the IE6 images but go for the beauty and simplicity that advanced CSS offers.

Where’s the new blood?

The standardistas of the past are busy working on big projects now. Sure, they’re still doing some innovative stuff. But where are the young guns inventing wonders like Son of Suckerfish, Microformats, CSS Zen Garden,Image Replacement, SIFR, and god-forbid the image-free rounded corners? Seriously, it’s time for some exciting developments to come from people recently discovering web standards and bringing a new approach to solving issues. Who knows who will be the next Erik Meyer, Big John, Andy Budd, Shaun Inman, PPK, etc. Who’s gonna carry Joe Clark’s torch for being the genius with a cattle prod as he solves the captioning dilemna next year?

Prediction #5 – New Standardistas Rock The House

Further, these new standardistas are going to come from Asia, India, South America, and possibly the United States and Europe. They’ll have us on the edge of our seat as AListApart releases the latest tools to completely change the way we build sites. My number one pick for standardista of the future goes to Hedger Wang who tirelessly experiments and publishes little teasers on a regular basis.

I can picture the @media 2008 conference in Singapore with Molly, Andy, PPK, et al lining up for a chance to rub shoulders with the new greats.

What is OpenSearch?

OpenSearch was developed by Amazon’s A9 search engine to enable aggregators to easily acquire content and make more robust search result pages. Internet Explorer 7 is using this protocol to give users the ability to search a site via the integrated search box.  It’s a two step process: create an XML document that defines your site’s search engine methods and then place a link to that XML in your page header. It sounds simple enough lets see it in action and then learn how to build the XML document.

Using OpenSearch

Yahoo! Tech recently added OpenSearch. If you have Internet Explorer 7 on your computer, you can enjoy the OpenSearch experience right away.  If you don’t have IE7 yet, download it now!

Internet Explorer 7 has a built in search box in the top right of the page. If you have added OpenSearch to your site you will notice the box has an orange down arrow. Clicking on this arrow will expose a new menu. You can now search this site via the box and add the site to your favorite search engines.

If your site offers search results in RSS or Atom format, you’ll get enhanced functionality in your search results. Yahoo! Tech only features HTML results, so we give you the option of using the built in search box. 

At this point you may be saying… Is that all there is?  Well, yes. With a little bit of work, you are giving your visitors the ability to search from the built in search box and you are making it easier for A9 and other search engines to spider your content and surface your site in their results.  Let’s look at how easy it is to implement.

The OpenSearch XML

The XML document is fairly simple, you define the site’s name, description, attributions, favicon, and other simple elements. The important element is the Url.  This is where you define the location of your search engine and the parameter passed to define the query.

On Yahoo! Tech, the search page is tech.yahoo.com/sp and the query is passed as prod=search+term.  The OpenSearch XML expects you to use this specific markup {searchTerms} where you want the engine or IE7 search box to insert the query terms. Further, I found it much easier to write the url as a whole string, rather than setting the prod parameter as a sub-element. You can also allow the search engines to narrow the results by number {count} and more.

Let’s look at the XML in depth.

Start off the xml file with the standard opening. We then open the OpenSearchDescription element. There is a link to a9.com to define the namespace.


Yahoo! Tech
Search for the best gadgets and how to use your tech gear on Yahoo! Tech
tech gadgets technology cameras phones shopping


Define a short name for your site. Give it a description and the tags that define your site.

Yahoo! Tech is only providing an HTML version of the search results; you can visit the search result page. If we provided an RSS version the type would be application/rss+xml. The template is the location of the final search page. Notice how the searchTerms variable is inline. Ideally, I could have left ?prod=… out of the url and defined it as a parameter, but this caused inconsistent implementation.

We then define another parameter, the results and the value is the OpenSearch variable for the number of results returned. You can see a full list of parameters on the A9 OpenSearch web site.


Yahoo! Tech Search
Yahoo! Tech
Copyright © 2006 Yahoo! Inc. All rights reserved.
http://www.yahoo.com/favicon.ico


We are now providing a longer name where it is appropriate to display it. The developer is Yahoo! Tech. The attribution is how we want results credited. We are using  the standard copyright information. We also define  the location of our favicon. You can define multiple icons for inside the box and if you have RSS, on the results page.



open
false
en-us
UTF-8
UTF-8



Finally, we add some extra information about the display, search content, and close the XML. Overall, it’s a fairly small, simple bit of XML(tech-opensearch.xml).  There’s a full list of parameters you can add to your search query and elements to define your xml at: http://opensearch.a9.com/spec/1.1/

Do you want to make it even easier?

Go over to Enhance IE and use their simple OpenSearch generator to build the XML for you! Simply do a search for TEST on your site and copy that url into their form. Voila, you’ve got a basic OpenSearch XML file.

Activating your OpenSearch XML

If you provide an RSS or Atom feed, you can log in to A9 and register your site. Internet Explorer 7 also needs to know where your XML document is located as well.  Simply add a link to it in the head of your document:

While Chris was busy hyping the latest features of Internet Explorer 7, the OpenSearch protocol will also be supported by Firefox 2.0. That’s two for the price of one!.

WordPress and OpenSearch

If it’s so easy, why doesn’t it work on this blog? WordPress blogs are setup to use the index page as the search page.  This is the results page for a search of XML on this blog: http://last-child.com/index.php?s=xml

I’ve tried setting up the XML to point towards index.php and get the subsequent errors.  Chris Fairbanks has released an OpenSearch plugin for WordPress (http://www.williamsburger.com/wb/archives/opensearch-v-1-0).  It’s not a simple procedure and I simply haven’t had time to implement it.

With the introduction of Microformats and the OpenSearch protocol, the (lowercase!) semantic web is getting closer to being a reality. This bit of xml is fairly easy to generate and opens your site to new audiences and functionality. Spend an hour or two getting acquainted with the OpenSearch concept and activate your site today.

Related Information

• OpenSearch Home Page
• OpenSearch in Internet Explorer 7
• Behind the Scenes of IE7 and Open Search
• Firefox and OpenSearch
• Chris Fairbanks’ OpenSearch WordPress plugin
• OpenSearch XML Creator

Krzysztof Szafranek caught up with me later and told me about the IE-only CSS rules that allow this. I had a bug come up on one of our pages in IE and so I got in touch with him recently for that bit of advice again. It’s pretty simple, you can define in your IE6.css file to either wrap these words or truncate and add an ellipses. These are proprietary, so they won’t work in other browsers and may cause validation errors. But that’s what your ie6.css and ie7.css style sheets are for anyways, right?

Wordwrap


div.IEwrap {
border: 1px solid red;
margin: 10px;
width: 50px;
overflow: hidden;
}
#break {
word-break: break-all;
}


Truncate the word

div.IEwrap {
border: 1px solid red;
margin: 10px;
width: 50px;
overflow: hidden;
}
#ellipsis {
text-overflow: ellipsis;
}


Big thanks to Krzysztof Szafranek for pointing this out and sending me the sample code.

Imagine your boss just messed up her shoulder jumping her Harley over 3 school buses and a hot dog cart. Worried about the lack of productivity, she purchases the latest version of Dragon Naturally Speaking or other voice recognition software. After a hard day of work, she decides to start doing some shopping online for a new television.

The site has a big button on the product page that says: Compare Prices. Let’s make that button work for her.

Alt text to the rescue

If the link includes a simple inline image, you just need to make the alt attribute match the words in the button.

That was pretty easy. Title attributes are ignored by the voice recognition software. Your boss will now be able to compare prices on her new television and you won’t have to worry about her complaining the next day.

Buttons that use image-replacement CSS

But what if you want a fancy button that has a hover state? It’s easy for a programmer to use CSS to replace the link text with a background image that changes on hover. If you want the link to work with voice-recognition software, you need to make sure the link text matches the button text.

I’ve had problems with this recently as the visual design changed the text on a button from "Buying Info" to "Compare Prices." Christopherson’s presentation made me realize how easy it is to break this functionality with image-replacement.

Flash – ugggh

Just hope your boss isn’t trying to shop from a site that uses Flash for their interface. She would need to use the "mousegrid" command to zero in on the link by defining the region of the screen it is located in.

Make your voice-recognition users happy

The example above is loosely based on a real-world example. My boss, Wes, injured his shoulder when he crashed his Harley on the freeway. We installed Dragon Speak on his computer to help his recovery. This is not a population you can ignore. You can insure your sites are accessible by simply matching the alt text or hidden link text to the words in the image. It’s pretty darn simple.

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.

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.

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.