Over the last few months I’ve been travelling around the countryside implementing IE8 Web Slices for various companies. I’ve been to a couple of big sports web sites and a large online retailer all looking for new ways to get return visitors to their sites.
I must admit I cannot believe I get paid to implement these things – when you see how easy they are to implement you’ll fall off your chair. Although this article is not about the technical implementation of web slices I’ll run through the basic workflow of a slice and some “did you knows”.
Very quickly, a web slice is a way of taking a portion of a page and displaying it in a drop down from the user’s toolbar. It updates like an RSS feed and when changes occur the user is notified via the toolbar item for the slice blinking.
You could point the web slice to a custom search, product offers or the latest sports scores. The slice’s update and display URLs can contain query strings so you can load dynamic data with ease.
How Slices Work
Slices are fully implemented in HTML using the web slice / hAtom micro format. For full documentation on implementation slices see the here.
The workflow for a web slice is Discovery -> Update -> Display.
Discovery happens in your normal content page. You wrap up an area of your content in a slice. This slice with be outlined in green when the user hovers over it and it also shows up on the toolbar as a special green RSS feed icon.
Did you know? That you don’t have to show the content that you wrapped. You can load any content you like in to the source… wrapping is only for discovery purposes.
For example: You may wrap up the search text box on your search results page in a slice and then in the slice itself show a custom search results view… notify the user when ever the search changes.
Did you know? That you can have multiple slices in a page. Each slice will be displayed in the green RSS feed icon drop down. You can also nominate the default slice that will be loaded when the user clicks directly on the special green RSS feed icon.
During slice creation you have a few options for updates. You can either have the slice load the original page and scan the wrapped area for changes, or you can configure the slice to check an alternate URL. The update page uses the same web slice / hAtom format as the discovery page.
For example: The user has searched for iPod on your site. You construct the Web Slice implementation dynamically and set the update URL to /slices/Update.aspx?searchQuery=iPod. You can create this page to be super light weight as the user will never see it, it’s a browser only file. Updates can be super lightweight!
Did you know? You can create a hash of your search results for the browser to compare changes against… it doesn’t get more efficient (on the wire) than that!
The update page also serves as the configuration page. This means you can have multiple slices which point to the same update page. This page contains information like the slice title (in the toolbar) and the page to get the display data.
Did you know? That you can have multiple slices in one update file, each with their own ID. During slice discovery you can stipulate which slice you intended by using a #based syntax in the update URL.
The display page doesn’t require any special micro format, and you can go crazy with a couple of restrictions.
Firstly: you get a display area of 320 x 240 – so go easy on the size of things.
Third(ly??): you won’t automatically get scroll bars in the slice… although the user can manually drag to resize the screen to any size they like.
Did you know? That you can run things like Silverlight in slices!
Did you know? That you can set overflow on your outer DIV elements to create scrolling in slices.
Did you know? That you can set target=”_blank” in your anchors in the slice and have them open in the current tab rather than in the slice window.
Now that IE8 is out of beta you are free to implement slices in your own sites.
Did you know? IE8’s independent benchmark results were a pleasant and welcome surprise! Testing of IE8 revealed it is (as of writing) the fastest browser… See for yourself