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

Javascript performance tips from the IE7 folks

The IE7 team has announced “great fixes to our (JavaScript) engine to improve the garbage collection routine and to reduce unbounded memory growth.” They have also found many sites using less than optimal scripting patterns and have some great advice on fine-tuning your JavaScript. The following tips could increase your site download speeds from 4-10 times.

  • Evaluating Local Variables
  • Cache Variables Whenever Possible
  • Cache Function Pointers at all costs
  • Avoid Using the ‘with’ Keyword

Internet Explorer 7 For more information on these tips, visit the IEBlog’s post: IE + JavaScript Performance Recommendations – Part 1. Don’t forget to download and TEST your sites with the Internet Explorer 7 Release Candidate. The light at the end of the tunnel is getting brighter!

The big list of fixed stuff in IE7

The IE7 blog has a new post of items that have been fixed in the upcoming release of IE7. While not on the list, the problem I found with alpha transparent png sprites has been fixed for the final release.

Take a look at the list and think of it as new tools to use.

Bugs we fixed

All bugs on positioniseverything.net except the “escaping floats” bug (which is planned for the future)

  • Peekaboo Bug
  • Internet Explorer and Expanding Box Problem
  • Quirky Percentages
  • Line-height bug
  • Border Chaos
  • Disappearing List-Background bug
  • Guillotine Bug
  • Unscrollable Content bug
  • Duplicate Characters Bug
  • IE and Italics
  • Doubled Float-Margin bug
  • Duplicate Indent bug
  • Three pixel text jog
  • Creeping Text bug
  • Missing First letter bug
  • Phantom box bug

Details on some of the other bugs (from sources other than the positioniseverything.net list) that we fixed:

  • Overflow now works correctly! (That means boxes do not automatically grow any more.)
  • Parser bugs: * html, _property and /**/ comment bug
  • Select control: CSS style-able and not always on top
  • Auto-sizing of absolute positioned element with width:auto and right & left (great for 3 column layouts)
  • Addressed many relative positioning issues
  • Addressed many absolute positioned issues
  • % calculations for height/width for abs positioned elements http://channel9.msdn.com/ShowPost.aspx?PostID=191182
  • <?xml> prolog no longer causes quirks mode
  • HTML element truly independent of the Body (now gets its own width, height etc.)
  • 1 px dotted borders no longer render as dashed
  • Bottom margin bug on hover does not collapse margins
  • Several negative margin issues fixed
  • Recalc issues including relative positioning and/or negative margins are fixed now
  • CLSID attribute of <object> tag no longer limited to 128 characters
  • :first-letter whitespace bug described in http://blogs.msdn.com/ie/archive/2005/09/02/460115.aspx fixed
  • Descendant selector now works properly for grand children when combined with other selectors
  • First-line and first-letter now applies when there is no space between word :first-line and opening brace {
  • Pseudo-classes now are working as expected if selector is excluded
  • The :link selector works now for anchor tag with href set to bookmark
  • Addressed !important issues
  • PositionIsEverything piefecta-rigid.htm now works
  • List-item whitespace bug fixed
  • Fixed Absolutely Buggy II
  • Absolute positioned elements now use always correct containing block for positioning and size information
  • Nested block elements now respect all overflow declarations (hidden, scroll, etc)
  • Fixed the opposing offset problem (absolute positioned element whit all four top, bottom left and right are present)
  • <a> tags nested within LI elements will no longer add extra bottom margin when hover occurs
  • We no longer lose the image aspect ratio on refresh
  • Cleaned up our ident parsing according to CSS2.1 rules
  • Fixed parsing bugs for multi- class selectors and class selectors that are combined with id selectors
  • And many more

We also extended our existing implementations to comply with W3C specifications:

  • Enable :hover on all elements not just on <a>
  • Background-attachment: fixed works on all elements – so Eric Meyer’s complexspiral demo works
  • Improved <object> fallback

Finally, we added new features from CSS2.1:

  • Min/max width/height support (also for images, which did not work in IE7b2)
  • Transparent borders
  • Fixed positioning support
  • Selectors: first-child, adjacent, attribute, child
    • A couple of CSS 3 attribute selectors: prefix, suffix and substring since we were working already in the code base (also the general sibling selector)
  • Alpha channel PNG support (Not a CSS feature but too important for designers to not call it out J)

IE Blog

IE7 is still not as good as Firefox, Opera, or Safari. However, Microsoft is planning an aggressive updating campaign and hopefully it won’t be long before we can count on our average user’s browser supporting advanced CSS styles. It’s time to stop complaining about IE6 and begin planning how you will use these new tools.

Word wrapping for Internet Explorer

One of the @media seminars this year prompted me to ask a question to the Europeans about forcing text-wrapping on really long words. We’ve been having a problem on Yahoo! Tech with people pasting urls into their comments, questions, and reviews. These long urls want to extend past the containers and we have had to set a width to the container and overflow:hidden to hide what is too long. How, I asked, do they handle translations with really long words?

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.

IE7 Beta 3 is available

If you are testing IE7 Beta 2, it’s time to download the latest version from Microsoft, IE7 Beta 3. This will be their last beta release before the release candidate and final public release.

They’ve also published an article on how to install/uninstall the betas without a problem. I’ve had some issues with this myself. Hopefully IE7 Beta 3 will be a cleaner install/uninstall.