Mobilism 2011: Scott Jehl, Bryan Rieger, Nicholai Onken, and Jared Spool

Dear reader, As a way to both pay attention and have a good record of the proceedings, I like to type out transcriptions/paraphrases of conference sessions. Here is my final transcription/paraphrase for Scott Jehl, Bryan Rieger, Nicholai Onken, and Jared Spool at Mobilism 2011. – Ms. Jen
Jump to:
Scott Jehl – Getting Started with JQuery Mobile
Bryan Rieger – Muddling through the Mobile Web
Nicholai Onken – The Hitchhiker’s Guide to Mobile Dev
Jared Spool – Mobile & US: In the Eye of the Perfect Storm


Scott Jehl – Getting Started with JQuery Mobile
http://www.scottjehl.com/
A Brief How-To
Meta + Scripts + Theme
About the meta tag…
Curently using:
Content=”width=device-width, minimum-scale…”
New coming
Use the CDN
Page Container
Start within the body, div data-role=”page” container -> div data-role=”header” etc
Place Content within those roles
Making a listview
Basic unordered list
List with links
More content + theming
Ajax, automated
Put child elements in the data-role=”page” – Page child roles
Change pages via Javascript
“Fixed” toolbars – we have tried to avoid using fake scrolling at all
Testing is critical
micro js
zepto.js
What is mobile? Question being asked this week
Context == lesstext?
Talks about Responsive Web
The answer to server vs feature detection : It Depends
Shows the The Boston Globe redesign
In all the details
Mobile first layout
Mobile first “responsive” images
load only essentials up-front – What Steve Souders has been advocating for awhile
Qualify further enhancements – dynamically loading
What’s in basic.js?
Features: test & define
IE Flags
Enhanced upgrade – qualifier
Testing:
screen for assests
window for design
Scale up with min-width
Works on IE6-8 & Windows phone with a script Scott wrote (see slides)
Will post slides
Page weight
*******
Bryan Rieger
Muddling through the Mobile Web
http://yiibu.com/
Designing for rapid change and increasing diversity
thinkgs are moving pretty quickly these days
until very recently best practices were to build separate apart
but lately, old ideas are being revisited (see Aaron Gustafson’s Progressive Enhancement)
Of course the elusive One Web still beckons madmen and dreamers
of which we’re pragmatic devotees
But…
try to keep and open mind and challenge long held beliefs
Rethinking the mobile web – http://yiibu.com/articles/rethinking-the-mobile-web/
I don’t quite think that serving one markup for/to everyone will work
{sorry that I have dropped off here, but Bryan is going fast and his slides are very self-explanatory.}
Still one big problem:
How the hell do we make our content meaningful in all of these contexts
I hate the words context and content
Human beings are unpredictable
It comes down to features and constraints.
How to solve the problem with client and server working together
The server is good at going through reams of data.
First load – biggest problem that we will have for awhile
1) Client makes the initial request to server
2) Use WURFL or similar. Server queries WURFL.
3) Back to the server Create a little profile, put it in a cookie, only use what is needed for the device
4) Server talks back to Client for first time to detect a few more features
5) Update profile, sync on server & client
6) Now stash the profile away for later use on both client & server.
you can get 80% there on first load:
https://github.com/bryanrieger/profile
You can easily take the code on github and patch it for WURFL rather than the yiibu db
the deivce context or profile is defined via features and constraints
but only those features and constraints are actually relevant get served to the device
What if what is actual is actually not normal…
What if we have today is not what we should have today?
How would the web be different if Steve (Apple) had given us the iPhone before the iMac
AND
what would happen if we design content the way we design software and applications
could we design content that adapts to 40,000 contexts (MIT Media Lab)
hmmmm….
most websites today are built using a CMS, then we create templates, page templates dominate content focused on delivering ads and providing navigation. If your product is ads and navigation, that seems an awfully odd thing to do.
This content has no idea of its context.
resulting in an experience similar to this (referring how to Tomi Ahonen’s blog works in mobile)
“There is no such thing as a mobile friendly CMS” – Brian Fling
We are treating out content as rubbish with no value… doh!
Which of course provides opportunities for others… Instapaper, Readable, Flipboard
can tailor our preferences in these apps
surely we can do better than screen scapers?
but can we do significantly better than a pdf?
a fascinating little technology: postscript – design graphics with a programming language
PDF’s have a database in each doc + combined with postscript, designed to faithfully render one context everywhere device independent
PDFs are not terribly adaptive and the web was not designed for one orientation or device context
web design is software design, it is not page or print design
Open Source projects – Couch db and node.js – keep an eye on these
Welcome to a brave new hello world
content is applications
typography matters you may not care but users do
Why can’t more sites have preferences?
Sass, a project in node.js, that allows us to add variables and logic expressions in CSS
tinySrc – web service from Sencha – allows one to adapt one’s images http://tinysrc.net
image magic
python image libraries
images can also be applications
Also text, add structure to it, like microformats
google charts can take data and make a chart for you.
********
Nicholai OnkenThe Hitchhiker’s Guide to Mobile Dev
http://uxebu.com/
@nonken
State of Mobile Development
Runtimes – focus -> pick a few that make sense
Nicholai recommends starting with palm WebOS, iOS, Blackberry, and Android
Use PhoneGap -> so much faster than implementing in the various runtimes
Debug – alerts, weinr, jsconsole, jsdebugger, zeon.js
Editors –
Editor in the Cloud cloud9ide.com
SubEtha Edit – Can write code together collaboratively – FTW
apparat.io
build.phonegap.com
Testing: try to get as many devices as you can
ripple.tinyhippos.com
Reporting:
distimo.com
App stores: yea, right…
Probably more than just mobile, but on computers as well.
Target any platform that has the browser and a runtime available
Rewire our brains
We start learning javascript as it is, don’t integrate a library unless you understand each thing it does, and libraries have more than you need for mobile
What about maintainability?
How to maintain libraries and/or the source code of the app?
Work with features and interfaces
Don’t branch your code
Images – embedjs.org – The DIY framework
You never know what capabilities the devices have, what will I do in the case that something is not supported.
Mixins –
Delegate
different approach on event handling
simple, clear implementation
less overhead than the multi purpose event handlers such as dojo.connect
more explicit than pub/sub
github.com/uxebu/delegate
data binding
based on delegates’ event handling
DOM Events
Binds native DOM events to object methods
Gaming
Curve Desaster – the experiment
github.com/uxebu/curvedesaster
No library
Using only the Delegate mixin and a mixin helper
wwtest / http://10.0.2.1:8080
What is happening right now?
Fact: Native mobile is moving fast
Bad: Apple disabled Nitro in WebView
Good: Android now has a ADK
Awesome: Chromestore now has payment APIs
Woot: HP kicks ass, you can use node.js!

How can we influence developers?
Use PhoneGap to its limits
Human APIs in Javascript
**********
Jared Spool – Mobile & US: In the Eye of the Perfect Storm
Closing preso: Ground Rules
No mention of Ethan Marcotte’s ALA Article
No quoting Jeremy Keith
etc
I am going to talk about CocaCola
mycokerewards.com
huge difference between desktop (flash) and iPhone (must download Flash, but can’t)
Same with Fox Weather
Washington DC, 1st time seeing a political sign with a QR code
Sign in a bank that had a Nokia phone with a fullly rendered website (apparently, they have Photoshop), didn’t work that way on Jared’s phone
Sturgeon’s Law
Theodore Sturgeon – at SciFiCon,
“Why is 90% of SciFi writing is crap” – Journalist
“90% of everything is crap!” – Theodore Sturgeon
HTML Email is a dark art.
United Airlines – How quickly do they expire their emails?
They have passengers who are both portrait and landscape.
Now the mycokerewards.com website now no longer requires a flash download for the iPhone, but it is still unreadable as it is not designed for mobile
Verizon’s website render on a mobile.
AT&T’s Iphone 4 site does not render on an iPhone4, but neither does Apple’s.
Sturgeon’s Law is in full force.
Where do you land in Sturgeon’s Law?
It is hard to be in the top 10%
Are you considering the user’s perspective?
Mobile (web) is big right now, even though it has been around for 10 years.
Why now?
We have come into this perfect storm of opportunity in the mobile space:
Sturgeon’s Law – with the iPhone, 90% of crap is highly visible – strong force for change
Market maturity – Technology, Features, Experience – Why it is difficult to get folks to make usable designs & why sometimes it is easy
Activities vs. Experience
Kano Model
1979 – Wang Micro-Wordprocessor – Not a very usable device as it took 2 weeks to learn how to do bold. $14k
Eventually we moved passed this, to products like WordPerfect
Technology invented
Features added
Experience considered
(shows MS Word with numerous shortcut bars, audience groans)
Features vs. Experience
Accuweather site map (overly featured) vs. Umbrella Today (minimum, but essential experience)
Air Canada site map (overly featured) vs. their new iPhone site (more stripped down experience, but still a bit busy)
Technology – so exciting that who gives a shit what it does
Feature – adding features
Experience – stripping down features to create a better
Companies who get stuck in the feature phase where they were successful, they rarely get to the experience phase, they instead get stuck in the feature phase.
Six Flags Magic Mtn -> Point of the Map is to get you from ride to ride
Walt Disney World -> No rides listed on the map, they think themselves as an adventure not a series of rides
Six Flags is about Activities
Disney is about Experiences
Talks about Kevin and Coley’s wedding with QR codes (May their love be ever true, and never false… 10.10.10)
It is easy to design for activity, but it is hard to design for Experience
Activities have discrete touch points, Experience fills in the gaps
The Kano Model
scale of x axis of Investment and y axis of user satisfaction of Deight/Frustration
Three Vectors: Performance Payoff, Basic Expectations, and Excitement Generators
The Performance Pay off is where Investment leads to Delight
But there is the Basic Expectations whirlpool where investment never leads to delight, but you can screw it up, at best you can get neutral
You can see this with wifi, if the wifi works people are ok with it, if it doesn’t they get upset.
Excitement Generators Investment leads to an upward curve or delight or a circle above neutral
Google Docs – most useful part is that you can share it with other uses, but if you bring it up on the phone there is no way to share. Currently the mobile site is not meeting the basic expectation curve.
[Jen note: Nokia is about to meet this same bad cycle if they keep up with EDoF cameras on high end phones rather than sticking with Carl Zeiss auto-focus, which is an Excitement Generator. Nokia should have Jared come do this presentation…]
Experience Design for mobile is very complex
Great mobile experience involves really good copy writing – it has to be compelling and useful to users
Information Architecture – Need good navigation
Design Process Management – iterate quickly to get results and test the results
Information Design
User Research Practices
Visual Design
Interaction Design
Editing & Curating – Mobile first is about e&c
Ethnography
Analytics
Marketing
Technology
Business Knowledge
Domain Knowledge
Use Cases
Social Networks
ROI
Presenting
Sketching
Storytelling – To be a really good designer you need the soft skills to understand the user and tell their stories
Critiquing
Facilitating
Mobile teams are getting smaller while the skills needed are going up!
Three Questions are this:
1) Vision : Can everything on your team tell us what is like to experience your design five years from now? A flag in the same that everyone on the team can march towards, it can be pulled up and put in a bit ahead that everyone on the team can see – Experience vision
2) Feedback : In the last six weeks, have you spent more than two hours watching someone use you or a competitor’s design? Two hours at least every six weeks everybody on the team – best teams do this.
3) Culture : In the last six weeks have you rewarded a team member for creating a major design failure? Spend 5 mins giving the person a hard time & 20 mins discussing what went wrong and why it happened.
Are you doing 1, 2 or 3 of these? This is what separates out the 90% from the 10%
Methods of Feedback
Usability Testing : 5 second tests. trade show or cafe testing, remote usability tests
Field Studies
Customer Support : Listening to CS phone calls or watching the Forums and asking questions
Using it yourself on a regular basis