How to Build a Pinned Site in Less than 5 Minutes

by Justin Garrett, Senior Product Manager, Internet Explorer

Updated: September 14, 2011

Contents

Introduction: why build with pinning?
Getting an ROI for your site
If you have 5 minutes…(keep it simple)
If you have one hour…(lots of options)
If you have a day…(a unique experience)
Step 1: Turn an Old Idea into a New One
Social Gaming Ideas
Financial Site Ideas
Travel Site Ideas
Step 2: Build a New Experience from an Old One
Conclusion
Related Links

Introduction: why build with pinning?

Internet Explorer 9 introduces Pinned Sites features like favicons, notifications, jump lists, and thumbnail toolbars. These tools give you the ability to extend your website outside the browser and make it more like a native application in Windows. Pinning puts your site in a highly visible place where 87% of users launch their applications from the Windows taskbar. The result is that you get, on average, 50% more site traffic and engagement through users that pin.

Here are some examples:

  • Gilt (shopping) — visit 39% more often, add 160% more items to shopping cart, complete 45% more sales transactions
  • hi5 (social gaming) — respond to 200% more social requests (like friends, games, notifications)
  • Business Insider (news) — read 57% more pages, spend 95% more time on site
  • Flixster (media entertainment) — read 34% more pages, spend 57% more time on site
  • Huffington Post (news) — spend 49% more time on site
  • The Killers (music) — read 65% more pages, spend 103% more time on site
  • DocStoc (doc sharing) — viewed 229% more pages and 650% more likely to search docs

Getting an ROI for your site

You can grow your traffic (and your web business) by using Pinned Sites. It's easy to get started in about 5 minutes by using BuildMyPinnedSite.com and PinMyWebsite.com. We think of this decision to develop as a return-on-investment (ROI) for your site, when new features provide developers the tools to innovate on the web:

  • Value per User – Create compelling site experiences that build repeat engagement and loyalty. From our telemetry data, we know that users will visit a single pinned site, on average, 30 times per month. That accounts for over 40% of an average user's visits to all sites on the web per month. More than 12,000 top ranked sites reaching 1 Billion users, like Facebook, Yahoo, and ESPN have done so; WordPress.com made pinning available to their network of over 20 million blogs.
  • Number of Users Visiting – Reach millions of users on a growing platform like IE9 and Windows 7, which has over 25% share in the USA and 18% worldwide. You can use these tools to bring new customers to your experiences through promotion, offers, and discovery of features.
  • Cost to Implement – Be easy to design, build, test, and sustain on a stable platform. It should be measured in minutes or hours, not days.

    ROI equation in terms of value per user, number of users, and cost to implement

The Cost to Implement is a key part of your decision to develop. You are limited only by the number of hours in a day, your creativity, and the tools you have to use (like frameworks and libraries). There are also competing priorities to consider like the latest page design, content engine, browser feature, version, technology, or extended support for the growing number of devices like mobile phones. Every feature is already high-priority, so the cost is design, build, test, and sustain becomes critical.

Pinned Sites features are designed to be a low-cost implementation based on your website that has already been built, not a brand new platform. We've learned some best practices from partners and developers that can make it even easier for you to build one yourself:

If you have 5 minutes…(keep it simple)

Most of the benefit comes from your site when it has a high-resolution favicon and a jumplist. Use the new capabilities on PinMyWebsite.com to enhance your site without touching any code. If you are a site owner or designer, you can import your site logo and complete the form and give the one line of code to your developer team. The process looks like this:

Step 1: Use X-Icon Editor like The Killers did

The Killers logo and favicon

X-Icon-Editor Interface

Step 2: Create your jump lists using the wizard on PinMyWebsite.com

The Jump lists tasks form of the online wizard

Step 3: Add some advanced features like your blog feed and notifications

Dynamic jump list tasks and notifications pane of online wizard

Step 4: Paste the Code

Copy to clipboard step of the online wizard

Step 5: See the goodness  

Before: Your site is buried under the Internet Explorer logo like all other sites.

The standard Jump List of Internet Explorer

After: Your site may be pinned to the Windows taskbar for one-click access.  A right-click provides new ways for your users to go deeper into the content on your site.  

An example of a dynamic Jump List of deep links

If you have one hour…(lots of options)

