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 »

But you can still follow @iancavalier on Twitter or Flickr or 8tracks or Yelp or blah blah social media blah whatever.

(The hiatus monkey is courtesy of Squidsicle.)

Below is a large dump of random, interesting and useful links I had been storing for future posts or for future personal reference. Most of them were collected this spring. I may or may not have tweeted some of these in the past. Just flushing them out of my system now.

Web development & graphic design

• Less Framework: An adaptive CSS grid system
• HTML5 Reset Stylesheet
• CSS3 Generator
• WhatTheFont! font identifier from MyFonts
• Open Source Templates
• 15 Useful CSS3 and HTML5 Templates and Frameworks (April 2010)
• IE 5-8 CSS3 pseudo-class selector emulation: ie-css3.js (January 2010)
• 30 Minimal Logo Designs that Say More with Less (February 2010)
• How to Code up a Web Design from PSD to HTML (February 2010)
• 50 Inspiring Examples of Minimalism in Web Design (June 2009) and a university (Loyola University Chicago) that actually has a nice, uncluttered website
• 30 Beautifully Textured Web Designs (February 2009)
• Making a website iPhone-friendly using CSS (June 2009)
• 20+ Websites Optimized For The iPhone (January 2008)

WordPress themes

• WordPress Themes » Mobile Themes
• 40 WordPress-Powered Websites With Awesome Designs (April 2010)
• Using Facebook’s “Like” Button in Your Wordpress Blog (April 2010)
• 17 Really Useful Wordpress Plugins That Probably Are Essential (January 2009)

Music

• Jenny Owen Youngs – “Fuck Was I“
• Erik Hassle – “Nothing Else Matters (Metallica Cover)” and “The Thanks I Get“
• A Knife in a Gunfight – Ian Stillmunks from Des Moines, Iowa
• Synth Britannia – great BBC documentary about synth

Animals

• Orca Guardians – free documentary film
• Melanism: “More Black Penguin Sightings” and “Today’s Pic: Rare Black Penguin” (March 2010)

Games & cartoons

• Dino Run – 8-bit-style Flash game from Adult Swim
• Robot Unicorn Attack – Flash game from Adult Swim
• “Creating a Video Game’s World With Real People: Bright Falls” (April 2010)
• “After Warning, ‘South Park’ Episode Is Altered” (April 2010)
• 10 Most Ridiculous Cartoon Character Makeovers (February 2010)
• Younger and junior versions of cartoon characters

Random interest

• “Five Reasons Werner Herzog is More Badass Than Chuck Norris” (November 2009)
• 25 Bizarre Buildings in photos (February 2010)
• “The story behind sex and the city of Portland” (April 2010)
• The Babes of #Boobquake (April 2010)
• Chris Creamer’s Sports Logos and Marc’s Distinctive College Mascot Collection
• Institution Size and Brand Community (April 2010, University Business)
• Tilt-Shift and Lomography Photoshop actions (January 2009) and the Helpless video by Keith Loutit
• “Your new passport has a computer chip inside. Should you worry?” (October 2008)
• BBC – Languages – Spanish – Spanish Steps
• Glidden Paint Versus Behr Paint

I like this quote (read more at quotedump.com):

“What I try to do to maintain my sanity is alternate between artist and whore. If I was just an artist I’d be broke, and if I was just a whore I’d be sad.”
—Jonathan Lemkin, More Tales From the Script (2010)

See you back here in 2011, sometime. Maybe.

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

Mobile IS the Future: Do You Have Your Strategy? – Jason Grigsby
(9:15 am to 10:15 am)

• On Twitter: @grigs
• Slides: slideshare.net/grigs
• Mobile is disruptive technology. Morgan Stanley study.
• Technology Cycles – Wealth Creation/Destruction slide.

Integrating Hardware with the Web – Kevin Hoyt
(10:45 am to 11:45 am)

• Commoditization: of LEDs (price goes down, becomes widely available, approachable).
• Connectivity: The word is becoming more connected
• Commoditization + Connectivity = Ubiquitous/physical computing. Interconnected lighting/heating system.
• RFID is very popular in grocery stores. Intelligent refrigerators can tell you what’s inside it, even cross-reference recipes and suggest what you can make tonight.
• How do I take my web skills and get started integrating with hardware?  What do I need?
  1. Hardware that can send data over the USB virtual port.
  2. Serial to socket server that sends data over the network (TCP/IP).
  3. Socket library that accepts and interprets the data from the network.
  4. Your innovation and code!
• Example of USB weather flow:
  1. USB Weather Board ($125) from SparkFun Electronics.
  2. Serproxy (serial proxy) for redirecting network connections to serial links.
  3. JavaScript in the browser does not have a socket, but Adobe AIR does.
  4. Let us see some code! (Use jQuery.)
• Phidgets and SparkFun specialize in USB-ready, plug-n-play devices.
• Weather Station – SparkFun Pre-built
• What other things connect via USB?
  • RFID Book Shelf – Phidgets (created a bookshelf app that can scan and identify tags/IDs)
  • Light Sensor – 8/8/8 (uses PlotKit for data visualization of light sensors (photo cell and I/O board))
  • SBC – Wireless
  • Push Button- Digital
  • Photo Booth – Web Camera (MJPEG webcam)
• Eventually you want more!
  • RGB LED – Arduino
  • Accelerometer – Shields
  • XBee
  • SparkFun GPS
• For tutorials go to Adobe TV and blog.kevinhoyt.org

Dude, Where’s My UI Architecture? – Kyle Simpson
(1:15 pm to 2:15 pm)

• On Twitter: @getify
• Stripping away unnecessary crap.
• Specializing in UI Architecture (the middle end): optimizing performance. We don’t have control over the fundamental components of our systems.
• Traditional (boring) Web Architecture means UI architecture is welded into different places in the structure. MVC hasn’t saved us from these problems (due to implementation).
• Primary motivation: Performance optimization. I will not use spaghetti code (irreconcilable tying between view and model). I will not repeat myself. JavaScript is the only language that is truly ubiquitous; you can’t write that code once and make it portable to all devices unless you write it in JavaScript (JSON API).
• CVC (clients views controllers) UI architecture. The thing that is now in control is the middle end architecture. The “black box” app (could be PHP) has the presentation layer turned off (like a “state” machine). Stick a little JSON API on top of the the black box. Server-side JavaScript means fewer interpretation layers.
  • Clients: Everything is a client of everything else (decoupled, modular, scalable).
  • Views: Templating, portable, DRY, platform agnostic, uses core native web technology.
  • Controllers: Small, independent, powerful; usually JavaScript (URL routing on the server and the client-side, header management).
• What I’m not suggesting: yet another framework, ditch whole architecture, MVC is wrong/weak.
• Only suggesting that UI piece can be done in a better way and JavaScript is that way. MVC has been overstretched by the latest web technology.
• CVC is an alternate pattern for UI architecture. JavaScript (on the server) has been reinvented. Example installations: Narwal, V8, NoJS. JavaScript can run more efficiently than compiled code like Apache.
• Wrote BikechainJS – V8 “engine” modules; bare minimum JavaScript needed. NoJS is the tank, while BikechainJS (a common JS loadable module) is the first step.
• BikechainJS:
  • single .htaccess file (using Apache)
  • uses JSON:
    • uri.routing
    • engine.cpp
    • engine.js – the bootstrapper, now in JavaScript
• Best URI parser: parseUri 1.2: Split URLs in JavaScript
• HandlebarJS: templating engine, text/html templates, JSON data input
• Slides and examples: wv10.getify.com and slideshare.net/shadedecho
• CVC + JavaScript = put the power of UI architecture in the hands of front-end engineers

Mobile Web Development without Developing a Mobile Site – Daniel Davis (Opera Software in Tokyo)
(2:45 pm to 3:45 pm)

• On Twitter: @ourmaninjapan
• Arguments against mobile sites: Difficult to create & maintain, too many devices to support, mobile browsers are good enough.
• Mobile Web Best Practices (60 total guidelines): www.w3.org/TR/mobile-bp
• CSS3 Roadmap: www.w3.org/TR/css3-roadmap
• CSS3 Media Queries: www.w3.org/TR/css3-mediaqueries
  • Tried and tested: screen, print, handheld
  • Now can detect the new hotness: resolution, density, orientation (Safari on iPad supports orientation)
• Playing with HTML5 and CSS3
• Website: people.opera.com/danield
• Slides: mobile-web-development_Daniel-Davis.pdf

Keynote: Bold Ideas and Insane Possibilities – Merlin Mann
(4:15 pm – 5:15 pm)

• On Twitter: @hotdogsladies
• Connections
  1. Stuff
  2. People

Ah, forget it. I’m just going to enjoy this. No more notes.

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

Thinking the Unthinkable: How To Spark Disruptive Innovation Speaker – Luke Williams (frog design)
(9:00 am to 10:15 am | session details)

• The iPod design references cleanliness (bathrooms).
  • iPod: clean design
  • iPad: smoothness
• This presentation:
  1. Bob Dylan songs
  2. Disruptive Innovation
  3. The Expectation Gap
• “I want Bob Dylan songs.” – Steve Jobs said about what he wanted for computer design. Bob Dylan was continually innovating and creating counter-cultural approaches.
• Book: How the Weak Win Wars
• When underdogs choose not to play by Goliath’s rules, they win. Choose an unconditional strategy. Disruptive thinkers.
• Need beginner’s luck (a fresh perspective), so you don’t become trapped by your expertise.
• Pattern switching: Remixed The Shining trailer.
• Humor and creativity in the brain work in the same way. A punchline jumps the pattern and is unexpected (and it’s logical in hindsight). The same can be had for a creative insight.
• We’re dealing with models that were conceived with the logic of another age. Global financial crisis, etc.
• Flips your expectations: Tarantino (Patriot Games: the hero is not the murderer; American morality tale). Tarantino: In my world, the hero is the murderer.  Blair Witch Project marketed a myth two years before the movie release.
• Getting people to stop and pay attention to something that is routine, that people sleepwalk through. Far more creativity goes into people’s attention in advertising than to creating the actual products.
• Expectation gaps.
• Soda marketing as aspirational (freedom and democracy in a can).
• Comedians are experts in disruptive thinking. Eddie Izzard. Think about what you take for granted (the pattern) and then how to switch/disrupt that pattern. What would happen? Let’s imagine that. Must crack the expectation gap.

Mobile Web UX – Nick Finck (Blue Flavor)
(10:45 am to 11:45 am | session details)

• Fitts’s Law – how long it takes to acquire a target (click on a link/button on the screen). Mobile devices need larger target spaces.
• Optimized Markup and Optimized UI
• Readability & Page Width – fits with horizontal scrolling and zooming. Avoid microscopic hotspots.
  • Put navigation along side the content (maybe so that it stays with the content as you scroll)
  • Big hotspots
  • Visually called out navigation (with icons/buttons)
  • Pagination solutions (or (AJAX auto-load when you scroll to the bottom)
  • Make large buttons specifically for mobile devices
  • Give phone numbers the functionality to be dialed
  • Make calls to action very obvious
• Visual recognition on posters that you can play/access by holding up your phone. See devices in 3D, play games, barcodes.

Zooming in on Mapping and Location on the Web – Adam Duvander
(1:15 pm to 2:15 pm)

• @adamd and mapscripting.com
• Mapping APIs
  • Google Maps v3 is the way forward (v2 is no longer supported); has Driving Directions and StreetView;  by the most popular API
  • Yahoo Maps has automatic geocoding and the licensing is less restrictive
  • Bing Maps has bird’s eye view (overhead, better than satellite)
  • MapQuest API is really good; has decluttering built in (pins can be clustered)
  • CloudMade is a company is based on open street map data, and has custom tile generation (different, customizable  map styles); cloned Google API
  • Other APIs are available
  • Mapstraction is an open source tools that allows you to switch between maps (even live swapping), but keeping the same markers; wrote a book called Map Scripting 101: A guide to building interactive maps…
• 3 quick ways to make your maps stand out:
  1. Shed the default teardrop icons (make shadows at cycloloco.com)
  2. Interact outside the map (have popups and info that shows via context of zooming on the map)
  3. Clean things up (declutter the markers, etc.)
• Geocoding services get your coordinates from human-readable street addresses.
  • JavaScript geocoders: Google, Yahoo, MapQuest, Mapstraction (works for Google and MapQuest). JS geocoders will give the the data client-side, but you don’t store it permanently either.
  • Server-side geocoders: Google, Yahoo, MapQuest, Geocoder.us (open project, but still chargers). Licensing restrictions.
• There are JavaScript directions via Google, but server-side directions are more exciting (mobile apps). Until yesterday, MapQuest was the only free provider of server-side directions, but Google announced this yesterday.
• HTML5 video – Android and iPhone
• Locate your users: W3C Geolocation Standard for location guessing on the mobile Web:
  • Usage examples: Twitter.com (Wi-Fi geolocation on desktop and/or GPS on mobile), MapQuest.com (only works on mobile)
  • Wi-Fi triangulation can work even better than GPS in large, urban areas. GPS is better for rural
  • Cell towers as a backup on mobile, IP address as a backup location identifier too
  • Location based on IP address: MaxMind (open), hostip.info, Google Ajax loader (google.loader.ClientLocation)
  • Google Ajax loader can be used to load maps
  • Roll your own: IP Geo Database (based on MaxMind data set): IPinfoDB.com
• Location sharing
  • PleaseRobMe.com: FourSquare/Twitter: raising awareness about over-sharing
  • You are probably not a celebrity if you use location sharing
  • FourSquare turned location-sharing into a game; offers mayorship for benefits
  • Others: BrightKite (write & read API), Gowalla (read API), Check.in (lets you check-in via multiple location APIs)
• Open source decluttering algorithms: Clustering for Google Maps.
• SimpleGeo is a platform for storing your geo data.
• The future of real-time location sharing and mapping is the end of being able to lie.

Designing Our Way Through Web Forms – Kimberly Blessing, Christopher Schmitt
(2:45 pm to 3:45 pm)

• See yesterday’s workshop notes as well
• WebFormElements.com redirects to Chris’s Flickr gallery on how form elements display across browsers and Windows/Mac.
• Radio buttons are the worst element for applying CSS to them. Textboxes are the best.
• Slides and examples: slideshare.net/teleject and presentations.kimberlyblessing.com
• Kimberly: PayPal and Bank of America examples of standards/accessibility compliance.
• New input types.
• LukeW articles – chop up your forms.
• FarukAt.eş

Keynote: Design Matters: Visual Personality on the Web – Agnieszka Gasparska
(4:15 pm to 5:15 pm)

• What is the future of web design?
• Kiss Me I’m Polish is a creative studio specializing in interactive, brand identity and editorial design.

Continue to WebVisions 2010 in review: Part three »