Got a Windows tablet?

Update March 11, 2013: I was able to see a Surface for myself at Best Buy a couple days ago and discovered an issue. The album treeview was appearing at the top of the page with the rest of the content below it. This morning I updated the code again, but I still need someone to confirm that it’s fixed. Thanks!

Cut to the chase: I’m looking for someone with a Microsoft tablet (like a Surface) to look at the beta site and tell me whether you see a 3-pane layout like the first screenshot or a single pane like the second. Reply in the comments or send me an e-mail (roger *at* techinfosystems *dot* com). Read on for the full story.

Last week I found myself at a Microsoft store in Minneapolis with the family, so I took the opportunity to see how the beta site looked on a Surface. (Side note: I really should call it a CTP site, since the beta hasn’t yet been released. It’s very close, though.) The styling looked right, the MP4 videos played using the native HTML5 video tag, and the action was smooth and responsive. All great. But there was one problem. I couldn’t use my finger to grab the splitter bars to resize the left and right panes.

(This screenshot is from my desktop PC, not the Surface, but it looked the same.)

This is actually a problem with every touchscreen device I’ve tried, from Android to iOS to Windows Phone. The splitter is a jQuery plug-in, and it was designed to handle mouse clicks for resizing, not touch events. I’ve looked at the source and tried to make it touch-capable, but haven’t been successful. So, in an effort to stay on track with the release, I made the decision a while back to use javascript to detect a touchscreen and *not* use the splitter on those devices.

Instead of a three-pane view, touchscreen devices show the center pane full screen with the contents of the right pane appearing below the center content. For example, here is how an album looks on a touchscreen that is about 500 pixels wide:

That turns out to be pretty much the ideal behavior you would want on small touchscreens, since they don’t have sufficient width to justify panes anyway. But larger 10-inch tablets could benefit from the pane layout so the ultimate goal is still to make the splitter bar touch-capable so I can re-enable it on large tablets. But this will probably be after the v3 release.

Getting back to the Surface, I noticed that it was displaying the 3-pane layout just like a desktop browser. Something was wrong with my touchscreen detection javascript. After a little googling with bing, I learned it is very difficult to reliably detect a touch device. I had assumed that using Modernizr.touch would be fine, but IE10 returns false, even when run on a tablet.

After digging around, I found a different technique that supposedly works on MS tablets:

var isTouchScreen = !!('ontouchstart' in window) || !!navigator.msMaxTouchPoints;

I updated the beta site to use this code and confirmed it works as expected on the devices I have laying around, but I don’t have a MS tablet to test it on. So I ask you, Dear Reader, if you have a Microsoft tablet like a Surface, can you go to the beta site and tell me whether you see a 3-pane layout like the first screenshot or a single pane like the second. Thanks!