Profile

Cover photo
Matt Garrett
Lives in Beaverton, OR
74 followers|2,479 views
AboutPostsPhotosYouTubeReviews

Stream

Matt Garrett

Shared publicly  - 
1
Jeanne Garrett's profile photo
 
Logan thought this pic was great.
Add a comment...

Matt Garrett

Shared publicly  - 
1
Sean Wolfe's profile photo
 
Haha, yeah. That's iTunes and iphone for ya. 
Add a comment...

Matt Garrett

Shared publicly  - 
1
Add a comment...
In his circles
66 people
Have him in circles
74 people
Chris Kenney's profile photo
Desiree Irby's profile photo
Shawn Brown's profile photo
Brian Mock's profile photo
Jason Falone's profile photo
Kris Poore's profile photo

Matt Garrett

Shared publicly  - 
 
 
Is your site badly broken on touchscreen laptops?  Here’s how to easily check without needing a touchscreen.

Many websites assume that when a browser supports touch events, there’s no need to listen to mouse events.  Eg., I see this JavaScript all the time (eg. in the YUI library used on sites like zillow.com maps):

if (window.ontouchstart) {
  // on a touch device - add touch event handlers
} else {
  // not a touch device - add mouse event handlers
}

Devices with both a touchscreen and mouse have existed for a long time (eg. BlackBerry), but are becoming a much more common through touchscreen laptops.  Many touchscreen laptop users consider their device to be a laptop FIRST which happens to have a touchscreen which they may (or may not) use for some tasks.  These users get very grumpy when the fact that they ‘upgraded’ to a new laptop with a touchscreen means some of the sites they visit no longer work with a mouse.

In addition to assuming that touchscreen devices don’t have a mouse, this code makes another flawed assumption: that a browser supporting touch events implies a touch screen is present.  We can’t (nor would we want to) dynamically expose/hide the touch APIs during a single browser session, so we must decide whether to support touch when the session is started.  But it’s possible for a touch device to be attached at any time (eg. a desktop with touchscreen connected via a KVM).  Ideally Chrome would ALWAYS indicate support for touch events, but only send them (and set the pointer: coarse media query) when a touchscreen was currently attached.  We’ve done this a couple times in Chrome’s history, and each time lots of users have screamed that we broke important websites so (before such a build hit the stable channel) we’ve turned it back to supporting touch only when a touchscreen is actually attached on chrome startup.  But this doesn’t fix the problem with these websites, it just limits it to only affecting (the increasing set of) users who have a touchscreen computer.

So, how can you easily check if your site has such bugs?  In chrome you can switch the ‘Enable touch events’ flag to ‘Enabled’.  This will make the browser appear to support touch, without actually dispatching any touch events (this is what we’d like the default to be some day).  You can now check whether your sites still work properly with mouse.  In addition, if you want to see (a reasonable approximation of) how your site actually responds to touch events by emulating them with your mouse, you can enable the ‘Emulate touch events’ option in Chrome dev tools overrides.  Of course the best test is still to use a real touchscreen.  You don’t need to buy an expensive touchscreen laptop, just attach one of the commercially available touch screen monitors to your existing Windows 7+ PC.
1
Add a comment...

Matt Garrett

Shared publicly  - 
1
Add a comment...

Matt Garrett

Shared publicly  - 
1
Add a comment...
People
In his circles
66 people
Have him in circles
74 people
Chris Kenney's profile photo
Desiree Irby's profile photo
Shawn Brown's profile photo
Brian Mock's profile photo
Jason Falone's profile photo
Kris Poore's profile photo
Places
Map of the places this user has livedMap of the places this user has livedMap of the places this user has lived
Currently
Beaverton, OR
Previously
Pensacola, FL
Links
Work
Occupation
Web Designer
Employment
  • Web Designer and Developer, present
Basic Information
Gender
Male
1 review