SlideShare a Scribd company logo
1 of 75
Download to read offline
Creating Responsive
     HTML5 Touch
     Interfaces
     Stephen Woods




Sunday, March 11, 12
Stephen Woods
                       Front End Engineer
                              Flickr




Sunday, March 11, 12
Sunday, March 11, 12
On the desktop we
       worry about browsers
         -moz-transform:rotate(-270deg);
         -moz-transform-origin: bottom left;
         -webkit-transform: rotate(-270deg);
         -webkit-transform-origin: bottom left;
         -o-transform: rotate(-270deg);
         -o-transform-origin: bottom left;
         filter:progid:DXImageTransform.Microsoft
         .BasicImage(rotation=1);

Sunday, March 11, 12
On mobile we worry
                about devices.


Sunday, March 11, 12
Wait!
                   Did you say they all
                       run webkit?



Sunday, March 11, 12
Wait!
                   Did you say they all
                       run webkit?



Sunday, March 11, 12
Wait!
                   Did you say they all
                       run webkit?



Sunday, March 11, 12
                                 X
On mobile we worry
                about devices.


Sunday, March 11, 12
Screen
     Sizes
     Media Queries,
     Break points,
     liquid layouts




   http://www.alistapart.com/articles/responsive-web-design/
Sunday, March 11, 12
Sunday, March 11, 12
iPhone 3GS
                        256mb RAM
                       Geekbench: 271




Sunday, March 11, 12
iPhone 3GS
                        256mb RAM
                       Geekbench: 271



                             ==



Sunday, March 11, 12
Modern mobile
                  devices are crappy
                    computers with
                  decent video cards.

Sunday, March 11, 12
Sunday, March 11, 12
Perceived
         Performance
Sunday, March 11, 12
On the desktop it’s
      easy...



                       Throw up a spinner.
Sunday, March 11, 12
Touch interfaces are
           tactile.




Sunday, March 11, 12
Touch interfaces are
           tactile.


                       Feedback must be
                            continuous.
Sunday, March 11, 12
When the interface
                         stops moving
                       during a gesture it
                        feels like it died

Sunday, March 11, 12
Respect Convention




Sunday, March 11, 12
Mobile has
                conventions
                too




Sunday, March 11, 12
Mobile has
                conventions
                too




Sunday, March 11, 12
TouchEvent

                       • touchstart - fires once
                       • touchmove - fires continuously
                       • touchend - fires once


Sunday, March 11, 12
The touches Array

                       • You only get one on Android
                       • You get up to 11 on iOS
                       • Each touch gives you position
                         information, and sometimes scale




Sunday, March 11, 12
iOS Gesture Events

                       • gesturestart
                       • gesturechange
                       • gestureend


Sunday, March 11, 12
iOS Developer
                          Library

             http://bit.ly/iOS-guide


Sunday, March 11, 12
Making Gestures Work

                       • Prioritize user feedback
                       • Use hardware acceleration
                       • Manage your memory


Sunday, March 11, 12
Prioritize User-feedback



                       • Don’t do any loading during gestures
                       • Treat the DOM as write-only (do your
                         own math)

                       • When at all possible, use css
                         transitions



Sunday, March 11, 12
Write-Only DOM

                       • DOM touches are really expensive
                       • You know where everything is
                       • Use matrix transforms to queue up
                         positions




Sunday, March 11, 12
Swipe Basics
 distance = e.touches[0].pageX - startX;

 'translate3d('+distance+'px,0px,0px)'




Sunday, March 11, 12
Snap back/snap
                             forward
                       • Keep track of last position, use
                         transitions with easing to snap back

                       • Pick a swipe distance threshold, use
                         that to snap forward (ontouchend)

                       • If the user is gesturing, the element
                         must be moving



Sunday, March 11, 12
A Word about scrolling

                       • Use native if at all possible:
                       • -webkit-overflow-scrolling:      touch;

                       • If not, use a library to simulate
                         momentum scroll (iScroll 4,
                         Scrollability)



Sunday, March 11, 12
Avoid Event
                       Abstraction


Sunday, March 11, 12
Image © Brian Lalor
  Used with permission




     Pinch to Zoom
     (there will be math)
Sunday, March 11, 12
Why you can’t use
                        native Pinch to
                             Zoom


Sunday, March 11, 12
First:
      Use Matrix Transforms
       Minimize DOM touches, make your transforms
       simpler in the long run




Sunday, March 11, 12
http://xkcd.com/184/

Sunday, March 11, 12
It’s Not That Hard!

    transform:          Translate
    matrix(1, 0, 0, 1, 10, 10);

                            Scale

Sunday, March 11, 12
With Hardware
       Acceleration... (matrix3d)


                       [
                           [1,0,0,0],
                           [0,1,0,0],
                           [0,0,1,0],
                           [tx,ty,tz,1]
                       ]


Sunday, March 11, 12
Transforms keep
                     complex state
                   without DOM reads


Sunday, March 11, 12
What is happening?

                       • Determine Center of the touch points
                       • Determine the scale factor
                         (touch.scale)

                       • Scale the element by the scale
                         factor, with the center of the touch
                         points as the scale center



Sunday, March 11, 12
The Naive Example




Sunday, March 11, 12
The Naive Example




Sunday, March 11, 12
The Naive Example




Sunday, March 11, 12
The Right Example




Sunday, March 11, 12
The Right Example




Sunday, March 11, 12
The Right Example




Sunday, March 11, 12
Breakdown




Sunday, March 11, 12
Breakdown




Sunday, March 11, 12
Breakdown




Sunday, March 11, 12
Breakdown




Sunday, March 11, 12
translateX =
       scalePointX * (newWidth - oldWidth)
                   newWidth;




Sunday, March 11, 12
Pro Tips

                       • Beware the virtual pixels
                       • Moving the transform-origin won’t
                         really work

                       • Remember to snap back

Sunday, March 11, 12
Dealing with
                        browsers




Sunday, March 11, 12
Dealing with
                        browsers




Sunday, March 11, 12
Remember
                       Progressive Enhancement?




Sunday, March 11, 12
Progressive Enhancement


              • 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


Sunday, March 11, 12
The Tool Chain



Sunday, March 11, 12
The dumbest thing
                           that works

                                  Webkit
                                  Browser with
                                  UA Spoofing




Sunday, March 11, 12
Weinre

                                              Remote
                                              webkit
                                              debugger.



                       http://phonegap.github.com/weinre/

Sunday, March 11, 12
Internet Sharing +
                            Charles Proxy

                       • Watch HTTP traffic
                       • Add breakpoints in ajax requests
                       • Serve web pages to your phone from
                         your computer




Sunday, March 11, 12
Adobe Shadow

                       • Wrapper for Wienre
                       • Neat
                       • Has some limitations


Sunday, March 11, 12
Pile of Devices




Sunday, March 11, 12
Pile of Devices
                       • iPad 1       • Galaxy Tab
                       • iPhone 3G    • Motorola Xoom
                       • iPhone 4     • Kindle Fire
                       • Samsung      • HTC Titan
                        Galaxy S

                       • HTC Desire

Sunday, March 11, 12
Device Simulators &
                    Emulators:
                 Basically Useless.


Sunday, March 11, 12
The Flickr Touch
                          Light Box


Sunday, March 11, 12
Untitled
   By protohiro

Sunday, March 11, 12
Untitled
   By protohiro

Sunday, March 11, 12
Untitled
   By protohiro

Sunday, March 11, 12
Untitled
                       By protohiro




Sunday, March 11, 12
Swiping Process

                       • Event Listener on top level for touch
                         events

                       • Only visible nodes move via
                         translate3d

                       • Rebuild next/previous happens when
                         movement stops.



Sunday, March 11, 12
Performance Tricks

                       • Aggressive Pruning
                       • Clean off css transforms/transitions
                       • Write-only DOM.
                       • Do as little as possible during swipes

Sunday, March 11, 12
Frustrating
                                Limitations
                       • Retina screen is huge, device
                         memory is small

                       • Hardware acceleration is a crash
                         festival

                       • Fighting automatic optimization
                       http://bit.ly/apple-image-size-restrictions
