Category Archives: webvisions

Posted on
by

Trust Me, I’m a Designer
#wvpdx webvisions 2012
(Came 15 minutes late to session, so I am missing the notes for the first three principles.)
  • First: Keep Promises
  • Second: Show Results
  • Third: Know Your Voice
  • Fourth: Respect Context
    • if we give the user the wrong interface for their context, they aren’t going to trust us. e.g. giving them the full website experience when they are on their smartphone, or the smartphone experience on their desktop computer.
      • Context Prevents Confusion
  • Fifth: Transition Changes
    • Change Blindness:
      • If we go from one picture to black to a modified version of the picture, we can’t see it. We have change blindness. 
      • By comparison, if we transition directly from one photo to the other without anything in between, then we can easily see the change.
      • By default, web page loads are more like the former: you click a link, the page goes away, and a new page comes in. It may not be obvious what happened.
      • If we use transitions, it preserves context and makes the user feel more comfortable.
  • Sixth principle: Guide, Don’t Dictate
    • Our natural tendency is to tell people what to do. And we tell them the way we would do it.
    • But we don’t like being told what to do.
    • Showed version of gorilla video: people passing ball, count the passes.
      • except a player leaves the team and the curtain changes color.
      • no one sees that.
    • When I tell you what to do, then you’re going to focus on it. 
      • They’re going to worry that you’re trying to do a sleight of hand on them.
      • Don’t fall for the sleight of hand.
    • If you guide someone, if you give them choices, then they are going to trust you.
  • Seventh principle: Show, Then Tell
    • We seek patterns
    • Example website:
      • Each page has a very large photo that identifies the page: e.g. an image of a building he built, a photo of a person for the bio.
      • the image sets the tone for the page.
      • then give the text
  • Eighth principle: Make it simple, not simplistic.
    • Steve Krugue: Don’t make me think – http://www.amazon.com/Dont-Make-Me-Think-Usability/dp/0321344758
      • But he’s not saying “Don’t let me think”
      • Simple: Don’t make me think
      • Simplistic: Don’t let me think
    • Example: netflix
      • interfaces are context specific and very simple
      • interface is simple: just photos and titles
      • but I roll over titles to see the details, drill in and get more details, search on attributes
      • unveil the information when people need it
  • Ninth Principle: Always Leave Them Wanting More
    • To be persuasive we must be believable; to be believable we must be credible, to be credible, we must be truthful. — Edward R. Murrow

Posted on
by

Correspondent from the Future: Future & Digital Storytelling
Baratunde Thurston
The Onion
Webvisions 2012, wvpdx
  • @jjpolitics 
    • jack and jill politics
    • “the watermelon has long symbolized intelligence discourse”
  • tv host discovery channel “future of”
  • director of digital at @theonion
  • live hate-tweeting: all twilight movies
  • Author of How To Be Black
    • if you don’t buy this book, you’re a racist
  • Use brainstorm for headline about steve jobs death
  • For live-tweeting events, have prep documents with many dozens of tweets prepared.
  • for oscars: search onion archive and retweet.
  • using analytics to see what got retweeted, and then used that information to decide what to published on the website.
  • Be a Platform
    • Did planned parenthood satire story about “abortionplex”
    • Didn’t ask anyone to do anything, but…
    • Someone created Yelp destination for it
    • Received 282 reviews, quite detailed.
    • Supports and extended the world/story.
  • Invite people to participate
    • “If you sight a 500 foot tall Bin Laden, send pictures.”
  • Evolve Story Across Platforms
    • Created entire campaign around mayorship on foursquare
    • Video
    • In person campaign
    • In these divisive times, we need something to bring people together. That’s whiskey. Hence, “Whiskey Fridays”.
  • #HowBlackAreYou
    • Started as a dialogue on twitter
    • Turned into an idea for a book
    • Interviewed people on video (using iPhone 4s)
    • Invited people to respond on their website and tell their own story
    • The book had dozens of questions around identity.
    • “When did you learn you were black?” … “a white ghost?”
    • Did a live-writing idea:
      • while writing certain chapters:
      • shared screen using join.me
      • shared links on google+ and twitter
      • posted rules on the left:
        • chat amongst yourself, not with me
        • don’t request control, etc.
      • “How self obsessed does one have to be to set something like this up?”
      • “I have an urge to tweet about this”
      • “Based on what I read here, I am going to buy this book.”
      • “it is interesting to see his writing flow”
  • Stories Are Worlds
    • we ask people to suspend disbelief and join us in that world
    • the platforms are just different access points into that world
  • check out http://cultivatedwit.com

Posted on
by

Designing for Mice and Men
Bill Scott
@billwscott
Netflix
  • Current Experience Chaos
  • First we had a site, then we had devices.
  • On 400 different devices
  • How do we tame it?
    • Netflix Owned Experience Across Devices
  • Wanted a web-like design, development, a/b testing experience across all devices
  • PS3 browser is Netfront, which is a clone of IE6. All the bugs of IE6 plus more. jQuery wouldn’t run on it. 
  • They decided to port webkit to the PS3.
  • Then realized that they could provide this to manufacturers. If they had webkit, then they could design and develop for webkit across all devices.
    • across TV, smartphone, tablet, browser.
  • They have a single javascript bundle on the content delivery network, which they can change at any time, and update the experience across all the devices.
  • Why do we want to own the experience?
    • netflix is known for valuing UX. — you can’t do it if you don’t own it.
    • We love server-driven, testable, dynamic UIs
    • We like agile web better than rigid CE firmware process
    • We value “learn fast/fail quickly”
    • Any other path would lead to chaos
  • Initial HTML5 Experience: PS3 – “Special”
    • Content and navigation tied together.
    • customers always self-report that they want movie discovery tools.
  • Alternate HTML5 Experience: PS3 – “Plus”
    • just a grid in which you move around, not ability to move categories or genres.
  • Design Across Platforms
    • We chose a portability layer – html5, css3, js
    • But we don’t use progressive enhancement since we want the freedom to experience with different UX on different platforms. if we also add progressive enhancement, it gets too complicated.
  • Design Principles – haven’t really changed in 1983
    • Get Physical  – making things feel real, direct, interact with them. 
      • Give them the illusion of physicality
      • Granddaughter fell in love with the iPad – specifically something called spinart.
      • Apple HIG: whenever possible, add an actual physical dimension to your interface.
      • Original netflix player on roku: when you pause it, there is a filmstrip that you can flip through.
      • the iBook has pages that turn.
      • But on the Kindle, they have an anti-pattern – broken metaphor. They have “location”. It’s an implementation, but it’s not a user’s mental model. 
      • “Books have pages”
  • We can break the metaphor with magic.
    • “back to the original page”, “you are here” you can go anywhere. “pages left in the chapter”.
  • Apple breaks this with iCal. They give you the illusion of pages — using depth and visual indicators, but then they break the metaphor by not having the ability to flick pages.
  • The brain cannot see a change happening to an element that has not yet been stored. 
    • example: flipping between two similar photos, one has the airplane engine edited out. when the two frames have a flash between them, we can’t see it. when there is no flash, we all spot it immediately.
  • “Plus” experience won. Reduces page transitions.
  • Lots of UX examples of Twitter app on iPad vs Mac app vs. browser. Can’t capture them all.
  • Questions
    • Q: How do you determine the winner when you try different theories?
      • We care most about retention. But people don’t quit the service immediately because a button style changed.
      • The proxy for retention is consumption… do they watch movies? add them to their queue.

