Summary
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, and
comedy, and 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
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.
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 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.
- 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?
- 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?
- 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.
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
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.
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.
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.
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.
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:
Submit an article or tip
Post your Blog
