Ready-ing Your Website for the iPad and Touch Revolution

by Evan Samek

Here at Pixel Dreamer, we pride ourselves on always delivering top notch, cutting edge solutions that will set your business apart from the competition for years to come.  With the successful launch of the iPad, the massive popularity of the iPhone and the general momentum of “mobile web + touch device,” we have come up with some general rules of thumb to apply when developing for these niché systems.

1. The End of Rollovers

While rollover menus have helped save a websites layout from clutter and also gives the ability to factor in slight JavaScript animations to rollover states, the truth is that these rollovers were designed for mouse behavior and mouse behavior only. In order to compensate for touch-based devices that know nothing of rollovers, we must do away with drop-down navigation.  The main culprit here is the “:hover” state.  There is no event listener that translates a hold-down gesture on a touch device to the mouse being held over a particular area.

2. No Flash

In a great press release by Steve Jobs this morning, there are many downfalls of Flash.

1. Lack of open standards – Adobe owns Flash, dictates its path and decides how it is to be used.
2. Drains battery – Decoding video on the software level, which is exactly what Flash forces rather than at the hardware level, drains battery life up to 2.4x faster.  It also has proven to slow down the device by using up more system resources to decode the Flash file.
3. Not semantic/bad for search engines – While Google has improved their Flash indexing, back in 2008, there has been little to no word on whether they continued to improve their Flash-reading algorithm within the last two years.  The basic fact is that if there is no need to put an extra layer between your content and the search engines working to make your content more accessible, then why add it?
4. Large file size – Flash websites are notorious for taking a long time to load.  This time translates directly to lost visitors (they would rather be reading content than watching a bar move slowly across the screen).

3. Embrace HTML5

Now is the time, more than ever to embrace HTML5.  Dragging and dropping of files, inline scrollable panes, the canvas element, HTML5 video and audio all are web standard-based solutions for your website/application, and will work on the iPad, iPhone and iPod.  Any other device that implements the WebKit rendering engine also should have support for HTML5.

This is just to get the conversation started on best practices for the mobile web revolution, as well as the touch revolution.  Could you think of other “rules-of-thumb”  to keep in mind when developing/designing new websites? Hit up the comments!

Written by

Evan Samek

Evan Samek is a seasoned web professional with five years of web development and design experience. He bridges the developer – designer gap, allowing for the delivery of an entire web solution package for businesses. From beautiful aesthetics to functional yet engaging user experiences, his custom made applications and solutions are developed to help a business excel across the competitive landscape.