Latest releases

I’ve been a busy camper this year. Sometimes it seems like I’m so deep in code that I can’t enjoy the fun, creative aspects of web development. However, I have seen a couple sites launch that I’ve had the pleasure of working on.

Yahoo! Food

When I heard Yahoo! was building a food site, I thought Hot Diggity Damn. I want to work on that one. However, I was deeply committed to an important post-launch facelift of Yahoo! Tech. So, I told the Food team that I wanted to help as much as possible. This is a really nice site, with a great leader. The site, from the very beginning, had a distinct character and huge ambitions. Programming the code was nothing compared to what the project managers did for the content.

I was only able to help with some of the early templates and platform settings. The Food team deserves tons of credit for putting together a great site in an amazingly quick time.

Eden Floral Designs

Eden Floral DesignsWhen I came to Yahoo!, I knew very little about PHP and XSL. I was anxious to learn the languages and have gotten pretty darn good with XSL. PHP, however is still a new language for me. My friend Pam asked me to help her build an e-commerce site for her new floral business back in early summer. I told her I couldn’t do it but would look around. Soon enough, I realized this was a good time to jump knee-deep in PHP and learn how to use it. We grabbed a pre-packaged cart sytem, enlisted a friend, Marc, to do the secured server settings, and off we went.

X-cart is robust, but fairly easy to work with. It’s PHP and Smarty based. I spent several weeks replacing tables with standards-based markup, editing the CSS, updating the JS, and adding Pam’s unique visual statement. It’s a pretty site with lots of white space and no rounded corners, my pet peeve.

I still have some validation errors to fix, some legacy code to cleanup, and some cross-browser fixes. But for just the two of us, this site came out pretty dang nice. If you are looking for a San Diego Florist, check out the site. If you are looking for an e-commerce platform, take a look at X-cart. This site took about 200 hours to transform and build. That’s not a small amount, but I considered it a learning experience and didn’t mind a bit.

Coming Up

I’m working on a new project at Yahoo! that is coming along great. In this world of bloated Web 2.0 web sites, this is a lean, mean fighting machine. It is blazingly fast and perfectly suited for its audience. You’ll have to wait a few more weeks for the announcement.

2007 Web Development Predictions

The standardistas were abuzz a year ago with hopeful predictions for the coming year. Visions of sugar plums dropping rounded corners, AJAX, and alpha transparent pngs danced through their heads. 2006 has been a great year for web development. Did we get what we wanted? Did we get too much of what we wanted? Further, what lies ahead?

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.

Image sprites – flexible and accessible packages

User generated ratings and reviews are an important part of all Yahoo! sites. You can find them on just about every page of Yahoo! Tech.  It was important for us to develop a ratings presentation device that was easy to code, accessible, flexible, and as light-weight as possible. Our final design uses a combination of image sprites and negative text-indent to satisfy these requirements.

Product ratings are represented with 1 to 5 stars. Other sites have used inline images; repeating a solid or empty version for each of the five stars. stars image from Yahoo! ShoppingOther sites, such as Yahoo! Shopping, have used a single inline image representing the number of stars.  At best, the image will have an alt attribute that descibes the number of stars. However, the content is locked inside the image. This is an easy approach for coding but isn’t the most accessible approach.

Yahoo! Tech uses the content first approach to design

Content-first design improves accessibility. This approach places the relevant content in semantic markup. It then uses CSS to transform that content into the visual design. Here is a sample rating from Yahoo! Tech: Overall:4/5, Quality:5/5, Support: 3/5. Our CSS transform that simple text into a series of stars and accompanying text. User testing with a screen-reader user led us to remove visual descriptions from the content, i.e."stars" or "bars".

With the content in the page, it was time to look at the visual design.

Ratings are presented in either an unordered list or definition list. We need to place descriptive text in front of the stars and want the stars to be aligned with each other. These considerations lead to using spans with a combination of CSS rules to hide the text, insert a background image, and absolutely position the ratings to the right side of the list item. Let’s look at the code.

The HTML – span

To use a background image for the stars, we need a container that can be manipulated with CSS and not include presentational behaviors of its own. This is why we use the span, a generic inline container. We could use a strong or em, but feel the span offers the best versatility. You never know when the graphic designer will ask for some text to be bolded or emphasized in the same list item.

Sample code for a rating

  • Overall: 4/5

The span’s title will generate a tooltip when the user places their mouse over the rating (not Internet Explorer). Screen readers’ default settings ignore title attributes on non-form items.

The CSS

Spans are inline elements.  To display background images, we need to make them display block, define a height, width, and move the text off the screen. To keep them inline with the text, we are also positioning them absolutely. We could position them relatively or floated the spans. Position absolute works the best for our pages.The parent list item is positioned relatively to give the span a contextual anchor. Negative text-indent will hide the rating text.


.ratingslist {list-style-type:none;}
.ratingslist li {position:relative; padding:3px 5px; }
.ratingslist li span {text-indent:-1000em; width:66px; display:block; position:absolute; top:5px; right:20px;}

Image sprites display the desired number of stars

The list item is given a class with a number at the end (stars8). This will display an image with four out of five red stars. We are using a scale of 0 to 10 to accomodate half stars. To display other rating variations, we change the modifier, i.e. prostars4, retstars4, bars4, bigstars4, etc…

To simplify the maintenance of the site and reduce server requests; Yahoo! Tech also uses image sprites. Sprites are single images that include multiple icons with a consistent spacing between them. Use background positioning to display the desired chunk of the image. Each sprite represents the possible color variations used on the site: red, blue, and green. Minimizing the color palettes reduces the final image size. For more information on sprites, read CSS Sprites: Image Slicing’s Kiss of Death by Dave Shea. As a further enhancement, alpha transparent png images are used for most browsers and index-transparent gifs are presented in the Internet Explorer 6 style sheets. 

Background images are positioned with the set of numbers after "no repeat." The horizontal positioning is first. Our sprite is vertical, so we are leaving it alone, hence the 0 value. The vertical positiong comes next. If we want to display 2 out of 5 stars, we need to shift the background down to that part of the image (-530px). Here is the CSS for presenting the specific star variant.


/* Ratings images
======================================= */
.stars0 span {background:url(/images/bg-ratings.png) no-repeat 0 -650px;}
.stars1 span {background:url(/images/bg-ratings.png) no-repeat 0 -620px;}
.stars2 span {background:url(/images/bg-ratings.png) no-repeat 0 -590px;}
.stars3 span {background:url(/images/bg-ratings.png) no-repeat 0 -560px;}
.stars4 span {background:url(/images/bg-ratings.png) no-repeat 0 -530px;}
.stars5 span {background:url(/images/bg-ratings.png) no-repeat 0 -500px;}
… (repeated for each variation of the stars and bars)

This approach has allowed the Yahoo! Tech engineers to maintain a consistent presentation with minimal markup. For pages that need special tweaks we can easily adjust the positioning by using descending selectors:


#mytech .ratingslist li span { right:5px;}

Caveats

We’ve only found a few small issues with this approach.

  • You cannot count on background images being displayed on the printed page. Our print style sheet removes the text-indent and background images to display “Overall: 4/5”.
  • When someone includes more than 4 products in the comparison table, the text of some rating parameters will begin to overlap the stars. If they were inline images or if we floated the spans, they may drop to the next line.

Yahoo Tech! ratings are another example of creating accessible and visually dynamic pages by considering the underlying content structure before attacking the styles. Users of all abilities are presented with solid information. That’s how you can deliver a 5 star page every time.

Related Information

Add OpenSearch to your web site

Chris Wilson, the main guy behind IE7 (and older versions) discussed several new features of Internet Explorer 7 at the @media conference in London. One feature in particular that stood out for me was the OpenSearch protocol. Adding this to your site can be easy, it can also be a headache.

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!

Yahoo! Tech and OpenSearch
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

Microformats and Yahoo! Tech

You’ve probably heard of Microformats by now. It’s that vague concept floated amongst the standardistas which promises to solve world hunger and bring peace to the Middle East. You’ve always got something more immediate to do and hope to read about it soon. Heck, you don’t even know how it is actually used as an end product. Isn’t it just more code in the page?

All of these questions and issues kept me from trying out microformats until Tantek Çelik  gave a lecture at Yahoo! this year.  While the usefulness of the concept was still vague, the ease of implementation inspired us to give it a try.

Microformats let you define information in your page with a set of recognized classes. A parser (program or web site that transforms your information into useful tools) looks for containers with those classes and collects the information within them.  The user is then able to add people, events, recipes, web sites, etc to their organizers, databases, etc. Think of it as a way to multi-task your web pages.

Yahoo! Tech launched with basic support of the hReview microformat. We’ve continued to investigate how we can further support microformats and similar technology.

Introducing the Yahoo! Tech Bloggers with hCard microformat

The hCard microformat is based on a pre-existing standard (vCard).  There are many programs, web sites, and aggregators that are already prepared to use your information. You can add this to your site quite easily.

hcard microformat details on Yahoo! Tech

Let’s look at some code on a blog post by Robin Raskin (http://tech.yahoo.com/blogs/raskin/621) This block begins with a list of content for the microformat parser, since it is not a part of the visual design, we are hiding it with CSS. The next section includes a set of links, her bio link has class=”url”.


 

Microformat classes and their functions

  • div.vcard: This triggers the parser, letting it know the following information conforms to the hCard microformat
  • li.fn: This is the formatted name of the person: Robin Raskin.
  • li.title: Robin Raskin’s title – Yahoo! Tech Advisor
  • li.org: The company Robin works for – Yahoo! Tech
  • img.photo: This is a photograph of Robin
  • a.url: This is a web site for Robin.
  • a.url.email: If the Email Robin link were in the classic mailto:foo@foo.com format, we’d use these classes. Instead, the target is a contact form. To avoid confusion, we’ve left this link alone.

Testing your microformatting

Tails is a great Firefox extension for testing your code. It will display an icon in the browser if a page has microformatting. You can then click on it to open a window with all of the available information. This is a great debugging tool. Be sure to get the latest version for the best microformats support and extensibility.

An intertwining pattern library

Microformats are a rapidly growing technology. As patterns develop, they can be integrated into various other microformats and patterns. This requires going beneath the surface of the microformat twiki to harness its power.  While your results may not bring immediate benefits, the level of work can be minimal. This also requires having some faith in your code, as you may not be able to test the results.

The rel-tag microformat

Technorati has made the rel-tag an important addition to web sites. Simply add rel=”tag” to a link that refers to a page that is an index for information about the link text.  For instance, Robin Raskin’s page features a set of category related links. The rel-tag microformat lets Technorati and other parsers know where to will find the category index pages. 

The rel-directory pattern extends this concept. If Robin’s post was about digital cameras and she included a link to the digital camera index, we could add “directory” to the rel tag.  The final code would be:


Digital Cameras

The rel-home draft

Ther rel-home draft allows web developers to specifically define the link that takes the user to the home page of the site. Currently this can be done without microformatting; but lacks significant browser support. To use straight HTML, place this in the head of your page: <link rel=”home” href=”/index.html” />. Theoretically, the browser would detect this and give the user a hotkey to go back to the home page.

The rel-home microformat draft allows the developer to easily label the home page link. For instance, on Yahoo! Tech, the user can either click the large Tech logo or the products tab. Neither of these are the most intuitive, the rel-home could provide further assistance. Browsers don’t support this yet, but its simplicity makes it a natural to begin now.
The code is quite simple, add rel=”home” to your link:


Products

Should you begin using Microformats?

As you can see, the code is fairly simple. If your site is already presenting contact information, reviews, calendar events, or category indices, it’s time to look at adding a few Microformat details. The rel-tag, rel-home patterns are the easiest to apply. The hCard and hCalendar formats will give you the most usable information. Keep an eye on microformats.org for the latest developments and join their discussion list to play an active part in the evolution of patterns. Microformats may not bring peace to the Middle East, but they will give your web site’s content more power and functionality.

Resources