Gather up a group of people who make their living through web design, and they’ll probably all agree on at least two things: A) touchscreens aren’t going anywhere, and B) designing web stuff for touchscreens sort of sucks. Native apps have, in a sense, spoiled users; with things like drag-and-drop and basic touch gesture recognition almost laughably simple to implement in native apps, web app developers are left to hack in such features themselves or risk having their app seem dated from the get-go.
Today Yahoo! is looking to make things a bit less painful with the latest release of their open-source User Interface library, YUI.
Here’s the problem: most of the web was built before touchscreens became popular, so it was up to touchscreen browser developers to ensure compatibility. Now, that may seem trivial; a mouse click and a touch screen tap are pretty much the same thing, right? Right — but they’re also totally different, for one important reason: mice are point-and-click, touchscreens are point-to-click. When you click down with a mouse, you generally click down on a specific element intentionally, expecting that element to react in some way. When you tap down on a touchscreen, you may be interacting with an element — or you might be panning around the page, trying to zoom out, or any one of a dozen behaviors that all look pretty damn similar to an input device.
Here’s how the touch browser guys solved it: rather than firing off a mouse-click event when a user taps their finger down on the screen, they fire it based on when they lift their finger up. That oh-so-seemingly-slight difference makes all the difference in the world, giving the system time to parse whether the user is panning, zooming, or actually trying to tap on the thing they tapped. Alas, it also makes doing things like drag-and-drop in Javascript quite a bit more intense. It’s by all means doable; it just generally means reinventing the wheel with a big ol’ nasty hack.
Along with a laundry list of other features (see below), today’s release of YUI 3.2.0 brings support for touch events — that is, code that knows to fire the very instant something is tapped (rather than when the finger is lifted), making things that support drag-and-drop, flicking, and sliding a whole lot less of a chore to build.
YUI 3.2.0’s other new tricks:
- Capability-based Loading: Allows certain code to only be bundled/executed for certain browsers. Yes, IE6, everyone is glaring at you.
- Support for the latest beta build of YUI CSS Grids, one of a number of projects aimed at making the process of building layouts in CSS suck a whole lot less.
- Flash-based file uploader
YUI 3.2.0 has plenty of other tricks up its sleeve, but it’s not exactly bullet-point friendly stuff. They’re the sorts of things that you’d primarily be interested in knowing about if you were about to build something with it — and if that’s you, you probably already know where to find the details.