The iPad is going to be huge. I mean really HUGE! And you better make sure you are prepared for its runaway popularity by optimizing your website, especially if you are planning to publish, and properly market, your book to be sold at the iBookstore and read on the iPad (more on that later).

What?! You don't believe me that the iPad is going to be huge? Well, maybe you should take a look at these numbers . . .

jQuery(document).ready(function($) { window.setTimeout('loadFBShareMe_4816()',5000); });

Share

The iPad is going to be huge. I mean really HUGE! And you better make sure you are prepared for its runaway popularity by optimizing your website, especially if you are planning to publish, and properly market, your book to be sold at the iBookstore and read on the iPad (more on that later).

What?! You don't believe me that the iPad is going to be huge? Well, maybe you should take a look at these numbers . . .

As of April, 2010, Apple had sold over 275 million iPods and 50 million iPhones. In the previous 12 months they've had 200 million visitors to their 284 retail stores. Apple’s App Store was then offering over 150,000 different Apps that collectively had been downloaded over 3 billion (yes, billion) times. And most impressively, over 10 billion songs had been downloaded from the iTunes Store as of the beginning of 2010.

Wow! Let those numbers sink in a bit. Reflect on them. Get some perspective by, for instance, considering that by the time you read this that more than two songs will have been downloaded from the iTunes Store for every person on the planet.

At the moment I am writing this sentence, the iPad has only been on sale for five days, and only in the United States. Estimates on sales for the iPad over the first weekend varied between six and seven hundred thousand. Projections are that anywhere between eight and twenty million will be sold worldwide by the end of 2011.

Sales have been so brisk in the iPad's North American launch, even outstripping Apple's rosiest estimates, that Apple had to postpone the iPad's international debut due to inability to keep up with demand. All this from a company possessed of great and recent experience planning for huge opening day demand.

Let me go on record right now and say that I predict it will be closer to forty million iPad's sold by the end of 2011, if not more. Either way, it’s gonna be a whole lot of people owning, using and loving the iPad. And why am I so optimistic about iPad sales? In large part, because of the already installed iPhone user base.

iPhone OS User Base

The iPhone OS platform user base is significant. Steve Jobs announced that there were 75 Million iPhones and iPad Touch devices running iPhone OS at the iPad launch in January. At the iPhone OS 4.0 launch Jobs announced that there were 85 million iPhone OS devices. Apple originally announced the iPad at the end of January and released specifications, documentation, and a software development kit (SDK) for those paid members of the iPhone developer program under a non-disclosure agreement. Apple released the SDK to everyone registered in the Apple Developer Program.

So What's This Have To Do With You?

Now you may be wondering, “What does all this have to do with websites? With marketing? With my career as an author, novelist, speaker, expert, or entrepreneur?” Well it has a lot to do with it.

Because with tens of millions of people devouring content, surfing the web, watching videos, and reading books on their iPad, you definitely want your website to look its best, as well as take advantage of all the whiz bang features found, on the iPad.

Everyone's Doing It! So Why Not You?

