WebVisions 2012 in review: Part three

Friday, May 18, 2012

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

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
  • Mobile’s Eight Unique Abilities
    1. Personal (63% do not share phone)
    2. Permanently carried (~50% of US admit to sleeping with phone)
    3. Always on
    4. Built-in payment channel
    5. Creative impulse
    6. Accurate measurement
    7. Social context
    8. Augmented reality
  • Old saying in mobile: “Asia is two years ahead of Europe, which is two years ahead of the United States.”
  • Mobile is the most important technology since the printing press.
  • 20% of Kenya’s GDP sent through mobile banking.
  • Mobile is world-changing tech. Not just for the affluent.
  • “Africa is the Silicon Valley of banking. The future of banking is being defined here.” Also: “If it works in Africa, it will work anywhere.”
  • Book: Head First Mobile Web

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.

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.

Similar posts that may be of interest: