Tips & Tricks for Tablet Optimization – Market Research – Technical Tricks
Tips & Tricks for Tablet Optimization
Brenda Jin
@cyberneticlove
Not comprehensive Represents my own opinions Ecommerce/product lens Some opinions, but otherwise general strategiesMarket Research
How many of you...
...own a tablet?
...parents or children?
...grandparents or grandchildren?
⇑ Tablet Sales ⇑
⇓ PC Sales ⇓
↫ Fuzzy Future ↬
International Data Corporation (IDC) reports that tablet sales will surpass PC sales in Q4 of 2013 Tapering off though Decline of the PC is almost certain, the next dominant devices is up for debate - between Phablets, wearables, and tablets What's important is preparing yourself for what comes next - APIs, interface design, forward-thinking technologyWeb Optimization
limited screen real estate, prioritize and simplify your content
UI Frameworks may only give you one breakpoint - consider whether this works for your tablet audience - look at the framework site on your tablet - like it?
larger screen, more flexibility
mobile already, add a breakpoint
no mobile, think about two breakpoints
Which Tablets?
Analytics is your friend
Who is your audience?
Technical Tricks
Debug
Android and iOS Serve it up and test itExample
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 Conflict - How will this interact with the libraries I already use, and the functionality I already have? Attitude - How satisfied am I with the authors' responses to issues and questions? Recentness - How recently has this been updated? How active is the author(s)? Reason - What do I need this library for? Is it holistic or is it for one specific purpose? Ease - How easy is it for me and future colleagues to use? Style - Do the patterns match the rest of the style of our site? Can I understand how how it works by reading it? Size - How big is the library?Measure
Example
Measure image load on placekittens