Chapter 7

Designing for iPad

WHAT YOU WILL LEARN IN THIS CHAPTER:

  • Knowing special design considerations for iPad
  • Understanding limitations of Safari on iPad
  • Creating a Split View app

The iPad is mobile, but it is not a phone device. That statement is a “no-brainer” obviously, but when designing for the iPad it is easy to fall into the trap of thinking of it as a “giant iPhone.” On the contrary, the iPad is almost a perfect blend between the mobile and touch qualities of an iPhone and the larger visual experience and interaction capabilities of a desktop computer. Therefore, as you design web apps for the iPad, you need to give it the individual attention it deserves rather than just treating it as a bigger iPhone viewport.

In this chapter, I highlight some of the special considerations you should think about when designing an app for iPad. I then focus on creating a split view UI (user interface) design that emulates the look of a native iPad app.

SPECIAL IPAD CONSIDERATIONS

When you create a web app for iPad, you need to perform many of the same things you do when creating an iPhone app. Chapters 5 and 6 discuss the process of creating apps in full detail, but the following are a few of the key ways you can transform a normal web page into a web app that targets iPad:

  • Adding the viewport meta tag to the document head:
    <meta name="viewport" content="width=device-width; initial-scale=1.0;
       maximum-scale=1.0; user-scalable=no;"/>
  • Adding an iPad-specific media query:
    <link media="only ...

Get Beginning iOS Application Development with HTML and JavaScript® now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.