Creating a Great Experience on Digg with IE8

  • Article

Presenter: Joel K. Neubeck, Director of Technology, Terralever

Session video: https://videos.visitmix.com/MIX09/C22F

  • Who is Terralever?
    • Interactive marketing agency in Tempe, AZ
    • Leveraging online channels for customers to increase their reach
    • Commitment to innovation, excellence, and ability to execute
    • Joel is a Silverlight MVP
    • Technologies include Silverlight and Flash and Flex
    • Customers
      • Microsoft, Redbull, Nike, BMW, Cisco, University of Phoenix, etc.
    • Presented last MIX on Silverlight gaming (Zero Gravity, Tunnel Trouble)
  • IE8 Features and existing partners in gallery
    • Visual Search Suggestions
      • based on XML OpenSearch specification
      • Results can include images and descriptions
    • Visual Search – how they work (07:00)
      • Amazon example, shows the XML and IE8 rendering
      • Search Providers
    • Demo, 9:18
  • What is a web slice? 11:20
    • Enabled user to subscribe to content on a piece of the page
    • Can be time sensitive (TTL, or time to live)
    • Visual indicator on button (bold for new content, greyed out for expired)
  • How a web slice works? (13:40)
    • Easiest: simple markup changes to existing content
    • Demo, 15:20
      • Digg Topics web slice, RSS Feed
      • Terralever web slice done with Silverlight3
  • What is an Accelerator? (17:33)
    • Ability to perform a “selection-base” search from one page to another
    • Demo of “Map with Live Search”
  • How does an accelerator work? (20:20)
    • easy to install – javascript.windows.external.addService ( acceleratorDefinitionFileURL.XML )
    • Accelerator definition file is XML which tells IE
      • 1) where to present in the IE8 accelerator menu
      • 2) how to pass the selected text to the destination page
  • Creating a Great Experience for Digg, 23:22
  • Digg Accelerator Project Goals
    • Make it simple to submit a story
    • Entice user to “digg” a previously submitted story
    • Show users additional stories from the site they are viewing
  • Demo of Digg accelerator, 26:12
    • can click anywhere on the page
    • utilizing preview and customized response
    • User can already tell that the PC World article was already on Digg
  • Digg Accelerator breakdown, 30:13
    • Built in PHP
    • Encourage user to submit page if not in Digg yet
  • Accelerator XML Values
    • They are using DocumentTitle and DocumentURL
    • Typical scenarios act on selection, the selected text passed to the destination
    • If the user selects a link, link, linkDomain, linkRel, linkText will be used
  • Digg Visual Search, 35:28
    • proof of concept, not on Digg site yet
    • Step1: Write a service which consumes some data
    • Step 2: Use service to reformat the data and returns either XML or JSON
  • Demo of Visual Search, 39:50
    • Search suggestions can create lots of load, so mature architecture required and has to include caching
    • Only return pertinent data, enough to grab consumer’s attention
  • Web Slice project goals, 43:66
    • Write little or no server code, consumer existing REST services
    • Allow users an enhanced interactive experience if they choose to use Silverlight
    • Complete project from Design to Development in two weeks. Used only a designer and developer.
  • Digg Web slice demo, 46:48
    • More rich interaction, due to Silverlight
    • Shows 30 stories, which can’t be done with just HTML
  • Designer – Developer workflow, 49:35
    • shows a flow chart
    • Actors are:
      • Designer
      • Devsigner,or Integrator – able to take design and create XAML
      • Developer
    • Use separation patters for presentation layer development
    • Use DataContext / Binding
    • Be innovative
    • Don’t be scared of Silverlight
    • Non-silverlight user gets a non-silverlight experience with optional Silverlight install
  • Custom Controls, 54:05
    • Custom slider
    • Tool tip for easy title reading with hover
    • Custom Listbox
  • External Display Source, 55:15
    • When providing a rich interface, one should provide a external data source
    • The entry-content node has a href to tell the web slice what server page to interact with
    • The bookmark tells web slice to directly links to the Digg server
    • TTL value set to 15, which matches the Digg caching model
  • Design considerations, 57:04
    • Target frequently updated content
    • Avoid large collections of data
    • Carefully use rich interactive
    • Keep it small <320 pixels wide
    • Consider your community
    • CACHE, CACHE, CACHE DATA
  • Adoption, 59:54
    • Myth #1 - “With all of the available add-ons who will find me in the IE8 Gallery?”
      • Show custom landing pages to users to promote your add-on’s
      • Allow users to subscribe / download from your site
      • Users will adapt to the IE8 web slice indicators
    • Visual Search suggestions
      • Embed a hidden link which allows IE8 to explore the page and discover your provider
      • <link title”Digg Top Story Search” rel=”Search” type=”application/opensearchdescription+xml” href=”https://digg.com/suggestion/DiggSuggestion.xml”/>
    • Myth #2 – With so little space, I don’t have room to make my content valuable!”, 1:02:54
      • “How you choose to display the content has the most to do with making your content valuable”
    • Myth #3 – It had to be hard to build these things!”, 1:03:25
      • Joel has another customer where they built the add-on in1.5 days
      • Start simple
        • Web slice – simple static version
          • Consume services you already have
        • Accelerator – You don’t have to use display preview
  • Case study- How does it apply to other clients, 1:04, 26
    • www.hatclub.com, baseball hat seller in the southwest, brick-n-mortar and ecommerce,
    • They want to be a trend seller
    • 35% of Page view are from search
      • Users are searching for teams and brands
      • Would check out 5 more pages
      • 3 minutes to hook them into staying longer
    • 13% bounce rate
    • Average time on site 6 minutes
    • IE provides 55% of visits and 60% of revenue
    • Bottom line; more than half of browsers and revenue come via IE users
  • Silverlight 3 Web Slice, 1:07:46
    • www.hatclub.com
    • Web slice on home page
    • Shows a featured hat.
    • Due to SL3, shown in 360 view using new SL3 feature of 3D perspective
    • With deep zoom
    • Shows text details of the hat
    • Also can shows current promotions
  • Hatclub Web slice deconstructed, 1:13:10
    • 4 hours to build the Silverlight component
    • Consuming a service built with Linq-To-SQL
    • Very little effort
  • Terralever conclusion, 1:15:00