IE9 Beta Launch And Pinned Sites

Article
09/16/2010

Yesterday was another milestone for the IE team. The Internet Explorer 9 (IE9) Beta launch has received some very nice coverage, and the presentation was well done. The launch partners’ work looks great – this can be seen at the Beauty Of The Web site. The HTML5 experiences are incredible to view but, I think the Windows 7 integration is cool too.

In the past weeks, I was fortunate to work with Sparkart and the infamous Giorgio (corporate IE evangelist extraordinaire). Spaktart created the HTML5 experience for The Killers. If you visit The Killers’ HTML5 page, be sure to do so with IE9. Not only will you see a high bar for a music site, you can also see that the pinned site experience is a plus for Windows 7 users. At this point, you might not be aware of this pinned notion, so let’s take a look at what is a pinned site.

What is a Pinned Site

You might have seen the typical pinned site demo, where a browsing end-user drags a tab in IE9 and drops it on the taskbar. The site’s favicon is permanently shown on the taskbar, and shows integration between Windows 7 and IE9. This experience makes a web page look like a Windows 7 application, because of the potential interactions via the taskbar button for the web application. The possibilities are based on the following fundamental s provided by the IE API (the subset is sometimes referred to as Site Mode API:

customizing the experience based on features on the site’s favicon
customizing the jump list
displaying “overlay icons” on the taskbar button (ultimately the website favicon)
adding thumbnail buttons to the thumbnail preview
Making the button flash to get a user’s attention

All of this is done without asking the designer to change his normal programming or lessening the experience of competing browsers. And, let’s face it, for most sites in the US, the #1 browser in browser traffic analysis is IE8 and the top client O/S is Windows 7 – so this is a good reason to add a few more lines of code to make your biggest end user segment have even a better experience on your site. [Not bragging, just saying…] There’s an interesting list of sites who have already implemented this – just look at the long list of launch participants in the Beauty Of The Web site.

So, how does one build a pinned site? The first step is to deploy an enhanced favicon, and then leverage the IE API to build out the experience. Here’s a quick overview, a few of my learning's, and pointers to more details.

Favicon Facts

Every reputable site has a favicon type of file on their web site. In the past, this was the icon shown in the address bar in past browsers, but now it plays a much bigger part – even if you’re not leveraging the pinned site experience. It shows up in the new tab page, in the taskbar button of a pinned site, and impacts the chrome of a pinned site. Here’s my “new tab” page:

Most folks think of a icon as a single image file; however, this is a multi-image file. And IE leverages this - if the developer helps. IE will look for different size images, based on the scenario (like address bar, pinned site frame, chrome, taskbar button, new tab page). So, it’s important to update your favicon file. Note the example above – specifically, if you see a frame around the icon, then that site has a small image as their favicon. The sites without a frame definitely are easier on the eyes.

This is a pretty easy fix:

at a minimum, add the 32x32 to go along with your 16x16 (used in tab and favorites), which covers most client configurations. Adding a 24x24 also is used by the pinned site top-frame.
the better scenario is to also add 48x48 (which is used by 120 dpi machines)
the best scenario is to also add a 64x64. Not many will need this, but makes a spectacular task bar button for the high DPI machines (144 dpi).

If the appropriate image size is not found, IE will do its best to make other included images work. And don’t forget that IE follows a set of a caching guidelines, that the web developer can impact in a positive way.

More details found here: How to Add a Shortcut Icon to a Web Page, and IE9 Icon Resolutions.

You could stop here, I guess. But, you’re now ready for the next step.

Creating Jump Lists

There are two ways to create elements in the jump list, static and dynamic. Here are the differences.

A static list

Declared via meta tags in the HEAD element
Intended to be command tasks for all users
The last visited page is the official list of items. So, you have to include the static list on all pages in your site, or you may end up with none.
The first 5 static definitions are what is shown
When declaring this type of list, there are other important attributes to the pinned site experience that developer can declare (more details here)
- starting home page
- tool tip and application name (see the section below on pinning to Start Menu)
- button color, if not wanting to accept defaulting to favicon colors
- initial window size

·A Dynamic List

Created via JavaScript functional calls (more details here)
A custom category has to be created
The last 10 from the last custom category are what is displayed. This number can be increased by the user in their Win7 taskbar properties.
There is a function to show the menu (instant refresh)
These items are intended to be more custom to the user

These lists are very easy to build. And most sites will do this along with the favicon update.

For cool examples, check out The Killers’ HTML5 page. Also, check out Neowin’s coverage

As pointed out earlier, most pinned site demo’s seen today show pinning to the task bar; however, there’s another capability to be aware of. You can also pin to the Start Menu. The nuance here is that these are not quite the same thing, yet there is a lot of overlap. Let me explain.

When you pin to the task bar, the web page icon is shown in the task bar, the web pages in that site updates the jump list as the user moves around the web site, and all is good. But, there’s a menu command under the Tools menu (right click the star, press Alt-X, or press Alt and get the full menu) titled “Add To Start Menu”. This can also be initiated by the website with a JavaScript command window.external.msAddSiteMode(). Either way, this kicks off a process that prompts the user for permission to add the favicon to the Start Menu. Information in the Start Menu will be displayed from the extra attributes in the declaration like the application name and toolbar (more details here).

At this point, it’s just a shortcut. But right-click this, and there are options to “Pin To Start Menu” and “Pin to Task Bar”. And the user can optionally do both, and both views will stay in sync with the web page. A very interesting usage that I haven’t seen really shown yet.

Other Cool IE9 Effects For the Task Bar

There are additional ways that a web site can appear to be a Windows 7 application. Specifically, there is:

These are straightforward, so I’ll let MSDN provide the details. But, leveraging these is where the better applications will create sticky experiences. Don’t let my small coverage today make you think these are not cool – because they are the final steps in making a winning application for your Windows 7 browsing consumers.

Other Interesting Facts About IE9

There are so many enhancements in this IE9 that I’m skipping over (HTML5, leveraging GPU for performance gains, download manager, etc.) , so make sure you check out the list on the IE product site. However, I also want to point out a few common questions that I’ve seen in the last 24 hours.

What about IE8 add-on’s

The default IE9 doesn’t show web slices and visual search – but don’t be alarmed, they are still there and supported. And they are kept through your upgrade / install, and even uninstall.

To see your web slices, just turn on the Favorites Bar (right-click on one of the chrome buttons). If you were to see a web slice on a site via in-page discovery, the green web slice icon would appear, you could install, and then the Favorites Bar is enabled.

Accelerators still work. So, using the same rules from IE8 (a previous post).

And search providers also are still supported, just viewed differently. They now are part of the address bar experience. Just type away and you’ll see an intuitive experience (you might have to enable search suggestions). One point of confusion around leveraging the address bar like this comes in two forms – typing in intranet URL’s (withouth the https://") and IE9 confusing search term entry with URL entry. IE9 will memorize your intranet URL’s that you visit, so that gets better over time. But, if you are having a hard time still with the address bar, remember these two tips:

for a direct search, start the text off with a ?
for a intranet site, end the URL with a “/” and you’ll get an option to go directly there.

History

You can always click on the down pointing triangle to see a history of sites, so you can go back. And you can still press Cntrl-Shift-H to get a formal view. But there’s a new option here: right click on the BACK button.

Compatibility

You’ve not doubt seen the compatibility button, , in IE8 and continuing in IE9. This indicates that a site is not indicating what level of IE Standards should be applied in the rendering. For a site that is not working well with your new browser, the end user can click on this button to force an older set of rules; otherwise, by default, IE9 will render with its most recent mode, IE9 Standards mode., unless the site indicates the mode. This is well documented, but developers are not answering the call here. One line can fix this on the page, but you can also indicate the mode at a server level. More details on this topic here. My ask: please update your site so that I know you’re ready for IE9 Standards mode – don’t make me press the button. Please.

Zoom

Not that I’ve seen this question a lot, but someone was asking about how to control zoom, since this was typically shown in the status bar in IE8. It’s all still there and supported. You can always turn the status bar back on, and see the old familiar PLUS sign and current zoom level. You can also still use the Ctrl-Plus and Ctrl-Minus.

Running side-by-side with IE8, and Uninstalling

So, IE9 Beta does not run side-by-side with IE8. IE9 is installed as an update, that hides IE8. You can uninstall and your IE8 setup is restored.

The other caveat to this is that it’s confusing for folks to uninstall. While a few naysayers might want to go back (or have an issue that forces them to), you can uninstall from: Control Panel | Programs | Programs and Features | Installed Updates, then find “Windows Internet Explorer 9”.

IE9’s Hardware Performance Improvements and Graphics Drivers

IE9 takes a heavy dependence on quality GPU hardware and the corresponding drivers. There could be issues with your experience, depending on your configuration. Thus, you’ll notice under Advanced tab in Internet Options, a checkbox labeled “Use software rendering instead of GPU rendering”. You' obviously want to run with that unchecked, but you might be given guidance to uncheck in some circumstances (bug in video driver and/or hardware, or a bug in IE9 Beta). Hopefully, these circumstances will be few.

The Conclusion

So, that’s all for today. Hopefully this gets you a head start in considering IE9. In the mean time, check out the partners on BeautyOfTheWeb.Com and experience the HTML5 worlds they have built. And you gotta check out The Killers, which have a very unique web site now with HTML5. It’s just too cool to describe in a amount of short text. For a video of a demo, check out the interview that Naveen Jain (Sparkart CEO) did for The Seattle Times yesterday.

One of my favorite IT news sites is Neowin, because they provide the fastest at-a-glance view of the news, and there are times they know more about Microsoft than I do. Last year they built a IE8 web slice, which I have installed and really use. But yesterday, they wrote Part 1 of a how-to, Optimizing Your Site for Internet Explorer 9's New Features: Part 1, as well as other general coverage. But, to top it off, they enabled site pinning on their site – so check it out. they are looking at plans for Part 2 and resulting implementation to their site soon.

And if you’re still not sold on installing IE9 Beta, just check out the videos on BeautyOfTheWeb.Com to see some cool stuff in action. If you build something cool, let us know.