Tips & Tricks for Tablet Optimization

http://bit.ly/17Ara4I

Brenda Jin

@cyberneticlove

Market Research

How many of you...

...own a tablet?

...parents or children?

...grandparents
or
grandchildren?

⇑ Tablet Sales ⇑

⇓ PC Sales ⇓

↫ Fuzzy Future ↬

Web Optimization

Which Tablets?

Technical Tricks

Debug

  • Android: Chrome Browser Plugin for Android Devices
  • iOS: Safari 6 on Mac OS X Remote Debugging Instructions
  • Example

    Fixed position issues in Android and iOS

    Get in Touch

    Example

    Inspect Touch Events

    
    //Copy and paste these into your JavaScript console
    
    window.addEventListener('touchstart',function(event){
    	console.log('touchstart: ', event)
    });
    
    document.getElementById('toucharea').addEventListener('touchstart',toggle);
    
    window.addEventListener('touchmove', function(event){
    	console.log('touchmove: ', event);
    });
    
    window.addEventListener('touchend',function(event){
    	console.log('touchend: ', event);
    });
    					

    Choosing Libraries, Shims, Polyfills, Frameworks...

  • Conflict
  • Attitude
  • Recentness
  • Reason
  • Ease
  • Style
  • Size
  • Measure

    Example

    Measure image load on placekittens

    Let Technology Provide Feedback for Design

    Resources

  • Slides: http://bit.ly/17Ara4I
  • Links: http://urli.st/vps
  • Android: Chrome Browser Plugin for Android Devices
  • iOS: Safari 6 on Mac OS X Remote Debugging Instructions
  • THE END

    Brenda Jin @cyberneticlove