IE8 Web Slices in Action (a live example)

Yesterday saw the public release of Internet Explorer 8, which includes a new feature called Web Slices. We have integrated web slices in to one of our website, so lets take a look at how that benefits our users and how we did it.
You can download Internet Explorer 8 here.

What Are Web Slices

Web Slices are a slice (or chunk) of a web page that a user can ask to be notified of updates to. The user is notified of updates via a flashing button on their favourites bar. They can view the updated information, without changing the web page they are currently viewing by clicking on the button.

A Live Example

Visit our website EquiPortal - The Equestrian Homepage to see web slices in action on the homepage.

We have two prominent sections on our homepage. The first shows recent and popular updates to our forum and the second shows the latest and popular horse related news and blogs. If you hover your mouse over either of these areas when using IE8 you will see a green icon pop up to the left hand side of the content. Click the icon to add the Web Slice to your favourites bar.

Notice the new button in your favourites bar. Your browser will periodically check for updates and notify you when changes occur. If the button flashes, simply click on it to see the new forum postings or news items.

This means that our visitors can keep up to date with the information we provide regardless of the website they are browsing.

How To Add Web Slices To Your Website

Adding Web Slices is easy. There are a few variations on the theme, and we didn't opt for the simplest version, but the lists below show the steps we went through. This is intended to simply give you a flavour of what is involved so don't try and use it as a tutorial. For full instructions see Microsoft's guide.
On The Homepage

• Embed the HTML that represents the Web Slice in a DIV (<div class="hslice" id="forumUpdates" >)
• Add some HTML to give the Web Slice a name during the installation (<h2 class="entry-title" style="display: none;">Horses - Forums</h2>)
• Add a link to where the latest Web Slice contents can be found (<a rel="feedurl" href="http://scripts.equiportal.co.uk.s3.amazonaws.com/data/updateForums.html#forums-update" style="display: none;"></a>)

Create A Web Page To Host Web Slice Updates

• Embed the Web Slice in a DIV (<div class="hslice" id="forums-update">)
• Tell IE8 to take the user to our homepage if they ask to open the Web Slice (<a rel="bookmark" href="http://www.equiportal.co.uk" style="display:none;"></a>)
• Provide the name for the favourites bar button (<h2 class="entry-title" style="display: none;">Horses - Forums</h2>)
• Embed the HTML to display the Web Slice in the favourite bar in a DIV (<div class="entry-content">)
• Provide a default value for how often the Web Slice should be checked for updates (<p >This page is updated every <span class="ttl">15</span> minutes.</p>)

Conclusion

• It's quick and easy to implement Web Slices.
• You use standard HTML which doesn't break other web browsers.
• It benefits users and encourages them to come back to your website.

Given the above points I expect that users will come to expect Web Slices to be available on popular websites. However, the favourites bar will soon become cluttered so people will be picky about the slices they install. I imagine that regular members will be the only ones to make use of the feature. Given the amount of effort required to add the feature to your website, I highly recommend you give it a try.