javascript

Touch Events and Mobile Web App Usability

3 minute read Published

Why PPKs “Stick with click” may not be the best advice in all situations.

I recently heard a talk from Peter-Paul Koch of QuirksMode on the touch events in mobile at the orbitz.com office in Chicago. During his presentation PPK gave us a great sound bite to use when dealing with the *300ms delay* many touch devices use for capturing double-tap (zoom) events:

Stick with click.

Peter-Paul Koch

Under stick with click devs are discouraged from hijacking ontouchstart to make click events occur without noticeable delay. And though a good rule of thumb I view it as more of a best practice than a hard-and-fast rule.

Here’s why…

JSONView for Google Chrome

1 minute read Published

How to view formatted JSON in Google Chrome using the JSONView extension.

TIL about the JSONView Google Chrome extension. A handy tool for viewing formatted JSON data in the browser. There’s also an add-on for Firefox.

Switching from Firebug to Chrome Dev Tools

1 minute read Published

Video from Paul Irish on developer accordances in Chrome Dev tools.

Here’s the presentation given at Google I/O this year by Paul Irish and Pavel Feldman that got me to switch to Chrome Developer Tools promptly after watching. If you’re a front-end web developer and haven’t seen this yet take a look. It just may change the way you work.

HTML5 Cross Browser Polyfills

1 minute read Published

Recently ran across this impressive list of HTML5 cross-browser shim/polyfills on GitHub on the Modernizer Wiki. A perfect excuse to try out the Link format in the WordPress Twenty Eleven theme.

Analyzing User Agent Strings

3 minute read Published

The user agent string, a piece of data transmitted in the HTTP header during a web request, contains information valuable in determining browser type and often basic system information.

Example user agent string sent from a web browser during an HTTP request:

Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US) AppleWebKit/532.5 (KHTML, like Gecko) Chrome/4.0.249.89 Safari/532.5

The above example, for instance, provides information such as browser and browser version, user locale (language), OS, system architecture and the layout engine used. When authoring documents for the Web, information from the user agent string can be valuable in determining how best to mark-up documents.

Getting the information is easy.

Building a Better Lightbox

3 minute read Published

Though modal dialogs are not a new concept in UI design, the number of homegrown Lightbox clones (source) appearing on the Web since major JavaScript libraries like Prototype and jQuery hit the scene has been staggering. Unfortunately, many of the clones developed leave some key usability considerations unaddressed, and struggle with common problems in accessibility.

Some key usability features that should be considered during creation of a Web-based modal dialog include (1) manage focus and allow tab navigation (2) disable elements outside the modal dialog (3) give users an out and (4) provide graceful error recovery.