WebVisions 2011 in review: Part three

Friday, May 27, 2011

This is a continuation of WebVisions 2011 in review: Part two.

WebVisions 2011

On Wednesday through Friday, May 25-27, I attended the WebVisions 2011 conference at the Oregon Convention Center in Portland. Below is a quick overview of all sessions I attended on Friday, with links. Many of the slides from these sessions and others are available at SlideShare. See Twitter updates using #wv11.

Design Camp: What’s Next for Web Fonts in CSS3 – Thomas Phinney
(8:45 am to 9:30 am | session details)

  • @font-face – choose whatever name you like: BodyFont
  • Many font formats required, but converging on WOFF
  • Self-hosting vs. web font services
  • CSS3 typography:
  • Text module: Hyphenation, Grid-based layout, various wrap options, handing punctuation, multiple columns
  • Fonts Module: kerning and ligatures (turn on optimized legibility in CSS in Firefox), full OpenType features and alternates
  • Firefox OpenType font feature support: mzl.la/ff4-ot
  • OpenType in Action
  • Ligatures: multiple letters colliding: f-i collision – use standard ligatures all the time – happens via alternate glyphs (built into many fonts)
  • Tabular lining, proportional lining, proportional oldstyle, tabular oldstyle
  • Stylistic sets for levels of swashiness (swashes)
  • Contextual alternates of glyphs plus ligatures

Ambient Location and the Future of the Interface – Amber Case, Aaron Parecki
(9:15 am to 9:30 am)

  • Geolocation: MapAttack!
  • Invisible location-based where you can actually live; the best interface is invisible.
  • See slides.

30-Minute Prototyping – Brad Nunnally
(9:30 am to 10:00 am)

  • Sketching starts out with defining the real estate of your site. 70% of my design is done on paper before I start using software.
  • Protyping software: Axure
  • Define the visual hierarchies; define the location of the navigation bar
  • Can turn it into a navigable prototype and can user feedback on how the navigation is behaving
  • Annotate placeholders (or representative content) to then hand over to a visual designer to fill in
  • Gray-box aspects of the design out
  • Lorem ipsum is a technique I try to avoid as much as possible
  • [skipping the rest of this Axure demo for the sci-fi/interface design presentation]

Make it So: The Uncanny Relationship Between Science Fiction and Interface Design – Nathan Shedroff | session details)
(9:30 am to 10:00 am)

  • Science fiction television shows and films yield practical lessons that apply to online, social, mobile and other media interfaces.
  • Sci-fi interfaces allow us to see current issues from fresh perspectives.
  • Sci-fi is a good and legitimate way to prototype and design.
  • “Businesspeople are fiction writers.”
  • “R2-D2 is probably the best-acted character in Star Wars.” Simple beeps and buzzes carry the anthropomorphic effect.

The Mobile Frontier – Rachel Hinman
(10:30 am to 11:00 am)

  • Summary coming soon.
  • See slides.

Experience Design: Getting a Seat at the Strategy Table – Samantha Starmer
(11:00 am to 11:15 am)

  • Business/marketing speak: Pre-sell, pick your battles, offer solutions, talk the talk, walk the walk
  • See slides.

Deep Tissue Massage: 6 Tips for Alignment Across Device Form Factors & Input Models – Nate Koechley
(11:15 am to 11:30 pm)

  • Yahoo (design prototypers and design architects)
  • 6. Balance: Device vs. brand; custom vs. native
  • 5. Create familiar experiences: familiar ≠ same; experience = familiar; platform = natural
  • 4. Balance your research: understand your medium (learn your medium); conventions
  • 3. Align your designs over time: prototypes feed architectures feed prototypes
  • 2. Quest for magic: in different devices; newer web standards for gloss, transitions, skew
  • 1. Generous hit areas (for mobile)

On-Demand User Research – Nate Bolt
(11:30 am to 11:45 am)

Superconsumers – Michael Claypool
(11:45 am to 12:00 pm)

  • Huge digital marketing agency: “Design with the intern in mind.”
  • The “superconsumer” demographic creates and consumes an enormous amount of content
  • Email is waning in its power from a social standpoint
  • Digitally dependent: life is “unbearable” without
  • Their brains are literally wired differently
  • Daily documentation is the norm
  • How to earn the superconsumer’s very short attention span?
  • Gaming mechanics: make the product extremely addictive
  • Be authentic; don’t bullshit them; they can see through marketing ploys
  • They’re looking for genuine; be careful about stock photography (skeptical)
  • Design. Fail. Evolve.
  • Follow on Twitter: @m_claypool

From Muppets to Mastery: Core UX Principles from Mr. Jim Henson – Ross Unger
(1:30 pm to 1:45 pm)

Hacking RSS: Filtering & Processing Obscene Amounts of Information – Dawn Foster
(1:45 pm to 2:00 pm)

  • The real magic is in filtering RSS
  • RSS filtering tools: Yahoo Pipes (my favorite). Others like FeedRinse. Many RSS filtering services have gone out of business
  • Hacking RSS using Yahoo Pipes, Twitter API and BackType.
  • Nice Yahoo Pipes article.
  • See slides and follow on Twitter: @geekygirldawn

Crafting Rich Experiences with Progressive Enhancement – Aaron Gustafson
(2:00 pm to 2:30 pm)

  • Relating finch evolution on the Galapagos Islands
  • HTML and CSS designed to be forward and backward compatible—the perfect finch: take advantage of whatever situation they’re placed in
  • Fault tolerance: the ability to adapt
  • Browsers ignore what they don’t understand
  • Graceful degradation actually undermines the accessibility of content. Progressive enhancement instead.
  • Progressive enhancement is focused on creating a positive, useful experience regardless of device or browser.
  • All progressive enhancement is graceful degradation, but not all graceful degradation is progressive enhancement.
  • Progressive enhancement isn’t about browsers. It’s about crafting the experience—working from the content and moving out. Improve the overall user experience based on the advanced features of browsers.
  • Start with content, layer on semantics (plus optional microformats), then design (HTML/CSS), JavaScript and accessibility.
  • Text/HTTP → HTML → CSS → JavaScript → ARIA (accessibility)
  • See slides and follow on Twitter: @AaronGustafson.

Can Media Queries Save Us All? – Tim Kadlec
(3:00 pm to 3:30 pm)

  • 35 billion devices connected to the Internet
  • Mobile device vs. context. Small screen vs. out and about.
  • Defining a device as mobile had become very difficult. Mobile location vs. mobile usage.
  • Form does not equal function.
  • The device doesn’t necessary equal the function anymore.
  • Make separate sites or adapt.
  • The three things in this “Responsive Web Design” article are not enough anymore: Fluid girds, flexible images, media queries
  • Device classification: by device type, capabilities, UI mode (touch, pointer), etc.
  • Slides by Bryan Rieger: rethinking-the-mobile-web-by-yiibu
  • Respond.js – fixes IE’s lack of support for @media queries
  • Article by Jason Grigsby: css-media-query-for-mobile-is-fools-gold
  • Use responsive images, not flexible images. One way: use Sench.io
  • Another way: Responsive images script: filamentgroup/Responsive-Images
  • Responsive assets (not images)
  • By Media jQuery: paulirish/matchMedia.js
  • Device Detection vs. Responsive Approach – do a little UA sniffing, then use progressive enhancement, use feature detection to build on
  • Summary: Start with Device Classification; Mobile First; Resize Images – don’t just scale; Responsive assets; Pair with device detection; Challenge traditional assumptions
  • See slides and follow on Twitter: @tkadlec.

Progressive Enhancement with ARIA – Aaron Gustafson
(3:30 pm to 3:45 pm)

  • Accessibility on the web – three blind men and the elephant fable
  • Semantics not be followed
  • Accessible Rich Internet Applications spec
  • How does ARIA work?
  • ARIA landmarks are a way to tell assistive technology what a region of the page is for
  • Define roles: <nav role=”navigation”>
  • Redundancy in HTML5 is necessary at this point because not all assistive tech understand HTML5 semantics
  • ARIA live regions – notify user of frequently updated parts of page: <span aria-live=”polite”>
  • See slides and follow on Twitter: @AaronGustafson.

“Portlandia”: The Story Behind the Series – Marie Moore, Andrew Singer, Colin Moore, Carrie Brownstein
(3:45 pm to 4:30 pm)

Thinking Visually – David Armano
(4:30 pm to 5:30 pm)

  • Tell me and I’ll forget; show me and I may remember; involve me and I’ll understand – Chinese proverb
  • His blog: darmano.typepad.com
  • Awesome graphic: Wheel of Marketing Misfortune
  • The eyes are not responsible when the mind does the seeing.
  • 1957: when computer era began; video: History of the Internet (PICOL)
  • The 4 M’s: metaphor, model (metaphor & model), mind maps, manifest (make obvious)
  • Six steps to getting visual:
    1. Empathize: See the world as a child
    2. Memorize: Commit thoughts to memory
    3. Analyze: Take a step back
    4. Synthesize: Filter signal from noise
    5. Visualize: See it, then do it
    6. Materialize: Make it tangible, make it stick
  • The 4 C’s of community
  • Tools/software don’t matter as much as ideas.
  • Flowtown infographic: What is the ROI of your Mom?
  • Venn diagram: Skate & Fall on Ass (can’t skate without falling on ass)
  • Resources:
  • See slides and follow on Twitter: @armano.

That is all. Time to bring some Voodoo Doughnuts up to my sister who is currently visiting Seattle.

Similar posts that may be of interest: