On Wednesday through Friday, May 16-18, I attended the WebVisions 2012 conference at the Oregon Convention Center in Portland. Below is a quick overview of all sessions I attended on Friday, with links. See Twitter updates using #wvpdx.

The CSS of Design Storytelling: Context, Spine and Structure – Traci Lepore
(9:15 am to 10:00 am | session details)

Storytelling is an age-old tradition, because it’s one that just plainly and simply works. As the book Storytelling for User Experience by Quesenbery and Brooks says “We all tell stories. It’s one of the most natural ways to share information, as old as the human race.”

But to be a really good storyteller, you need to understand three basic concepts: Context, Spine, and Structure (CSS). Each is critical and necessary, and all three need to work together.

In this session I will walk through these concepts and how to understand and implement them in your user experience design work to ensure a good story that covers all of the components of CSS—Context, Spine, and Structure—and is compelling, engaging, and memorable.

• Twitter: @TraciUXD
• Slides: slideshare.net/treygd/css-design-storytelling
• Storytelling tenets: Context, Spine, Structure
• Context (Theme, Mood, Audience): setting, theme/message, the big picture, emotional aspects
• Spine (Plot, Characters, Climaxes): basic storyline(s) that runs throughout plot and characters
• Structure (Patterns, Infrastructure, Through-line): progressions of the story
• Stories are a great way to help people learn by engaging their emotions
• Book: Storytelling for User Experience
• The role of storytelling in UX design is to be the bridge: managing the pieces to communicate a compelling and engaging story
• In UX design, the plot must cover the goals and scenarios
• Source for a lot of the content: “Improving Web Site Usability and Appeal” by Kevin Keeker

Casting Off Our Desktop Shackles – Jason Grigsby
(10:15 am to 11:00 am | session details)

No matter how much we try to put ourselves into a mobile first mentality, it is hard for us to do so fully. Our access to PCs prevents us from experiencing mobile the way many in the world do.

We’re currently fighting for parity among experiences. We’re arguing that the mobile version shouldn’t be a dumbed down version of the desktop site.

But we’ve set our sights too low. In a true Mobile First world, the mobile version should be the best experience. Mobile shouldn’t just match the desktop experience, it should exceed it.

• Twitter: @grigs and @grigs_talks
• Website: Cloudfour.com
• Slides: bit.ly/shackles-wxpdx
• “There is no mobile web.” Agree or disagree?
  1. Mobile doesn’t mean taking things away.
  2. Our vision of mobile context is often wrong.
• Mobile as the 7th Mass Media?
  1. Printing press
  2. Recordings
  3. Cinema
  4. Radio
  5. Television
  6. Internet
  7. Mobile
• More notes coming soon.

Strictly platonic: Responsive Design + Development – How to Avoid Digital Land(scape) Mines – Matt Fordham, Taylor Winters
(11:15 am to 12:00 pm | session details)

Users expect their experience on a website to adapt across all their devices – including mobile, tablet, laptop and desktop. The demand has coined the industry term – responsive design. The ideal effect is a satisfying and relevant experience to users on every size of display. Is this so much to ask?

What users don’t see is the behind-the-screens, starting with the people crazy enough to craft experiences that inherently respond to users demands – designers and developers. For progressive developers, this is an easy to grasp evolution. For designers, it presents a new host of challenges with some serious digital land(scape) mines.

To create a successful responsive web experience – and not cause any friendly fire in the process – requires design and development be in lock-step, harmony rather. Matt Fordham and Taylor Winters will talk through the fundamental need-to-knows from a developer’s and designer’s perspective, respectively and respectfully (well, mostly). Depending on levels of attention some combination of the following can be gathered:

+ The fundamentals developers want designers to know when designing a responsive experience
+ The cornerstones of a successful process for engineering a responsive web experience
+ A real-time working example for attendees to access on devices during the presentation – we’ll review key points of common responsive design layouts and the associated code

