15
Apr
2010
Have one already? Waiting for the 3G…2nd Generation version? Just don’t care?
Whatever your position, there’s no doubt the biggest buzzer in the gadget world is Apple’s iPad. Has it revolutionized the computer world? No, not yet. Will it? I lean toward a big old yes.
When new tech appears, it’s our job here are 3fold to think about what it means for our clients. When a business or organization’s most effective marketing tool is their online presence, making sure a website or portal works and looks good in whatever environment users are finding it is essential.
Some things to think about to ensure you’re iPad ready (not everything, but a place to start):
- Basically, make sure all the content and functionality are accessible via the iPad. Sites that were written according to the web standard are, more than likely, in good shape already.
- Flash: Sites using Flash will have to have a HTML alternative (which they should anyways). Apple and Adobe – the owner of Flash – do not play well together. In fact, Apple’s Steve Jobs recently offered his opinion on Adobe.”They are lazy. They have all this potential to do interesting things but they just refuse to do it. They don’t do anything with the approaches that Apple is taking, like Carbon. Apple does not support Flash because it is so buggy,” he said. (Source: Wired)
- Video and HTML5: Youtube and Vimeo video support HTML5, which works on the iPad. Another site, Video for Everyone , has a great code snippet that plays hosted or embedded videos as HTML5, with Flash/Quicktime as fallback. html5media also has a Javascript file that enables
<video>and<audio>for major browsers. - Mouse Events: Make sure your site’s functionality does not rely purely on mouse events (mousemove, mouseover, mouseout, and CSS :hover) . Mobile Safari can trigger onMouseover, but it involves quite a bit of timing and effort on the user. You need to press down on the element that has the onMouseOver event and release fairly fast. To make it easier for the user, either remove unnecessary mouse events or have a visible link that reveals the hidden elements.
- Scrolling Content: The default one-finger swipe on iPhone/iPad triggers window scrolling. Two-finger swipe has the same effect as the mouse scroll wheel. Not a lot of users may know this, therefore I think it’s best not to have content in scrolling in fixed sized block elements.
- Fixed Positioning: Don’t use it. Safari on the iPad and iPhone do not have resizable windows. To move around a webpage, the user changes the zoom level and position of the viewport as they double tap or pinch to zoom in or out, or by touching and dragging to pan the page. As a user changes the zoom level and position of the viewport, they are doing so within a viewable content area of fixed size, the window. This means that webpage elements that have their position “fixed” to the viewport can end up outside the viewable content area, off screen.
- Multi-Touch Event Handling: You can bind a touch event to mimic any other event. For example, make one finger swipe to mimic a two finger swipe on an object. There are cases where you may want to override the defaults, for which these JQuery plugins helpful: jQuery Swipe, Multiswipe and JQTouch.