You are a developer and you may want options that fit into how you code and the frameworks you use. You want some options which are more customizable for your site design and easy to test:

  1. Use HTML Metadata – It typically takes less than 15 lines of code. Use the code snippet on BuildMyPinnedSite or see the MSDN guide on pinning metadata.
    • Site Name – this appears when your user hovers over it on the taskbar
    • Tooltip – this appears when your user hovers over the start menu or desktop
    • Start URL – you can determine where the Pinned Site always starts, like a home page
    • Window Size – you can specify the size of the window
    • Navigation Color – make the browser look like your site
    • Static Jump Lists – take users deeper into your site

      Code snippet of static metadata from BuildMyPinnedSite.com

  2. Use jQuery – Do everything with the pinify jQuery plugin in one step. The code only runs when users browse with IE9 and Windows 7 so there is no site performance impact for users of other browsers. The plug-in is also a cleaner way to test and enhance your site across many browsers.

If you have a day…(a unique experience)

You want something that really takes advantage of pinning features (and creates a new, unique experience for your users). It takes a little more time to build but your site now has the capabilities that make it feel like a native app. Try looking through some of the ideas and code on BuildMyPinnedSite.com that are most like your site:

Pinning idea starters from BuildMyPinnedSite.com

We’ve gathered some of the best ideas from partners and developers. They share their thoughts on what to focus on for your site:

What's Hot on RottenTomatoes.comA thumbnail toolbar from Slacker.comMember tasks from Delta.com

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. After a user has pinned the site, the value of features like notifications and dynamic jump lists are powerful because they can pull the user into the experience based on what you design.

Social Gaming Ideas

Let's take an example of a social gaming site. Getting users to interact socially with each other ultimately translates to advertisement views. That is quite different than a shopping or auction site model, where the purchase itself is far more important. So, if a website is already set up to take advantage of how a user converts to value, your Pinned Site should do the same.

A social gaming site might be set up in three different ways (with different goals) to optimize the potential of Pinned Sites:

  1. In-Game Status – Show what's going on in the game without you and pull them in
  2. Social Interaction – Encourage social response and in-game purchase
  3. Personal Status / Rank – Build loyalty by showing what you've achieved and what's next

hi5 built their social gaming experience to maximize the opportunity for the social interaction itself. You can see how the idea translated to the design below.

The hi5 Jump List with messages, notifications, and game invites

 

Financial Site Ideas

Banking and Finance websites are primarily focused on creating a convenient way for their customers to complete a transaction. They might also be interested in serving new services or promotions. Conceptually, they might extend their Pinned Sites experience in these ways:

  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 after a log in to protect security)

Gg193009.PinnedSites_Financial1(en-us,VS.85).png   Gg193009.PinnedSites_Financial2(en-us,VS.85).png   Gg193009.PinnedSites_Financial3(en-us,VS.85).png

Travel Site Ideas

Travel websites catch user attention by highlighting beautiful destinations with great deals.  Similar to shopping, the purchase conversion is top priority, but because planning a vacation is complex, you want to make it as easy as possible:

  1. Your Profile – See your itineraries, trips, account/mileage balance, or travel preferences

  2. Featured Destinations – Create thematic or destination-specific offers

  3. Trip-specific Offers – User has already booked a trip.  You can now personalize related offers.

Gg193009.PinnedSites_Travel1(en-us,VS.85).png   Gg193009.PinnedSites_Travel2(en-us,VS.85).png   Gg193009.PinnedSites_Travel3(en-us,VS.85).png

These are some of our ideas and those we've learned by listening to what's possible.  See all of them at BuildMyPinnedSite.com. Think about combining the existing web experience with what you want users to do most often.  That should probably be the design that gets the most benefit and is the most simple to develop.

Step 2: Build a New Experience from an Old One

Connect the Pinned Site features you want (like dynamic jump lists or notifications) by using the code you already have through JavaScript. Pinned Sites require very minimal development to extend the original website.

 

Let's take a news site, for example Huffington Post.  They use JavaScript to publish breaking news articles to their website every 15 minutes. The update occurs automatically when editors want to publish without developer support.  Because Pinned Sites also use JavaScript, they referred to the same code to create the dynamic jump lists.  Because the website already exposes the date, keywords, and links, the site developers could reference this code and extend it to the jump list.  The result was minimal design effort that expanded their vision of personalized, relevant news.

Gg193009.PinnedSites_HuffingtonPost(en-us,VS.85).png

You can learn everything about how Pinned Sites use JavaScript with code samples here.

Conclusion

Pinned Sites are features that give you the ability to extend your website outside the browser and make it more like a native application in Windows. This is part of our sites-at-the-center approach to Internet Explorer 9. It is an opportunity to get a return-on-investment where sites get an average of 50% more engagement from users that pin. The cost to implement is also low. As IE9 on Windows 7 is over 25% share in the USA and 18% worldwide, the millions of users pinning continues to grow. Decide what works best for your site and share with us your thoughts.

Related Links


Show: