How to Build a Pinned Site in Less than 5 Minutes
by Justin Garrett, Senior Product Manager, Internet Explorer
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 Windows application. Pinning makes your site highly visible--87% of users launch their applications from the Windows taskbar. The result? You’ll get, on average, 50% more site traffic and engagement through users that pin.
Here are some examples from top-ranked sites that have taken advantage of pinning:
Getting an ROI for your site
It’s well worth the five minutes it will take to start using pinned sites to see if you get a spike in traffic. Visit BuildMyPinnedSite.com to dig in. Think of it as a return on investment (ROI) for your site, when new features give you tools to innovate on the web:
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).
Of course, you’ll want to take into consideration competing priorities like the latest page design, content engine, browser feature, version, technology, or extended support for devices like mobile phones. Every feature is already high-priority, so the cost to design, build, test, and sustain becomes critical.
Pinned Sites features are designed to be low cost to implement, since your site has already been built. I’ve gathered some best practices from partners and developers to 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 BuildMyPinnedSite.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. It looks like this:
Step 1: Use X-Icon Editor like The Killers did
Step 2: Create your jump lists using the form
Step 3: Add some advanced features like your blog feed and notifications
Step 4: Paste the code
Step 5: See the goodness
Your site is buried under the Internet Explorer logo like all other sites.
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.
If you have one hour…(lots of options)
As a developer, you’ll want options that fit the way you code and the frameworks you use. You want some options that are more customizable for your site design and easy to test:
If you have a day…(a unique experience)
Want something that really takes advantage of pinning features and creates a new, unique experience for your users? It will take a little more time to build, but you can add capabilities that will make your site feel like a native app. Look through some of the ideas and code on BuildMyPinnedSite.com that are most like your site:
I’ve gathered some of the best ideas from partners and developers. They share their thoughts on what to focus on for your site:
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 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:
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 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:
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:
This is just a taste of what’s been done, and there are plenty more ideas to explore at BuildMyPinnedSite.com.
Step 2: Build a New Experience from an Old One
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 Microsoft’s 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 28% share in the USA and 20% worldwide, the millions of users pinning continues to grow. Decide what works best for your site and share with us your thoughts.
Training and Certifications
All Developer Centers and Hubs