Tuesday, March 19, 2024

Make Your Website More like a Native App

Before mobile apps were mobile apps, they were Web apps. In other words, as companies ramped up to full-fledged native apps for mobile devices, they created mobile-friendly versions of their websites. By putting the site icon on the mobile desktop, the user could experience an app that looked and behaved like a mobile app. Even now, if you open a site like Wikipedia or Craigslist on a mobile device, you’ll get an app with a clean UI that conforms to the dimensions of your particular device, gives you full access to the functionality of the site, but surfaces only that functionality most immediately useful.

Site owners, meanwhile, get the immediate benefits of wider distribution but without building an entirely new product from scratch. All they need is to implement mobile-friendly code and a platform sniffer. It’s minimal investment with a potentially huge payoff.

That pattern is repeating itself on the desktop. Once again, site owners can add a bit of new code and a sniffer to their sites to create an entirely new product: a web app that looks and behaves more like a desktop app. Best of all, these changes can be implemented through standard HTML and JavaScript used by developers of all platforms.

Browser makers approach this differently. Google Chrome has opted for a marketplace where users download and install Web apps as a separate experience to their website. Microsoft Internet Explorer has Pinned Sites, a set of features that make users feel like they have a native app experience. Mozilla Firefox has been experimenting with Prism, a native app that users install to launch websites directly.

Let’s take a deeper look at one of these examples in Pinned Sites. It’s a good starting point because you can use your existing site experience with HTML and JavaScript. I’ll use a social network to show you how to do it:

Pinning a site

A social network is about getting users to do more together online. Pinned Sites are a set of tools in Internet Explorer 9 that integrate with Windows 7 to get maximum payoff with minimal effort from those users. According to Build My Pinned Site, a developer site about pinning, sites are seeing some positive results from users that pin and interact socially:

  • Huffington Post focused on social trending keywords got 49 percent more time spent

  • Hi5 made their games more social and got 200 percent more responses (like friend and game requests)

Web devs can essentially transform a Web app into a desktop app by focusing on six key features:

  1. Draggable Images
  2. Pinned site detection
  3. Static Jump Lists
  4. Dynamic Jump Lists
  5. Icon Overlays
  6. Thumbnail Buttons

By implementing these features, you’re taking advantage of the fact that 87 percent of users launch an application from their Windows taskbar. You invest anywhere from a few minutes to a day and your social site sits next to Facebook, Flixster, The New York Times and other big name sites that users pin.

Draggable Images

Draggable images give you much more flexibility and creativity in encouraging your users to make your site a part of their taskbar. They can be any image, not just the site icon. IE9 recognizes common graphics format, such as jpg or png. Site Pin Radio, a pinning demo site, has a great example of an SVG object being used as a pinnable image.

Add an image to the top of your site. Here is some sample code:

<div id="pinMeContainer ">
<img src="images/siteIcon.jpg" height="125" weight="125" />
<span id="pinMe">You appear to be using IE9. Drag the image on
the left onto your Task Bar for a richer experience.</span>
</div>

This example uses the following CSS styles:

#pinMeContainer {
  width: 50%;
  position: relative;
  text-align: center;
}
#pinMe {
  margin-top: 40px;
  position: absolute;
  text-align: center;
  font-size: 1.2em;
  padding-left: 40px;
  padding-right: 40px;
}

In this example, I’ve gone with the source image for the icon. You could just as easily use favicon.ico itself or even a completely unrelated image.

Graphic for pinning a site

Figure 1

If you load up your changes, you’ll notice that dragging the image does nothing toward pinning the site. No big surprise there. But to turn it into a draggable image, all you need is one bit of code, added to your <img> tag:

class="msPinSite"

Voila. Draggable.

Figure 2; Pinned Icon

Figure 2

You can take your user experience a step further by adding a cursor, either a custom .cur file or one of the prebuilt cursors available:

style="cursor: move;"

By now your <img> tag should look something like this:

<img class="msPinSite" style="cursor: move;" 
src="images/siteIcon.jpg" height="125" weight="125" />

Detecting Pinned Status

To kick it up a notch, you should check for your site’s current Pinned status to determine whether to display this message or not. To do this, IE9 recognizes the msIsSiteMode() method.

Take out your <div> nest and add the following instead:

<script type=”text/javascript” language=”javascript”>

if (!window.external.msIsSiteMode()) {

document.write(‘<div id=”pinMeContainer”><img class=”msPinSite” style=”cursor: move;” src=”images/siteIcon.jpg” height=”125″ weight=”125″ /><span id=”pinMe”>You appear to be using IE9. Drag the image on the left onto your Task Bar for a richer experience.</span></div>’);

}

</script>

Try pinning and unpinning your site. You should see your draggable image and instructions appear or disappear based on whether or not the site is pinned to the taskbar. You’ll also notice an interesting quirk around how IE9 treats pinned sites. When you first load your unpinned site in IE9, you should see the image and text instructions. Pin the site and the site gets refreshed automatically. The image and message disappear. This shows you that the site mode is being detected correctly.

However, unpin the site and nothing changes. Refresh the site in the current browser and still nothing changes. But close the browser, reopen it, and navigate to the site. Now its status as “unpinned” is detected once again. At this point, the image and message should reappear.

For more on Draggable Images, including an example of a custom cursor and some additional callout functionality, check out this site or the MSDN article on discovering pinning. You can also use a jQuery plug-in pinify to make it even easier here.

Static Jump Lists

Now that your site is pinned, what do you do? How do you add that richer experience you’ve been promising?

Your first, and easiest, technique is to add Jump Lists. These give your users places to go and things to do directly through the taskbar, whether the browser is open or not. Of the collection of meta tags that IE 9 now recognizes, msapplication-task, the one used to create Jump Lists, will probably be used more than any other.

As an example, go to your <head> section and add three new destinations, such as:

<meta name=”msapplication-task” content=”name=LinkedIn;action-uri=http://www.linkedin.com/in/justinwhitney;” />

<meta name=”msapplication-task” content=”name=Twitter;action-uri=http://twitter.com/ap0110;” />

<meta name=”msapplication-task” content=”name=Vimeo;action-uri=http://www.vimeo.com/justinwhitney;” />

Note the “name” and “action-uri” parameters within “content” Pin your site to the taskbar, then right-click your pinned icon and you’ll see three links under “Tasks.” It’s a start, but to help with branding and navigation, you should add icons, as well, using the “icon-uri” parameter:

<meta name=”msapplication-task” content=”name=LinkedIn;action-uri=http://www.linkedin.com/in/justinwhitney;icon-uri=http://www.linkedin.com/favicon.ico” />

<meta name=”msapplication-task” content=”name=Twitter;action-uri=http://twitter.com/ap0110;icon-uri=http://twitter.com/favicon.ico” />

<meta name=”msapplication-task” content=”name=Vimeo;action-uri=http://www.vimeo.com/justinwhitney;icon-uri=http://www.vimeo.com/favicon.ico” />

Right-click your pinned site again and you should see the new icons. If the icons don’t appear, try closing the browser and right-clicking the pinned app. Note that the icons you use here don’t necessarily have to be in the root of the site. This gives you a good opportunity to brand different activities based on your site identity.

Figure 3

Figure 3

As an added bonus, this Jump List will also appear as a flyout menu if your visitors pin the site to the Start Menu.

Figure 4

Figure 4

It’s important to note the difference between two types of Tasks. The type shown here, implemented through meta tags, is a static Task. These get updated only when the user loads or refreshes your site. For example, make sure your browser is closed and right-click again on the icon. You’ll see three Tasks in the Jump List. Now add one more meta tag:

<meta name=”msapplication-task” content=”name=DevX;action-uri=http://search.devx.com/search.cfm?q=justin+whitney&sa.x=10&sa.y=8&a=1&f=1&s=0;icon-uri=http://www.devx.com/favicon.ico” />

Right-click the app again. Still three Tasks. Now click the app to open the site. After it loads, right-click the app again and you’ll see the fourth Task has been added.

Dynamic Jump Lists

Once a site is pinned to the Taskbar, right-clicking its icon gives the user access to two types of Jump Lists: Static and Dynamic. You add static Jump List items through HTML meta tags, hence the term “static.” Because you do this through the “msapplication-task” meta tag, these items automatically get grouped under the “Tasks” Jump List category. Changing the static Jump List items by changing the meta tags will update the user’s Jump List once the site is revisited or refreshed. Because of the static nature of this section, you’ll most likely populate this list with specific tasks or sections of the site, points of interest that will remain unchanged on a day-to-day basis.

Dynamic Jump Lists give you a little more flexibility, both in naming the category and in generating specific items on the fly. Using the JavaScript API, you can create a single Dynamic Jump List category then populate it with up to 20 items, though only the last 10 will be shown in the Jump List by default.

To implement a Dynamic Jump List, you’ll focus on these functions:

  • window.external.msSiteModeClearJumpList()
  • window.external.msSiteModeCreateJumpList(list name)
  • window.external.msSiteModeAddJumpListItem(title, url, icon)

The following sample creates a list of recent articles (watch it in action here):

function createDynamicJumpList() {
   try {
      if (window.external.msIsSiteMode()) {
         window.external.msSiteModeClearJumpList();
         // Do some wuju here to grab titles and
         // urls from a newsfeed or other live source
         var titles = [  'Light Up Your Windows 7 App: Jump Lists, Libraries, and MPR',
         'Using Drupal 7 with SQL Server',
         'Windows 7 Light-Up: Make Your Applications Shine on Windows 7' ];
         var urls = [  'http://www.devx.com/MSDN/Article/46198',
         'http://www.devx.com/MS_PHP/Article/46418',
         'http://www.devx.com/MSDN/Article/45702' ];
         window.external.msSiteModeCreateJumpList("Latest Articles");
         // Note the reverse order
         for (i = 2; i >= 0; i--) {
            window.external.msSiteModeAddJumpListItem(titles[i], urls[i], 'favicon.ico');
         }
      }
   }
   catch (e) {
      // Nevermind.
   }
}
createDynamicJumpList();

Obviously, this sample uses some static strings as a stand-in for pulling URLs on the fly. Chances are your app already has code for grabbing the latest content or user notifications. As shown above, adding just a few lines of code allows you to leverage this process into a Jump List that refreshes itself with every visit.

Two points to note. First, to generate the list completely from scratch each time, call msSiteModeClearJumpList(). Otherwise you’ll add new items to your existing list, which may be a valid choice in many circumstances. Second, adding items drops them into your list from the bottom up, like filling a stack, with the last item added becoming the first item on the list. Sometimes this may be what you want. If not, you’ll need to flip the order in which the items are added.

News sites like Huffington Post use this process to keep the Jump List fresh with top news stories of the day. Since the site is pinned, these articles can be accessed even after the browser is closed. (Note, however, that changes to the Jump Lists do not get pushed to the users’ taskbars. Your visitors will get refreshed lists when they return to your site.)

In addition to HuffPo, one site doing this right is Rotten Tomatoes. Pinning this site to the taskbar reveals a dynamic Jump List called “What’s Hot on Rotten Tomatoes,” which remains even after the browser is closed. According to Steven Nguyen and Andrea Sharfin at Flixster, adding the Jump List and other features, like social networking buttons on the thumbnail preview (see below) took “a few hours,” including testing. Those few hours have paid off big time, with pinned users reading 34 percent more pages and staying on the site 57 percent longer than average users. Read the “Flixster Dev Q&A” for more info.

How does this apply to your site? So many ways; where do you even start?

If your site connects people through interests or hobbies, then you can generate a Jump List of likely interests for your registered users, based on interests in that person’s network. You could even generate new lists on sub-pages. For example, if the user drills down to a reading group, then you could populate the Jump List with top recommended books based on the favorites of that group, perhaps with links to an Amazon Associate account.

Your gaming site might generate a Jump List of pending actions, so that the user can go straight to a crop that needs harvesting or a castle that needs attacking, from a single click on the taskbar. You could also suggest new games being played within that person’s network, or link to a Buy/Earn store for game credits.

Purely social sites can suggest friends directly through the Jump List, or show pending Friend requests, Messages or other waiting social interactions. And dating sites absolutely must show potential matches, perhaps with bio pics as icons.

