HTML5: Tales from the Development Trenches

Sunday, March 14, 2010
Bruce Lawson – Opera ASA
Martin Kliehm – namics (deutschland) gmbh

HTML5 is coming. Originally called "web applications 1.0", it brings new semantics, JavaScript APIs for drag and drop, offline storage, generating images, plugin-free video and form validation. It’s upset semantic web advocates, accessibility evangelists and baffled developers. Cut through the crap: learn what it is and what it does.

Tales from development trenches

  • Tales of the development OF HTML5
  • Tales of developing WITH HTML5

1998-1999 – the future would be XML (XHTML). 1999 was the "last" 4.01 HTML Spec.

Web Applications 1.0 (a better HTML)

  • 2003: Started by Opera
  • Then Mozilla (Apple "cheering from the sidelines")
  • WHATWG – web height and text working group
  • (Later: Google, Microsoft involved)
  • All 5 browser manufacturers working together
  • 2006: W3C restarts HTML, using Web Applications 1.0 as the basis for "HTML 5"
  • 2009: XHTML2 Killed
  • 2010 WHAT-WG goes to last call
  • Not yet completed, but getting there
  • Giant spec (900 pages) – only 300 worth looking at
  • Already some implementations of some parts

What is HTML 5?
Not CSS3, not SVG, not geolocation, not MathML, not XHR
HTML5 is an evolution. There are many extras in HTML5 on top of presentational – added ‘bling’ – The evolution has gone from "chimp to pimp"
It extends the language to better support web applications, since that is one of the directions the web is going in and is one of the areas least well served by HTML so far. This puts HTML in direct competition with other technologies indended for applications deployed over the web, in particular Flash and Silverlight
They probably won’t take them over, but competition is always good.

What do Open Standards matter?
The most important program on your computer is your web browser.
Let’s you be social with your friend, write documents, email, etc.
The web is way too important an application to be in the hands of only one vendor – we NEED and open standard.

HTML5 defines what people really want to do.
Survey the code of 3.5 million pages and find the common themes.

  1. header
  2. content
  3. nav
  4. article
  5. footer

All of these going into HTML vs. naming a div in these common elements.

HTML5 Forms (webforms 2)
Coding form validation isn’t much fun. It’s mainly done with JS right now.
Form validation is built into HTML5

< input name=foo type=number min=5 max=15 step=3>
This provides a number field with a max limit

<input name=foo type=url required>
Will require a url and require a value

<input name=foo type=date>
You get the cool little pop-up calendar right from the browser!!! (impressive!)

Immediate graphics mode without plugins

<video> element exposes a simple API for adding video to HTML.
<video src=video.ogv </video>
Controls can/are built into the browser. It is totally styleable with CSS. You can shrink/enlarge thumbnail etc.
Adding captions is easy (start/end captions).

Take Homes

  • HTML5 doesn’t break the web
  • Is sometimes and ugly kludge
  • Can be serialized as XML: XHTML5
  • Defines HTML error-handling to keep consistent DOM
  • Adds new elements and APIs for open standard apps
  • Is coming soon… to a browser near you.

Input Types
<input type="email">
it defaults to a text field for a browser that doesn’t support it.
also validates that it is an email

<input type="search" />
<input type="buttom" />
<input type="text" role="search" />

look for navigator.geolocation and determine current position and display.

Orientation – accesses the accelerometer in a laptop and tilts via canvas

How on board is Microsoft?
They should be coming on IE soon… there will also be a feature detection that will help you determine what a browser can handle. It should degrade easily if a browser doesn’t handle something new.

Exploiting Chaos — How to Spark Innovation During Times of Change

Sunday, March 14, 2010 9:30am

One of North America’s hottest keynote speakers, the founder of, reveals powerful strategies for thriving in any economic climate. DID YOU KNOW THAT Hewlett-Packard, Disney, Hyatt, MTV, CNN, Microsoft, Burger King, and GE all started during periods of economic recession? Periods of uncertainty fuel tremendous opportunity, but the deck gets reshuffled and the rules of the game get changed. As Guy Kawasaki notes, "EXPLOITING CHAOS is a quintessential roadmap for all those who seek opportunity during times of change."

Popular is NOT Cool!
What do you find when you look for cool?

Microtrends and viral inspiration surrounds us. Chaos makes inspiration distracting.
How do we make sense of the noise?

What’s more important, culture or strategy
Culture eats strategy for breakfast. No matter how good your strategy is, the culture of your company is the most important to make the strategy happen.

Smith Corona (the best typewriter in the world!)
Their website: "On the 8th day, God created Smith Corona." They have a 100 year history of innovation. 1989 they had $500 million (they could just buy out someone if they needed a computer). They got into a relationship with Acer (killed the deal 1 yr leater). Smith Corona went Bankrupt in 1995. Acer still living today. The point: Situational framing dictates.

Specifically what are you trying to do?

Crisis = Opportunity
In crisis people are more careful in what they buy. Fortune Magazine was started in the great depression. When people lost their jobs, Fortune showed what is happening behind the boardroom doors, and people were interested in this.

Forced Failure
Successful organizations innovate to "optomize" position on their "hill," but to find bigger "hills," one must fail. When you’re good, everything else seems like a failure by comparison.

Win like you’re used to it, lose like you enjoy it.

Customer Obsession
Who litters on the side of the road? Young Males who drive pickup trucks. The crying native American didn’t convince them. The new slogan: Don’t Mess with Texas!" This is how to keep the message connected today. When making a cultural connection you induce change. 72% decrease in littering. You need to observe customers… in their zone. Interact with them.

BP Oil and Gas Observations

  • Teenage boys ‘group shot’ at gas stations.
  • They get excited about energy drinks
  • Rockstar Fuel!
  • Find a way to be simply irrisistable to a certain group of people.

There is no point of innovating if you think you already know the answer. Try to disprove what you think you know and find different patterns.

Infectious Marketing

  • 3 ways to cultivate infection
  • Viral Creations
    The half-suit – When you create something today that connects, your story will travel faster than ever before. You can look at what is becoming viral, and package what you’re selling into something similar. Focus in on what you do in 7 words or less.
    Story obsession:
    1. Simple – supercharge word of mouth
    2. Direct – why should I choose you?
    3. Supercharged – the i have to tell someone test
  • Viral Mediums
  • Well packaged story

JP Morgan’s Lesson:
Wake up every day and do 2 things – list of things you actually need to do, and actually do them.

Viral trends + methodical innovation, generate ideas harness creativity ultimately exploit chaos

Sleeping Giants: Digital Awakens TV and Media

Saturday, March 13, 2010 5:0pm
Domenic Venuto – Razorfish
Andrew Pimentel – Razorfish

Television has looked pretty much the same since its inception in the early 40s, give or take a few rabbit ears and a hundred pounds. But, the revolution has already begun. Recently Razorfish has been doing some significant research on the importance television plays in our lives, and what we think the fundamental shift that is taking place in TV and media, in general, will mean for advertising and marketers.
As a digital agency, you might expect us to forecast the death of TV (and :30 spots), but you’d be wrong. We think TV’s DNA will be alive and well, you just might not recognize it from how it looks today, and this digital impact will have major implications, not just for TV, but for media as a whole: technology, content development, distribution, advertising and brands. This panel is sponsored by Razorfish.

TV is not dead – the 0:30 spot is not dead.
TV is alive and well, it’s here to stay. Welcome to the Future of TV.

Razorfish creates experiences that build businesses. Brand Marketing, Web Development, Strategy & Analytics.

Razorfish watched people without TV – tried to remove TV from a household. 7 days was too much, 5 was too much, 2 was the only they could get for the (paid) study. What are the genes that describe people’s behavior with TV?

  1. Research finding: the DNA of TV
  2. What TV will look like in 5 years
  3. What it means to us

How did poeple respond to the loss of TV? What did they do with their time? People who grew up with the internet, people who watched online.

Study 1 Depravation:
Handheld devices (phones, video players etc).
Played cards, games, piano

Bleeding Edgers:
Saturday nigh, they’d VJ Youtube Videos on Apple TV
Business trip – streaming NFL to mobile phone
Mom/Daughter streaming youtube videos on laptop (daughter was asking for different children’s shows)

TV’s DNA in 9 Genes

  1. Relaxation: zoning out – a primary need that TV serves
  2. Conversation – water cooler currency, starts conversations
  3. Events: currency, what’s happening now.
  4. Social: an excuse to be together – families moved around the next largest screen in the house (laptop)
  5. Stimulation: learning something – educates us
  6. Vicarious Experiences: escapism
  7. Passion Points – follow sports
  8. Participation – txt through american idol
  9. Consumerism – keep up with products, styles, and trends.

Whatever we do w/the future of TV, we need these genes
The internet is also changing expectations.

Fast forward 5 years – what will TV look like?

  • Future servers the couch TV better by learning and giving them content appropriately. You’re presented something based on the mode you’re in, "show me something I’ll like." Flip through various channels.
  • What else is on? Show us things we’ve liked or might like based on past viewing. What is popular based on what our friends like?
  • Drill into content by topic or mood – also by how much time we have.
  • The chronological channels based on a time of day is gone. You don’t have to know to record something, it’s just available.

The Social Butterfly:

  • The TV recognizes our face and knows our friends.
  • We can see what they’re watching.
  • We can see what our friends have hit the "like" button on.
  • We can watch a dynamic list of videos in one show at once.
  • TV is in the cloud, we can pull it in wherever we are. It will be available where we left off and have what we saved.

The Culture Vulture:

  • Marketers can engage with audiences. There will still be 30sec spots, just fewer.
  • Apps will be impeded and in return for an add app, we get additional content (and less actual commercial interruptions).
  • The content we’ve created on TV (vote), it works its way back into our social networking profiles.

The Fan:

  • Tune into Sports Center, a feed along the bottom shows us our fantasy baseball team.
  • There are gloats – we can send them to our friends when our team does something good against their team.
  • A gaming console is built into the TV, we can play a game (hit off the new pitcher) from the TV.
  • Rock Band game bubbles up to the social network, and bubbled up to actual TV (idol etc).

How do we make this happen?
Hulu is already there – independent of schedule/time.
Full-body motion capture is already there (for interaction w/TV)
Apple TV and Boxee scrape the web for content and bring it together

What it means to us

  • Content will need to be liked, or it won’t be watched.
  • The 0:30 ad is a random number – could be longer and more engaging.
  • We will know who we’re talking to (ads), online will blend with offline data.
  • People will be channels based on popularity
  • Everything will work across devices and be portable.
  • We will not control the conversation.
  • Our creativity must exist in real-time if we’re going to react to live events. Ad creation needs to be closer to real-time.
  • TV and web will blend in ways we can’t see today.

Making Sense of Priacy and Publicity

Saturday, March 13, 2010 2:00pm
Danah Boyd – Microsoft Research

The SXSW Interactive Festival is very excited that danah boyd will serve as the Opening Speaker for the 2010 event. One of the world’s foremost authorities on social networks, boyd works at Microsoft Research New England and also serves as a Fellow at the Harvard University Berkman Center for Internet and Society. boyd recently completed her PhD in the School of Information at the University of California-Berkeley.
The Opening Remarks will be simulcast in ACC Level 1, Ballroom A / ACC Level 3, Room 9ABC / ACC Level 4, Ballroom D / ACC Level 4, Room 18ABCD

How does social media transform society.
Some thing it is great (techies).
Some think it is destroying society.
We are all seeing how this shapes society.

The intersection of privacy and publicity – Privacy == Control.
Privacy IS NOT DEAD. People still care about it. What privacy means may not be what you think. Understand the social setting and the context and how to behind inside that. If people don’t feel they have control of their environment, they scream foul.

Google Buzz
This shows that people care about privacy. They took a hit on the trust they have (google). It was launched inside Gmail, and created a profile, and connected suggested users. It was publicly made available. There were all sorts our opt-outs available. The technology was not the failure here. Google made a public facing system inside one of the most private systems out there (email). Some people thought their email was being exposed to everyone in the world. Google assumed that people would opt-out if they didn’t want to participate. They didn’t quite understand the system, and just accepted the defaults. There was confusion that if you opt-out, you might be canceling your gmail account. Don’t throw people into the water and expect them to swim. Google assumed that they wanted all their contacts to come together. Just because people put these up there, doesn’t mean they want to put it all together. Just because people trust google, doesn’t mean they want that information used in other ways.
Online environments aren’t as stable as offline ones.

Facebook Default Changes
Select how things are shown. All the defaults were public. Most people (65%) didn’t read, and made it public. She has yet to find a person who knew exactly what their privacy settings were. Facebook made it’s site on trust, and now it’s gone. A big difference between public data and publicized data.

Personally Identifiable Information – people don’t think about this
Personally Embarrassing Information – people think about this
Social bonding is based on PII – it’s how we connect with people.

Public by Default, Private Through Effort
Social media is the reverse. You now have to think how to make something private instead of how to make something public (normal real-world social).

How public or private is something?
When we make something public more public, we are sicking the paparazzi on us. How will the people feel when you remix their content and make it more public?

Facebook != Twitter
Twitter is more people who want to obtain audiences. Facebook is not used that way historically.

Chat Roulette
An odd mix between privacy and publicity. You get a random video chat with another person. It may be a fad, but the mashup between publicity and privacy isn’t. There will be more.

There is no rules, and everything is always changing either by social context or technology. How you negotiate it in one context will change on the next.

The worst thing you can do is start with a conversation, "back in my day"
Figure out how to evolve the core essence of what privacy is, and what sort of control is needed in a particular environment. Ask questions, what are you trying to achieve? who do you think you’re talking to? what if something else was looking? Nobody is an expert – nobody knows how to navigate this yet.

Just because you can see someone, doesn’t mean they want to be seen by you.

Designing the First Fifteen Minutes

March 13, 2010 12:30pm
Daniel Burka – Tiny Speck
Rob Goodlatte – Facebook Inc

That user who just signed up is about to bail. And a thousand other people just stopped in but didn’t even bother to register. Your product is great, but your users don’t stay long enough to find that out. The first fifteen minutes of your product are the most important. Learn from the successes, mistakes, and insights of designing new user experiences for products.
Twitter: #designfirst15min

"We design for ourselves first."
This falls flat when designing for new users – we’re only new users one time.

Facebook users started getting to Read Write Web and thought it was the FB login page.

Date before demanding commitment.
Get your users invested before you propose.

Get someone to use your application before making them set up an account – jobspice sets up your resume first, then sends you to create an account.

Indicate that whatever is over that signup wall is worth doing. If you have to go the oldschool route, be very fast at showing where the incentive is. Be sure to know what that incentive is p the ah-ha moment for your product.

Facebook changed their registration system to improve the signups and eliminate every distraction they could have. They push social ah-ha moments. You can suggest friends/photos for other people.

Feedback Cycles
Stolen from video games – Spore, the video game takes you from very simple to more complex, and the rewards become more sophisticated. has a small feedback for each field you fill out that says "good job" when you enter the correct data.

Games handle education really well – questing. We think a quest is just a fun thing to do, but it’s actually a way to sneak instructions into things. Don’t say "go do anything," what kind of anything?  Provide some kind of reward for doing work.

Tumblr signup process is really simple. Give your limited info, then straight into name and how to use it. You use the system, see how it works, and already created content in the span of 60 seconds.

See your new user experience with fresh eyes…
Run through the user experience a dozen times, and get people who have never seen it before and look at it through their eyes. Get newcomers invested right away. Get a user into the car for a test drive right away! Discover your core ah-ha moment in your product and get to it as soon as possible. Small goals go a long way.


Universities in the “Free” Era

Saturday, March 13, 2010 11:00am
Glenn Platt – Miami University Armstrong Institute for Interactive Media Studies
Peg Faimon – Miami University Design Collaborative

MIT, Yale, Stanford, and others put lectures online. Chris Anderson argues all university lectures should be free. From Academic Earth to TED, it’s free. So what is the value-add of a university education? What models of higher education will survive? How will universities leverage the social web to reinvent themselves?
Slides: http;//

The university is the enduring institution that has spent it’s lifetime resting on its laurels.

Best metaphor: The folks who experimented with flight (crazy flying machines), you can imagine someone pedaling on one of these and going off a cliff. The cliff is so high and the ground is so far away that you can actually think you’re flying, but you’re actually falling. Higher ed thinks it is flying, but it is actually falling. There is a shake-down in higher ed on its way down the road.

What is the roll of higher education? How are universities in collapse?

What is the purpose of a university anyway?

  • The roll of higher education is to convey knowledge.
  • Create knowledge (research) – 10-50% of new products are developed by universities
  • Develop the person – what does an individual do in their free time and how does it shape them? This is possibly one of the larger rolls a university plays.
  • Contribute to society – global and local level
  • Signal ability – signal the quality of the person coming from that institution – Harvard lets in smart and lets out smart people
  • Seen innovation – moving things forward (working w/industry)

The System is Breaking Down

  • The cost is too high! – Average private university is $25k/yr, the inflation rate is significantly higher than the general public. State subsidies are rapidly going away. Many times dept it too high for students
  • You have to go to the mountain. – The need is fast disappearing. Many times a single center of knowledge isn’t going to work.
  • There is no control over the clock – you do it on their timetable and their schedule (average is 6 yrs for undergrad degree)
  • The "experts" are local – you can only access the best teachers on your campus – limited set of people you can interact with. Expertise lies in networks.
  • Universities change one funeral at a time – Tenure: After people have been there 6 years… they get to stay there FOREVER (say whatever they want, you can’t find them). Change management is a big impediment.
  • Faculty hire people just like themselves – many times people hiring aren’t looking for the future.
  • Tenure is broken – nobody wants to talk about this, even though it’s the elephant in the room.

What’s driving this breakdown?

  • Change in learning styles – people learn differently now. Learning styles aren’t being better identified.
  • Collapse of disciplinary structure – rise in interdisciplinary space.
  • Acceleration of K-12 – many things taught in college are now being taught in high school. Ohio: Senior to Sophomore, encourages students Sr. in HS to skip over freshman year in college and go to  with full year of credit.
  • Flattening of knowledge hierarchy
  • Students (+parents) as consumers – parent attitude on what to study and where to study – more of a consumer mindset. There are a lot of choices and many more ways to access those choices.
  • Employers active in curricula – many companies contract for degree programs specifically for them. Companies get to help design the curriculum (not always well).
  • Location independence – doesn’t matter where you are now
  • The internet!

Educational entrepreneurs have stepped in

  • Open courseware (MIT) – many universities have been opposed to this type of transparency. Many schools feel pressure to get involved just to stay competitive.
  • Itunes U/ Youtube Edu – stanford’s iphone dev course has been watched 5 million times! That’s an incredible reach
  • TED
  • Accessible education content (textbook options) – google books, flatworld, textbook revolution
  • Online learning networks – students connected to students for notes/guides/advising –, GradeGuru, ShareNotes
  • Structured curricula – certificate programs, executive programs, grad coursework (w/out degree)
  • Online universities – probably the largest in this area – actual degrees online. University of the People, plan to have a full open free university available to the public. Open University. University of Phoenix, 150k MBA program students right now!

So how does the traditional university evolve?

  • It should be a fire hose of information. Anarchy of Wikipedia.
  • A professor should be an experience designer – try to get the user somewhere. What is the best way to get them there.
  • Project manager – professor working with their students as a project.
  • Angel investor – what would a VC partner do? How would you encourage someone to solve a problem? Get them the resources they need to get things done.
  • Curator – Make sense of the information out there. How does a student select what is valuable? Where is the good information?
  • Resource Allocator – make sure students have the resources they need to do what they need to do.
  • Life coach – "yes you can" motivator – get students to be active in their learning and show them the way.
  • Validator – needs to make sure students can communicate their value ignoring the place they got their education.

Where to begin

  • Experiential learning
  • Multi-institutional collaborations – need to interact with others, in different fields.
  • Train PhDs to think more contextually – teach them to teach!
  • Strategic industry and non-profit partnerships – engage those outside who need our assistance.
  • Get rid of tenure!
  • Student-driven inquiry
  • Facilitate collaboration – team teaching, encourage teachers to collaborate.
  • De-privilege institutional content – we need to share content.
  • Reward failure
  • Get rid of departments and focus on questions – what do we do about water? Structure around this vs. silos of departments.
  • Think like social entrepreneurs
  • Give more than you get – contribute to the open commons and back to the community.
  • Hire people who think this way (forward thinking w/qualities above)

Web Content Management Systems from a Designer’s Perspective

Saturday, March 13, 2010 9:30am
Scott Fegette – Adobe
Chris CharltonXTND.US

The biggest shift in CMS since the 90’s is designers coming over in droves from the static world.

Why CMS?

  • Rich Functionality
  • Content Centralization
  • Client Management – great way hand over the keys to someone
  • Designer/Developer Communities – lots of shared code and expertise
  • Open Platform

The Big Four

  • WordPress – simple
  • Drupal – very powerful
  • Joomla – a bit more designer focused
  • Expression Engine – very rich (commercial)

Decisions, Decisions

  • Run-time System – all live, pages generated when called for
  • Publish-time system – all the heavy lifting is done when you publish – a bit static, and maybe more robust
  • Style Management
  • Deployment – critical part when deciding, how difficult is it to get out there and maintain

Static Design

Static design starts to break down in a CMS, not just a design wrapper for flat pages any more.

Design States

  • Navigation States – buttons/breadcrumbs/drop-down menus need to be designed around
  • Presentational States – the guts of the CMS, all the pages/posts of the site.
  • Logical States – session login, showing slightly different content based on roll
  • Dynamic Content – not a print layout. You need to adapt to the type of content being desgned


  • Encapsulated design system
  • Fast design iteration – allow you to create a design quickly, or swap through them to see how different things interact. It’s easy to mock up certain things (larger headlines) and go back and fourth to see how things react.

What’s in a theme?

  • System-specific metadata
    WordPress – CSS comments
    Drupal – .info file
  • Physical directory structure
  • Markup/Logic/CSS assets
  • External Modules (as required)

Theming Wokflow A

  • Use baseline theme for markup
  • Design primarily in CSS layer
  • Working ‘within the box’ – pushing things in the direction they need vs. from scratch
  • No control over dynamic classes

Theming Workflow B

  • Start from HTML/CSS comp
  • Integrate directly into PHP
  • Less constraints, more risk
  • Requires knowledge of system architecture

Markup Challenges

  • Generated vs. On-disk markup
  • Code Fragmentation
  • Dynamic Styles
  • Real-time previewing issues

CSS Challenges

  • Inline vs. Included Styles
  • Themes vs. Core
  • Module CSS

Being Efficient

  • Encapsulated CSS Layer
  • Flexible, Straightforward Markup
  • Comments & Generated Code
  • Version Control (easy ti back out quickly if something gets messed up)
  • Subthemes and Design Abstraction

Building Better Mousetraps

  • Saving and previewing app states
  • Real time DOM Access
  • Dynamically-related Assets
  • Framework-specific configuration
  • Work more freely

The Technical Stuff…

  • HTML/XHTML (markup) + CSS
  • JavaScript (optional)
  • Basic PHP
  • Source Code Management (subversion – SVN)
  • Multiple environments discipline (local, dev, staging, live)

Simple Steps to Great Web Design

Friday, March 12, 2010 5:00pm
Matthew Smith – Squared Eye

Creating beautiful web design is largely a matter of mastering a handful of simple techniques. The best designs employ systems of color, contrast, typography, and white space to achieve hierarchy, balance, and rhythm. The rest is just ingenuity and creativity. Matthew will review dozens of great and nearly great sites, explaining how to raise the bar on your next design.

Definitions (let’s define them)

Web Design:
Squared Eye: helps content get stuff done – on the web

Content is extremely important – Frank Lloyd Right just designed the house on paper, and a bunch of builders actually built it. The thing that takes a design home is the content.

Great Web design: helps content get stuff done – on the web with pleasure
Where other places are zigging, you zag, find your niche – "Spank that niche!"

Simple Steps:

Everything starts with Knowing not the brand, but the client.
They needed a whole brand upheaval, and not simply a website. It is important to really get to know them and understand their business and their brand. What do they do, and how can they do it better? (

You must know their Audience, and know their people. Get to know their business goals, know their audience. Find out all about them.

Know their content. You need to be sketching, doing IA, making framework that you’re going to be designing on. Make sure the content works and flows correctly. It’s one of the core elements that will take your designs from decent to great.

***The fire alarm just went off in the convention center, so unfortunately this session comes to an early close***

What Are Analytics? A Guide To Practical Data

Friday, March 12, 2010 3:30pm
Margaret Francis – Scout Labs
Blake Robinson – Attention

Analytics are often a confusing and convoluted mess, but that doesn’t mean that they have to be. The Guide to Practical Data will help ensure you’re reaching your full analytical potential. Learn how to analyze public and proprietary data to accelerate the success of any initiative. Featuring detailed demonstrations from top bloggers, corporate execs and analysts.
Twitter: #whatareanalytics

Why bother with social media analytics?

  • Analytics are essential for understanding what’s going on in the world of social media
  • Analytics are critical for tying social media expenditures to business outcomes
  • Analytics are the key to mainstream social media marketing into the larger organization

What should you expect to get out of this session?

  • Examples of real social media analysis
  • Insight into the tools and techniques theh "experts" use-free and paid
  • Ideas for how to measure and analyze your own social media programs

Benchmark your mentions to what their competitors are getting, when there aren’t solid numbers.
Measure marketing impact with trackbacks, or sales.

Basic Metrics (what is going on?)

  • Number of mentions, by type, source, or channel
    (right now, the data is a little difficult to access – i.e. no full twitter data)
    A way to monitor is to pull an RSS for a search or hash tag from twitter into Google Ready and it will give you aggregate data.
  • Key themes/ emerging memes from conversations
    It’s very difficult to break out key themes, and scale it to read it all (stops at about a dozen).
  • Most viral content, as measured in links, retweets, traffic, views
    "measuring the magic"
  • Top sources, as measured by volume, influence, engagement or relevance
    what does top mean for you and your brand?

Visibility is key

Engagement – Engagement Metrics by Site from PostRank
PostRank Analytics – aggregate number of tweets/diggs/etc. for a site.

Insight Metrics (how does this drive my business?)

  • Share of voice, compared to competitors
  • To sources, as measured by volume, influence, engagement or relevance
  • Sentiment
  • Brand perception
  • Product feedback
  • Campaign reception   

Business Metrics (how do i actually correlate this with money?)

  • Most viral content, as measured in links, retweets, traffice, views
  • Campaign performance: views, traffic, reach
  • On site conversions, e-commerce and others
  • Correlation with sales
  • Product extension ideas

Beauty in Web Design

Friday, March 12, 2010 at 2:00pm
Cennydd BowlesClearleft Ltd

Cennydd Bowles leapt into the world of user experience eight years ago and hasn’t shut up about it since. He now works for Clearleft by day and moonlights as a UX blogger, mentor and community evangelist. Cennydd is a regular public speaker (IA Summit, Design By Fire, EuroIA), a widely-published writer (A List Apart, Johnny Holland, .net magazine) and co-founder of the UX London conference. He is currently writing his first user experience book with fellow Clearleftie James Box, to be published in September 2010.

The underachieving web.
We’re underachieving on the web. A blog post: Landmark Web Sites, Where Art Thou? Where are all the web masterpieces? The web has shaped generations, but the sum is greater than the parts. Look at popular sites (google, facebook, etc), they’re great successes, but not great, not truly beautiful site.

Automotive design brings beauty, emotion, passion. Guitars at the same way. Architecture also has this. Information design, graphic design (fedex logo) also have beauty and passion.

What is the point of beauty? It effects us in profound ways – the emotional aspect. We react better to beauty. Beauty makes things easier to use (not think it’s easier to use), it actually makes it easier. Our brains respond better to aesthetically pleasing objects. Apple really understands it. Look at the original imac, and how it brought beauty to computers that was never there before. Beauty gives us positive emotions and helps us use things. It’s why we put art on walls. The most powerful aspect of beauty is that it can change our world.

What is the power of beauty in our web word?

Beauty Evolves.
Look at the evolution of art. The renaissance is a gateway to beauty in things – things mankind can create.

Websites aren’t tangible – they’re just data. They change all the time. They’re replicated thousands of times. It could be said to be different for every user (what browser, OS, screen res?).

Three types of beauty.
Universal – crosses all cultures – symetric.

Social-cultural – using standards of a particular time or particular place.

Subjective – personal encapsulation of beauty. Your personal likes and dislikes.

Three modes of design.

  1. Visceral design – entirely sensory, we feel positive to something. It’s attraction. To design for visceral response, we need to design for shape and color. On the web, visceral is entirely visual. It rewards attraction over usability.
  2. Behavioural – It’s about use. Does this thing in front of me work? Does it sustain flow, and work in the way I expect? Make sure your design has proper dimensions, and sends clear messages about its functions. Jacob Nielson’s work is based on this area. It’s all about what a user wants to achieve. Usability can make sites usable and profitable, but not always beautiful.
  3. Reflective – does this design fit in as I am as a person? Does this fit my life? What does the brand stand for? Successful reflective design makes us feel good, and changes the way we think about things. This isn’t just usability, but true user experience design.

Make the web beautiful.
The medium is still pretty young, and changing very quickly. New behavioral approaches are coming into play.

  1. Get emotional – claiming a website is easy to use it like claiming your restaurant servers food you can eat. We need to tell a story.
  2. Think bigger – User and the business are the typical sites. Are we truly trying to make a difference in things, or just making what  client asks for?
  3. Lead – a strong individual needs to be there. "When was the last time you saw a statue of a committee? Too many cooks do spoil the broth.
  4. Think long term – keep people excited about the designs we make. Spice things up, and bring unexpected joy – vary things to keep it interesting. Add a surprise.
  5. Broaden horizons – find those life changes things – notice the world around you. Expand your horizons, look outside your comfort area.
  6. Be brave – start making statements. Stand for something and convey our ideas through our work. Where are the schools of thought for web design, philosophic approaches in web design.

Caveat: sometime this is hard when you need to get a job done. Reflective shouldn’t be dogma – should be used appropriately.

South by Southwest Interactive 2010

It’s once again that time of year for a trip to Austin, TX for South by Southwest Interactive Conference. I’ll be collecting notes from the various sessions I attend right here on this blog (category sxsw) as well as on my SXSW sub-blog (

SXSW® Interactive features five days of compelling presentations from the brightest minds in emerging technology, scores of exciting networking events hosted by industry leaders and an unbeatable line up of special programs showcasing the best new websites, video games and startup ideas the community has to offer. Join us March 2010 for the panels, the parties, the 13th Annual Web Awards, the ScreenBurn at SXSW® Arcade, the Film and Interactive Trade Show and Exhibition, Microsoft BizSpark Accelerator at SXSW® and, of course, the inspirational experience that only SXSW® can deliver.

Upgrading the Entertainment PC

It’s been about about four years since the original Entertainment PC was put together. There have been quite a few small changes and upgrades made since then, but it finally reached the point where things were starting to go south a bit too often with this box. Looking at the current conversion of human years to computer years, this box was about 40 years old. So I harvested some of the computer organs (drives), and set to work on building a machine that would first of all, function, and secondly, last a bit longer with a bit more upgrade flexibility. The issue with the previous computer was the case it was built with. Don’t get me wrong, I loved that case (Aopen EPC945-m8), but it was just a bit too locked together to be upgraded. It was purchased as a bare-bones machine, so it would be very very difficulty to pull out the motherboard, or swap out any vial components. The main issue with this was support for newer operating systems. Vista support for this box was poor, and Windows 7 was even worse, and from what I can tell Aopen has basically stopped support for this product, so new drivers weren’t going to happen. No new drivers meant no new OS (I tried Windows 7, and it wasn’t pretty), so it’s time to upgrade to a more flexible Home Theater PC (HTPC).

The Case:
OK, enough about the old box, what’s in the new one? The first thing I chose was the case. I wanted something that didn’t look like a computer, since it sits out in the open right under the TV. I looked at a handful of slim HTPC cases, and ultimately landed on the Moneual Black Aluminum MonCaso 312S. It got pretty good reviews, and was simply a case, and not a bare-bones system. That means I got to pick my own motherboard (micro-atx), power supply (atx), and all the rest of the guts for the machine. I did not want to run into any sort of incompatibilities in the future, and not be able swap every piece out for something else, something I wasn’t able to do with the old Aopen case. The case doesn’t have a whole lot of bells and whistles. It’s got a card reader, and several USB/Firewire ports on the front panel, and included a remote and IR receiver built in (so I don’t need to hang some ugly USB receiver off of it). Outside of a little difficulty getting hardware installed (which is inevitable in a case this small), I’m pretty happy with how the MonoCase 312 looks and performs.

The Guts:
Several items moved over from the old machine, the LG DVD/Blu-ray drive, the hard drive, and the video capture cards. Everything else needed to be purchased new though to get this new box up and running. I spent the most time determining what motherboard to put into it. I went back and fourth on weather or not I needed to get a dedicated video card like I had in the previous box (ATI Radeon 2400 HD). I ended up going with integrated video on the motherboard. I made that choice for two reasons: 1.) space- I only have one slot, and for heat reasons, I wanted to keep it open if I could. 2.) I didn’t really need much more power than what the integrated video provided. The motherboard I chose actually had more power than the stand-alone card on the old system. All it really needs to do is handle HD video, and the built in video (equivalent to ATI Radeon 4200HD) should be able to do that without breaking a sweat. If I wanted to play high end video games, it might be and issue, but first and foremost, this is a TV computer. Alright, so what motherboard did I end up going with? I went with the Gigabyte MA785GMT-UD2H. It basically had everything I needed, integrated video, good audio chip, lots of ports, along with pretty good reviews and a good price. This is an AMD board, so I ended up with an older AMD processor. Normally I’d go with Intel since I think they make a better chip at this point in time, but I grabbed an AMD Phenom II X2 545 Callisto 3.0GHz chip this time around. It’s a much more powerful chip than what I’ve got in the old box (which handles just fine), and I liked what AMD offered for motherboard packages in the form factor I needed better. Everything went together pretty well with one issue (that I probably should have researched a bit more to begin with). The CPU cooler I bought (Scythe SCSK-1100 Shuriken CPU Cooler (Rev. B)), did not fit with my DVD drive in place. The drive was a bit long, and ran into the fan on top, so I had to scrap the cooler and go with the stock one that came with the chip. It is a tiny bit louder, but not something I’m worrying about at this time.

