Thursday, May 19, 2011

Mobilism 2011 Day 2 Notes

Mobilism Day 2

All slides found here

Steve Souders (@souders) - High Performance mobile

Tools (See http://stevesouders.com/mobileperf/)
Technics
  • Bing and Google uses local storage to cache CSS and JavaScript. First download i big, but subsequent page loads are smaller. Cookie is used for the server to "remember" state. So why use local storage instead of traditional http headers ? In theory traditional cache headers should be sufficient, but it seems like locale storage is more robust.
  • Velocity a good conference dedicated to Speed.

Jen Hanen - How to put the mobile in the Mobile Web

  • client side JS feature detection or Server side wurfl ?
  • Start with good semantics
  • Book : Ethan Marcotte - Responsive Web design  (coming June 7th)
  • Personas : CJ http://zomgitscj.com/ mobile blogger, Rita El Khoury
  • modernizr - feature detection library

Stephen Hay (@stephenhay) - Meta Layout : A close look at media queries  

  • Windows IE does not currently support @media queries
  • Use @media only trick to hide css from older browsers old browsers
  • current supported media queries are : width, height, orientation, aspect-ratio
<\!-\- \[if lt IE9\] >
<link Use comment trick for stuff that should only be loaded by IE >
<\! \[endif&nbsp; \-->
  • adapt.js -> not a optimal solution

Layout strategy

  • Use reference wireframing
  • Breaking graphs - show how the site breaks at different px widths
  • Order independant layout mechanisms* <section>
        <article id="sport"></article>
        <article id"sport"></article>
        <article id="entertainement"></article>
    </section>* with flexible box layout module this can be oriented horizontally or vertically:
    display:flexbox;flex-direction=tb;
  • Grid layout module
  • grid-columns, grid-row
    grid-template - very powerful way of defining grids with css
  • Think in terms of design principles and systems
  • The art of letting go
  • We need to think up new ways to design layouts, and new ways to communicate these new designs to our colleagues and clients
  • Toolkit for UX Paper prototyping design http://uxpin.com/

Scott Jehl - Building Tools for a Changing Web (jQuery mobile)

  • Bookmark and back works
  • # is bad for SEO
  • pushState() is alternative supported on newer browsers
  • mouse vs touch a challange - read @ppk's excellent preso on this http://www.slideshare.net/pp.koch/the-touch-events-7649015
  • virtual touch events - supporting touch and not break click
  • http://picplz.com/ is using JQery and PhoneGap
  • WIndows7 support
  • Back does not work in Blackberry 5 and symbian

Examples of cool sites (mostly because you cant see they are built with jQuery mobile

iPhone bug - requires special meta header scale=1, max=1 prevents orientation bug
One way to structure code:
<div data-role="page"/>
<div data-role="header"/>
<div data-role="content"/>
<div data-role="foote"/>
alternatively
<div data-role="page" id="home"></div>
<div data-role="page" id="product"></div>
  • dialog is a page - data-rel="dialog"
  • Dialogs can be closed with back button, not deep linkable
  • Fixed toolbars, hides when scrolling, avoid overriding native scroll
  • Cool input search widget
  • input range slider with html5 syntax
  • Navigation buttons
  • Future direction -> do not try to mimic a native app
  • Slow click -> no click
  • Sometimes perceived speed is more important than real speed
  • Avoid fake scrolling
  • Priority: Cut features not Browser support
  • http://sizzlejs.com/ is a very good start JS library, closure compiler
Layout
  •  Full site douent have to mean full layout
  • Responsive design; fluid grid, flexible images, Css @media queries
New case - will be launched summer 2011 - The Bostom Globe
  • Mobile first layout
  • Serving small images and swap
  • Basic CSS
  • Enhanced CSS (media ="all")
  • basic.js, respond.js, responsiveImages.js
  • matchmedia, polyfill
  • note on @media queries, Screen is for Assets, window for design
  • <img src="a.jpg" data-fullsize="a_large.jpg">
  • Decoupling of widgets - load what you want

Brian Siegler : Mudding through the Mobile web

  • Old ideas are beein revisited
    Progressive enhancement was introduced in 2008
  • New: Responsive web design
  • How to deal with a large images ? see attempt at http://yiibu.com/
  • html video tag is more or less useless, missing screensize and bandwidth
  • "Biggest problem for handheld web video playback still seems to be pulling down a high bitrate HD file.... with extra pixels that never display" @jdowdell
  • We need a selection and filtering of content
  • Experiment 1: do cleaning of existing html based on dom replacement - do image replacement etc : FAIL
  • Experiment 2 : Server side media queries : FAILED
  • Experiemnet 3 : Revisit XSLT
  • Today we seem to have a lot less more.
  • How (the hell) do we make content meaningful in all these contexts ?
Idea  or experiment 4:
  • Client : Features - stuff you know (modernizr) screen size, local storage, touch , canvas, SVG etc
  • Server: Constraints (wurfl) screen size, no touch, poor  Java script, Canvas
  • use cookies
  • Sample code at github https://github.com/bryanrieger/profile
  • Make your own features
  • What if we designed content the way we designed software ?
  • There is still no such thing as a mobile friendly CMS - Bryan Fling
  • PDF: Is designed to render one context everywhere
  • Web design IS software design
Watch these technologies : CouchDB + node.js
  • Content as applications
  • Saas - lesscss
  • tinySrc - cloud based image converter
  • infographics as CSS HTML5 SVG

Jared Spool - Mobile & UX A Perfect Storm

Sturgeon´s Law : 90 % of everything is crap

The perfect Storm

These are forces that work together to create the perfect storm
  • Activities and experience
  • Sturgeon´s law
  • Marked maturity
  • The Kano model

Marked Maturity

  • The marked maturity model cycles : Technology(first big mobile phone) -> Features(feature phones) -> Experience(iPhone)
  • NOTE : "Shifting from features to experiences is the hardest thing an organisation can do - and most fail"
    • "Can anyone on the team describe the experience of using your design 5 years from now" ?
  • Example of an Experience APP : "UberCap" : redefines the experience of taking a taxi, using rating of taxi driver, geolocation etc.
  • Bar codes will be replaced by some kind of Near Field technology, where things just happen when you walk a cross
  • Activities are discrete touchpoints with the user

The Kano model

  • A model that describes relationship between investment and user deligth
  • Normally there is a linear relationship, where more investment, the more user delight
  • But there are two cases the don´t follow this curve
    • Bascic Expectations : If basic expectations are not met we will never break into enthusiasm - no matter the investment
      Google docs on mobile does not meet basic expectations because its missing the sharing feature
    • Exitement generators : These are experiences that generate extreme excitement for less investment
  • Excitement generators become Basic expectations over time

Skills - There are an increasing set of skills an organisation need to posess today to create greate experiences

  • domain knowledge, roi
  • experience design
  • Copy writing, design process management, interaction desing, graphic design ++ many more

Characteristics of organizations that succeed (how the become the 10%)

  • Vision : Can anyone on the team describe the experience of using your design in 5 years from now ?
  • Feedback : In the last six weeks have you spent more than two hours watching someone use your design ?
    usability testing, five sec test, trade show/cafe, field studies, customer support, user forums, using it yourself
  • Culture : In the last six weeks have you rewarded a team member for creating a design failure ?

Nikola Onken-Uxebu (@onken)- The Hitchhiker's guide to mobile development

State of mobile development now

  • Runtimes :The most 4 most important runtimes: Android, HP Palm OS, BB, iOs
  • Debugging :
    • The chronium bnlog,
    • zeonjs.com static analysis tool
  • Editors
    • Cloud9ide.com - collaborative coding
  • Build Services
    • apparat.io
    • build.phonegap.com
    • cordova
  • Testing
  • Reporting
    • Distimo.com (utrecht based company)
  • Libraries
    • Tons of them - size does matter

Coding

  • Rewire our brains
  • Learn JavaScript as it is - you must understand the code you include
  • Maintainability: Work with features and interfaces and don´t branch your code
  • One feature in one single file (e.g one file for the BB implementation and one file for the iOs)
  • Split code into small fragments
  • embedjs.org - DIY framework

Mixins code samples:

Different approach to event Handling ,DOM-agnostic event handling library for objects
  • Data binding Based on delegate
  • no template language
  • Objects emit event on state change
  • Data binding take care of modifying DOM
  • Plain html
Game using socket communication
https://github.com/uxebu/curvedesaster
How can we contribute to the evolution ?
  • Push PhoneGap to its limits
Google announces Android Open Accessory standard ADK , Human API in JavaScript
Post a Comment