{"id":599,"date":"2012-03-11T11:26:14","date_gmt":"2012-03-11T17:26:14","guid":{"rendered":"http:\/\/www.techory.com\/blog\/?p=1488"},"modified":"2012-03-15T12:59:05","modified_gmt":"2012-03-15T18:59:05","slug":"creating-responsive-html5-touch-interfaces","status":"publish","type":"post","link":"http:\/\/techory.com\/sxsw\/?p=599","title":{"rendered":"Creating Responsive HTML5 Touch Interfaces"},"content":{"rendered":"

Sunday, March 11 – 12:30PM – 1:30PM
<\/strong>Stephen Woods Sr Software Engineer Flickr<\/p>\n

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.<\/p>\n

Most mobile platforms run webkit, but there are a few other (less used) browsers out there.<\/p>\n

Screen Size: Media Queries, Break points, liquid layouts.<\/p>\n

We need to concentrate on interfaces that feel good
Modern mobile devices are crappy computers with decent video cards.<\/p>\n

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.<\/p>\n

When interface stops moving during a gesture, it feels like it died.<\/p>\n

TouchEvent
<\/strong>One on Android
11 on iOS<\/p>\n

Making Gestures Work<\/strong>
Prioritize user feedback
Use hardware acceleration
Manage your memory
Don’t do loading during gestures.<\/p>\n

Use native if possible when scrolling
-webkit-overflow-scrolling: touch;
Scrolling is very very important.<\/p>\n

Don’t use native pinch to zoom – you can’t control it.
Use Matrix Transforms instead.<\/p>\n

Dealing With Browsers
<\/strong>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.<\/p>\n

Tools
<\/strong>Adobe Shadow
Charles Proxy
Just change the UA in Webkit
Pile of Devices (just test on the real thing)
Weinere<\/a>
(Device Simulators & Emulators are useless for web development)<\/p>\n

http:\/\/slideshare.net\/ysaw\/creating-responsive-html5-touch-interfaces<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Sunday, March 11 – 12:30PM – 1:30PMStephen 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 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[31],"tags":[],"_links":{"self":[{"href":"http:\/\/techory.com\/sxsw\/index.php?rest_route=\/wp\/v2\/posts\/599"}],"collection":[{"href":"http:\/\/techory.com\/sxsw\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/techory.com\/sxsw\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/techory.com\/sxsw\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/techory.com\/sxsw\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=599"}],"version-history":[{"count":1,"href":"http:\/\/techory.com\/sxsw\/index.php?rest_route=\/wp\/v2\/posts\/599\/revisions"}],"predecessor-version":[{"id":625,"href":"http:\/\/techory.com\/sxsw\/index.php?rest_route=\/wp\/v2\/posts\/599\/revisions\/625"}],"wp:attachment":[{"href":"http:\/\/techory.com\/sxsw\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=599"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/techory.com\/sxsw\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=599"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/techory.com\/sxsw\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=599"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}