Over a million developers have joined DZone.

Case Study: Huffington Post - Reinventing the “Big News” Experience with IE9 Pinned Sites

· Web Dev Zone

Make the transition to Node.js if you are a Java, PHP, Rails or .NET developer with these resources to help jumpstart your Node.js knowledge plus pick up some development tips.  Brought to you in partnership with IBM.


The Huffington Post (“HuffPost”) 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 and comedy, and is a top destination for news, blogs and original content. They have grown rapidly and reaches more than 26M unique visitors monthly.

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

The result was great for both readers and HuffPost’s business. Users that 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 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.


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 web sites, 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 HuffPosts 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, 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.


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.

Bottom-line, the end-to-end effort was 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

(above) 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 throughWindows 7, outside the browser.


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.

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 sone with just 15 lines of code. Users can now drag the tab to the Taskbar and start the Pinned Site experience.

Step 3: HuffPost on Every Taskbar

HuffPost wanted a brand experience that looked “clean and shiny” like an everyday part of their user’s 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.


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 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.

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?!? 

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. 

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:

For More information

The Huffington Post


The Huffington Post (“HuffPost”) is a leading social news and opinion site, "The Internet Newspaper." HuffPost offers coverage of politics, media, business, entertainment, living, style, sustainable “green” living, world news, technology, nonprofits, college life, books, education, religion, travel, arts, food and comedy, and is a top destination for news, blogs and original content.


Microsoft Windows Internet Explorer 9


Start Building for a More Beautiful Web. You are the designers, architects, and visionaries of the web. Our goal is to give you the tools you need to build richer, more immersive websites. This Case Study is one of many that illustrates a great site experience optimized for IE9. Discuss and engage more on this topic through the Exploring IE Blog or by @IE on Twitter


Learn why developers are gravitating towards Node and its ability to retain and leverage the skills of JavaScript developers and the ability to deliver projects faster than other languages can.  Brought to you in partnership with IBM.


Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}