Video Capture:
Video capture hasn’t changed too much with this new machine, but I still wanted to list what I’m using. I’ve got two Hauppauge Low Profile TV Tuner Cards (WINTV-PVR 150MCE-LP) that have been humming away without any problems for several years. These do the standard def. capture, and have been real work-horses. For HD capture, I’m still using the SiliconDust HDHomerun that I wrote about a couple years back. I did change how that box routes video to the HTPC though. Previously, I had a USB Ethernet adapter specifically for the HDHomerun (it delivers video via the network card). That USB adapter has always been a bit flaky, so I moved the HDHomerun up to one of our guest rooms and split the cable for both tuners in the HDHomerun. I plugged the device into our home network (we’ve got ports in every room), and now have two HD tuners where before there was one, and can access that HD video from any computer on our network, including the new HTPC down in the living room. The reason I didn’t have both tuners hooked up before was I couldn’t split the cable any more in the living room. It was already split four ways (TV, SD capture 1, SD capture 2, HDHomerun), and was already noticeably degraded. So by moving it up to an unused cable port in the bedroom, I’ve got higher quality SD in the living room, and now clean clear cable for HD coming from the bedroom. We can now record/view two HD channels at the same time.

Logitech diNovo Mini KeyboardThere really isn’t anything new here with the recent build, outside of the new remote, but it’s really nothing special (just a generic windows media center remote). I did want to mention and upgrade I made in April to the keyboard though. I bought a Logitech diNovo Mini keyboard that I’m really happy with. I had issues with the previous MCE keyboard interfering with the TV (apparently they were both using the same IR signals). This new diNovo is bluetooth, and works really great! It also has a better, smaller form factor.

What on earth will this super-duper-TV-recording-video-watching beast run for software? That’s a good question, and one that probably should have been answers at the top of this article, since it is what prompted the hardware update to begin with. Quick answer: it’s running Windows 7 Media Center (for now). On the previous build, I had a somewhat clunky setup of Meedio, which has long since morphed into something totally different than what it was when I started (it has been sold, purchased by Yahoo, given up on by Yahoo, opened, and rewritten). For TV capture (the Tivo-like function), I was using an application called Stapstream BeyondTV previously, but that has recently been basically abandoned as well. Are you noticing a theme here? I took a look at the HTPC software landscape, and decided at this point in time, Windows 7 Media Center was the best way to go. It’s got a pretty big user community behind it, and works pretty well right out of the box. I also like that Microsoft has just opened up Media Center for CableCard use as well. That means I can hook it to HD cable from a provider without a cable box. Essentially the HTPC becomes the cable box with use of a CableCard from the cable company. Previously this was only available to computer manufacturers. I’m not using this feature now, but like the option for future upgrades. SiliconDust is working on a CableCard box, as well as a nice looking one from a company called Ceton. Some day I’ll be able to record shows in HD from channels other than the big networks. All in all, I’ve been happy with Media Center. It has a nice plug-in for Netflix streaming, as well as Internet TV. I’ve also worked Hulu Desktop into the mix, and connected Media Center to our SlingBox software as well. I still don’t like the proprietary format it records with, but haven’t run into any walls yet converting it to something more portable. They’ve done some nice interface things since the last time I played with it (XP Media Center), and it’s very easy to use without a lot of messing around. You shouldn’t need to read a manual to operate your TV. Generally I’ve been happy with Media Center, but if something better comes along, at least the machine itself is now flexible enough to run it.

Check out my HTPC (#2) Flickr Set for more images and information.

Throwing Images Down the Pixelpipe

While flipping through some Palm Pre apps a little while back, I ran across a gem of an app (and a service) called Pixelpipe that has come in very handy. What I was looking for was a way to upload multiple photos to different sites all over the internet. My Palm Pre only allows you to upload one photo at a time to two photo services (Facebook or Photobucket) from inside their photo app. In additions to those to services, you can also email or text photos wherever you’d like. With those features, I can usually set up a way to get my photos where I need to since just about every photo/blogging service I use has some sort of interface to pick up a photo via email or mms. It’s just awkward sometimes to jump between multiple apps depending on where I need a photo to go. Luckily Pixelpipe makes none of that necessary.

I don’t use a whole lot of photo services, but did want the ability to sent multiple photos to multiple services at once with one fell swoop. The Pixelpipe app for the Pre does just that. First I set up an account on their site, and then add pipes. Pipes are connections to other other sites and services where you’d like to send your photos. For me, that just means Flickr, Facebook, and my blog (the “latest mobile photo” section in the upper right). If you’re looking for services beyond what I use, chances are Pixelpipe provides support for it. They’ve got a GIANT list of blogging and photo platforms to add pipes from. So once I’ve added my pipes and fired up the application, I can select multiple photos to send out to all my pipes, or just pick and choose which pipes I want to send the current set of photos to. I can then add a title and/or caption, hit send, and the images move their way through the pipes around the internets to all the places I’ve specified. It’s as easy as that.

So let’s say you don’t have a Palm Pre to install the app onto… no worries, they have tools for a large number of platforms (iPhone, Android, Nokia, IM, Windows, Linux, Mac). I’ve been really happy with this little app, and it’s taken a multiple step, multiple app process down to one simple app.

What Happened on the Internet in 2009?

I ran across an interesting collection of facts and figures about things that happened with the Internet in 2009. It reminded me a bit about the Karl Fisch “Did You Know?/Shift Happens” videos that have been floating around for a few years (worth a watch if you haven’t seen it).

Some of my favorite stats:

  • 126 million – The number of blogs on the Internet (as tracked by BlogPulse).
  • 4 billion – Photos hosted by Flickr (October 2009).
  • 12.2 billion – Videos viewed per month on YouTube in the US (November 2009).
  • 234 million – The number of websites as of December 2009.

Ahhhh, our little internet is finally growing up.