The big boys have already made sure their sites are iPad friendly. Don't worry, it's not because they have huge budgets and teams of programmers (they do, but you don't need them), it's because they know it's important and it didn't take them much work to get their sites ready to go for the iPad and Safari.

However, some sites, like the New York Times, have created entire apps for the iPad, but you don't need to do that either. You just have to make sure your site is ready for the Safari browser and running on the iPad.

Tune Up Your Website for the iPad

The Apple iPad does an excellent job of displaying most web sites. But a few obstacles must be avoided. And with a few customizations to your site will have it rockin' the iPad like Elvis did Vegas.

Below I summarize the critical issues and the differences between iPad, iPhone and desktop browsers. Cool this: most improvements made for the iPad will also benefit folks viewing your site on an iPhone or iPod Touch.

Website Layout and Design

iPad has a resolution of 1024 x 768 pixels in landscape orientation, and (obviously) reversed for the portrait orientation. Any website with a width larger than the current viewport will be scaled down and zoomable. If your site is designed to be 980 pixels wide or less it will then show up full scale the way you intended it. Currently, the most common website width is 960 pixels. Apple's own site is 980 pixels wide (as are all of our sites). If it's good enough for Apple, it's probably good enough for the rest of us.

Differences in Mobile Safari on the iPad

iPad’s Mobile Safari is a full-fledged browser comparable to desktop browsers, supporting modern web practices of (X)HTML/CSS/JS and even HTML5 and CSS3.

The primary differences you should account for first are:

• No support for plugins such as Adobe’s Flash or Sun’s Java for ads, navigation, and multimedia
• The fixed viewable screen size (viewport) may affect your layout
• The touch screen is the primary means of interaction and offers different modes of user control

Unlike most desktop browsers, the iPad does not support plugins such as Flash or Java. Any navigation elements, embedded audio and video, or banner ads written in Flash or Java will not appear. Apple is unlikely to support either language in the future, so you need to provide alternative or fallback navigation elements and multimedia embedding options. Apple’s official recommendation is to avoid plugins entirely and use HTML5 elements across your site. Navigation elements may be implemented with standard AJAX techniques.

Mobile Safari on the iPad uses the open source WebKit rendering engine as do iPhone, and iPod Touch devices. Testing your site with the WebKit rendering engine is now essential. Desktop versions of the Safari browser, Google’s Chrome browser, all iPad, iPhone, and iPod Touch devices, Android devices, Palm webOS devices, Symbian Series 60 (S60) devices all use WebKit. RIM has stated that future BlackBerry devices will use WebKit. This means that every major smartphone browser aside from Windows Mobile will be WebKit-based in 2010.

If your website's revenue depends on banner advertising delivered via Flash or Java, you will need to make changes. If your ad server supports mobile devices, you can turn this on for iPad users.

An alternative is to treat mobile users the same as email campaign advertisements. At the iPhone OS 4.0 press event, Apple announced its own mobile ad platform and ad network called iAd, implemented entirely in HTML5. The mobiThinking Guide to Mobile Advertising Networks in the references surveys most of the available mobile ad network options.

More About Apple's iPhone OS 4

On April 8, Apple unveiled plans for iPhone OS 4 which will include over 100 new user features for iPhone and iPod touch owners. And for developers, a new software development kit (SDK) offers over 1500 new APIs to create apps that are even more powerful. iPhone OS 4 will ships Summer, 2010, for iPhone and iPod touch, and
for iPad in the fall. A developer beta is available now.

Website Audio and Video on the iPad

The standards and implementations of HTML5 audio and video tags are still evolving and making your content available in all browsers is still a bit complicated, at least it is for me. Supporting HTML5 H.264 encoded video with a fallback to Flash for browsers that do not support it is likely your most straightforward solution. In the Resources and References section at the end of this article I have linked to some articles on H.264 and Flash that explain the problem in more detail.

The iPad is NOT an iPhone (Duh!)

The iPad has a 9.7-inch touch-sensitive screen, a fast processor, and fast network connectivity. It provides a web browser experience that is much closer to the desktop experience than a smartphone. This means you should avoid sending iPad users to versions of your site optimized for mobile phones if you are sniffing for iPhone or mobile user agents. If you look at the user-agent strings for the iPad and the iPhone, you will notice that the iPad user-agent lists “like Mac OS X” rather than “iPhone OS.” Both browsers include the “Mobile” in the user-agent string. Most browsers have mechanisms to change the user agent string. Some of these in the References and Resources section.

The iPad viewport is set to 980 pixels wide, in portrait mode the iPad is 768 pixels wide, but the content will scale to 980 pixels. Content wider than the viewport that uses fixed CSS positioning may end up off screen and your site's visitors will not see it since they can not resize the window in Mobile Safari.

The "Apple iPhone Human Interface Guidelines: Introduction” is a great document for starting to think about multi-touch user interaction as the metaphors and modes of physical interaction differ. For example, a flick action rather than a mouse controls scrolling and a pinching action controls how a page scales up and down.

There are other issues, some of which Apple may resolve in a future update. In John Gruber’s review of the iPad, he points out that often only a single page is held in memory at one time, subsequent pages often take all the memory available for web pages. This means that if you could loose form data on a page that you have not submitted if you open another page. The memory problem could also appear on AJAX heavy pages.

Testing Your Site on the iPad

Testing your site directly on an iPad is the only way to guarantee that your experience will match your visitors with iPads. There are numerous reports by developers of minor differences between the iPad and the iPad in a simulator.

However, next to owning an iPad, the iPhone simulator comes closest to rendering your site as an iPad would. The iPhone simulator that ships with the iPhone SDK 3.2 has an iPad mode under the device option. Anyone can register as an Apple Developer for free and then download the SDK. The iPhone SDK includes the XCode development environment and is nearly a 2.5 gig download, it also only works on Mac OS X 10.6.2 (Snow Leopard) or higher.

The paid iPhone Developer Program is $99 a year. The subscription allows developers to submit native iPhone and iPad applications to Apple’s App Store. Apple also allows paid developers early access to upcoming versions of its SDK such as the iPhone OS 4.0 SDK.

Step One: Test Your Site on iPad Peek

iPad Peek by Pavol Rusnak is a web service that allows you to see what your website will look like on an iPad.

iPad Peek is free and the source code is available under an open source license. Here are three things to consider to make your experience with iPad Peek closer to that of an actual iPad.

• Use a browser with a WebKit-based rendering engine, preferably Safari, since it is the most similar to the iPad browser.
• Chrome will works too.
• Disable all plugins in your browser. Otherwise your browser will still load the plugins even though an iPad would not.
• Change your user agent string in your browser to match the iPad one listed earlier.

Summary

The iPad is not only here to stay, but it will have a dramatic influence on the public's habits for consuming online content. More importantly, the iPad will influence how web standards and applications evolve from this point forward. Getting your website and your content on friendly terms with the iPad sooner rather than later will save you time and headache down the road while putting your website and your business in the strongest position possible for the widest audience. And that's just good business.

Resources and References

From Apple’s official developer documentation:

• Apple Technical Note TN2262: Preparing Your Web Content for iPad
• Apple Safari Reference Library
• iPhone Human Interface Guidelines: Introduction
• Safari HTML5 Audio and Video Guide: Introduction WebKit developer site

Other resources:

• mobiThinking Guide to Mobile Advertising Networks (2010) is a comprehensive look at mobile advertising networks.
• How iPad Affects the Way we Design Websites from Inspired Magazine says to use fluid layouts, adaptive CSS, and forget about your hover effects.
• How to fit your website for the Apple iPad from x7 Labs is an excellent description of the issues related to the viewport width.
• iPad Orientation CSS from Cloud Four describes how you can use different stylesheets depending on orientation
• Getting Your WordPress Themes Ready for Apple iPad from WPLover has a nice description of the issues to pay attention to if you develop WordPress themes.

Tools

• Safari User Guide for Web Developers: Prototyping Your Website
• Firefox User Agent Switcher extension by Chris Pederick
• Chrome User-Agent Switcher extension
• UserAgentString.com is an easy way to check your current user-agent string.
• iPad Peek by Pavol Rusnak for simulator-free testing
• Video for Everybody! from Camen Design allows you to embed HTML5 video and will fallback to QuickTime or Flash. It does not use JavaScript or browser-sniffing so it will work almost everywhere including RSS feeds.
• SublimeVideo by Jilion is a gorgeous HTML5 video player with a Flash fallback. The product wasn't shipping at press time, but a demo was available online. It's probably rockin' by the time you're reading this.

Originally published at iBook iQ

About the Author

Craig Allan Teich is a writer, blogger, designer, founding partner of several companies including LaunchBox Pro, unapologetic serial entrepreneur, business growth and marketing consultant to a small but lovely group of businesses, mediocre hockey player, decent cyclist, husband-in-training and overwhelmed father of two amazing daughters.

Follow @CraigTeich on Twitter

49,686 Followers

Comment & Community Policy

We love comments. We value community. We encourage different opinions. We thrive on contribution. We appreciate praise. And constructive criticism. We value anyone who notices our fly is down and let's us know about it. However, haters, spammers, and knuckleheads need to find another place to hang out.

Only put a URL in the comment text if you are confident the community will appreciate it. (We reserve the right to delete URLs we feel are inapproriate.)

Please use your PERSONAL name or initials and not your business name as the latter comes off spammy. Have fun and thanks for adding to the conversation!

In this article, learn how making one simple change boosted a company's sales 533% overnight, and then how a second change jumped sales by an astonishing 5,499%. And nearly any business can use these strategies.

Read on as we examine a company that made two simple changes to their pricing that lead to dramatic (5,549%) sales increases, we will take a deeper look at the implications of those decisions, and finally we will discuss the pro's and con's of applying similar strategies to your business; considerations such as the long-term value of a customer, calculating the potential value of up-sells and cross-sells, when it makes sense to actually loose money on an initial sale, and more.