How to Build a Pinned Site in Less than 15 Minutes

by Justin Garrett, Senior Product Manager, Internet Explorer

Introduction: Why Build?

Pinned Sites features like favicons, notifications, jump lists, and thumbnail toolbars give developers the tools to extend their website outside the browser and make it more like a native application in Windows. While 4% of users bookmark a website, 87% of users have launched an application from the Windows taskbar. The opportunity should ultimately translate into measureable results for your website economically. Here are some examples:

  • Flixster ( media entertainment). Users that pinned the site read 34% more pages and stayed 57% longer than their average user
  • Gilt( shopping). Users that pin the site visit 39% more often, add 160% more items to shopping cart, complete 45% more sales transactions
  • Huffington Post (news). Users that pin the site spend 49% more time on the website than users that don't pin. 38% of Internet Explorer 9 users pin the site. 10% more users pin when they see a message on site
  • hi5( social gaming). Users that pin the site view 15% more pages and became much more active, responding to 3x more social requests (like new friends, game invites, messages)
  • The Killers Music ( fan music). Users that pin the site read 65% more pages, spend 103% more time on site

By the time Internet Explorer 9 was released, over 1,000 sites from 37 countries with one billion active web userstook advantage of these capabilities.  You can take advantage of pinned site for yourself on BuildMyPinnedSite.com.

Web Economics of Pinned Sites

Developers get the most value from building with Pinned Sites when they can extend their existing website for as low development cost as possible. This can be expressed like a return-on-investment (ROI), which new features provide developers the tools to innovate on the web:

  • Value per User – Create compelling site experiences that build repeat engagement and loyalty
  • Number of Users Visiting – 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

The Cost to Implement is a key part of developer decision-making. Most developers are limited only by the number of hours in a day, their creativity, and the efficiency of the tools they use. 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 a website that has already been built. Over the past few months, we've learned some best practices from partners and developers that can make it even easier for you to build one yourself:

Build a Pinned Site in One Day

There were two primary patterns of development with Pinned Sites; a basic experience, which could be built in as little as 15 minutes and a deeper experience, which could be built in a day. The common theme is that developers are able to do it quickly with their existing web experience. Here are the breakdowns across key development milestones:

More than 50% of the time was spent designing the site itself. Here's how you can get some great ideas that make building a Pinned Site even easier:

A Basic Pinned Site in Less in 15 Minutes

To build the basic Pinned Site, use these steps:

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:

Step 2: Tell the Site What to Do

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

  1. Site Name – this appears when your user hovers over it on the taskbar
  2. Tooltip – this appears 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 specify the size of the window
  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 HTML metadata with code samples here.

A Deeper Pinned Site in Less than A Day

Now that users can pin your site, focus on extending the best parts of it by using 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. After a user has pinned the site, the value of features like notificationsand dynamic jump lists are powerful because they can pull the user into the experience based on what you design.

Social Gaming Example

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.

Financial Site Examples

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)

Travel Site Examples

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.

These are some of our ideas and those we've learned by listening to what's possible. Think about combining the existing web experience with what you want users to do most often. That should likely be your design. Over the next few weeks, we'll continue to share a collection of specific web business ideas on MSDN. Feel free to share your ideas too.

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. The website already exposed the date, keywords, and links so they reference this code and extend it to the jump list. The result was minimal design effort that expanded their vision of personalized, relevant news.

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

Conclusion

Pinned Sites features are designed to be a low-cost implementation based on a website that has already been built. Developers should decide how basic (1 hour) or deep (1 day) they want to make their Pinned Site experience with their ideas and some of the best practices we've learned and shared. Evaluate whether putting your website on the Windows taskbar where 87% of users have launched an app is worth the cost to implement in less than a day. You can learn the specific how-to get started at BuildMyPinnedSite or MSDN.