Plus, alarming statistics about why a responsive web experience is critical and helpful responsive design resources.

• Twitter @WINTR_US
• Website: wintr.us
• Responsive web design: a broad range of devices can access a single source of content
• PC usage is down 20% since 2008
• Traffic to mobile websites has increased 200% since 2010
• In the U.S., 25% of mobile web users browse only on their phones
• Responsive web design patterns by Luke Wroblewski cited again
• Great responsive design examples: mediaqueri.es, crushlovely.com (fluid), colly.com and foodsense.is

Crank WordPress up to 11 – Lorelle VanFossen, Mike Bijon, Jeremy Wilson, Taylor Dewey, Don Elliott
(1:30 pm to 2:15 pm | session details)

Designing and developing WordPress Themes isn’t about a paint job on the web. It’s where design and content meets the code pavement. WordPress Themes are highly flexible and dynamic, pushed to their limits by the New York Times, Wall Street Journal, CNN, Huffington Post, NFL, Number 10 Downing Street, NASA, Harvard, and more than 70 million websites worldwide.

Join Lorelle VanFossen and a panel of WordPress experts for insider stories, tips, tricks, and techniques to move you away from boring templates and crank up your designs with techniques to create powerful, dynamic websites. This engaging, high energy panel will discuss how WordPress Plugins influence design and functionality, wireframes to frameworks to WordPress Themes, and the future for WordPress Theme development including mobile, HTML5, CSS3, and the new federal laws on web accessibility.

• Twitter: @gravitatedesign, @tddewey, @geekcode, @ElliottDesign, @lorelleonwp
• The WordPress Codex and WordPress API
• Extensible tools in WordPress: Advanced Custom Fields plugin
• Cool WordPress magazine plugin: Edit Flow
• Best WordPress e-commerce plugin: WooCommerce (vs. Cart62 vs. Magento)

SHIFT Deluxe: An AIGA Portland presentation – Chad Rea, Kristin Rogers Brown, Rich Moore, Samuel Hulick
(2:30 pm to 3:15 pm | session details)

Thought leaders of the design community and AIGA Portland will showcase examples of intentional design and processes that are making the world a better place environmentally, economically, culturally, and socially. Join us for this concentrated version of SHIFT that will include brief, inspiring presentations followed by panelist and audience discussion on how to make design for positive change actionable.

• Twitter: @aigaportland
• Four-part sustainability focus: environment, culture, people and economy.  Learn more at livingprinciples.org
• Kristin Rogers Brown: featured The Urban Forest Project in Portland
• Rich Moore (zero one ten, iLoveHandles): featured Muji product designs and the Barnacle iPhone stand. Three design principles:
  • Can you do it in fewer pieces?
  • Can you make it smaller?
  • Can you do it with half the budget?
• Chad Rea (@chadrea): Green is not the conversation starter, yet many companies and brands choose to lead with this message. Leading communication strategies with green/eco-friendly language is preaching to the converted, not to the skeptical masses.
  • “Don’t act green. Be green. Act pop.” (Boring, outdated “green designs” aren’t necessary.)
  • Green can be irreverent. Green can be populist. Green can be all colors. Green can be just as ______. Green can co-mingle. Green can be discovered. Green can be subversive. Green can be invisible. Green can change and change the masses.
• Samuel Hulick (@samuelhulick): Save the websites!
  • Oxford, 1379: example of oak timber beams rotting away after centuries, but there was a replacement stand of trees ready that had been planted long ago
  • Sustainable ethos
  • 3 ways to avoid slash-and-burn website replacement strategies: 1. Respect what’s there; 2. Build for durability; 3. Plan for preservation

The Future of HTML5 Motion Design – Terry Ryan
(3:30 pm to 4:15 pm | session details)

HTML5 and CSS3 are hot, driven by an explosion of new, Internet connected devices.  While they offer many new features that should allow you to do the types of things that you previously did in Flash, actually making it happen is really hard.  Until now.

Mark Anders, an Adobe Fellow who leads the Edge Development Team, will explain how HTML5 animations are done by hand, and show how Adobe Edge Preview 4 can be used to save time while creating beautiful motion and interactive content. Adobe Edge is a new tool that natively uses HTML5, CSS3 and JavaScript for fidelity across modern browsers, while enabling integration into real-world workflows. This is a rare opportunity to not only learn about Edge from the source, but to give feedback and influence the design of a new tool under development.

• Twitter: @tpryan
• Slides: slideshare.net/tpryan
• In the near future: Adobe Edge: Motion and interaction design for open standards. Build with HTML5, CSS and JavaScript. Works across available browsers
• In the less-near future: CSS shaders: Cinematic 3D effects for the Web. Make browsers do more

Whither Twitter? – Laura Fitton
(4:30 pm to 5:15 pm | session details)

Twitter Twitter Twitter Twitter Twitter. How is it changing the world? What else might it have in store for the future of business, politics, social change and global economics? What secret Twitter superpowers are barely understood and have barely even been tapped yet?

• Twitter: @Pistachio
• Slides: slideshare.net/pistachio
• oneforty: can still find it at socdir.com
• 10 Things to Know in 3 Easy Parts
• What
  • An EKG for Attention
  • Sensing & signaling network
  • The Message is the influencer
  • Any to many
  • 5 BILLION publishers
• How
  • Be Useful (it’s not about you; make it about the readers; turn the message inside out)
  • Tame the Fox (The Little Prince reference)
  • Maintain loose ties
• What Next?
  • Explore the humble # (the flocking mechanism of Twitter)
  • Vulnerabilities

A few more things:

• Guide to Twitter: “Listen. Learn. Care. Serve.”
• “Either write something worth reading or do something worth writing about.” – Ben Franklin
• If you want to build your following … take AMAZING care of your followers.
• Crazy spreadsheet: Twitter chat schedule
• Useful tool: marketing.grader.com

That is all. WebVisions 2012 is over. For my notes from previous WebVisions conferences, see 2011, 2010, 2009, 2008 and 2007.

On Wednesday through Friday, May 16-18, I attended the WebVisions 2012 conference at the Oregon Convention Center in Portland. Below is a quick overview of all sessions I attended on Thursday, with links. See Twitter updates using #wvpdx.

Correspondent from the Future – Baratunde Thurston of The Onion
(9:15 am to 10:00 am | session details)

In this technology and future-oriented talk, Baratunde, host of Popular Science’s Future Of on Science Channel, goes behind the scenes of his television show as well as his digital strategy work at The Onion and other companies to give a deeper analysis of the issues raised in his exploration of the future. From self-driving cars to creepy Japanese robots to a real, functioning orgasmatron, Baratunde will share anecdotes, images and a thoughtful, provocative and humorous analysis of what the future might hold.

• Twitter: @baratunde
• Book: How To Be Black
• Projects on Twitter: @jjpolitics, @FutureOf, @TheOnion
• CultivatedWit.com organization

How to Not Be a JavaScript Hack – Phillip Kerman
(10:15 am to 11:00 am | session details)

The good news is browsers have seen phenomenal performance gains in their ability to render JavaScript. But the demand for sophisticated applications has also grown. Match this with the fact mobile devices are inherently slow and you will quickly see why streamlined code is important. Not only do developers need to squeeze every drop of JavaScript performance possible, but more importantly, they need to avoid pitfalls that can cause applications to come to a screeching halt and crash.

This session covers: basics of JavaScript (like avoiding variable collision and memory leaks); best practices for good performance (including simple caching, closures vs. global functions, as well as comparison of different object-oriented patterns); and, when to use CSS transitions instead of JavaScript.

• Twitter: @phillip
• JavaScript and jsFiddle resources and code samples: tinyurl.com/javascripthack
• Overview:
  • scope
  • hoisting: if a function is declared (vs. an expression), the function gets hoisted to the top; so, list all local variables at the top
  • closures
  • immediately invoked functions
  • expressions (IIFE)
  • modules
  • namespaces
• Understand why JavaScript libraries/frameworks like jQuery and xjs are advantageous
• Learning
  • “hate list”
  • learn by doing
  • books: JavaScript Patterns and JavaScript: The Good Parts
  • don’t optimize too early
  • don’t beat yourself up
  • avoid boilerplate code (i.e., using the same pattern for every project)
• Tooling
  • editor for JS: Komodo Edit (free), WebStorm ($49+)
  • JSLint (code quality tool, remove errors/”lint” from your program)
  • browser dev tools
  • jsFiddle
  • case for unit testing (because JS gets interpreted at runtime, generating lots of test cases are essential
• console.log() vs. alert()
• JavaScript garbage collector: delete pieces of memory that are no longer in use

The Web’s Third Decade – Faruk Ateş
(11:15 am to 12:00 pm | session details)

Our medium has entered its third decade of existence, and is ready for some growing up. Our definitions and understanding of the web are rapidly getting out of date, as, too, are our practices for building on it. It is time to re-evaluate where things are and, more importantly, where they are going.

Faruk Ateş will teach tools and techniques for a more modern view on the web, the world’s greatest platform for content delivery as well as function. Learn how the past is improperly preparing us for the present and the future, negatively affecting our work—and what you can do to free yourself from these information shackles.

• Twitter: @KuraFire
• The Third Decade: 2012-2022
• A History of the Web
  • 1991-2001 – Dark Ages of “Web Design”
  • 2001-2011 – Early stirrings of modern civilization
  • 2012 – Cold War shenanigans (with browser vendor prefixes)
• In April 2012, Opera announced that it’s going to implement the -webkit alias: “Opera Mobile Emulator build with experimental WebKit prefix support“
• Historically: we already have a user-agent clusterfuck (with numerous web browsers based on different engines posing as each other)
  • “Internet Explorer wants to be identified as Netscape 4; Konqueror and WebKit want to be identified as Firefox; Chrome wants to be identified as Safari.” Source: “History of the user-agent string“
• Developers or browser vendors to blame?
• Good developer tools: LESS, Sass with Compass. They are CSS preprocessors
• Responsive images: img srcset syntax vs. picture proposal

CSS3 OpenType: The New Web Typography – Thomas Phinney
(1:30 pm to 2:15 pm | session details)

Web typography is changing dramatically thanks to browser support for @font-face and server-based fonts. Web designers now have thousands of font choices where they once had just a dozen. But beyond @font-face, CSS 3 introduces myriad new OpenType typographic controls, bringing a level of typographic precision to web design previously seen only in print.

Covered in this presentation:

• how @font-face server-based web fonts work, and what options they replace
• choices for enabling @font-face, from self-hosting to web font services
• both font-independent and OpenType features, and how to tell which web fonts support which OpenType features.
• see these features in action on web pages, from workhorse everyday typography to the surprising and bizarre, via fonts created by Phinney and friends
• other CSS 3 typographic features such as kerning and hyphenation
• state and near future of advanced typography support in browsers
• “correct” typographic use of all these new features

Additional notes:

• Twitter: @ThomasPhinney
• For about 20 years, web design has been shackled to a few common fonts
• Many font formats required, but converging on WOFF (web open font format)
• Self-hosting vs. web font services
• @font-face CSS tag > font-family
• CSS3 and OpenType fonts:
• 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
• 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
• Firefox OpenType font feature support: mzl.la/ff4-ot

Hulk Smash the Web! How the Web and Digital Technology are Reshaping Visual Effects – Jeff White
(2:30 pm to 3:15 pm | session details)

Computer graphics in visual effects is a relatively young industry in relation to film making, although it is an ever changing industry. In recent years, digital technology and the web have brought significant changes into all aspects of film production.

Jeff will detail how digital capture drove the creation of the Hulk, Ironman and a virtual New York City for Marvel’s the Avengers. He’ll cover the steps ILM took to create the newest Hulk including working with Mark Ruffalo to bring his likeness and performance into a CG character.

In addition, he’ll talk about the impact of the web at each step of visual effects production and how it’s rapidly changing the way visual effects work is done.

• Twitter (for Industrial Light & Magic): @ILMVFX
• Company website: Industrial Light & Magic
• Related Wired article: “Exclusive Video: Making the Hulk, Avengers‘ Big, Green Smashing Machine.”

Building Mobile Applications with Web Standards – Kevin Hoyt
(3:30 pm to 4:15 pm | session details)

If you are building for iOS, the you use Objective C and Xcode. If you are building for Android, then you might use Java and Eclipse. And if you are building for BlackBerry, you will find yet a different Java. But all these devices have a modern browser capable of leveraging many of the emerging web standards. So why not use that browser to build applications that you can deploy in the various application stores? Welcome to PhoneGap.

In this session, join Adobe Evangelist, Kevin Hoyt on a tour of how to get started building mobile applications with web standards using PhoneGap. We will start by setting up the workflows for both iOS and Android. From there we will build and deploy our first application to each. After that it is off to the races with native device API integration including accelerometer, compass, audio recording, camera and photo gallery access, and more.

• Twitter: @krhoyt
• Presentation (PDF): goo.gl/MjdmI
• Demo: kevinhoyt.com/webvisions/punchy/
• Web standards: WHR 2, HTML 5, FileReader (for reading local files)
• Resolutions and screen densities pose a challenge in the mobile space (e.g., too big on an iPhone 3, but too small on an iPhone 4)
• On mobile/tablet devices, mouse events become touch events (check if “ontouchstart” exists in document; if so, it’s a touch-enabled device)
• Use CSS3 media queries to rearrange/resize design elements to account for fat fingers (vs. a mouse pointer on desktops)
• Rotation/orientation events using built-in accelerometers are great for making cool mobile-specific features. But simulators don’t support rotation events, so you have to test it on actual mobile devices
• PhoneGap: uses a chromeless web browser running inside a baseline native application container that loads your HTML, CSS, and JavaScript for testing for mobile devices. PhoneGap is part of the open source Apache Cordova project
• The ideal scenario, or ultimate goal, is that PhoneGap becomes obsolete

Sex and SciFi – Nathan Shedroff, Chris Noessel
(4:30 pm to 5:15 pm | session details)

Could there ever be a better trifecta than Science Fiction, Technology (OK, Interaction Design), and Sex?! While it may be more common for sex to be used to titillate rather than inform or inspire scifi audiences, sex is a big part of our lives and a major form of interaction. Films like Logan’s Run, Total Recall, THX-1138, Sleeper, Barbarella, and Firefly, as well as television programs like Star Trek: Voyager and Futurama offer lessons to designers that are both specific to the domain and generalizable to the field of interaction design.

As part of their ongoing analysis of interfaces in science fiction, Make It So, the authors will share and discuss a collection of video clips depicting visions of sex-related technologies in mainstream science fiction and their relation to real world technologies from state-of-the-art “sexplorers.” Discussion will address the questions these scenes—and what their presence in the larger film or television show—raise.

• How have sex interfaces been portrayed in mainstream science fiction?
• What can we generalize from these examples about interface design?
• What can we generalize from these examples about Hollywood?
• Which are examples of “good” scifi sexual interfaces?
• What criteria should we use when evaluating fictional interfaces?
• What counts as sexual technology?
• What expectations have been raised by scifi around technology and sex?
• What fears have been raised by scifi around technology and sex?
• How has science fiction extended existing sexual paradigms?
• How have actual sexual technologies been affected by science fiction?

Additional notes:

• Make It So (Sexy): This talk is based on the last chapter of their forthcoming book
• Three areas of exploration: matchmaking, augmented mediated coupling, sex with technology
• Sex-tech breaks sci-fi narratives when sci-fi is exploring something other than sex. In sci-fi movies, sex derails the narrative; sex needs to be treated as a shallow titillation instead of a satisfying, meaningful experience.
• Sex-tech and sci-fi are on divergent paths. Technology breaks sex for most people. But design and sci-fi are more compatible and mutually beneficial. In the real world, unlike in sci-fi plots, sex is a core goal and meaningful force of human existence.

Continue to WebVisions 2012 in review: Part three »

(Also see my reviews from previous WebVisions conferences: 2011, 2010, 2009, 2008 and 2007.)

Building HTML5 Games – Alex Porter, Andrew Cooper, Nathan Bingham
(8:30 am to 12:00 pm | session details)

HTML 5 Gaming is rapidly evolving and there has never been a better time to give it a try. This workshop focuses on using Impact JS and other libraries and tools to create amazing games in the browser without any plugins. We’ll be taking advantage of  the HTML5 Canvas, JavaScript, and modern browsers (Chrome, Safari, FireFox, IE 9+) to deliver fast, fluid games directly in the browser.

We’ll be covering the basics of building an HTML5 game from the ground up, as well as touching on some more advanced topics to inspire developers to push HTML5 gaming to its limits.

During this workshop we will cover:

• How to install tools for HTML 5 game building.
• Introduction to Game Design, Game Theory and Web Gaming.
• Intro to ImpactJS.
• Making your first ImpactJS game.
• Game Asset generation with Flash and CreateJS’s Zoë (http://createjs.com/Zoe)
• Working with inheritance, animation and sound in ImpactJS.
• Deployment strategies and distribution (Web, Desktop, Mobile).
• What’s coming next for HTML5 Gaming?

• Notes coming soon.

Adaptive Web Design – Aaron Gustafson
(1:30 pm to 5:00 pm | session details)

In this Workshop, Aaron Gustafson will teach you everything you need to know about modern web design with progressive enhancement. Whether you are a novice or an experienced professional, you will walk away from this workshop with a greater understanding of what progressive enhancement is and how to implement this philosophy in your own work.

During the course of the workshop, Aaron will mentor you on best practices as you work together to build a web page from the content out. Along the way, you’ll…

• see where concepts like “mobile first” and “responsive design” fit in with progressive enhancement and your workflow;
• learn how to wield the awesome power of JavaScript wisely, while keeping a watchful eye on how it can affect the user experience or your sites;
• become more familiar with how CSS parsers work and how you can use their logic to apply advanced CSS (including CSS3) in a layered fashion;
• see how accessibility concerns can be easily factored into your development process; and
• gain exposure to ARIA roles & states and see how you can employ them to improve the experience of those using screen readers.

• Notes coming soon.

Continue to WebVisions 2012 in review: Part two »

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)

• See slides.

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)

• Jim Henson’s Wilkins Coffee commercials
• A good experience is invisible – give the audience enough to work with and they’ll do the rest for you. (Suspension of disbelief.)
• Visual thinking book: Gamestorming: A Playbook for Innovators, Rulebreakers, and Changemakers
• Storyboarding and sketches as applied to UX design.
• UX is a very young field. We are just making this shit up as we go along.
• See slides and follow on Twitter: @russu.

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)

• Interesting panel discussion with the @ifcportlandia team on the origin and marketing strategy for IFC’s “Portlandia” television show. Lots of clips. #putabirdonit

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:
  • Envisioning Information by Edward Tufte
  • Selling To the VP of No by David Gray
  • The Back of the Napkin by Dan Roam
  • Don’t Make Me Think by Steve Krug
• 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.

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 Thursday, with links. Many of the slides from these sessions and others are available at SlideShare. See Twitter updates using #wv11.

Read/Write World – Blaise Aguera y Arcas
(9:00 am to 10:00 am | session details)

• Summary coming soon.

5 Critical Elements of Storytelling – Kevin Brooks
(10:30 am to 10:45 am | session details)

• See slides.

Web on the Box – Daniel Davis
(10:45 am to 11:00 am | session details)

• Opera provides browsers for television manufacturers
• TV remote control as an input:
  • Text input is painful
  • Navigation is painful
  • Reading text is painful
  • Page loading is bad (due to slow chips in TVs)
  • Text input is awful
• The same problems exist on mobile. So, take your existing mobile strategy.
• Can we use CSS3 transform to zoom page in? Not on TVs. Just enlarge text via CSS.
• But the “tv” media type is not used by TV manufacturers
  Instead, use Media Queries – everything supports them, even IE 9+.
  Media Queries: an “if” statement for CSS
  • If: @media
  • And: and
  • Or: , (comma)
• The perfect TV media query:
  Web on TV: Using CSS3 Media Queries
  Web on TV: CSS3
  Simple compromise for detecting TVs and improving text readability.

@media tv,
(width: 1920px) and (height: 1080px),
(width: 1280px) and (height: 720px) {
body {
font-size: 2.5em;
}
}

• Code source: bit.ly/tvdev

Emotion: The New User Experience – Kelly Goto
(11:00 am to 11:30 am | session details)

• Evolution of “Sensory Engineering” – get to the heart of pleasure and emotion of products
• We’re in a new (iPhone) era of connected experiences
• Inka Biosphere System: connection = meaning
• From a world of what people think to what people actually feel
• “We want to get to addiction with our new product” – research on addictive behavior on websites
• Functionality » Usability » RITUAL
• Kansei Engineering (kan sei = the  feeling/sensation you have overall) = emotional usability / sensory engineering
• These emotional indicators all fit into Maslow’s hierarchy of needs

Designing for Mobile Just Got Better: jQuery Mobile and Adobe’s Dreamweaver CS5.5 – Ryan Stewart
(11:30 am to 11:50 am | session details)

• Summary coming soon.

GO! How Two Guys Made a Successful iPhone Game and Lived to Tell the Tale – Tim Sears, Tyler Sticka
(11:45 am to 12:00 pm | session details)

• Ramps game
• Resist over-planning, listen to peers and users and focus on making the best thing you can
• See slides.

The Best is the Enemy of the Good: Similarities in Perfection Between Magic and Design – Jared Spool, reed spool
(1:30 pm to 2:30 pm | session details)

• Summary coming soon.

Algorithms in JavaScript – Kyle Simpson
(3:00 pm to 3:30 pm | session details)

• Summary coming soon.

A New Approach to Web Development – Faruk Ateş
(3:30 pm to 4:00 pm | session details)

• Summary coming soon.

Program or Be Programmed: Ten Commands for a Digital Age – Douglas Rushkoff
(4:15 pm to 5:15 pm | session details)

• Summary coming soon.

Continue to WebVisions 2011 in review: Part three »

(Also see my reviews from WebVisions 2010, WebVisions 2009, WebVisions 2008 and WebVisions 2007.)

HTML5 & CSS3 in Practice Workshop – Daniel Davis, Opera Software
(9:00 am to 12:00 pm)

Twitter hashtags: #wv11, #d135

• Canvas tag not accessible
• HTML 5 markup
  More semantic, not just <div>s
  Put JavaScript as the last lines in the <body>
• HTML 5 forms
  New input types
• HTML5 multimedia
• CSS3
• Media Queries
• Ambilight for the HTML5 <video> tag

Follow on Twitter: @ourmaninjapan. Presentation and hands-on downloads: people.opera.com/danield/wv2011.zip and bit.ly/tagawaweb.

Continue to WebVisions 2011 in review: Part two »