For a quick, powerful IE9 update for your site, start with dynamic Jump Lists. Here are a couple of places to get started:

Icon Overlays

When you pin a site to a taskbar using IE9, the icon itself can be used to send messages to the user when your site is open. It does this through the use of Icon Overlays, essentially small 16×16 icons that you control through a JavaScript API.

Here are the specific commands you’ll want to play with:

  • msSiteModeSetIconOverlay()
  • msSiteModeClearIconOverlay()

To give you a sense of how this works, take a look at the following code, which applies an alert icon to the overlay after 10 seconds and removes it after 20 seconds.

<script type="text/javascript" language="javascript">
var alertOn = false;
function toggleOverlayAlert() {
   try {
      if (window.external.msIsSiteMode()) {
         if (alertOn) {
            window.external.msSiteModeClearIconOverlay();
            alertOn = false;
         } else {
            window.external.msSiteModeSetIconOverlay
            ('http://www.justinwhitney.com/images/alert.ico',
            'Alert On');
            alertOn = true;
         }
      }
   }
   catch (e) {
      // Nevermind.
   }
}
// Instead of timers, use some AJAX-y stuff to pull updates and msgs
setTimeout("toggleOverlayAlert()", 10000);  // Toggle On in 10 secs
setTimeout("toggleOverlayAlert()", 20000);  // Toggle Off in 20 secs
</script>

Some things to note: first, you can only overlay icons on pinned sites, which is why you should check for pinning first using the msIsSiteMode() function. Second, this quick and dirty sample uses simple timers to activate a single static icon. To go to town on this, your app will be using event listeners and/or scheduled requests to pull the latest actionable updates and surface those to the taskbar icon. Along the way, you’ll want to grab the best icon for the situation, perhaps even create a new one just for the occasion.

In addition to setting icons, your pinned app can do another neat trick to get the user’s attention: flash. This code uses the msSiteModeActivate() function to flash the site icon after 30 seconds.

function flashOverlay() {
   window.external.msSiteModeActivate();
}
setTimeout("flashOverlay()", 30000);

To see these two examples in action, go to http://www.justinwhitney.com in IE 9 and pin the site to the taskbar.

To see how this is done in the wild, pin some of the top social networking sites like Facebook and hi5, both of which have implemented icon overlays. If you have active accounts, you’ll see icons appear as you get updates. Similarly, HuffPo raises the flag when a new article comes online.

Your site can take social interaction to the next level in a variety of ways. Most obvious are alerts for new messages, friend requests or event notifications. But you can also focus on opportunistic alerts, such as when a friend logs in or comes online or when someone is trying to chat. The overlay could keep a running count of available energy in a game, or notify the user when a new action has become available. Business-oriented SaaS apps can integrate overlays into scheduling and alarms or workflow notifications.

To add a little extra site monetization you could launch big sales events with small windows of opportunity, events that require pinning for the user to be notified. For example, reward pinned users with a five-minute microsale – surface an icon overlay, flash the site icon, then clear it all and end the sale after five minutes. Gilt.com has done something similar to great success, at one point selling out a sale item in the first 15 minutes of a 36-hour sale.

Gaming sites could do something similar with virtual flashmob events. Push an icon when a boss or loot becomes temporarily available. Or if your site is intended to support a client app that connects to a network (are you reading this, Blizzard?), then use your pinned site to show server status or current traffic.

When you’re ready to put your ideas in motion, here are some resources:

Thumbnail Buttons

The third major feature you should take a close look at, Thumbnail Buttons, shows up when you hover over a pinned site in the taskbar. Since Windows Vista, hovering over an open app on the taskbar gives you a Thumbnail Preview of the app, or in the case of IE, the website.

With IE9 you can add interactive buttons to that preview, allowing your users to engage with the site while it’s still minimized. One of the best examples of this to date is Microsoft’s own IE9 demo, called Pin Site Radio. Pin this to your taskbar and a hover will reveal play buttons for controlling the site’s player.

The salient JavaScript calls in this case are:

  • msSiteModeAddThumbBarButton()
  • msSiteModeShowThumbBar()
  • msSiteModeUpdateThumbBarButton(button name, enabled, visible)