Posted on
by
Lies My Data Told Me
Thor Muller
Get Satisfaction
@tempo
#datalies
  • 12.2 minute: average time to completion to close out a customer service ticket
    • for thousands of companies, over decades, this has been a key number that companies manage.
    • Companies look at customers as to-do items, and so less time is better.
    • But we could have
  • Data is backwards looking.
    • Imagine if you are driving a car, but you can only look in the rearview mirror.
    • We can project out with trendlines, and pattern match, and extrapolate — people will say this.
    • But you could say the same about driving looking in the rearview mirror. In general, the road ahead will be much like the road behind. But this doesn’t help you when you come to a Y in the road.
  • LTCM – built the algorithm to look at historical data and to tell them what trades to make. It worked great. Until Russia defaulted on obligations, causing a near global collapse.
  • Launchrock
    • Helps companies launch a business… Cowritable has viral growth even before they have launched. However, success getting people to subscribe for a product they have seen does not predict what will happen when the product comes out.
  • [missed a bunch of notes here while I got distracted reading the Launchrock site.]
  • Data Can Be a Real Killjoy
  • Success often requires patience or a patch… rather than a pivot.
  • When to ignore the data
    • When you are in “blue sky” creative mode.
      • don’t think in terms of constraints. don’t limit your imagination.
    • When available data is too general or ill-fitting.
      • e.g. “2/3rds of all startups fail” — that’s not useful for evaluating a specific startup.
    • When you’re unsure of what matters.
      • e.g. do page visits matter?
  • The Optimization Trap
    • “Multivariate testing caused us to design a product that we’ve come to hate. It’s ugly and pointless, but it generates real revenues so we can’t kill it.”
    • Optimizing your product can it is more like it is, but it can’t get you to a new product.
    • Optimization brings you to a local maximum, rather than a global maximum – you might get a better buy button, but you won’t get a whole new design that gets you 100x customers.
  • The squeaky wheels get the grease
    • OpenID vs. Facebook
    • Once had a very vocal part of community would complain about our OpenID community.
    • Whereas Facebook users hardly complained at all.
    • But Facebook accounted for 50% of users, whereas OpenID was a fraction of a percent. The OpenID people may have been vocal, but it wasn’t really the business relevant thing to do.
  • Data is Amoral
    • Data makes us blind to our own values — people making mortgages to people who couldn’t pay them. It just couldn’t make sense. But since it was returning money, the data said to invest in it.
  • The Tyranny of the Obvious
    • If you spend all your time looking at the strong, concrete data points, you are looking more than ever in the rear view mirror, because you are seeing the strongest trends.
    • If instead you look at the oddities in the data, you can see the yet-to-emerge trends. Like Lego, who found a teacher doing robotics, which turned into the Mindstorm’s product line, highly profitable.

Posted on
by

Pig-Faced Orcs: Design lessons from Old-School Roleplaying Games
James Reffell
@jreffell
designcult.org
Slides:
  • This is not a gamification talk
  • photos: first convention badge at age 11, awesome map he drew of a dungeon as a kid.
  • Old School Roleplaying Games
    • Chainmail – 1981
    • D & D – 1974
  • There were army games before, but you played an army. The twist was that then you played an individual.
  • D4 version:
    • Give them something to manipulate.
    • Use randomness to generate a story.
    • Use sandboxes and railroads.
    • Enable risk-taking.
  • Give them something to manipulate
    • if you’ve ever done pen and paper rpg, people fiddle with the dice. They are there for randomness, but people play with them, build towers with them.
    • random number generator: you have to move the mouse around a whole bunch to generate a random string.
    • ipad app: for etch-a-sketch. you shake it to clear the screen.
    • Having things to fidget with helps you concentrate without distracting you
    • But we need more things..
      • Texture
  • Use randomness to build story
    • dice/randomness are used, in a very exposed way, to build narrative and build tension. you worry if you will win the fight.
    • Example: rumor table – from d&d adventure. rumors are given out to players at random.
    • One of the classic examples in social media is asking people to contribute content. what should they write about? they often don’t know. sometimes they use a “topic of the day”. but what is that is randomly generated?
  • Use sandboxes and railroads
    • In a sandbox game, players can explore a world. But you really don’t know what is going to happen next.
    • A railroad game has a plot. You don’t know exactly how it is going to go, but it’s got good guys and bad guys and you know who they are.
    • Amazon 
      • A sandbox world. From a product page, you can do anything:
        • you can buy it, you can see other objects like that, you can see stuff that other people who liked that thing liked, you can read reviews, you can go to forums or to wiki, you can see stuff you bought. 
      • A railroad world. From the shopping cart page, there are no distractions, no navigation links. You are heading toward purchasing the product.
  • Enable risk-taking. (Carefully.)
    • In RPG, sometimes characters die. You become even more attached to the characters who don’t die. Characters who die create memories.
    • We don’t want to risk user data, or risking their privacy exposed.
    • Good examples:
      • Bidding on eBay. You have the risk of losing – not winning the bid.
    • Fun failure is a way to prolong the game experience.

Posted on
by

The Independent Software Developer
… or how I learned to stop worrying and started my own business
Peat Bakke
@peat
  • My goal is to do things I Really Care About
  • I’m not particularly good at being a 9-5 employee, because there are too many things I like to do.
    • like this, traveling, having a kid, contributing to open source
  • The Problems
    • I need more time.
    • I need full ownership.
    • I need to pay the bills.
  • The Solution
    • Freelancing!
  • More Time
    • If you are working full-time for an employer, then you have to work overtime in your personal life to do cool projects.
    • Would You Rather…
      • Convince your boss to pay you to do personal projects for 25% of your time at work?
      • Would you like to spend your evenings and weekends working on personal projects in addition to your work day? (this was great in my 20s…)
      • Spend October, November, and December working on personal projects, without having to worry about going broke?
        • maybe in Mexico?
        • On the beach?
    • Freelancing = Flexible Schedule
      • You have the ability to choose when you are working for a client vs. working for yourself.
      • The downside: “You get to pick which 60 hours a week you work.”
        • This comes and goes, and it is possible to set limits.
  • Ownership
    • Don’t Cross the Streams
      • Personal work and client work
      • It would be bad
    • If you are getting paid to write code, you most likely don’t have the copyright to that code.
      • If you don’t have the copyright, you can’t legally contribute it to an open source project.
  • Freelancing = Flexible Ownership
  • Paying the Bills
    • How much do I need to charge? How much do I need to work to pay my expenses?
    • Your base rate: Expenses x (1 + Tax Rate) / Working Hours / Billing Ratio
      • Expenses: Everything you need to spend to be happy
      • Tax Rate:  (30% is a safe estimate.)
      • A standard full working year is about 2,000 hours a year.
      • Billing Ratio: What percentage of your hours will be billable? Some of your time is spent finding clients, arguing with clients, etc.
    • e.g. $50K in expenses * 1.3 tax rate / 1500 hours / 70% billing ratio = $61.90 base rate.
  • Focus on Your Expertise
    • Do not write your own contracts.
    • Do not prepare your own taxes.
    • Do not run your own payroll.
    • You can spend an entire career trying to develop the expertise trying to do this stuff.
    • He spends $3,000 on this stuff.
    • What would be the opportunity cost? How much time would it take to learn and master all of that?
    • Or he can raise his base rate by $2.19 and pay for it all.
  • Freelancing = Flexible Finances
  • My Goal is to Do Things I Really Care About
    • Freelancing is the model he’s found that really works.
    • It’s one of many models.
  • Questions
    • Q: What if you are not good at getting clients?
      • Software is in high demand. Your skills are in demand.
      • Most people don’t even show up. The first thing you need to do is to show up. Send an email, make a phone call. Buy someone coffee. 
    • Q: What if you have friends with a non-profit and they can’t afford your regular rates?
      • I take those hours out of my personal time. I have them set aside, and I can use them for anything I want.
      • Plus non-profits are a really good way to promote yourself.
    • Q: Did you make this transition gradually or abruptly?
      • I did it eleven years ago, during the dot com crash.
      • I had to learn this stuff from scratch.
      • There are no books about being a freelance software developer.

Posted on
by

Mapping A Unified Experience Across Multiple Devices
Erin Jo Richey
@erinjo
  • Maintaining a core vision
  • Working across..
    • Televisions, Cars, Kiosks, ATMs, table surfaces, displays refrigerators, mirrors. 
  • Habits of online newspaper readers, by device and time of day…
    • 97% of views on computer, 2% views on smartphone, <1% on tablets.
    • In early morning, more likely to use smartphones and tablets. During the day, people more likely to use computer. In the evening, phone and tablet skyrockets, and computers fall off.
  • Marketing strategies…
    • multichannel marketing: Sending out messages to multiple places. Just because you are communicating to all these channels doesn’t mean you have a strong campaign.
    • Cross channel marketing: You are sending out to multiple places, but you are targeting messages and collateral to the platforms where it works best, reaching them where they are with the right message at the right time. 
  • A continuous system, until it breaks.
    • Example: You bought a product on Thursday, and on Saturday you get a message about a discount for buying it. The communication strategy should be integrated so that the mailing list suppresses the addresses of the people who just bought it. 
  • Need information architecture strategy
    • Top down: user needs > company needs
    • Bottom up: where are customers now>
    • Push and pull marketing
  • So we’ve got all this activity, all these pressures from all different directions.
    • It’s a spider web, a messy bunch of interconnections
  • We’ve got to build bridges across experiences.
  • Environmental design…
  • http://bit.ly/kCTBLz / http://bit.ly/bundles/erinjo/3
    • Worksheet available as Omnigraffle or PDF
  • Worksheet goes through
    • External Forces (the nest) — influence
    • The design your company creates (the egg) — control
    • The internal Forces (the egg) — influence
    • You can influence some of the external forces and the internal forces. But you can control the design.
  • The Egg
    • Message – the campaign, marketing message, or brand slogan
    • Content Item – the unique content item
    • Task – what task is associated with the content
    • Frequency – how frequently are these tasks performed?
    • Urgency – how urgently is the information needed or tasks get completed?
    • Privacy – is this content intended for one person, multiple people…
    • Intimacy
    • How to Track – How do we track usage
    • What to Measure

Posted on
by

Good App / Bad App
Jason Glaspey
  • Audience Survey
    • How many have smartphones – All
    • How many downloaded at least 5 apps — Half or more
    • 10 or more — a quarter or so.
  • Companies are saying…
    • What’s our mobile strategy?
    • Should we have an app?
    • We NEED to have an app.
  • Mobile has exploded
    • 10 billion app downloads
    • over 350k apps on iOS
    • 30-50 apps per person
    • mobile app revenue > $15B this year
  • Your app has competition
    • 40 hours per month spent in-app
    • people download 15 apps per month
    • but, on average, 1 month lifespan
    • 26% of apps never opened a second time
  • An app isn’t enough. Even a GOOD app isn’t enough.
  • If people don’t have the problem, and aren’t searching for the problem that your app is solving, then you have to go through a lot of work just to reach those people.
  • Brand Loyalty
    • How many of you have loyalty to a brand?
    • Do you search for an app for a company?
      • Example: Guy searched for VW app, hoping that there would be an app to provide an experience of what the new car would be like.
    • But this is exceeding rare that people are looking for an app so a company can market to them.
  • Most loyal brands in America
    • Ford, Facebook, Apple, Dunkin Donuts, Sam Adams, Cheerios
  • Do you need an app?
    • People are coming to Urban Airship because their boss said “we need an app”.
    • What should it do?
      • Don’t know, don’t care, it just has to be good.
  • Would a mobile website be enough?
    • Sometimes an app can be really lightweight – for search, the Google app does voice recognition.
    • Sometimes it doesn’t need to be. Google doesn’t have a Gmail app, just a really good mobile app.
    • Google uses apps when apps make sense, and web content when web makes sense.
  • Pros of an app: 
    • You can have a badge on your homescreen. Can promote engagement.
    • Can have push notifications, e.g. getting an alert when someone mentions you on twitter. Hard to do with web apps, easy with apps.
  • Cons
    • It’s expensive. Are you going to be on iOS? On Android? Which Android? On Windows? On Symbian? On Pre? Well, no one is on Pre.
    • It’s easy to find people to code html. Harder to find good web developments.
  • Sometimes your mobile strategy is: “We don’t need one”.
    • An air-conditioning company asked “What should be their Facebook strategy?”
    • “You don’t need one”
    • They don’t believe it.
    • They spent thousands of dollars trying to get to the 100-friend requirement just to have a vanity URL.
    • It was really about covering your ass: the marketing manager didn’t want to say to her manager “we don’t have a facebook strategy”.
    • Unless you have a product that a customer will be looking for on their phone, you probably don’t need a mobile strategy.
  • Know Your Audience
    • Do they identify with their phone?
    • Or are they just trying to solve a problem?
    • The people who identifies with their phone may spend half the day trying to find the coolest new thing. But the person who just uses it to solve problems just wants to do that, not be bothered with app updates and complexities.
  • Your App Needs to Tell a Story
    • Breitling: Make an app that shows their watches. Totally pointless. You could have just put the content online. The app is about the company.
    • Weber’s: their app helps you find recipes that are specific to the BBQ. The app is about making the customer more powerful. It makes you the perfect BBQer.
      • And it makes sense… you don’t want your laptop sitting on the BBQ. You can pull up your phone.
    • (Note to self: Get Weber app.)
  • Toyota Example
    • Web app to totally configure, price out, and order cars on the website.
    • But people aren’t going to do all that on their phone.
    • But, what about an app that lets you take a picture of your VIN number. And then the app alerts you when you need an oil change, gives you a coupon, and tells you when they have a bay open.
  • Don’t create barriers to your app. It’s hard enough just to get them to your app.
    • Coke came up with an app called Lifecycle.
    • The first thing the app did was make your log into Facebook. They didn’t even know what the app would do.
    • No one used the app. They didn’t trust Coke enough to blindly log in via Facebook without even seeing the benefit.
    • Then they added a “skip this step” button. Usage went up.
  • Know Your Apps and the MotivationsBehind Them
    • Revenue: Angry Birds
    • Branding: Weber On-the-grill
    • Utliuty: ESPN score center
    • Product Extension: xfinity remote dvr control
    • Storytelling: Democrats
  • Howe will they use it?
    • Drive-thru apps: 15 second usage: word play. 
      • Don’t make a long loading sequence or require saves if the user will use it in tiny increments.
    • waiting apps: 1 to 5 minute usage
      • Angry birds, YouTube
      • opening quickly, closing quickly
    • Entertainment: 5+ minutes
      • plenty of time
    • Utility: 
      • make it fast.
  • Why Would Users Download?
    • Does it have a clear valuye proposition?
    • Are people asking for it?
    • Will you have to market your marketing app?
  • Why Would Users Return?
    • Keep track of how people use it, and add to that.
  • The best apps have deep content.
    • TripIt
    • Nike Training Club
  • Push Best Practices
    • Don’t spam or over-send, or they will turn off notifications.
    • Track active devices to see if you’re oversending.
    • You want users to LOVE getting your messages.
    • Give lots of control to the user.

Posted on
by
Less Is the New More
Adam Ware
@wheresitworking
hashtag: #somuchdata
  • SwellPath: Love child of a web analytics and search marketing company
  • Everyone’s dilemma:
    • An overarching problem collecting, organizing, reporting on, and analyzing data
    • Universal across all organizations, scaling large and small, even non-profit preschools, small business, and large corporations
  • How did we get here — What caused the growth of internet data?
    • Speed : real-time data
    • Scale: unprecedented processing power
    • Sensors: many new kinds of data
  • Growth
    • In 2002: 5 exobytes of data
    • In 2009: 281 Exabytes of data
      (1 exabyte = 1024 petabytes = 1M terabytes
  • Digital Marketing Data is a Mess. The problem is exacerbated by:
    • Most metrics not being aligned with business objectives
    • Disparate data sources: website, social, mobile, CRM, etc.
      • And it’s really hard/ impossible to track people across those experiences.
      • So the data looks like seperate people. A person on twitter isn’t tracked as the same person who was on your website yesterday looking for tech support.
  • How do we overcome it?
    • Ask: Do the Number Even Matter?
      • Reasons why they might not matter:
      • Aesthetics: Are you studying stuff that you wouldn’t do anyway, because it would look ugly. e.g. Do you need to do A/B testing on a flourescent orange buy button?
      • Brand values: Are you testing things that, if you took action on, would be outside your brand value.
      • Overarching business strategy
    • Look at the Few (whitepaper from a company called Juicy Analytics, section called choosing the right metric)
      • Metrics that are actionable
        • Can you do anything about them?
      • They can be commonly interpreted
        • Does everyone in the organization understand the numbers
      • The calculations are transparent and simple
        • Example: on a website, they needed to measure which visitors were engaged. They had a way of figuring that out, based on pages visited, videos watched, etc. They could explain up front how the numbers were calculated (transparent), and while not simplistic, they were simple enough to be understood.
      • The data is easily accessible and credible
  • Aggregate Metrics
    • Would it be less valuable in aggregate?
      • Example: If you are studying growth in community, it’s useful to look at twitter, facebook, and forums in aggregate, not individually.
    • Be broad, but be comprehensive
    • Helps avoid uncertainty, data-doubt.
  • Visualize It
  • Q and A
    • Q: Making sure the data you have is actionable.. Is that a chicken and egg problem?
      • We spend time with the data, isolate the things that are really actionable for the people who don’t have a lot of time to dive into the data.
      • But we are spending a lot of time looking at all that data figuring out what is actionable.
      • And, of course, you need to deep dive to figure out what to do.
  • Resources:
    • Marrisa Mayer at PSRC: innovation at google the physic of data
    • blog.kissmetrics.com/you-vs-the-data
    • juicenanalytics.com

Posted on
by

Intro to HTML5
Scott Vandehey
@spaceninja
  • Great history of why HTML5 came into being: 
    • Long version: diveintohtml5.org/past.html
    • Backlash against XHTML2, which would have been too draconian. Would have cause sites with any errors at all to not render. Browser manufacturers hated this.
  • HTML5 Design Principles
    • Support existing content
    • Any new stuff we add should degrade gracefully
    • Pave the cowpaths
      • Let’s look at the way the community is already doing things. Let’s document how people are actually working, and make sure things work that way.
    • Priority of Constituencies
      • users > authors > implementors > specifiers > purity
  • Joke: HTML = How To Meet Ladies
  • Better Forms
    • New input types
      • email
      • telephone (tel)
      • url
      • number
      • and many more…
      • ex:
    • Only small browser enhancements so far, but it is getting there. On the iPhone browser, for example, they optimize the keyboard for the type of input field.
      • prefills the text box with the instructions
      • to avoid javascript or server side validate to validate forms.
      • in the future browsers will do this, include field type validation
    • Create an input field out of anything:
        click me to edit

  • Better Videos/Media
    • Example shown: massive amount of code shown for doing Flash video…
    • In HTML5:
    • Actually, a little more complex, because each browser supports a different format. But you can encode the video multiple times, and then put the source multiple times.
  • New Semantic Elements
    • header
    • footer
    • nav
    • aside
    • article
    • section
  • Simplified Elements
    • doctype:
    • meta: 
    • No type needed for js and css elements
  • How to convert to HTML5 in one easy step
    • Just change the doctype to . You’re done. Because everything is backwards compatible.
  • Browser shims:
    • Add some css:
      section, article, header, footer, nav, aside, hgroup {
        display: block;
      }
    • Also, add some conditional comments to your head for IE
  • Rumors
    • Browsers don’t support HTML5
      • Wrong. All support it to some extent. There’s no reason not to use the parts that work today.
    • Rumor: HTML5 won’t be ready until 2022
      • 2009: W3C working draft
        • browser manufacturers already working to implementing.
      • 2012: W3C recommendation
      • 2022: two complete working implementations
        • This can be ignored… There aren’t two complete implementations of CSS2.1, but we’ve been using that for years. Browser manufacturers get to 95%, and then they quit implementing the spec.