6 Ways to Optimize Your Site for the iPad
The iPad is no Apple Newton. It truly is a revolutionary device. The whimsical blog of “Fake Steve Jobs” calls the iPad a “life-changing, mind-altering product”. Although that may be an overstatement, the iPad is certainly important — to the computing industry, to computer users, and to online marketers.
The launch of the iPad marks a significant step forward for mobile computing, and for computing in general: one’s productivity can finally be as high as when they are in front of their laptop or desktop computer. The iPad user can efficiently and effectively do their shopping, banking, email, YouTube video watching, and general web surfing. It is also surprisingly easy to use the iPad for more complex, input-intensive tasks, like writing term papers, building slide decks, and manipulating spreadsheets — particularly when also equipped with a Bluetooth keyboard. In fact, the iPad just may be versatile and powerful enough for the road warrior to travel with sans laptop. Conversely, smart phones and other handheld mobile devices, really only serve as a complement — rather than a practical replacement — for the user’s laptop or desktop machine.
Technically speaking, the iPad’s operating system is the iPhoneOS, but practically the OS is the Internet. Just upload your documents into “the cloud” (e.g. MobileMe, Dropbox, Xythos) and you are off and running. For the multitude of Google Docs users this is an unnecessary step, as the documents already live in the Cloud, not on any local hard drive. The iPad will undoubtedly speed adoption of this trend towards Internet-based file storage.
Overall, it looks like this launch is going to be a success and the iPad, like the iPod, iPhone, and the iMac before it, will gain significant distribution among consumers globally. And, since it includes a browser with a different set of specifications from either the standard mobile devices, the question for advertisers becomes a practical one – “will my web pages come up on this browser?”
With the iPad’s Safari browser, the Web generally looks and works like one would expect on any traditional laptop or desktop computer. However, there are important differences in the browsing experience and these differences could thwart your web visitors, stopping them in their tracks. As a site owner, you must compensate for these differences, or risk losing the conversion, and more importantly, the customer.
“Mobile-Friendly” Does Not Equal “iPad-Friendly”
If you created a mobile-friendly version of your website, you are probably seeing the fruits of your labor in customer adoption already. That mobile site, however, 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, your mobile site should never be served up automatically to the iPad user. This can happen inadvertently when your 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 (screenshots photo-2 & photo-21). Thankfully this is easy to correct.Avoiding the mobile-friendly version is one thing, serving up a site that offers an iPad-optimized user experience is quite another. It can involve overhauling page layout, recoding CSS, redesigning navigation, and adding alternative non-Flash elements.
Layout and Formatting
Your website design should lay out correctly whether the user is holding the iPad in landscape mode or portrait 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. (screenshots photo-26 & screen shot 1)
Bear in mind that the browser window cannot be resized on the iPad. This means you cannot force elements to stay in a specific fixed position on the screen like you can for desktop browser users. Fixed positioning should not be used, if at all possible.
Retool Your Navigation
The multi-touch display provides an elegant and intuitive interface for users, but it also presents some unique challenges to web designers who are use to designing for the desktop. The biggest one is that iPad users cannot hover their cursor, potentially rendering any mouse-over navigation unusable. On the iPad, holding your finger down invokes the copy-and-paste function rather than creating a hover state.On Officedepot.com, once you manage to get off of the mobile site, you will find that the sub-navigation items underneath the main navigation tabs are practically inaccessible. When you press on a tab (e.g. Furniture), the sub-navigation is displayed, but at the same time you are taken to the Furniture category page. So there is not enough time to select a sub-item (such as Modular Collections) before you are whisked away to the top-level category page (screenshot photo-18). The aforementioned sub-section (Modular Collections) is not accessible elsewhere on the page, like in the footer. It is not in the sub-navigation directly under Furniture on the mobile site either, curiously.
On Homedepot.com, pressing on a top navigation button caused its sub-items to display — without loading the top-level category page. Clicking on the top navigation item a second time takes you to the top-level category page. Unfortunately, you have to click twice on the sub-item before it will load the requested page. (e.g. to get to the Light Bulbs page from the navigation requires pressing on Electrical once then pressing on Light Bulbs twice (see screenshot photo-24). That was not at all intuitive.
The CDW.com top navigation and MacConnection.com’s left navigation both functioned beautifully on the iPad. Press on a category, and the sub-categories are visible and accessible with one click (screenshots photo-9 & photo-8). You are not whisked away to a top-level category page before you made your sub-navigation selection. On MacConnection.com you can go to the top-level category page by clicking that item again; on CDW.com you cannot, presumably, because there is no corresponding top-level category page for Products, Services, etc.
Lack of Flash Support
This is one of the main complaints with the iPad. No, this was not an oversight. The lack of Flash support was intentional. The company line at Apple is that Flash is prone to crash and is too resource-intensive. Just ask the helpful employees at the local Apple Store and that is what they will tell you. I do not buy it. If Flash really were that unstable, wouldn’t we notice it on our desktop machines? Speaking for myself, this is not something I experience regularly. Google’s Chrome browser, which I now use as my default, even calls it out when Flash crashes and displays an unhappy icon in the place of the Flash animation. Note that in Chrome, Flash does not crash the browser or even the tab/window. Surely Apple can follow Google’s lead and build this same capability into Safari? I feel this is more a political/competitive issue than anything else.What are the implications of not having Flash? For one, you will find a content-less hole in many home pages across the Internet. Some sites will display a blank space where the Flash animation would have been (photo-20 and photo-5 screenshots). If on your website this represents a large amount of the screen real estate, that void could cost you a conversion. Other sites fill that void with a message urging the user to download and install the Flash player from Adobe’s website (photo-23 screenshot), thus sending the user on a wild goose chase that will ultimately end fruitless. Still other sites discretely display a warning that the lack of Flash makes their site inaccessible or somehow unusable. (photo-10 screenshot)
The workaround involves a mix of user-agent detection and HTML5. First, 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, screenshots photo-1 & photo-4). If your Live Chat function relies on Flash, then you have a very big and immediate problem. MacConnection’s customer service chat (screenshots photo-7, photo-6) is fully functional on the iPad. Is yours?
Expect Glitches
It’s still early days for the iPad. This is version 1, with many more revisions to come. There are still many kinks to be ironed out, including in the iPad Safari browser rendering engine. So do not be too surprised if Safari for the iPad mangles your website with browser rendering bugs and inconsistencies. For example, notice in the figure below (insert photo-11 screenshot) that the “New Account?” checkbox partially overlaps the input field, the combination of the two resembling a pull-down list. User confusion could result: if the user doesn’t recognize the checkbox, then they are liable to mistakenly expect the “New Account?” label to be a clickable link and find themselves unable to proceed to checkout.Bottom line: expect to compensate for Apple’s bugs and glitches, and develop workarounds. The process starts with good old-fashioned QA. Without rigorous testing, you may never know that your site does not work on the iPad. Please do not rely on your users to tell you. Broken websites can happen to anyone. Even to Apple, ironically. Parts of Apple’s Safari Dev Center are un-navigable when accessed from an iPad, including their “Preparing Your Web Content for iPad” technical note in their Safari Reference Library, which does not scroll (screenshot photo-0).
No comments:
Post a Comment