Here’s an example of what that looks like in action:

function thumbButtonHandler(btn) {
   switch (btn.buttonID) {
      case 1:  // Do stuff;
               break;
      case 2:  // Do other stuff;
               break;
   }
   // Use the following to confirm your button IDs
   // alert ("Button ID is " + btn.buttonID);
}
function addThumbButtons() {
   try {
      btnJumpListOne = window.external.msSiteModeAddThumbBarButton( '/images/quill.ico', 'Tech Articles');
      btnJumpListTwo = window.external.msSiteModeAddThumbBarButton( '/images/camera.ico', 'Videos');
      window.external.msSiteModeShowThumbBar();
      window.external.msSiteModeUpdateThumbBarButton(btnJumpListOne, true, true);
      window.external.msSiteModeUpdateThumbBarButton(btnJumpListTwo, true, true);
      if (document.addEventListener) {
         document.addEventListener('msthumbnailclick', thumbButtonHandler, false);
      }
      else if (document.attachEvent) {
          ocument.attachEvent('onmsthumbnailclick', thumbButtonHandler);

 

      }
   }
   catch (e) {
      // Nevermind.
   }
}
addThumbButtons();

Essentially, you create the buttons and show the thumbnail toolbar. Optionally, you can disable or hide the buttons as you see fit. A couple of big notes, though. First of all, you need an event handler. And while IE9 now supports addEventListener, it’s good to have both options in place in case your user is in a different mode. For example, open up Developer Tools (F12) and look at Document Mode. By default you start out in “Quirks,” in which case addEventListener is ignored in favor of attachEvent. Switch to “IE 9 Standards” and addEventListener gets picked up instead. Any other mode and it’s back to attachEvent. So it’s a safe bet just to have both in place.

Second, when developing, if you make changes to your thumbnail buttons you won’t see the changes with a simple browser refresh. Close the browser entirely and reopen it to see your changes take effect. This doesn’t apply to code in the event handler.

Two of the most common implementations include player controls for music and video, similar to the Pin Site Radio demo and social networking buttons. Slacker is a good example.

But the field is still wide open. If you’re already running a highly interactive site, chances are you have functionality ready to hook up with minimal coding. Perhaps your Thumbnail Toolbar can allow users to toggle their availability status. Or perhaps you’ll give users a way to force a content update before waiting for a push, so that users obsessed with email and status updates don’t have to open the browser and hit refresh, but rather can do it right from the taskbar.

Since these buttons let users interact with your site while it’s running in the background, it might be worth exploring how to use them in conjunction with Icon Overlays. If your auction site notifies a user when he’s outbid by using an overlay alert, then the thumbnail button can allow him to up the ante or give up entirely. In a game of online poker, the taskbar icon might flash, with icon cards showing the user her current hand and thumbnail buttons letting her call, raise or fold. Or when that icon overlay showing current energy levels gets high enough, the user can quickly cash in using action buttons, a discreet option likely to be appreciated in today’s open work environments.

One thing’s for sure. Someone somewhere has to make a game that can be played entirely through Thumbnail Buttons. If you’re ready for the challenge, start here:

Boss Justification

As you can see, there’s a lot you can do. So how do you justify what to develop (and where to stop)? While adoption is growing for IE9, keep this in mind: a user’s taskbar can hold maybe 10 or 15 icons, but you can likely count on no more than five. If you’re one of those five, the benefits are huge. So, at minimum make it so your site can be pinned. That will take you a few minutes with the steps above.

Next, think about how jump lists can make your site more social. Hi5 and Huffington Post did it by using jump lists to encouraged users to reengage. And they did. So adding a jump list is good next step.

Finally, you want users to discover pinning so it’s pretty simple to give them a message about it in a few steps.

From here, notifications and thumbnail preview controls are more advanced. You should take a look at your website and determine whether they fit what you’re trying to do.

For more about Pinned Sites, including samples and code, check out Build My Pinned Site or the IE Learning Center on MSDN.

 

This site does business with companies mentioned in this article or associated with the technologies.

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured