Why and How Your Website Must Be Optimized for Apple’s iPad, Android’s Tablet, and is Mobile Responsive

Craig Allan TeichBooks and Writing, Website DesignLeave a Comment

Play Nicely with iPad

On April 16, 2010, I wrote a guest blog post on a website devoted to iBooks entitled: Does Your Website Play Nicely with iPad?I am reprinting it here, just below, so that we see where I got it right or wrong, and so I can provide some updated figures as well as the current landscape of iPads, iBooks, and how it all affects the business of reading, writing, and publishing. What follows is the original post, with a few formatting tweaks, along with inserts (see orange arrows, boxes, and text) of updated information and commentary. Enjoy.

The iPad is Going to be Huge

As reported in Wikipedia, the iPad was announced on January 27, 2010, by Steve Jobs at an Apple press conference at the Yerba Buena Center for the Arts in San Francisco.

Jobs later said that Apple began developing the iPad before the iPhone, but temporarily shelved the effort upon realizing that its ideas would work just as well in a mobile phone.

Apple began taking pre-orders for the iPad from U.S. customers on March 12, 2010. The Wi-Fi version of the iPad went on sale in the United States on April 3, 2010.

And you better make sure you are prepared for its runaway popularity by optimizing your website, especially if you’re planning to publish and properly market your book to be sold at the iBookstore and to be read on the iPad. And don’t forget about Amazon’s Kindle, because while most will talk about how the iPad will cut into, maybe even kill, the sales of Kindles, it’s my belief that greater popularity of notepad devices will be the rising tide that lifts all boats, especially as more and more publishers rush to have their catalogs available in digital formats like ePub, etc.

Wait? What is that you say? You don’t believe me that the iPad is going to be huge? Some people think I’m totally wrong about this. They think the iPad is going to flop like Apple’s ill-fated Newton. Just yesterday, I was discussing with a colleague, someone who is very tech-savvy, my thoughts about what a game-changer I believe the iPad will be, and his response was that he thought it would be a short-lived fad and disappear within a year “…just like the Newton.” Well, maybe. But let’s take a look at some numbers from Apple and their other recent mobile / digital content successes…

A Few Numbers to Consider . . .

250 million iPods Sold
50 million iPhones Sold
150,000 Individual Apps
3 billion App Downloads
200 million Annual Visitors at . . .
284 Retail Stores
10 billion iTunes Downloaded

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. And consider that by the time you read this, more than two songs will have been downloaded from the iTunes Store for every person on the planet.

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. 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. Projections are that anywhere between eight and twenty million will be sold worldwide by the end of 2011.

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.

UPDATE: So how did my bold prediction turn out? As of January, 2012, over 50 million iPads had been sold! Even though my prediction was twice that of even the most optimistic analysts predictions, I was still 10 million short. And how about now? As of September 2012, the impact of iPad is truly phenomenal. Here’s the numbers:

80 million iPads Sold
400 million iPods Sold
200 million iPhones Sold
400 Apple Stores Worldwide
with over 300 million Annual Visitors
400 million Accounts on App Store
650,000 Apps available
225,000 Apps just for iPad
30 billion Apps downloaded
$5 billion paid to developers

iPhone OS User Base

And why am I so optimistic about iPad sales? In large part, because of the already installed iPhone 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.

All the Cool Kids Are Doing It

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Websites Mobile Responsive iPad - Major League Baseball, Netflix, NPR Websites Mobile Responsive iPad - Vimeo, Time Magazine, ESPN Websites Mobile Responsive iPad - CNN, Reuters, New York Times Websites Mobile Responsive iPad - CNET TV, TV Guide, CW Network Websites Mobile Responsive iPad - CNN Money, MSNBC, Fox News Websites Mobile Responsive iPad - CBS, Spin, National Geographic Websites Mobile Responsive iPad - People Magazine, TED, Nike

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 Tablets

Credit Where Credit Is Due
The more technical bits in the section below where shamelessly lifted from an excellent article, Preparing Your Site for the iPad by Ben Gross, a smart dude who writes regularly over at Messaging News.

Website Layout and Design

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.

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.

  • 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

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, 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

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 viewportis 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 Website 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 X-Code 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 5.0 SDK.

Step 1: Test Your Website on iPad Peak

iPad Peek by Pavol Rusnak is a web service that allows you to see what your website will look like on an iPad. Frankly, iPad Peek is one of those “coolest things ever” and should really be the first thing you do for getting your site ready for the iPad. Turns out that 1000 pixels wide is fine on the iPad (just barely), but I still recommend 980 pixels for max width, as stated above. Thanks, Pavol.

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 works nicely 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:

Other Resources:

Tools


Wishing you health, happiness, peace, and love,

Craig Allan Teich


Leave a Reply