{"id":1488,"date":"2012-03-11T10:26:14","date_gmt":"2012-03-11T17:26:14","guid":{"rendered":"http:\/\/www.techory.com\/blog\/?p=1488"},"modified":"2012-03-11T11:19:11","modified_gmt":"2012-03-11T18:19:11","slug":"creating-responsive-html5-touch-interfaces","status":"publish","type":"post","link":"https:\/\/www.techory.com\/blog\/creating-responsive-html5-touch-interfaces\/","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… Read more »<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"activitypub_content_warning":"","activitypub_content_visibility":"","activitypub_max_image_attachments":4,"activitypub_interaction_policy_quote":"anyone","activitypub_status":"","footnotes":""},"categories":[16],"tags":[],"class_list":["post-1488","post","type-post","status-publish","format-standard","hentry","category-sxsw"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.techory.com\/blog\/wp-json\/wp\/v2\/posts\/1488","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.techory.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.techory.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.techory.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.techory.com\/blog\/wp-json\/wp\/v2\/comments?post=1488"}],"version-history":[{"count":2,"href":"https:\/\/www.techory.com\/blog\/wp-json\/wp\/v2\/posts\/1488\/revisions"}],"predecessor-version":[{"id":1490,"href":"https:\/\/www.techory.com\/blog\/wp-json\/wp\/v2\/posts\/1488\/revisions\/1490"}],"wp:attachment":[{"href":"https:\/\/www.techory.com\/blog\/wp-json\/wp\/v2\/media?parent=1488"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.techory.com\/blog\/wp-json\/wp\/v2\/categories?post=1488"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.techory.com\/blog\/wp-json\/wp\/v2\/tags?post=1488"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}