Pinned Sites in Internet Explorer 9
0 likes•889 views
The document discusses how websites can integrate with the Windows 7 taskbar by using pinned sites. It describes features like jump lists, thumbnail buttons, and notifications that websites can implement to enhance the user experience when pinned to the taskbar. The presentation provides examples of how to add these features using HTML metadata and JavaScript calls to customize how the site appears and behaves when in pinned site mode. Resources for further information on pinned sites and Windows user experience guidelines are also listed.
Pinned Sites in Internet Explorer 9
- 1. Pinned Sites + Internet Explorer 9 Integrating Your Site With Windows 7 Abram John Limpin http://abramlimpin.com
- 2. Agenda PAGE The Pinned Site Opportunity Who’s Using It Today Building A Pinned Experience
- 3. Web Sites As Applications How does the web become more app like? Immersive Fast Focused Clean Consistent PAGE
- 4. A Real World Pinned Site Demo
- 5. Site Mode Features Jump Lists Customized Jump Lists Thumb Bar Buttons Notifications Browser UI Customizations PAGE
- 6. Behind The Scenes: Site Mode Creates an isolated instance of Internet Explorer Generates a unique AppID for a specific URL BHOs and other toolbars are not enabled Shares the same screen real estate as other Windows applications PAGE
- 7. Enhancing Your Site: The Basics Demo
- 8. The Basics Use meta elements to provide custom details <link rel="shortcut icon" href="/favicon.ico" /> <meta name="application-name" content="Pinned Name" /> <meta name="msapplication-tooltip" content="Start Site" /> <meta name="msapplication-starturl" content="http://host/page.htm" /> <meta name="msapplication-window" content="width=1024;height=768" /> <meta name="msapplication-navbutton-color" content="#FF3300" /> PAGE
- 9. Enhancing Your Site: Adding Jump Lists Demo
- 10. Adding Jump Lists <meta name="msapplication-task" content="name=New Message;action-uri=http://host/NewMail.htm; icon-uri=http://host/mail.ico"/> PAGE
- 11. Enhancing Your Site: Providing Notifications Demo
- 12. Providing Notifications window.external.msSiteModeSetIconOverlay('http://host/star.ico', 'Complete'); window.external.msSiteModeClearIconOverlay(); PAGE
- 13. Enhancing Your Site: Creating Custom Jump Lists Demo
- 14. Creating Custom Jump Lists window.external.msSiteModeCreateJumplist('Notifications'); window.external.msSiteModeAddJumpListItem('Scrum (37 minutes overdue)', 'http://host/reminders.html', 'http://host/images/bell.ico'); window.external.msSiteModeShowJumpList(); PAGE
- 15. Enhancing Your Site: Adding Thumbnail Buttons Demo
- 16. Adding Thumbnail Buttons var but1 = window.external.msSiteModeAddThumbBarButton( 'http://host/speaker.ico', 'Mute'); document.addEventListener('msthumbnailclick', handler, false); window.external.msSiteModeShowThumbBar(); PAGE
- 17. Summary PAGE
- 18. Resources Internet Explorer Developer Center http://msdn.com/ie Pinned Site Guide http://msdn.microsoft.com/library/gg131029(VS.85).aspx Windows User Experience Interaction Guidelines http://msdn.microsoft.com/en-us/library/aa511446.aspx Channel 9 Taskbar Related Videos http://channel9.msdn.com/tags/Taskbar/ Icon Guidelines http://msdn.microsoft.com/en-us/library/aa511280.aspx Icon Editor http://www.xiconeditor.com/ PAGE
Editor's Notes
- #4: Windows 7 | Presenter Mode Wednesday, March 2, 2011 Microsoft Confidential
- #6: Sites can easily be pinned by users without any changes to your existing code – they can just drag the favicon in the address bar down to the task bar, and the site is pinned. Internet Explorer 9 will use the existing favicon as the icon for the app, and they’ll get the basic Pinned Site experience. Providing a basic experience is a good start, but customers will want to pin sites that integrate the best, so that they can interact with your site with the ease and familiarity of other Windows Applications. For example, providing Jump Lists is a quick way to get to frequently visited pages without first opening your browser. Adding icon overlays to provide notifications about how the status of an application has changed, or adding thumbnail preview controls available on the Windows 7 taskbar to provide quick control to your site. We’ll take a quick look at how you can enhance your Pinned Site experience with some simple code. Windows 7 | Presenter Mode Wednesday, March 2, 2011 Microsoft Confidential
- #7: Let’s take a look at what Internet Explorer does when a user pin’s a site. The first thing you’ll notice is that the website opens in it’s own window that’s isolated from any other instances of Internet Explorer that are running. Because the browser is running in Pinned Site mode, a new AppID is generated for that specific application – providing additional separation from other Internet Explorer windows. Any BHO’s or other toolbars are not enabled, helping to provide a more clean, streamlined experience. But most visible, the Pinned Site shares the same realestate as other Windows Applications, appearing on the task bar, and providing the same functionality as other Windows applications, like Jump Lists, custom icons, notifications and more. Pinned Sites easily co-mingle with other native Windows 7 applications. Windows 7 | Presenter Mode Wednesday, March 2, 2011 Microsoft Confidential