Updating My Personal Site, Charette.com to have a Site Mode in IE9

  • Article

Now that the beta of Internet Explorer 9 is out (you can download it from here), there are new opportunities to make your website act like an application in Windows.  One of the easy things that you can do is to create site mode when your users pin your site to the Windows Taskbar.  You can do this with a few meta tags and links in your HTML page headers. 

On my personal website, Charette.com, I use Graffiti CMS to manage my blog posts and content, so changing the content of the head on every page is simple.  I used Visual Studio to create an icon with larger, high-resolution icon images.  The source image that I used was a sharpie sketch of my dog Charm that I did years ago.  For Graffiti, you should replace your static favicon.ico as well as the favicon.ico file in the \__utility\img folder – see here for the tip. Here is what I added to my site page template in the Graffiti Admin/Site Options/Settings/Header field:

 <meta name="application-name" content="The Charette Project" />
<link rel="shortcut icon" type="image/ico" href="https://charette.com/favicon.ico"/>
<meta name="msapplication-tooltip" content="Michael Scherotter's Digital Playground" />
<meta name="msapplication-starturl" content="https://charette.com" />
<meta name="msapplication-navbutton-color" content="Orange" />
<meta name="msapplication-task" 
    content="name=Forums;action-uri=https://charette.com/phpbb;icon-uri=https://charette.com/favicon.ico"/>
<meta name="msapplication-task" 
    content="name=Journalist;action-uri=https://charette.com/journalist;icon-uri=https://charette.com/favicon.ico"/>
<meta name="msapplication-task" 
    content="name=Artwork;action-uri=https://charette.com/artwork;icon-uri=https://charette.com/favicon.ico"/>
<meta name="msapplication-task" 
    content="name=Safari;action-uri=https://charette.com/safari;icon-uri=https://charette.com/favicon.ico"/>

image

  1. The application-name meta tag specifies the name of the site as is shown in the jumplist, in this case “The Charette Project”
  2. the shortcut icon is the icon with at least a 32x32 pixel image
  3. the msapplication-tooltip meta tag is for when you create a shortcut to the site
  4. The msapplcation-starturl  meta tag is the start URL for the site mode (in this case it’s the same page but it could also contain additonal content (like a web analytics query arameter) or go to a different start page
  5. The msapplication-navbutton-color meta tag is for specifying the navbutton colors when in site button
  6. The msapplication-task meta tags specify specific navigation tasks (in this case they mirror some of the top navigation on my site

To read more about IE9 pinning and what else you can do now with Internet Explorer 9, go to the Internet Explorer Developer Center on MSDN