Web Widgets Talk @ RefreshDC, Sep 2007


Published on

A talk at a RefreshDC event (great series) in September 2007.

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Hi there! I work at a software company called Clearspring. I’m going to keep it light on Clearspring content and focus more generally on widgets, in the spirit of open community discussion - If you want a sales pitch or a demo, see us and we’ll oblige ;-)
  • Web Widgets Talk @ RefreshDC, Sep 2007

    1. 1. Web Widgets: What, Why, and How Will Meyer 9.20.07
    2. 2. Why Are We Here? (Right now, anyway) <ul><li>What are widgets, anyway? </li></ul><ul><li>Why do I care? </li></ul><ul><li>How do I make them? </li></ul><ul><li>Some show and tell </li></ul>
    3. 3. The Changing Face of the Web Decentralization is the name of the game <ul><li>Content comes to you </li></ul><ul><li>Personalized experiences </li></ul><ul><li>“Micro-chunks” </li></ul><ul><li>The Web is a Platform for Services </li></ul>From Web 1.0 To Web 2.0 [ sic ] <ul><li>Users visit websites </li></ul><ul><li>One size fits all </li></ul><ul><li>Portals dominate </li></ul><ul><li>The Web is a Publication Platform </li></ul>BROWSE MSN, Yahoo SEARCH Live Search Google SHARE Blogosphere Myspace Facebook
    4. 4. Web Widgets: What are They? (besides a buzzword) <ul><li>widget [wij-it] (noun) - </li></ul><ul><li>Portable web component that can be executed across multiple platforms without requiring additional compilation </li></ul><ul><li>Web widgets are: </li></ul><ul><ul><li>Mini web apps placed inside other web apps </li></ul></ul><ul><ul><li>Used in blogs, on social networks, or anywhere </li></ul></ul><ul><ul><li>Shared between users and moved between locations </li></ul></ul><ul><ul><li>Simple now, but getting more advanced </li></ul></ul>Widget is a category, rather than a specific technical definition
    5. 5. Common Widget Types Where widgets live, and what they look like <ul><li>Blog bling </li></ul><ul><ul><li>e.g. Charlie O’Donnell ’s or Fred Wilson ’s blogs </li></ul></ul><ul><li>Personal expression on Social Networks </li></ul><ul><ul><li>e.g. Any Facebook or MySpace page (exercise for the reader) </li></ul></ul><ul><li>Start Page utilities </li></ul><ul><ul><li>e.g. Netvibes modules </li></ul></ul><ul><li>If its small, fast, and viral, as many potential widget ideas as you can think of… </li></ul>
    6. 6. What Can You Do With a Widget ? A mini website with viral distribution <ul><li>Extend an existing web site’s capabilities </li></ul><ul><li>Promote branding or information </li></ul><ul><li>Express personal tastes and interests </li></ul><ul><li>Share anything and everything </li></ul><ul><li>Innovate totally new applications </li></ul>
    7. 7. Why? What are widgets good for? <ul><li>Increase distribution of your app or content </li></ul><ul><li>Drive traffic to your site (orders of magnitude inc) </li></ul><ul><li>Put a user face on web services and RSS </li></ul><ul><li>Let users personalize their web experience </li></ul>Widgets are fundamental to a distributed web strategy
    8. 8. The Widgetsphere It’s everywhere, and it reaches billions worldwide
    9. 9. More Show & Tell <ul><li>The ubiquitous RSS-based Widget </li></ul><ul><ul><li>e.g. http://www. clearspring .com/blog/2007/08/08/grab-buttons-and-gossip/ </li></ul></ul><ul><li>Some more dynamic stuff </li></ul><ul><ul><li>Feel-goodness from They’re Beautiful ( www.theyrebeautiful.com ) </li></ul></ul><ul><ul><ul><li>e.g. http://bitesizetech.blogspot.com/2007/07/they-are-beautiful-coglets.html </li></ul></ul></ul><ul><ul><li>Distributed ratings from RateItAll ( rateitall.com ) </li></ul></ul><ul><ul><ul><li>e.g. http://www.sexywidget.com/my_weblog/2007/04/new_rateitall_w.html </li></ul></ul></ul><ul><ul><li>Blogosphere tracking from MyBlogLog ( www.mybloglog.com ) </li></ul></ul><ul><ul><ul><li>e.g http://www. clearspring .com/blog/2007/09/03/bridging-the-facebook-widget-gap/ </li></ul></ul></ul><ul><ul><li>Event scheduling from Attendio ( www.attendio.com ) </li></ul></ul><ul><ul><ul><li>e.g. http://www.attendio.com/widgets/beyonce </li></ul></ul></ul><ul><ul><li>Music tastes from Apple ( www.apple.com ) </li></ul></ul><ul><ul><ul><li>e.g. http://www.apple. com/itunes/myitunes/ </li></ul></ul></ul><ul><ul><li>Iraq strategy updates from Washington Post ( washingtonpost .com ) </li></ul></ul><ul><ul><ul><li>e.g. http://www.washingtonpost.com/wp-srv/widgets/ </li></ul></ul></ul><ul><ul><li>Slideshows from Anomito ( animoto .com ) </li></ul></ul><ul><ul><ul><li>E.g. http: //lovnyterrestre . vox . com/library/post/animoto-le-diaporama-killer-app .html </li></ul></ul></ul>
    10. 10. So What’s Really New Here? Some things that make widgets (slightly) challenging <ul><li>The standard product lifecycle is all there </li></ul><ul><li>Technology choices </li></ul><ul><ul><li>Flash, Javascript, static web, etc. </li></ul></ul><ul><ul><li>Standards limited </li></ul></ul><ul><ul><li>“ Write once, run anywhere” is a challenge </li></ul></ul><ul><li>Measuring effectiveness </li></ul><ul><li>Figuring out what to widgetize </li></ul>
    11. 11. Design & Build Lots of different options <ul><li>Sizing </li></ul><ul><ul><li>Sidebars vs. start pages vs. social networks </li></ul></ul><ul><li>Technologies </li></ul><ul><ul><li>Flash (social networks) </li></ul></ul><ul><ul><li>Javascript (some blogs/start pages) </li></ul></ul><ul><li>Features </li></ul><ul><ul><li>Dynamic data loading </li></ul></ul><ul><ul><li>Viral services </li></ul></ul><ul><li>Platform services (build vs. buy) </li></ul><ul><ul><li>Embed generation </li></ul></ul><ul><ul><li>Configuration management </li></ul></ul><ul><ul><li>Cross-domain services </li></ul></ul><ul><ul><li>Destination abstraction </li></ul></ul><ul><li>Managing load </li></ul>
    12. 12. Distribution and Seeding Many options and growing… <ul><li>Your/affiliate site </li></ul><ul><ul><li>Effective, “live” placement </li></ul></ul><ul><li>Pre-seeding micro-sites </li></ul><ul><ul><li>Social Networks, blogs, etc. </li></ul></ul><ul><li>Leveraging Widget Galleries </li></ul><ul><ul><li>Google, etc. </li></ul></ul><ul><li>BD frontal assaults </li></ul><ul><li>Viral distribution </li></ul><ul><ul><li>Transform users into your engine </li></ul></ul><ul><ul><li>Requires “Send-to” features </li></ul></ul>
    13. 13. Tracking & Analytics Page views are going. So what matters? <ul><li>Audience </li></ul><ul><ul><li>Views </li></ul></ul><ul><ul><li>Domains </li></ul></ul><ul><ul><li>Geographic distribution </li></ul></ul><ul><ul><li>Configuration </li></ul></ul><ul><li>Engagement </li></ul><ul><ul><li>User events </li></ul></ul><ul><li>Endorsement </li></ul><ul><ul><li>Audience reception </li></ul></ul><ul><ul><li>Page location </li></ul></ul><ul><ul><li>Adoption path </li></ul></ul><ul><ul><li>Velocity </li></ul></ul>
    14. 14. Destination Compatibility All destinations are not created equal <ul><li>Latest at http://www.clearspring.com/docs/tech/widget-dev/drop-targets </li></ul>
    15. 15. Additional Topics <ul><li>Where do you have questions? </li></ul><ul><li>Widgets &: </li></ul><ul><ul><li>Facebook </li></ul></ul><ul><ul><li>Advertising </li></ul></ul><ul><ul><li>Standards & Directions </li></ul></ul><ul><ul><li>Open social networking </li></ul></ul><ul><ul><li>Widget platforms (like Clearspring) </li></ul></ul><ul><ul><li>Best practices </li></ul></ul><ul><li>More? </li></ul>
    16. 16. Technology Directions What’s going on in the space <ul><li>Limited standards support </li></ul><ul><ul><li>Some efforts in W3C , desktop-focused </li></ul></ul><ul><ul><li>Some vendor initiatives (Netvibes’ (non-universal) Universal Widget Architecture ) </li></ul></ul><ul><ul><li>No Microformat yet ( proposals made) </li></ul></ul><ul><li>“ Open Social Networking” concept </li></ul><ul><ul><li>Rich apps that would run across networks </li></ul></ul><ul><li>Proprietary innovation occurring </li></ul><ul><ul><li>Inter-widget communication </li></ul></ul><ul><ul><ul><li>Widgets can (minimally) share stuff in iGoogle </li></ul></ul></ul><ul><ul><li>Offline data storage </li></ul></ul><ul><ul><li>Widget “manifests” </li></ul></ul><ul><ul><ul><li>Search engines, browser plugins, etc can find widgets </li></ul></ul></ul><ul><li>Market consolidation will likely unify some of this </li></ul>
    17. 17. Widgets and Facebook Is a FB app a widget? Do FB apps replace widgets? <ul><li>Facebook applications consist of: </li></ul><ul><ul><li>A semi-dynamic component on your profile page </li></ul></ul><ul><ul><li>Almost-standard pages accessible from your sidebar, hosted by the developer </li></ul></ul><ul><li>Widgets can be turned into Facebook apps </li></ul><ul><ul><li>Variety of tools (including Clearspring’s ) </li></ul></ul><ul><ul><li>Viral spread both within and, better, in and out of Facebook </li></ul></ul><ul><li>Facebook native apps cannot currently be pulled out of Facebook </li></ul>
    18. 18. Open Social Networking The brave new (purely theoretical) world <ul><li>Movement to allow better portability of data and apps between social networks </li></ul><ul><ul><li>I don’t want 15 different lists of friends! (and more) </li></ul></ul><ul><ul><li>Even a “Bill of Rights”: opensocialweb.org </li></ul></ul><ul><li>API abstraction layers and standards like OpenID </li></ul><ul><li>Second-tier networks behind it </li></ul><ul><ul><li>They want a share of the Facebook ecosystem </li></ul></ul><ul><li>Still mostly lip-service </li></ul><ul><li>Remember folks, these things go in cycles </li></ul><ul><ul><li>The Future of the Web = Facebook? </li></ul></ul><ul><ul><li>Not really -- other networks are opening up quickly </li></ul></ul>
    19. 19. Widgets and Advertising Yes, it’s happening <ul><li>Natural extension for making money </li></ul><ul><ul><li>Widgets as ads </li></ul></ul><ul><ul><li>Ads in widgets (pre-roll, etc.) </li></ul></ul><ul><ul><li>Widgets as cross-promotion tools </li></ul></ul><ul><ul><li>Limitations by destination (no linkouts on MySpace) </li></ul></ul><ul><li>Cross-promotion is a key area </li></ul><ul><ul><li>e.g. RockYou, Slide, SocialMedia and more promoting other apps from within their own </li></ul></ul><ul><ul><li>Takes more than a few successful apps to play out </li></ul></ul>
    20. 20. Widget Platforms Infrastructure and tooling to power your widgets <ul><li>Make certain services readily available </li></ul><ul><ul><li>Viral sharing </li></ul></ul><ul><ul><li>Configuration management </li></ul></ul><ul><li>Make your widget portable </li></ul><ul><ul><li>Handle the differences between various destinations </li></ul></ul><ul><li>Measure your widget’s success (track it) </li></ul><ul><li>Make your widget smarter </li></ul><ul><ul><li>Geo, virality, more </li></ul></ul><ul><li>Get your widget distributed </li></ul><ul><ul><li>Gallery publication </li></ul></ul><ul><ul><li>Cross-promotion </li></ul></ul>
    21. 21. Clearspring: WTF? <ul><li>World-class widget platform </li></ul><ul><ul><li>Fastest, most scalable back-end </li></ul></ul><ul><ul><li>Most robust analytics </li></ul></ul><ul><ul><li>Comprehensive and robust viral services </li></ul></ul><ul><ul><li>Richest in-widget services </li></ul></ul><ul><li>Services capabilities </li></ul><ul><ul><li>Widget development </li></ul></ul><ul><ul><li>Widget strategy </li></ul></ul><ul><li>Your partner for a successful widget strategy </li></ul><ul><ul><li>We power the biggest brands, and love everyone else, too </li></ul></ul>
    22. 22. Some Important Best Practices Avoid some common pitfalls <ul><li>Keep the content dynamic, or make it an application </li></ul><ul><ul><li>First attempts are often stale, and “the people” don’t like that </li></ul></ul><ul><li>Pay attention to media management </li></ul><ul><ul><li>Auto-playing annoys people (on hover is often cool) </li></ul></ul><ul><ul><li>Stream MP3 and other content, never wait </li></ul></ul><ul><li>Making a widget for a blog is cool, but not that cool </li></ul><ul><ul><li>It’s not just about RSS </li></ul></ul><ul><li>Thoroughly test it </li></ul><ul><ul><li>New use cases, off-domain issues, etc </li></ul></ul><ul><li>Virality is powerful -- design it to be shared, and have the capabilities built-in </li></ul><ul><li>Have a real seeding strategy </li></ul><ul><ul><li>Placement on your own site (avoid it looking like an ad, or like just a piece of the page) </li></ul></ul><ul><ul><li>Leverage galleries </li></ul></ul><ul><li>Track it! </li></ul><ul><ul><li>You need to pay attention to what’s happening, especially viral spread </li></ul></ul>
    23. 23. Some other Resources <ul><li>Best practices </li></ul><ul><ul><li>A few links here on Clearspring’s site </li></ul></ul><ul><li>Dev resources </li></ul><ul><ul><li>All of the major destinations have API docs (search) </li></ul></ul><ul><ul><li>Cearspring has a list of helpful resources: http://www. clearspring .com/docs/tech/widget-dev/web-resources </li></ul></ul><ul><li>Widget Boggers </li></ul><ul><ul><li>See the Bogroll at http://www. clearspring . com/blog </li></ul></ul><ul><li>Clearspring </li></ul><ul><ul><li>http://www.clearspring.com/docs/faq </li></ul></ul><ul><ul><li>http://www. clearspring .com/developers </li></ul></ul>
    24. 24. Fin <ul><li>Thanks! </li></ul><ul><li>[email_address] </li></ul>
    25. 25. Fun for the whole family* http://widgetdevcamp-dc.org * depends on family