HuffPost + Pinned Sites: Reinventing the Big News Experience

The Huffington Post is a leading social news and opinion site—”The Internet Newspaper.” HuffPost covers it all—politics, media, business, entertainment, living, style, sustainable “green” living, world news, technology, nonprofits, college life, books, education, religion, travel, arts, food, comedy: it’s a top destination for news, blogs, and original content. The site reaches more than 26M unique visitors monthly.

HuffPost wants to serve their readers relevant and timely “Big News” and encourage engagement with comments and social posts. Taking advantage of Internet Explorer 9 and Windows 7 developer tools, HuffPost has created an immersive, app-like web experience with new Pinned Site features:

The result was great for both readers and HuffPost’s business. Users who pinned the site …

  • Spent 49% more time on the site
  • Were 14% more likely to stay on site
  • Viewed 11% more pages

And that’s exactly what HuffPost was hoping for—more engagement.

HuffPost developers used these tools to keep readers coming back for more by designing an always-active presence in users’ Windows 7 Taskbar, where IE9 has share exceeding 20% worldwide and approaching 30% in the US. Paul Berry, CTO of Huffington Post, describes the approach they took in this video.

Want to do the same thing? It takes about a day to replicate the development work that HuffPost did. Go to BuildMyPinnedSite for ideas and code samples.  A simpler version (with most of the benefit) can be done in 15 minutes.

Links in this case study will take you directly to specific MSDN Pinned Sites sections, so you can dive deeper into the details and check out code samples and demos.

The Situation

One of the core principles of IE9 is putting sites at the center of the user’s experience. Users go to their browser to visit websites, not for the browser itself. Developers should have the tools to build engaging user experiences—and the browser should get out of the way.

While much of the web today is static and content-focused, more and more sites are emerging that are interactive, personalized, and social. It’s clearly where the web is headed these days.

HuffPost realizes that success means getting their relevant and targeted local content to readers, and encouraging them to contribute themselves. It also means using the whole PC to stay in front of readers—not simply relying on a browser URL, search, or mobile apps.

Developers at HuffPost are busy. They’re focused on site content and functionality, so they don’t have time to explore every feature on every platform. Features they do consider must be simple. They must be high impact. And they must immediately enhance the user’s experience.

Here are the three criteria HuffPost ranks features against, and some questions you should be asking yourself when considering new browser features.

  1. Customer Engagement
    • Does it reach the customer in a timely and relevant fashion?
    • Is it part of the customer’s everyday workflow?
    • Does it help the customer get to our content faster?
    • Does it take our customer deeper into the site experience?
  2. Customer Value
    • Does it inspire the customer to stay and interact longer?
    • Will it increase the opportunity for our customer to engage with ads and premium experiences?
    • Is it “cutting edge” and “must have” for the customer?
    • Does it enhance the everyday experience?
    • Does it build loyalty and brand value?
  3. Engineering Values
    • Is it simple and sustainable from a development perspective?
    • Does it build on a credible, long-term platform with a mature customer base?
    • Does it sync with the mission and values of the business?
    • Bottom line—is it is profitable to use on a given project?

HuffPost wanted their web experience to feel more like an app.  Social engagement was also a priority. When readers are engaged, they visit more often, go deeper into the site, and stay longer.

They evaluated Internet Explorer 9 Pinned Sites features to see how the features would affect customer engagement and value. Right away, they were pleased with the “quick win” and “immersive” potential.

Ease of implementation, standards, performance, and sustainability were must-haves, because platforms—along with 3rd party APIs for social integration and mobile devices—continue to consume their limited development bandwidth.

The Solution

Simple to learn, simple to develop.

Devs learned about IE9 Pinned Site implementation through the MSDN IE9 Code Samples Library and IETestDrive Pinned Sites, which included easy-to-follow scenarios with “show code” pop-ups.

IE9’s Pinned Site APIs and Built-In F12 Developer Tools were also very useful.

Like many online news sites, HuffPost primarily uses JavaScript in publishing news from their Content Management system. That made JavaScript-based Pinned Sites features easy to add and test into the existing system with almost no custom code.

The hard part was determining what content to serve and when to serve it. They decided to showcase their Big News sections because it’s what sets them apart from competitive news sites.

The end-to-end effort? 3 days to go-live.

  • Design = 2 Days, shared across Marketing, Editors, and Product Planning
  • Development = 1 Day, 1 Developer to build, test, and deploy

figure 1

HuffPost in IE9 is a clean, branded experience that puts content and interactivity in the focus. Pinned Site features are designed to increase customer engagement through Windows 7, outside the browser.

A Deeper Look at Huffington Post in IE9

Drilling into the experience, here is what HuffPost did to reinvent their site in just 1 Day, with 1 Developer:

Step 1: Map to your current brand look and feel.

HuffPost defined the navigation button colors, home page, window size, and tool tips using pinned site metadata. IE9 does the rest.

figure 2

Step 2: Let your users know. Then remind them! 

HuffPost wants readers using IE9 to pin their site. The site automatically checks when users have not yet pinned it, and prompts them to drag the tab to pin. All done with just 15 lines of code. Users can now drag the tab to the Taskbar and start the Pinned Site experience.

figure 3

Step 3: HuffPost on every taskbar.

HuffPost wanted a brand experience that looked “clean and shiny” like an everyday part of their users’ experience. They designed 5 Favicons in X-Icon Editor with the colors associated with each news section.

Readers can simply pin their favorite section directly to their taskbar to jump back into the HuffPost experience with a single click.

figure 4

Step 4: Bring them back again and again!

News changes by the minute. When big news hits, readers need to know. HuffPost wants to make sure that their readers are the first. Notifications are a great way to unobtrusively alert readers to breaking news without disruptive noise or unnecessary emails. Custom Icon Overlay and Toolbar Flash capture users’ attention directly on the Taskbar.

figure 5

Step 5: Go deeper with jump lists.

Readers are delighted when they discover new content, and HuffPost wants to encourage exploring the site.

Dynamic Jump Lists contain “hot” keywords like celebrity names, political opinion, or entertainment buzz, making it easier for readers to stumble on news that’s interesting. Each Jump List is personalized by news section and updates every 15 minutes.

Users can right-click the pinned site to see a fresh Jump List. How easy is that?!?

figure 6

Step 6: Go social with thumbnail toolbar.

It seems small and simple, but it makes a big difference. One-click Thumbnail Toolbars on their Taskbar make it easy to “Like” and “tweet” stories. Users can then easily share stories with their friends, which in turn gives HuffPost’s content an even bigger audience.

figure 7

Summary & Next Steps

HuffPost measures success in terms of Customer Value against their Cost to Code. A small development investment—1 Day, 1 Developer—to create an immersive reader experience really paid off.

Developing for IE9 is straightforward, especially when your goal is to deliver great content directly to your customers. Unlocking the potential of Windows 7 and IE9 keeps your focus where it should be—on the content, and ultimately, on your customers.

Huffington Post’s Success Metrics—exceeded!

HuffPost is thrilled with how a little effort (1 Day, 1 Developer) paid off on their readership goals:

Users that pinned the site…

  • Spent 49% more time on the site
  • Were 14% more likely to stay on site
  • Viewed 11% more pages

Site experience benefits:

  • Created a personalized experience by letting users pin the news content they want with one-click access
  • Increased user engagement through notification, pulling users back into their “Big News”
  • Was low cost to code and easy to sustain using existing technologies like JavaScript

Ready to go? Learn how to do what they did.

See it in action!

Check out the Huffington Post in IE9. There are loads of resources for developers, including code samples, technical docs, APIs, and more below:

Easy clicks! Links referenced in this case study:

SitePoint Content Partner

This tutorial has been made possible by the support of Microsoft. We strive to work together to develop the SitePoint content that’s most useful and relevant to you.

 

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Dave

    Would be useful to have some info on how the data about the increased activity of users that pinned site was derived.

    Is the increase based on tracking the same users’ activity before and after they had pinned the site? Or is it just based on the activity of users that have pinned the site compared to those that have not pinned it? If the second, then it’s not really a valid statistic as it likely that users who already use the site most would be more likely to pin it.

    • http://buildmypinnedsite.com/ Justin Garrett

      Hi Dave,

      We published a whitepaper on BuildMyPinnedSite.com (Step 6) on how you can track this yourself for your site(s). Huffington Post used their own site analytics tool the measure difference between users that pinned and those who did not (i.e. define a custom campaign tag next to the JavaScript that detects pinning). Numbers were published after we confirmed enough data for statistical signifance, minimum 4 weeks. You can read more about other sites getting similar results this on this blog: http://windowsteamblog.com/ie/b/ie/archive/2011/05/20/buildmypinnedsite-com-50-more-engagement-in-15-minutes-or-less-through-pinning.aspx

      Thanks,
      Justin Garrett
      Microsoft

  • Dave

    Thanks, reading the Tracking Your Success document (http://embed.docstoc.com/docs/80747423/Tracking-Your-Success) it looks like it is suggested to derive the statistics by comparing the activity of users that have pinned the site against those that have not pinned the site. So you can say there is a correlation, but there is no evidence that pinning a site directly results in increased user activity.

    In actuality I would expect that the most active users are the most likely to pin the site and those who pin it would increase their activity on the site as well.

    I don’t think I will use pinning on my own sites as it seems more suited to sites that are updated with new content regularly, but it is good to see that it can be implemented relatively quickly and easily if wanted.

  • http://buildmypinnedsite.com/ Justin Garrett

    Thanks Dave for your thoughts!

    Pinning is about creating new ways for your users to notice and engage with your site. While it’s very difficult to control the correlative variable without following specific group of people (we want to honor customer privacy) or a long-term study, they key point about HuffPost results is that they’re getting more value from your highest value users (those that chose to pin).

    Those are the users you want most. The fact that you can have your favicon (your logo) sit on the Windows taskbar next to Office, iTunes, Facebook, etc. may be very compelling for developers to consider. Especially if it’s 4 to 6 lines of code and an icon. Thanks again!