Designing for the iPad

by Jin, 04-12-10 // 28 comments
my iPad

I decided a while back that I wasn’t going to get an iPad. Instead, I’d wait for the second generation iPad next year. This has been my approach when it comes to new Apple products. Yes, I’m scared of the early adopter regret. As the launch date neared, my mind changed a bit. My wife is an avid book reader, and I thought it’d be a perfect device for her. But more importantly, I think the iPad will have a significant impact on how us web designers approach interaction design for this medium and the coding behind it. I need one to tinker with.

I bought one on Saturday. I love it. I won’t get into the philosophical aspects that have been debated by many recently, instead I’ll focus the rest of this post on web design/development for iPad’s Mobile Safari. Creating web sites that look and behave consistently on different browsers and versions have been the bane of us web designers’ existence since Mosaic/Netscape days. While I’m happy with the experience surfing on the iPad, I can’t help but to think, “argh another browser.” Even though Mobile Safari on the iPad is identical to iPhone’s, but the term “optimized for mobile” means differently for each device. The iPhone optimized sites are often minified version of the desktop sites, for speed and better use of screen real estate. The iPad’s browser offers the desktop experience, so it should be treated as one. I divided the rest of this post to two sections: iPad ready and iPad optimized, depending on how far you want to customize your site for iPad.

iPad Ready

In my opinion, for a site to be “iPad ready” simply means that all the content and functionality are accessible via the iPad. Sites that were written according to the web standard are in a good shape already. A few things to consider:

iPad Optimized

Fortunately, Safari is one of the leading browsers to support HTML5 and CSS3. If you want to take advantage of all iPad’s mobile Safari has to offer, here is some useful info:

That’s All

Not all there is to know of course. But that’s all I know for now :) I hope you find the information in this post helpful. Please feel free to add to the list, I’ll credit you for it.

28 comments

also feel free to contact me on twitter or via email
Bobby Borszich 04-12-10

Ugh … I just now realized that while a developer can choose to ignore the iPhone for certain sites, ignoring the iPad is a really really bad idea ~ guess I will have to get one :)

Brad Colbow 04-12-10

I noticed that Youtube videos playing when a flash object is embedded too. Must be some kind of fallback for it. I hope Google shares that info with the world soon.

Jordan Walker 04-12-10

It is interesting to me that emergence of the iPad slim and sleek form factor. It will be interesting to see where it develops to.

kyle steed 04-12-10

Nice write up and new design. Thanks.

Dave Ward 04-12-10

Great stuff.

I wondered what you meant when you said your blog post turned into a research project. Now I see!

Auré 04-12-10

It’s really cool to share that kind of informations…
Sure it will help lot of webdesigners like me..
Now, I just “have to” buy one for myself, live testing is better than everything… (ok,it’s maybe a poor excuse…ah ah)

Christopher Burd 04-12-10

Good article. Regarding fixed positioning, wouldn’t it be OK to have fixed elements in an iPhone-sized region at the upper left of the screen. Or am I missing something?

Steven Clark 04-12-10

Jin, another important factor that people need to take into account is that iPad has limited resources, unlike a desktop. So its about being smarter with resources rather than making large file sizes.

The combination of smartphones and iPad have moved the ball back somewhat from the misconception many designers have started working under about everybody having broadband.

Great article, I really didn’t know much of this at all as I’ve been so busy with the MBA for nearly a year and a half I haven’t done any actual work. How fast things have moved… :)

Steven Clark 04-12-10

I got a little insight out of the DaringFireball review of the iPad, too.

Charlie Melbye 04-12-10

Embedded YouTube videos are working due to some trickery by Apple. Basically, they’re replacing the Flash stuff with a native video control UI. If you’ve ever used an iPhone, you’re probably familiar with a gray area with a “play” symbol in the middle in place of YouTube videos. It’s the same idea.

Jin 04-12-10

@Bobby, you should get one. Maybe you can pick up Objc :)

@Brad, I noticed it only happens with some Youtube embed videos, not all of them. This inconsistency is what confuses me. I’m guessing only the ones that have a html5 version on the site works.

@Jordan, just like the iPhone, I think it will be huge. But it will have a lot to do with the apps.

@Kyle, thanks. I’ve been enjoying your 365 project.

@Dave, yeah. As I was verifying what I knew, I kept on finding new stuff. It was like a rabbit hole. I was supposed to wrap up this post last week, but I wanted it to be more comprehensive.

@Auré, it’s a good excuse to have indeed!

@Christopher, it’s going to be fixed to that position onload, but it won’t stay there as you scroll. I’ve updated the fixed position section with a link to a workaround. But I think it’s way more trouble than its worth.

@Steven, as always we should optimized the site for loading time. Google just announced that loading speed will be part of Google pageranking now, I see designers will be more conscious about it. Gruber’s review is great. Just don’t call him a fanboy :)

@Charlie, iPhone loads embedded video in the Youtube app though. On iPad it plays on the web page as html5 output. Not all videos work though. I’m not sure why that is.

Kroc Camen 04-15-10

Apple has an agreement with YouTube to access the MP4 file behind the Flash file instead of playing the Flash. It’s hard coded into iPhone OS and has been there since day one (that’s why there’s a YouTube app)—It was done as a workaround for the proliferation of Flash; something that wasn’t as threatened at the iPhone 1.0 launch as it is now.

Design ideas 04-15-10

Nice article. Thanks

Hriday 04-19-10

I am an iPhone developer, and this article help me a lot.

David Lantner 04-20-10

I realize this post is about designing web sites for iPad, but iA posted an in-depth writeup of their experience designing apps for the iPad and they present some insights that apply to both:

http://informationarchitects.jp/designing-for-ipad-reality-check/

They close the post with “I cannot emphasize enough how radically different the frame set is, that iPad interfaces are embedded in. The iPad brings hands and eyes back together.”

Damir 04-20-10

Thanks for the great summary!

However, there’s one more thing that I’ve recently noticed: iPad doesn’t respect size of an iframe element and will simply dump the whole content of a contained page over its parent.

Kevin Elliott 05-11-10

Excellent site design, by the way!

[...] Designing for the iPad [...]

[...] a web site for the iPad such as presenting the key board when appropriate.  Jin Yang provides a comprehensive list of actions you can take to ensure your web site is iPad ready and iPad [...]

Alex 07-05-10

Thanks Jin, useful stuff to know!

So, if you are an early adopter of new Apple devices, have you gotten an iPhone 4 yet?

Jin 07-05-10

Alex, yes I got an iPhone4 on the launch day. But I totally got lucky because I didn’t pre-order one or had to wait in line. I went to Wal-Mart to buy my son a video game, and they had 5 iPhone4s. I got the last one, took only 30mins. :) Oh I love iPhone4…

Stephen 07-05-10

For the zip code input, I’m wondering if a type=”number” would make more sense? by default it launches the “number” keyboard vs the “alphabet” one.

If not, at least for fields expecting numbers (quantity, # of items, etc.) it works great.

Cheers,
Steve

[...] by Jin Yang’s blog post on Designing for the iPad, I decided to get to work. I’m not an iPad owner, but his blog post discusses most of the [...]

Mark Badaracco 08-25-10

@BRAD COLBOW it is because of the media output. Flash players that send media at the correct format will play.

[...] iPad Application Designhttp://mattgemmell.com/2010/03/05/ipad-application-design/Designing for the iPadhttp://www.8164.org/designing-for-the-ipad/ [...]

[...] http://www.8164.org/designing-for-the-ipad/ DESIGN BLOGART GALLERYCOMIC STRIPS iPad CSS Layout with landscape / portrait orientation modes [...]

Andy 01-06-12

Great summary, thank you.

I can’t seem to find any info anywhere on the max file size of a website that can be displayed on on iPad.

Know what I mean? If a page has many large images (in a rotator for example), some things won’t load because the cache is full?

Would anyone know any resources/answers for that?

Alex 03-02-13

Great insight on designing for the iPad. I too love the iPad and have found that many of our clients insist on iPad optimization.

Thank you!

Alex
Isadora Design – Professional Web Design Studio