Sunday, March 11 – 12:30PM – 1:30PM
Stephen Woods Sr Software Engineer Flickr
When working on the desktop, we’re worrying about browsers. You have to cover every case with various browser-specific CSS. On mobile, we worry about devices and not browsers.
Most mobile platforms run webkit, but there are a few other (less used) browsers out there.
Screen Size: Media Queries, Break points, liquid layouts.
We need to concentrate on interfaces that feel good
Modern mobile devices are crappy computers with decent video cards.
How do you make a devices (low powered) feel like it’s high powered – perceived performance. Tivo plays the sound the second you hit the button. On the web we throw up spinners. Touch interfaces are tactile – they need to have immediate feedback. When you touch something, you feel how it works, you have a much better sense of when it doesn’t work.
When interface stops moving during a gesture, it feels like it died.
TouchEvent
One on Android
11 on iOS
Making Gestures Work
Prioritize user feedback
Use hardware acceleration
Manage your memory
Don’t do loading during gestures.
Use native if possible when scrolling
-webkit-overflow-scrolling: touch;
Scrolling is very very important.
Don’t use native pinch to zoom – you can’t control it.
Use Matrix Transforms instead.
Dealing With Browsers
Feature Detect
Add transitions, don’t depend on them.
Gesture interaction is an enhancement, clicks should still work.
Be able to disable features per user-agent, if necessary.
Tools
Adobe Shadow
Charles Proxy
Just change the UA in Webkit
Pile of Devices (just test on the real thing)
Weinere
(Device Simulators & Emulators are useless for web development)
http://slideshare.net/ysaw/creating-responsive-html5-touch-interfaces