Friday, 10 September 2010
Banner
iPad Launch Increases Need to Update Sites for Mobile
Tuesday, 13 April 2010 11:14    Print E-mail

By Stephan Spencer, VP of SEO Strategies at Covario

apple ipadThe launch of the iPad this week may be the inflection point driving primary adoption of mobile devices for personal computing in the US. The iPad, like most mobile devices, includes a browser with a different set of specifications from the standard desktop environment. As such, advertisers need to address the issue of whether their current desktop oriented web environment will render on an iPad, or on mobile devices in general.

The purpose of this Point of View is to let Covario customers know what important differences the iPad offers in terms of browsing experience and how these differences could thwart web visitors from driving brand interaction or conversion.

ACTIONABLE INSIGHT #1. "Mobile-Friendly" Does Not Equal "iPad-Friendly"

Unfortunately, a website redesigned to render on mobile devices like the Blackberry, Nexus One, or even the iPhone, is not suitable for iPad user consumption. Mobile sites are designed for a teeny-tiny screen and translate to a deficient user experience on the iPad. Consequently, mobile sites should never be served up automatically to the iPad user. This can happen inadvertently when the web server's "user-agent detection" is overly broad in its matching of mobile user agents (the user-agent strings for the iPhone and iPad are very similar; the iPad's even includes the word "mobile"). This is the case for Walmart.com and Officedepot.com.

Ensure user agent detection knows to serve mobile pages to traditional mobile devices versus the iPad.


ACTIONABLE INSIGHT #2. Layout and Formatting Is More Complex

The iPad, like the iPhone, renders sites in both landscape and portrait mode. Site design needs to encompass this, as the dimensions of the screen are obviously very different in each mode. Furthermore, when in landscape mode the primary call-to-action should still be visible without scrolling.

Even if the page renders properly on the Safari browser for the Mac or Windows, it will not necessarily render the same on the iPad. Case in point: Homedepot.com, with overlapping text where the breadcrumb navigation displays. This anomaly does not occur on Safari for the Mac.

Bear in mind that the browser window cannot be resized on the iPad. Fixed positioning should not be used if at all possible.

Flexibility in screen rendering for portrait and landscape will become a necessity in website design. This should be added to web preparation check lists for all page development projects.

ACTIONABLE INSIGHT #3: Retooling of Navigation Will be Required

The multi-touch display provides an elegant and intuitive interface for users, but it also presents some unique challenges to web designers who are used to design for the desktop. The biggest one is that iPad users cannot hover their cursor, potentially rendering any mouse-over navigation unusable. On the iPad, a consumer holding their finger down on an ad invokes the copy-and-paste function rather than creating a hover state.

An example can be found on Officedepot.com. Once a consumer manages to get off of the mobile site, they find that the sub-navigation items underneath the main navigation tabs are practically inaccessible. Pressing on a tab (e.g. Furniture), the sub-navigation is displayed, but at the same time the user is taken to the Furniture category page. So there is not enough time to select a sub-item (such as Modular Collections) before the user is whisked away to the top-level category page. The aforementioned subsection (Modular Collections) is not accessible elsewhere on the page, like in the footer.

Another example can be found on Homedepot.com, pressing on a top nav button causes a user to see its sub-items display — without loading the top-level category page. Clicking on the top nav item a second time takes the user to the top-level category page. Unfortunately, users then have to click twice on the sub-item before the site will load the requested page. (e.g. to get to the Light Bulbs page from the nav requires pressing on Electrical once then pressing on Light Bulbs twice).

The CDW.com top and left nav both functioned beautifully on the iPad. Press on a category and the subcategories are visible and accessible with one click. Users are not whisked away to a top-level category page before being made into a sub-nav selection.

Navigation behaves very differently on the iPad from desktop or mobile browser. Knowledge of these differences is key in ensuring good user experience.


ACTIONABLE INSIGHT #4: Lack of Flash Support is Debilitating

iPad browser does not support flash. The given rationale from Apple is that "Flash is prone to crash and is too resource-intensive". We disagree. Flash has been in market for years and is very scalable and stable. Note that, in Chrome, Flash doesn't crash the browser or even the tab/window. Surely Apple can follow Google's lead and build this same capability into Safari? This seems like more a competitive issue — as it is not a practical, technical issue.

What are the implications of not having Flash? There will be a content-less hole in many home pages across the Internet which will diminish the user experience of iPad users.

To avoid this, advertisers must involve a mix of user-agent detection and HTML5. Detect the iPad Safari browser then selectively serve up a version that eliminates the dead space and compensates for the loss in content/functionality. If the Flash was navigation or a rotating carousel, this can be accomplished with HTML and CSS. If it was a video (the majority of video on the web is Flash-based), then develop an alternative HTML5-based player or utilize a solution like BrightCove's (examples: eBags, onlineshoes.tv).

Lack of Flash support by iPad is not for technical reasons — in our opinion. However, to address, advertisers need to deploy a different HMTL session based on iPad user agent detection.


ACTIONABLE INSIGHT #5: Expect Glitches so Stay Flexible

It's still early days for the iPad. This is version 1.0, with many more revs to come. That said, advertisers will have to compensate for Apple's bugs/glitches and develop workarounds. And nothing replaces good old-fashioned QA. Without rigorous testing, it is difficult to know that a site does not work on the iPad. Broken websites can happen to anyone. Even to Apple. Parts of Apple's Safari Dev Center are unnavigable when accessed from an iPad, including their "< a href="http://developer.apple.com/safari/library/technotes/tn2010/tn2262.html" target="_blank">Preparing Your Web Content for iPad" technical note in their Safari Reference Library, which doesn't scroll.

Join the conversation with Covario's team of experts as they share their perspectives, recommendations and insights on a variety of digital marketing topics including search engine optimization, paid search advertising, metrics and analytics, and industry happenings. Share your insights and stories at actionableinsights.covario.com.