Tuesday, March 22, 2011

Economics of Web: Build a Pinned Site in Less than a Day

Previously, we shared with you that websites are seeing up to a 50% increase in engagement when users pin their site with IE9. Today, our second blog on the economics of web specifically looks at the cost to implement a Pinned Site. Developers can extend their website outside the browser in less than a day. Over 1,000 sites globally have taken advantage of these new capabilities. Users see the difference which should ultimately translate into measureable results.

Recently, we surveyed developers on how they spent their time building a Pinned Site. We found that there were two primary patterns; a basic experience which could be built in about an hour and a deeper experience which could be built in a day. The common theme was that they were able to do it quickly with their existing web experience. It?s all about getting more impact from what you already have. Here is how they spent their time:

A BASIC PINNED SITE IN ONE HOUR

To build the basic Pinned Site, there are two simple steps that developers followed:

Step 1: Make Your Brand Shine

Creating a high-resolution favicon is the first step. Instead of creating something new, simplify your existing logo. You can convert it into a favicon using X-Icon Editor. This tool allows you to upload it and quickly create all the sizes you need. A great example of this is The Killers Music:

image

Step 2: Tell the Site How to Behave

Now tell the browser how you want your site to behave when the user pins it. It typically takes less than 15 lines of code:

  1. Site Name ? this will show when your user hovers over it on the taskbar
  2. Tooltip ? this will show when your user hovers over the start menu or desktop
  3. Start URL ? you can determine where the pinned site always starts, like a home page
  4. Window Size ? you can specific how large the window should be
  5. Navigation Color ? make the browser look like your site
  6. Static Jump Lists - take users deeper into your site

You can learn everything about declaring metadata with code samples here.

A DEEPER PINNED SITE IN ONE DAY

Now that users can pin you site, focus on extending the best parts of it through dynamic jump lists:

Step 1: Turn an Old Idea into a New One

Begin by evaluating what you already have on the website. You already know what your users do most often. Explore alternatives and decide what?s most valuable to them and to your site. Here?s an example for financial websites:

  1. Notifications ? set-up reminders and inform users of activity (like low-balance, fees, activity)
  2. Promotions ? show how users might save money through offers
  3. Account Status ? show balances or changes (likely following log-in to protect security)

image

Step 2: Build a New Experience from an Old One

Connect the Pinned Site features you want (like dynamic jump list or notifications) with the code you already have through JavaScript. It requires very minimal development to extend it from the website. For example, when the Huffington Post publishes the ?Big News?, the dynamic jump list changes with it:

image

You can learn everything about how Pinned Sites using JavaScript with code samples here. We plan to share more ideas on MSDN.

ECONOMICS OF THE WEB: LOW COST IMPACT

Pinned Sites make it easy to get more impact from the web experience you already have. Developers can realize this in less than a day and with minimal change. Share with us your own experiences with developing for Pinned Sites. Learn more about it here.

ADVANCED SEMICONDUCTOR ENGINEERING ALLIANCE DATA SYSTEMS ALLTEL AMAZONCOM AMERICA MOVIL

No comments:

Post a Comment