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.
- 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
- 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
<link Use comment trick for stuff that should only be loaded by IE > |
- 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/
- 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
- 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
No comments:
Post a Comment