Sunday, March 11, 12
Stephen Woods
                                       @ysaw
                       http://www.slideshare.net/ysaw/creating-
                          responsive-html5-touch-interfaces

                                               http://www.flickr.com/photos/wafer/5533140316/
                                               http://www.flickr.com/photos/latca/2265637876/
                                               http://www.flickr.com/photos/spine/1471217194/
                                               http://www.flickr.com/photos/williamhook/3656233025/
                                               http://www.flickr.com/photos/isriya/4656385586/
      Image Credits (http://flic.kr/y/kQ5cLh)   http://www.flickr.com/photos/yandle/3076451873/
                                               http://www.flickr.com/photos/uberculture/6632437677/
                                               http://www.flickr.com/photos/blalor/4934146981/
                                               http://www.flickr.com/photos/torek/3280152297/
                                               http://www.flickr.com/photos/nilsrinaldi/5157809941/	 	



Sunday, March 11, 12

More Related Content

Similar to Creating Responsive HTML5 Touch Interfaces

Resilient Response In Complex Systems
Resilient Response In Complex SystemsResilient Response In Complex Systems
Resilient Response In Complex SystemsJohn Allspaw
 
iOS Prototyping with Xcode Storyboards
iOS Prototyping with Xcode StoryboardsiOS Prototyping with Xcode Storyboards
iOS Prototyping with Xcode StoryboardsKyle Oba
 
iPad Apps for teachers
iPad Apps for teachersiPad Apps for teachers
iPad Apps for teachersRod Martin
 
OmniOS Motivation and Design ~ LISA 2012
OmniOS Motivation and Design ~ LISA 2012OmniOS Motivation and Design ~ LISA 2012
OmniOS Motivation and Design ~ LISA 2012Theo Schlossnagle
 
Lightning talks percona live mysql_2012
Lightning talks percona live mysql_2012Lightning talks percona live mysql_2012
Lightning talks percona live mysql_2012Giuseppe Maxia
 
soft-shake.ch - Data grids and Data Grids
soft-shake.ch - Data grids and Data Gridssoft-shake.ch - Data grids and Data Grids
soft-shake.ch - Data grids and Data Gridssoft-shake.ch
 
MongoDB Hadoop and Humongous Data
MongoDB Hadoop and Humongous DataMongoDB Hadoop and Humongous Data
MongoDB Hadoop and Humongous DataMongoDB
 
Torchbox University Accessibility
Torchbox University AccessibilityTorchbox University Accessibility
Torchbox University Accessibilitymynameismartin
 
JS Tooling in Rails 3.1
JS Tooling in Rails 3.1JS Tooling in Rails 3.1
JS Tooling in Rails 3.1Duda Dornelles
 
Interfaces Inteligentes para Android
Interfaces Inteligentes para AndroidInterfaces Inteligentes para Android
Interfaces Inteligentes para AndroidNelson Glauber Leal
 
Why not to use Rails? (actually it's when not to use Rails)
Why not to use Rails? (actually it's when not to use Rails)Why not to use Rails? (actually it's when not to use Rails)
Why not to use Rails? (actually it's when not to use Rails)Arik Fraimovich
 
A Tour Through the Groovy Ecosystem
A Tour Through the Groovy EcosystemA Tour Through the Groovy Ecosystem
A Tour Through the Groovy EcosystemLeonard Axelsson
 
Layer 7 denial of services attack mitigation
Layer 7 denial of services attack mitigationLayer 7 denial of services attack mitigation
Layer 7 denial of services attack mitigationAmmar WK
 
Oliver Weidlich presentation
Oliver Weidlich presentationOliver Weidlich presentation
Oliver Weidlich presentationMetro Screen
 
Windows 1-8 voor het bedrijfsleven. Wat moet je ermee
Windows 1-8 voor het bedrijfsleven. Wat moet je ermeeWindows 1-8 voor het bedrijfsleven. Wat moet je ermee
Windows 1-8 voor het bedrijfsleven. Wat moet je ermeeVincent Everts
 
Building Multilingual Sites with Drupal 7
Building Multilingual Sites with Drupal 7Building Multilingual Sites with Drupal 7
Building Multilingual Sites with Drupal 7Acquia
 
Design process
Design processDesign process
Design processTim Wright
 

Similar to Creating Responsive HTML5 Touch Interfaces (20)

Resilient Response In Complex Systems
Resilient Response In Complex SystemsResilient Response In Complex Systems
Resilient Response In Complex Systems
 
Mobile? WT... F?
Mobile? WT... F?Mobile? WT... F?
Mobile? WT... F?
 
iOS Prototyping with Xcode Storyboards
iOS Prototyping with Xcode StoryboardsiOS Prototyping with Xcode Storyboards
iOS Prototyping with Xcode Storyboards
 
iPad Apps for teachers
iPad Apps for teachersiPad Apps for teachers
iPad Apps for teachers
 
OmniOS Motivation and Design ~ LISA 2012
OmniOS Motivation and Design ~ LISA 2012OmniOS Motivation and Design ~ LISA 2012
OmniOS Motivation and Design ~ LISA 2012
 
Lightning talks percona live mysql_2012
Lightning talks percona live mysql_2012Lightning talks percona live mysql_2012
Lightning talks percona live mysql_2012
 
soft-shake.ch - Data grids and Data Grids
soft-shake.ch - Data grids and Data Gridssoft-shake.ch - Data grids and Data Grids
soft-shake.ch - Data grids and Data Grids
 
MongoDB Hadoop and Humongous Data
MongoDB Hadoop and Humongous DataMongoDB Hadoop and Humongous Data
MongoDB Hadoop and Humongous Data
 
Torchbox University Accessibility
Torchbox University AccessibilityTorchbox University Accessibility
Torchbox University Accessibility
 
JS Tooling in Rails 3.1
JS Tooling in Rails 3.1JS Tooling in Rails 3.1
JS Tooling in Rails 3.1
 
Interfaces Inteligentes para Android
Interfaces Inteligentes para AndroidInterfaces Inteligentes para Android
Interfaces Inteligentes para Android
 
Why not to use Rails? (actually it's when not to use Rails)
Why not to use Rails? (actually it's when not to use Rails)Why not to use Rails? (actually it's when not to use Rails)
Why not to use Rails? (actually it's when not to use Rails)
 
A Tour Through the Groovy Ecosystem
A Tour Through the Groovy EcosystemA Tour Through the Groovy Ecosystem
A Tour Through the Groovy Ecosystem
 
Layer 7 denial of services attack mitigation
Layer 7 denial of services attack mitigationLayer 7 denial of services attack mitigation
Layer 7 denial of services attack mitigation
 
Oliver Weidlich presentation
Oliver Weidlich presentationOliver Weidlich presentation
Oliver Weidlich presentation
 
Windows 1-8 voor het bedrijfsleven. Wat moet je ermee
Windows 1-8 voor het bedrijfsleven. Wat moet je ermeeWindows 1-8 voor het bedrijfsleven. Wat moet je ermee
Windows 1-8 voor het bedrijfsleven. Wat moet je ermee
 
Mobileweb
MobilewebMobileweb
Mobileweb
 
Building Multilingual Sites with Drupal 7
Building Multilingual Sites with Drupal 7Building Multilingual Sites with Drupal 7
Building Multilingual Sites with Drupal 7
 
Web possibilities
Web possibilitiesWeb possibilities
Web possibilities
 
Design process
Design processDesign process
Design process
 

Recently uploaded

A Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersA Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersNicole Novielli
 
Sample pptx for embedding into website for demo
Sample pptx for embedding into website for demoSample pptx for embedding into website for demo
Sample pptx for embedding into website for demoHarshalMandlekar2
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxLoriGlavin3
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxLoriGlavin3
 
A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI AgeCprime
 
Fact vs. Fiction: Autodetecting Hallucinations in LLMs
Fact vs. Fiction: Autodetecting Hallucinations in LLMsFact vs. Fiction: Autodetecting Hallucinations in LLMs
Fact vs. Fiction: Autodetecting Hallucinations in LLMsZilliz
 
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024BookNet Canada
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxLoriGlavin3
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxLoriGlavin3
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Manik S Magar
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 3652toLead Limited
 
DSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningDSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningLars Bell
 
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteTake control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteDianaGray10
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch TuesdayIvanti
 
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxPasskey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxLoriGlavin3
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxLoriGlavin3
 
Time Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsTime Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsNathaniel Shimoni
 
Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rick Flair
 
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxDigital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxLoriGlavin3
 

Recently uploaded (20)

A Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersA Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software Developers
 
Sample pptx for embedding into website for demo
Sample pptx for embedding into website for demoSample pptx for embedding into website for demo
Sample pptx for embedding into website for demo
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptx
 
A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI Age
 
Fact vs. Fiction: Autodetecting Hallucinations in LLMs
Fact vs. Fiction: Autodetecting Hallucinations in LLMsFact vs. Fiction: Autodetecting Hallucinations in LLMs
Fact vs. Fiction: Autodetecting Hallucinations in LLMs
 
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365
 
DSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningDSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine Tuning
 
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteTake control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test Suite
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch Tuesday
 
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxPasskey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
 
Time Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsTime Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directions
 
Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...
 
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxDigital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
 

Creating Responsive HTML5 Touch Interfaces

  • 1. Creating Responsive HTML5 Touch Interfaces Stephen Woods Sunday, March 11, 12
  • 2. Stephen Woods Front End Engineer Flickr Sunday, March 11, 12
  • 4. On the desktop we worry about browsers -moz-transform:rotate(-270deg); -moz-transform-origin: bottom left; -webkit-transform: rotate(-270deg); -webkit-transform-origin: bottom left; -o-transform: rotate(-270deg); -o-transform-origin: bottom left; filter:progid:DXImageTransform.Microsoft .BasicImage(rotation=1); Sunday, March 11, 12
  • 5. On mobile we worry about devices. Sunday, March 11, 12
  • 6. Wait! Did you say they all run webkit? Sunday, March 11, 12
  • 7. Wait! Did you say they all run webkit? Sunday, March 11, 12
  • 8. Wait! Did you say they all run webkit? Sunday, March 11, 12 X
  • 9. On mobile we worry about devices. Sunday, March 11, 12
  • 10. Screen Sizes Media Queries, Break points, liquid layouts http://www.alistapart.com/articles/responsive-web-design/ Sunday, March 11, 12
  • 12. iPhone 3GS 256mb RAM Geekbench: 271 Sunday, March 11, 12
  • 13. iPhone 3GS 256mb RAM Geekbench: 271 == Sunday, March 11, 12
  • 14. Modern mobile devices are crappy computers with decent video cards. Sunday, March 11, 12
  • 16. Perceived Performance Sunday, March 11, 12
  • 17. On the desktop it’s easy... Throw up a spinner. Sunday, March 11, 12
  • 18. Touch interfaces are tactile. Sunday, March 11, 12
  • 19. Touch interfaces are tactile. Feedback must be continuous. Sunday, March 11, 12
  • 20. When the interface stops moving during a gesture it feels like it died Sunday, March 11, 12
  • 22. Mobile has conventions too Sunday, March 11, 12
  • 23. Mobile has conventions too Sunday, March 11, 12
  • 24. TouchEvent • touchstart - fires once • touchmove - fires continuously • touchend - fires once Sunday, March 11, 12
  • 25. The touches Array • You only get one on Android • You get up to 11 on iOS • Each touch gives you position information, and sometimes scale Sunday, March 11, 12
  • 26. iOS Gesture Events • gesturestart • gesturechange • gestureend Sunday, March 11, 12
  • 27. iOS Developer Library http://bit.ly/iOS-guide Sunday, March 11, 12
  • 28. Making Gestures Work • Prioritize user feedback • Use hardware acceleration • Manage your memory Sunday, March 11, 12
  • 29. Prioritize User-feedback • Don’t do any loading during gestures • Treat the DOM as write-only (do your own math) • When at all possible, use css transitions Sunday, March 11, 12
  • 30. Write-Only DOM • DOM touches are really expensive • You know where everything is • Use matrix transforms to queue up positions Sunday, March 11, 12
  • 31. Swipe Basics distance = e.touches[0].pageX - startX; 'translate3d('+distance+'px,0px,0px)' Sunday, March 11, 12
  • 32. Snap back/snap forward • Keep track of last position, use transitions with easing to snap back • Pick a swipe distance threshold, use that to snap forward (ontouchend) • If the user is gesturing, the element must be moving Sunday, March 11, 12
  • 33. A Word about scrolling • Use native if at all possible: • -webkit-overflow-scrolling: touch; • If not, use a library to simulate momentum scroll (iScroll 4, Scrollability) Sunday, March 11, 12
  • 34. Avoid Event Abstraction Sunday, March 11, 12
  • 35. Image © Brian Lalor Used with permission Pinch to Zoom (there will be math) Sunday, March 11, 12
  • 36. Why you can’t use native Pinch to Zoom Sunday, March 11, 12
  • 37. First: Use Matrix Transforms Minimize DOM touches, make your transforms simpler in the long run Sunday, March 11, 12
  • 39. It’s Not That Hard! transform: Translate matrix(1, 0, 0, 1, 10, 10); Scale Sunday, March 11, 12
  • 40. With Hardware Acceleration... (matrix3d) [ [1,0,0,0], [0,1,0,0], [0,0,1,0], [tx,ty,tz,1] ] Sunday, March 11, 12
  • 41. Transforms keep complex state without DOM reads Sunday, March 11, 12
  • 42. What is happening? • Determine Center of the touch points • Determine the scale factor (touch.scale) • Scale the element by the scale factor, with the center of the touch points as the scale center Sunday, March 11, 12
  • 53. translateX = scalePointX * (newWidth - oldWidth) newWidth; Sunday, March 11, 12
  • 54. Pro Tips • Beware the virtual pixels • Moving the transform-origin won’t really work • Remember to snap back Sunday, March 11, 12
  • 55. Dealing with browsers Sunday, March 11, 12
  • 56. Dealing with browsers Sunday, March 11, 12
  • 57. Remember Progressive Enhancement? Sunday, March 11, 12
  • 58. Progressive Enhancement • 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 Sunday, March 11, 12
  • 59. The Tool Chain Sunday, March 11, 12
  • 60. The dumbest thing that works Webkit Browser with UA Spoofing Sunday, March 11, 12
  • 61. Weinre Remote webkit debugger. http://phonegap.github.com/weinre/ Sunday, March 11, 12
  • 62. Internet Sharing + Charles Proxy • Watch HTTP traffic • Add breakpoints in ajax requests • Serve web pages to your phone from your computer Sunday, March 11, 12
  • 63. Adobe Shadow • Wrapper for Wienre • Neat • Has some limitations Sunday, March 11, 12
  • 64. Pile of Devices Sunday, March 11, 12
  • 65. Pile of Devices • iPad 1 • Galaxy Tab • iPhone 3G • Motorola Xoom • iPhone 4 • Kindle Fire • Samsung • HTC Titan Galaxy S • HTC Desire Sunday, March 11, 12
  • 66. Device Simulators & Emulators: Basically Useless. Sunday, March 11, 12
  • 67. The Flickr Touch Light Box Sunday, March 11, 12
  • 68. Untitled By protohiro Sunday, March 11, 12
  • 69. Untitled By protohiro Sunday, March 11, 12
  • 70. Untitled By protohiro Sunday, March 11, 12
  • 71. Untitled By protohiro Sunday, March 11, 12
  • 72. Swiping Process • Event Listener on top level for touch events • Only visible nodes move via translate3d • Rebuild next/previous happens when movement stops. Sunday, March 11, 12
  • 73. Performance Tricks • Aggressive Pruning • Clean off css transforms/transitions • Write-only DOM. • Do as little as possible during swipes Sunday, March 11, 12
  • 74. Frustrating Limitations • Retina screen is huge, device memory is small • Hardware acceleration is a crash festival • Fighting automatic optimization http://bit.ly/apple-image-size-restrictions Sunday, March 11, 12
  • 75. Stephen Woods @ysaw http://www.slideshare.net/ysaw/creating- responsive-html5-touch-interfaces http://www.flickr.com/photos/wafer/5533140316/ http://www.flickr.com/photos/latca/2265637876/ http://www.flickr.com/photos/spine/1471217194/ http://www.flickr.com/photos/williamhook/3656233025/ http://www.flickr.com/photos/isriya/4656385586/ Image Credits (http://flic.kr/y/kQ5cLh) http://www.flickr.com/photos/yandle/3076451873/ http://www.flickr.com/photos/uberculture/6632437677/ http://www.flickr.com/photos/blalor/4934146981/ http://www.flickr.com/photos/torek/3280152297/ http://www.flickr.com/photos/nilsrinaldi/5157809941/ Sunday, March 11, 12