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