As my teammates know, I’m a fan of web slices, a capability of Internet Explorer 8. For anyone with a web site, it’s hard to imagine how these don’t have value. But that story is well documented, so I’m not going to jump into the business value conversation. What I do want to mention is something that I learned this week from Giorgio Sardo on the topic of web slice “discoverability”.
What is Discoverability?
This is the notion of how a end-user will find a web slice. IE provides several ways which are discussed next.
Consider the example below, which is screenshot from www.sugarlandmusic.com. This shows the typical example, with two indicators of a web slice.
The Feed Discovery Button
First notice should be the Feed Discovery button at the top of IE, since this is the easiest to recognize. Also note that this button will show a list of the web slices on the page. In my opinion, users typically don’t recognize this at first, since the average user is not accustomed to checking this real estate. As more folks become aware of this button, the recognition will improve.
From MSDN’s Subscribing to Content with Web Slices: Each Web Slice that Internet Explorer detects is added as an entry to the Feed Discovery button , located on the Command bar. Although a Web page can include up to 100 Web Slices, only 20 entries can appear at one time on the Feed Discovery button. You can customize which Web Slice appears at the top of the list by setting the Default Web Slice.
The most typical discovery method is called in-document discovery. As illustrated above, when the web slice region has the mouse pointer over it, the recognized web slice shortcut button appears, in conjunction with a green frame around the web slice content area.
The coding for this is well documented, so I won’t go into the details of the HTML efforts for implementing. Just search for hslice, as a starting point.
Important note: this method also is the data input for the Feed Discovery button (discussed earlier); therefore, these two indicators usually go hand-in-hand.
In-document discovery can be disabled via a meta element, but I can’t think of a good reason to do this. In most cases, you want the web slice to be discoverable.
Atypical Scenario - AddToFavoritesBar
In some cases, a web page developer may not want to utilize in-document discovery and would prefer to show the web slice icon. There are various reasons to do this, usually to do with screen real estate issues. When using this method, the web slice icon shows all the time, is a clickable image, and has an action of calling window.external.AddToFavoritesBar which launches the web slice subscription interaction. (AddToFavoritesBar info on MSDN).
One of the best known examples of this for me is ESPN’s home page (screen shot below). Note the web slice icon next to Headlines. Click on the web slice icon, and you get a handy web slice for the sports aficionado.
Here’s the source from the ESPN site for how they implemented this pattern.
<img src="http://a.espncdn.com/webslices/icons/12x12.png" width="12" height="12" alt="IE8 Web Slice" border="0" class="sliceicon-img headlines-img" />
Note: here’s the one little nugget that prompted me to write this post – it just took me some time to set up the point. When implementing this pattern (utilizing AddToFavoritesBar), the Feed Discovery button is not enabled. This is problematic, because my opinion is that you want your reader/customer to find these web slices. When talking to Giorgio about this issue, I received the following recommendation: create a hidden web slice on the screen, which will trigger my preferred extra visual assistance of the Feed Discovery button. And in investigating this, I found that ESPN is doing this exactly.
Here’s ESPN’s way of doing enabling the Feed Discovery button. Note the use of style="display: none;" in the fundamental web slice markup – thus the hidden web slice. This code exists just before the anchor element for the AddToFavoritesBar, in ESPN’s case.
<span id="headlinesslice" class="hslice" style="display: none;">
<span style="display: none;" class="entry-title">ESPN: Headlines</span>
<a rel="feedurl" href="http://espn.go.com/frontpage/webslices/headlines" style="display: none;"></a>
<span style="display: none;">
Updates every <span class="ttl">60</span> minute(s)
So, one of the sites that I show a lot now is Buzztap, a sporting news aggregator. Note my own personal usage of their web slices, specifically the St. Louis Cardinals Buzz and Dallas Cowboys Buzz. You can see their impressive list of slices here (over a 100), which cover NFL, NHL, NBA, MLB, and college sports. I’ll talk more about Buzztap in the future, but I wanted to point out their unique pattern of discoverability. They use in-document discovery which enables the Feed Discovery button, as well as the AddToFavoritesBar method. Now that is the ultimate in discovery!
Another Way of Discovery – the IE8 Gallery
This probably goes without saying, but just to make sure: registering your web slice in the gallery is another must-do activity for raising the discoverability score. Wanna get extra eye balls to your site for FREE? Register in the gallery. It’s that simple.
Web Slice Icon Guidelines
Web Slice Format Specification
Setting the Default Web Slice (when you want to dictate the first web slice in the Feed Discovery button)
Disabling In-Document Discovery
<meta name="slice" scheme="IE" content="off"/>